I remember my theme had an H1 for my Posts titles in the "Next Posts" section at the end of a post, then out of nowhere it changed to H4, how can I change it to the way it was before?
I've tried but failed everytime.
You can take a look at the "You Might Like This Too" section: http://thenoirportrait.com/2014/08/23/review-chanel-perfection-lumiere-velvet/
Thank you!
Okay let me explain you why having a h4 there is good and how you can change that.
You need to understand something first : In HTML, there's some title level to help the website but also software for disabled people to understand the order of the site. Who is more important etc. You must not think your title in a style way, you must think about it in a level way. So your H4 is fine.
Now if you want to change the size of your H4, you'll have to change their style in your Css. I guess you're using a wordpress, so you'll have to change it in the style.css file.
Go to your editor in wordpress at the bottom of your css file add this line.
h4{
font-family: Prata;
font-weight: 400;
font-size: 1.375rem;
line-height: 1.875rem;
text-align: center;
color: #000;
}
now all your h4 will match your H3, the other alternative is to actually go to the template that contains your post titles and change the post title from h4 to h3
Related
I am trying to edit the font of some text within a testimonial preset carousel within Squarespace (on the home page of the site linked below).
enter image description here
I have successfully changed the text below it using the following code:
enter image description here
section[data-section-id="63c390bd1403971a5efb5e19"]
.user-items-list-item-container p
{
font-family: "Steelfish";
font-size: 31px;
}
However I cannot seem to find a way to change the font of this main text.
I am open to all suggestions and am getting quite desperate as this job has carried on a lot longer than anticipated.
Any help would be greatly appreciated.
https://orb-seahorse-ha47.squarespace.com/
password123
/* attempt at testimonials top text */
section[data-section-id="63c390bd1403971a5efb5e19"]
.user-items-list-carouselslides user-items-list-carouselslides--initialized p
{
font-family: "Steelfish";
font-size: 31px;
}
Tried this unsuccessfully
Also tried h, h1, h2, h3
Unless we do a lot of digging, it looks like the font-size is going to need the dreaded !important. See if this will work for you:
section[data-section-id="63c390bd1403971a5efb5e19"] h2.list-item-content__title {
font-family: "Steelfish";
font-size: 51px!important;
}
I'm implementing Froala Editor in an Angular project. I want to be able to change the default Paragraph Format drop down and to be able to apply my own styles to the options in there.
I know there is the paragraphFormat option where I can change the list in the drop down, but it doesn't mention where I would define the CSS for those options. Anyone have any ideas where/how I can do that? I don't want to use the separate paragraphSyltes option as that introduces a separate button and doesn't have the paragraphFormatSelection dropdown feature that default paragraph format comes with.
Edit: Thanks for the help, I've created a jsfiddle for the problem. Not sure exactly what the CSS should be, this is what I have but doesn't work:
.froala-paragraph-drop-down {
.H1 {
text-align: center;
color: red;
font-size: 14px;
}
}
Can you please help me with making Heading 1, say 14px red in both the paragraph dropdown as well as when applied to the text in the editor?
In my project we have one global CSS file 'global-css' which is used in all the webpages of website.
This file contents,
font-size: 100%;
font: inherit;
properties for body,div,h1,h2 etc.
Link from where above code is copied http://www.cssreset.com/ - Eric Mayur's.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
........, audio, video {
margin: 0;
padding: 0;
border: 0;
***font-size: 100%;
font: inherit;***
vertical-align: baseline;
}
I don't have rights to edit this(global-css) CSS file.
But this 2 lines are creating UI issues on my webpages. If i remove this 2 lines from 'global-css' then my webpages works totally fine(without any UI issues). I Somehow want to override this 2 lines into my own CSS file (which will be imported in my webpages only). I have created 1 CSS file(override-css) where i can override any class from 'global-css'.
Kindly suggest good way to override the above properties in my 'override-css'.
Thanks for the help :)
To clarify: I want to set these properties to DEFAULT/NULL so that all elements will take the font from their respective classes.
I tried to override above code in global-css but unfortunatly we dont have default value for font property.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
........, audio, video {
margin: 0;
padding: 0;
border: 0;
***font-size: ________ !important;
font: ________ !important;***
vertical-align: baseline;
}
I want some property value to reset this 2 properties in ss-override.
There is one more 'main.css' CSS file which contains all the classes for elements. But these two lines from 'global-css' are not allowing to apply this styles.
The sequence used for importing CSS is : main -> global-css -> override-css.
Have you tried using the !important attribute.
Otherwise, generally the last css style takes precedence. So if you load the two classes with your attributes then that should override the global.css styles.
It's not working because you are importing the files in the wrong order - you said above: "Sequence used for importing CSS is : main -> global-css -> override-css".
If you change that order to: global-css -> main you should find everything works right, because what's in main will now override the earlier settings in global-css. And you won't need an override file at all. This will work because the CSS in global all has the lowest possible specificity (just one element eg h2 or div, etc etc) in the rules, so anything following will automatically overwrite those rules. Using !important is not the right way to go at all.
If there is some reason you cannot access the code to change the order of import, you can still link the main CSS file a second time in your HTML (or link a copy of it), after the global file has been imported or linked, so ensuring it's settings will override what's gone before.
Using !importent should solve the problem. But again that is subject to the CSS order and browser.
Case: you have used !importent and there is font size property below your statement with importent then yours will not work in some browsers like chrome because of its CSS rendering logic.
Best way is to remove all other font CSS applicable to element and add same in your class
You can try with
font-style: italic;
This will work.
I'm using a WordPress hosted site and my main concern is that the margins aren't as I'd like them to be. I'm not sure how I can express what I mean here, but I'll give it a shot.
This is the homepage with blog posts:
Blog title,
Blog body is this,
continues here... I just
need to increase the right
margin.
Again, it isn't that much to the right as it's displayed here -- it's even placed, I'd just like to extend the right margin, rather. which part of the code with that be in? Should I update it with the code?
Update
Is it this code?
}
.entry-content {
overflow: hidden;
zoom:1;
}
/* Sidebar
or this?
}
h3, #sidebar, .postdata, .entry-content {
font-family:'helvetica neue', helvetica, arial, sans-serif;
}
It's kind of hard to know without more proper technical info (html and css code).
I'm guessing here you should look for entry-content class in the style.css file of your theme directory and add the margin you desire.
If you can't find the class there, just add it at the end of the css file:
.entry-content{
margin-right:100px;
}
Can any one help me in printing a webgrid in landscape
You have to do this in CSS, defining a stylesheet appropriate for printing. You can't control the printer preferences from a browser.
In other words, is up to the user to select the paper orientation he wants to use. You can only "help it" a bit using appropriate styles for printing. Read here.
One common approach to this is to create a custom print CSS stylesheet. It can be pretty simple.
This short article will guide you through a simple example.
Once you grasp the concepts involved, you can add specific CSS for your web page.
Here are the basic steps:
1) Reset all the padding and margins:
body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px;
letter-spacing:0.2px; font: 13px Arial, Helvetica,"Lucida Grande", serif;
color: #000;}
2) Remove elements you don't want to print, such as the page header, logo, menus, etc. In your case, you may want to hide everything but the grid.
#logo, #catnavi, .topnavi, .more-link, .navigation, #sidebartop, #related, #social,
#sponsors, .tabs, #allpost, .toolbar, .splitbox, #commentform, #commentabs .idTabs,
.postmeta-content .comments, #respond h3, .tag, .footerlinks {display:none;}
3) Optionally, display the URL in the print document (hiding links will hide the URL)
4) Optionally, insert page breaks
#comments {page-break-before: always;}
5) Add a <link> tag at the top of the page to include the .css file.