Need help? Check out our Support site, then


Changing attributes using CSS stylesheet

  1. I am using the following in the customization --> CSS stylesheet to change the header and tagline style and size (and eventually the color)
    I am able to save but it does not change like I want.
    I am also using Firebug and would like to know how to reference specific attributes of my blog appearance (pages, menus, etc) in order to change to my liking.

    h1 {
    font-style: italic;
    font-size: 4.8px;
    }

    h2 {
    font-style: italic;
    font-size: 2.6px;
    }

    Why won't the above code work?
    I must be missing something in the syntax.

    Regards,
    Jack.

    The blog I need help with is jstrandburg.wordpress.com.

  2. In this case, the CSS you're using is not specific enough because you have setup some rules on the Appearance → Custom Design → Fonts page and the rules from that page are stronger than the CSS you tried to add. This is how the Custom Fonts are designed to work. You can still override them with custom CSS, you just need to make it a bit more specific. You also need to use the exact right selectors or the update

    Let's look at one of your examples:

    h1 {
    font-style: italic;
    font-size: 4.8px;
    }

    In that example, you used "h1" but the site title in the Misty Lake theme is actually a link, so "h1 a" would be better. But in addition to that, the theme stylesheet uses ".site-title a" which is a little more specific than the "h1 a" rule would be (because classes are more specific than elements). And, you have to go one step further and add "!important" to override the rules which were setup when you made changes to the Custom Fonts page. So, here's an adjusted example:

    .site-title a {
    	font-size: 22px !important;
    	font-style: italic !important;
    }

    There's one more problem though. The Custom Fonts are limited to exactly which ones you load, so the "font-style" property above won't actually affect a custom font and you should select "italic" under the "Style" menu on the Appearance → Custom Design → Fonts page to change that particular feature. Other rules, like "font-size" don't depend on the font face itself and you can adjust those in the CSS normally as long as your CSS is specific enough.

    Next, let's look at a Firebug example for the same rule. Right-click on the site title and select "Inspect Element with Firebug" and you should see something like this: http://cl.ly/N8b6

    I've highlighted the part of the CSS on the right which applies to the site title.

    .wf-active .site-title, .wf-active .site-title a {
        font-family: ff-meta-serif-web-pro-1,ff-meta-serif-web-pro-2,"Droid Serif",Georgia,"Times New Roman",serif;
        font-size: 4.59rem;
        font-style: italic;
        font-variant: normal;
        font-weight: 500;
    }

    As you can see, it uses this selector ".wf-active .site-title, .wf-active .site-title a". The ".wf-active" part is what's making the rule very specific, and it's why I added "!important" in my first example. Normally, you should avoid using "!important" whenever possible, but in some cases it's necessary and I think this is one of those cases.

    CSS specificity can be hard to figure out at first. If you want to read more about how it works, check out this help page:
    http://www.htmldog.com/guides/cssadvanced/specificity/

    For a lot more detail about specificity, try reading this:
    http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    This is kind of a lot of stuff! You happened to run into a pretty complex set of circumstances. So in comparison, the rest of the CSS you try to work with is hopefully much easier! :)

  3. Thanks for the advice - I'll give it a try.

Topic Closed

This topic has been closed to new replies.

About this Topic