WordPress.org

Ready to get started?Download WordPress

Forums

Can't change h1 color or font size in child theme (4 posts)

  1. midlife mama
    Member
    Posted 1 year ago #

    Been working on a child theme for Twenty Twelve and I'm having trouble changing the font size and color of h1 headings. I'm working on the site locally so I can't give you a link to the problem but here's the code I have in my style.css:

    h1 {
    	font-family: Georgia;
    	font-size: 24px;
    	font-color: #2B62AA;
    }

    The font changes no problem but the size stays the same and so does the color. Do I need to add code elsewhere in addition to css?
    Thanks.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Are you using a tool like Firebug to look at the existing CSS code for the element(s) you are trying to change? Your CSS selectors are probably not specific enough.

  3. midlife mama
    Member
    Posted 1 year ago #

    I'm using Notepad++.
    I downloaded Firebug awhile ago but I'm not really sure how to use it. For a newbie like me, it's difficult. I can take direction, though!
    When I inspect the code in Firebug, however, here's what it says on my home page:
    <h1 class="entry-title">Welcome</h1>

    And on the right column, it says this:

    .entry-header .entry-title {
        font-size: 1.57143rem;
    }
    .entry-header .entry-title {
        font-size: 1.42857rem;
        font-weight: normal;
        line-height: 1.2;
    }
    h1 {
        font-family: Georgia;
        font-size: 24px;
    }
    h1, h2, h3, h4, h5, h6 {
        clear: both;
    }

    Does that help?

  4. solidgoldextra
    Member
    Posted 1 year ago #

    If you're new to firebug, it can be daunting, unless you take extra time to figure out how everything works. As for the h1 font size and color on twentytwelve child theme, what I tried (and it worked) is this:

    header.entry-header > h1.entry-title {
    	font-family: Georgia;
    	font-size: 24px;
    	color: #2B62AA;
    }

    Maybe the css is too fine-grained, but it works as a quick fix, at least. You can also do similar for other headings, e.g. h2, etc.

    An interesting note for twentytwelve child themes is how the font sizes are recommended to be used. You can read the parent theme style.css for more detail, but it is suggested there to set a rem fallback, in which case the css above can also be written as:

    header.entry-header > h1.entry-title {
    	font-family: Georgia;
    	font-size: 24px;
            font-size: 1.714285714rem; //note the second rem fallback for font-size
    	color: #2B62AA;
    }

    Hope this helps.

Topic Closed

This topic has been closed to new replies.

About this Topic