Changing the H2 and H3 headers.

  • Resolved OB

    (@reburton3941)


    10 years, 10 months ago

    I have been trying unsuccessfully to change the H2 and H3 fonts and font-sizes. I have tried:

    h2 {
  font-family: Times New Roman, Garamond, serif;
  font-size: 2em;
  padding:0;
  margin:0; }
}

h3 {
  font-family: Times New Roman, Garamond, serif;
  clear: none;
  font-size: 1.2em;
  padding:0;
  margin:0; }
}

    According to the WP codex this is supposed to work but it just doesn’t. I also tried several other snippets of code from one source or another but nothing has worked.

    I specifically want the headers changed in the content of the posts and pages, but I could care less if they are changed elsewhere.

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

  • Can you post a link to your website?

    Thread Starter OB

    (@reburton3941)

    Yes, I’d be glad to.

    I can’t see it when I look at my post so I’ll post the plain text so you can cut-and-paste it if you can’t see it either:
    https://www.bestmenswatchesreviews.com/
    Thanks for looking at it.

    What’s happening on your site is that Bootstrap’s font rules are loaded after your child theme’s CSS, so Bootstrap “wins”. A quick fix would be to use !important in your child theme like this: 

    h3 {
  font-family: Times New Roman, Garamond, serif !important;
  clear: none;
  font-size: 1.2em !important;
  padding:0;
  margin:0; }
}

    Note that !important comes before the ending semicolon.

    Thread Starter OB

    (@reburton3941)

    Thanks for your help!
    I really appreciate it. I thought I had tried !important before, but I went ahead and tried it again. No dice, it still doesn’t work. Have you any other tricks up your sleeve?

    I noticed you’re using the W3 Total Cache plugin, which means you’ll need to either force a refresh (check your browser documentation for instructions) or temporarily disable your caching plugin to see your changes.

    Thread Starter OB

    (@reburton3941)

    Thanks, I didn’t realize that about the W3 Total Cache plug-in, though I should have. Well, I disabled W3 and tried again, but no cigar. It still didn’t change the H2 or H3 fonts. Then I tried a variation based on what I saw in the bootstrap.css fie, for instance:

    h2 .h2 {
  font-family: Times New Roman, Garamond, serif !important;
  font-size: 2em !important;
  font-weight: bold !important;
  padding:0;
  margin:0; }
}

h3 .h3 {
  font-family: Times New Roman, Garamond, serif !important;
  clear: none;
  font-size: 1.2em !important;
  font-weight: bold !important;
  padding:0;
  margin:0; }
}

    But that didn’t work either. Then I did the unforgivable and made a new modified bootstrap.css replacing the only reference to h2 having a font change in it. I did back up the file and comment the revised version. But even that did not change the H2 & H3!

    Thread Starter OB

    (@reburton3941)

    Thanks, I didn’t realize that about the W3 Total Cache plug-in, though I should have. Well, I disabled W3 and tried again, but no cigar. It still didn’t change the H2 or H3 fonts. Then I tried a variation based on what I saw in the bootstrap.css fie:

    h2 .h2 {
  font-family: Times New Roman, Garamond, serif !important;
  font-size: 2em !important;
  font-weight: bold !important;
  padding:0;
  margin:0; }
}

h3 .h3 {
  font-family: Times New Roman, Garamond, serif !important;
  clear: none;
  font-size: 1.2em !important;
  font-weight: bold !important;
  padding:0;
  margin:0; }
}

    But that didn’t work either. Then I did the unforgivable and made a new modified bootstrap.css replacing the only reference to h2 having a font change in it. I did back up the file and comment the revised version. But even that did not change the H2 & H3!

    Whoops, I didn’t see this before. You have extra brackets in your CSS. If you take out the extra brackets after margin:0; and put commas between h2 and .h2 and also between h3 and .h3, you should be set.

    h2, .h2 {
  font-family: Times New Roman, Garamond, serif !important;
  font-size: 2em !important;
  font-weight: bold !important;
  padding:0;
  margin:0;
}

h3, .h3 {
  font-family: Times New Roman, Garamond, serif !important;
  clear: none;
  font-size: 1.2em !important;
  font-weight: bold !important;
  padding:0;
  margin:0;
}
    Thread Starter OB

    (@reburton3941)

    Oh, the futility of being a bonehead! Thank you!

    That did it! Thanks to you and several of the other members and moderators I actually think I’m beginning to see light at the end of the tunnel. In spite of my lack of doing a careful review of my code I am actually beginning to get a handle on using CSS, at leastr for the simple stuff.

    Thanks again!

    I missed the extra brackets for a while too, so don’t feel bad about it. Good luck with your CSS studies in the future.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Changing the H2 and H3 headers.’ is closed to new replies.