Can't change h1 color or font size in child theme

  • 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.

Viewing 3 replies - 1 through 3 (of 3 total)

  • 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.

    Thread Starter midlife mama

    (@midlife-mama)

    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?

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Can't change h1 color or font size in child theme’ is closed to new replies.