Header Font

[marci]

How can I change the header styles such as font and sizes? It looks odd to me to have the
titles and headers larger than my site name.

I'm using Windows, Firefox, Executive pro theme

http://driftlessprairies.org

[marci]

I found the style sheet for these but can someone help me to ensure I do the CSS correctly? I'm not sure I understand the font size in "rem" - can I change it to "pt"? And how would I underline or italicize? I'm not a designer.

h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
line-height: 1.25;
margin: 0;
margin-bottom: 10px;
padding: 0;
}

h1 {
font-size: 42px;
font-size: 4.2rem;
}

h2 {
font-size: 36px;
font-size: 3.6rem;
}

h3 {
font-size: 30px;
font-size: 3rem;
}

h4 {
font-size: 24px;
font-size: 2.4rem;
}

h5 {
font-size: 20px;
font-size: 2rem;
}

h6 {
font-size: 16px;
font-size: 1.6rem;
}

[marci]

Through this process, I *think* I've figured out that the post and page titles are NOT H1. Can someone help me with the CSS to change those as well? I'd like to make them smaller and use the same font as the headings (H1-H6) which I'd like to be Arial Narrow.

[AnitaC]

The title on your pages is called the ".entry-title" and wrapped in an H1. Look for this in your stylesheet.

.entry-title {
    font-size: 42px;
    font-size: 4.2rem;
    line-height: 1;
    margin-bottom: 20px;
}

You would change both the "px" and the "rem" font sizes.

You should learn how to use the Developer Tools in your browser so you can view and target specific areas. You'll be able to locate the code I just provided.

Also as an FYI, Design Palette Pro works with your theme. If you do not wish to learn how to use the Dev Tools, you can purchase DPP and you will be able to change the fonts sizes, colors, etc., of your theme.

---

Need help with customization or troubleshooting? Reach out to me.

[marci]

Thanks. I can "inspect" but I don't always understand what I'm looking at. I had a couple classes many years ago.

I'm not sure how I would have have known H1 was wrapped in the title. It was more confusing that the theme editor would show an H1. I *think* I'm learning that I should "inspect" rather than look in the theme editor.

I would love to learn how to use Dev Tools. Is that a self learning thing or is there a class? I appreciate the DPP suggestion. I see where I can easily change the title but haven't found the other heading adjustments.

I'm not a designer. I'm a restoration practitioner wanting a nice looking website to help other landowners understand complex and complicated processes. I make no money off this site, the site is solely for educational purposes and my work is 100% volunteer.

I really appreciate your help.

[Author]

Posts