I need help with tweaking headings in Twenty Twelve theme

eleanormeecham · Member · Jul 8, 2015 at 2:15 am
Copy link

Add topic to favorites
Hello

I want to make changes to the size/weight/margins of my post titles, level 1 headings, and level 2 headings.

I’ve done my best at working out the CSS, but not all of the changes are showing up in preview (some are). I cannot figure out what I’m doing wrong.

Do I have the wrong selectors? Or have I put stuff in the wrong order? Or used the wrong punctuation? Or is some of the original CSS overriding my commands?

Here’s the CSS commands I think I need:

h1.entry-title {
font-size: 2em;
font-weight: normal;
}

.entry-content h1{
font-size: 1.5em;
font-weight: normal;
margin: 0 .0em;
}

.entry-content h2 {
font-size: 1.2em;
font-weight: bold;
margin: 0 .0em;
}

Or do I have it all wrong? I am a novice at this and I’d really appreciate any help. Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 8, 2015 at 3:43 am
Copy link
Hi there, since you are using custom fonts, a special class is added to the font declarations, .wf-active, and the declarations for font sizes are included in those. We need to proceed the selectors like this. Not all text font size rules would need this sort of treatment.
```
.wf-active .entry-title, .wf-active .entry-title a {
    font-size: 2em;
    font-weight: normal;
}
.wf-active .entry-content h1 {
    font-size: 1.5em;
    font-weight: normal;
    margin: 0;
}
.wf-active .entry-content h2 {
    font-size: 1.2em;
    font-weight: normal;
    margin: 0;
}
```
eleanormeecham · Member · Jul 8, 2015 at 4:04 am
Copy link
Fantastic! Thanks so much for your help. That has almost solved it.

For the post title, I find that now I also need to add ‘.singular’ to the command to make it work:

.wf-active .singular .entry-title, .wf-active .entry-title a {
font-size: 2em;
font-weight: normal;
}

The post I’m previewing now looks as I want it to. However, I’m reluctant to save it until I understand what ‘singular’ means. Is this for posts displayed singularly, as opposed to one after the other?

How do I make sure that the title of each post displays the same size whether viewed singularly or inline with other posts? Do I have to repeat the selectors with and without ‘singular’? For example:

.wf-active .singular .entry-title, .wf-active .entry-title, .wf-active .entry-title a {
font-size: 2em;
font-weight: normal;
}

Your help is very much appreciated :-)
thesacredpath · Member · Jul 8, 2015 at 4:33 am
Copy link
Hmmm, I wouldn’t have thought .singular would have been required.

.singular is a CSS class set in the opening body HTML tag on the single post pages. I’ve never seen that used. Typically .single is used and it is always what I include if I’m trying to target single posts only. The important thing is it works, and I do find it’s used in the existing CSS. You can go ahead and save. Worst case when adding CSS would be that you may have to delete something, but it can’t break your site.
thesacredpath · Member · Jul 8, 2015 at 4:39 am
Copy link
@eleanormeecham, I’m seeing Twenty Eleven on your site right now. Did you switch themes? If so, CSS is theme specific, so the CSS we’ve worked out for Twenty Twelve may not work with Twenty Eleven.
eleanormeecham · Member · Jul 8, 2015 at 4:44 am
Copy link
Er yes, you’re right. I am using Twenty Eleven, not Twenty Twelve. My apologies. I got the name wrong.

However, your fixes do seem to work fine for this theme, and agree with what I can see in the developer tools in Chrome.

Thanks heaps for your help. It’s been so useful! I may ask follow-up questions at some stage if things go wrong :-/ Fingers crossed!
thesacredpath · Member · Jul 8, 2015 at 7:19 am
Copy link
No worries, and you are welcome.

No items found.