Hi,
I wish to edit “line-height” in the following style in Stylesheet (style css):
}
header#masthead hgroup .support-text{
line-height:1.2em;
position:absolute;
right:0;
top:50%;
margin-top:-0.6em;
color:#4b4b4b;
font-style:italic;
max-width:50%;
}
I understand that I must use the “Custom CSS” facility.
I know this will sound dumb but I want to understand how this works.
If I could edit the style directly in the stylesheet all I would do is edit the ‘1.2em’.
In Custom CSS I think what I have to do is code a new style with all the same coding as the original with the exception of the 1.2em.
1. Is this correct?
2. Does the new style replace the old?
3. If (2) is incorrect, how does the application know which style description to select when there are two of them?
I want to learn/understand more about how the application works. Sorry I know this is basis.
Thank You David
Hi David
Yes you are right :) You need to use the Custom CSS area to ensure the changes you make does not get lost during theme updates. (I hope that answers question #1)
If you want to change only the line-height there all you need to do is navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
header#masthead hgroup .support-text{ line-height:1.6em !important;Ensure you use the
there to ensure it does not get overridden. (I hope that answers question #2 and #3)
If not let me know where it is not clear, I clarify.
Cheers
Hi Addo,
I need to start over. I should have stated what I wanted to do, and left the rest to you.
I am using the Vantage Premium Theme.
I want to change the size, maybe the font and its characteristics (bold for example) of the text that appears on the right hand side of the Logo at the top of each page.
I now know that I must use Appearance>Custom CSS function and not Appearance>Editor.
I now understand the meaning of ‘cascade’ in CSS and its implications.
I now understand the use of ‘!important’ but maybe not the correct format for using it.
Question: In Appearance>Editor I have found the following code:
#masthead .hgroup .support-text {
line-height: 1.2em;
position: absolute;
right: 0;
top: 50%;
margin-top: -0.6em;
color: #4b4b4b;
font-style: italic;
max-width: 50%;
}
Is this the applicable code?
I have entered the following code via Appearance>Custom CSS:
#masthead .hgroup .support-text {
line-height: 1.6em !important;
}
However:
1. nothing appears to have changed; and
2. when I access Appearance>Editor I cannot find the code I just input.
So:
1. Should the code entered using Appearance>Custom CSS show up in Appearance>Editor?;
2. The Custom CSS now has four versions of the code I entered. Is there anyway to delete the obsolete versions, and is this important?; and
3. What should I do?
Thank you
David
Hi David
To answer your questions in order.
1. The code you enter using the Custom CSS editor is placed into the document as a separate style entry so does not appear in the stylesheet you view at Appearance->Editor. These custom entries are there to override the entries in the themes default styling. If you wish to view them in effect you can right click on your home page and select the option to ‘view source’. In the ‘Head’ section you will find a style entry marked as ‘vantage-custom-css’. This is where you will find your entries.
2. You can safely delete anything you no longer need in the custom CSS. You really should have only the one entry for each element you want to make changes to.
3. Andrew’s example was correct based on your original question regarding the line height. Unfortunately, changing the line height does not affect the size of the font being displayed, only the spacing between the lines. In order to change the size you would need to use
header#masthead .hgroup .support-text { font-size: 18px !important; }If you needed to change more than just the font size you would then just add the extra entries inside the same pair of curly brackets. For example, on my site I wanted to change the positioning, size, styling and colour so used this
header#masthead .hgroup .support-text { left: 255px; max-width: 75%; font-size: 18px; top: 60%; color: white; font-style: bold; }I hope this helps clear thing up for you.
Let us know how you get on
Magus
Thank you Magus,
1. Thanks
2. How do I delete them?
3. Yes that coding works. I will work on the variations.
Thank You David
Hi David
The Custom CSS Editor is just the same as a text editor, you can just select the text you want to remove and press del on your keyboard. The Custom CSS editor also supports cut, copy and paste functions via keyboard shortcuts or right mouse click.
Hope this helps
Magus
@Magus great input :)
@David am glad you are making progress in developing your site.
You can always open a new thread whenever you require support and we will jump right to it
Cheers
Thank you both.
David
Your welcome :)