- This topic has 13 replies, 2 voices, and was last updated 6 years, 4 months ago by Andrew Misplon.
Tagged: css post titles typography
- AuthorPosts
- May 16, 2018 at 6:01 am #9763
CaduckenParticipantHi there
It seems that the post titles in Polestar are set to h1, which doesn’t work for me, I’d like them to be h2 (which is WordPress convention). How can I adjust the CSS to make this happen?May 16, 2018 at 6:19 am #9764
Andrew MisplonKeymasterHi 🙂
Are you asking about single posts and pages?
h1
is correct for the post title in that case. Here is _s as an example, perhaps the most vetted WordPress theme there is:https://github.com/Automattic/_s/blob/master/template-parts/content.php#L16
May 16, 2018 at 6:30 am #9765
CaduckenParticipantHi Andrew
Cool, I have been looking in the Polestar template for that sort of setting but it isn’t as clear as the example you’ve given me.
I have h1 text embedded into a parallax image as my page header and I use a different font than the one I’d like to have as my post titles, so making post titles h2 is a good fix. Is it possible? I assume there’s some custom css I can use?May 16, 2018 at 6:31 am #9766
Andrew MisplonKeymasterThanks for the information. The link I sent isn’t a setting, just the source for a theme using
h1
as post titles. CSS can’t change HTML markup. Please, send me a link to the page concerned and I’ll take a look.May 16, 2018 at 6:34 am #9767
Andrew MisplonKeymasterHere is the same line in Polestar: https://github.com/purothemes/polestar/blob/develop/template-parts/content.php#L37.
May 16, 2018 at 6:35 am #9768
CaduckenParticipantThis reply has been marked as private.May 16, 2018 at 6:41 am #9769
Andrew MisplonKeymasterSuper, thanks for the details.
h1
is correct on the single post page though. I’m not following why you’d want to change it. The page needs oneh1
tag.May 16, 2018 at 6:43 am #9770
CaduckenParticipantSo every page needs at least one use of h1?
I want to change it because I’m a type nerd and want my post headers to be Source Sans Pro like the rest of the post and only use Raleway bold for the header images… it’s a bit clunky in the lower case mode for post titles :}May 16, 2018 at 6:48 am #9772
Andrew MisplonKeymasterSure, add to
Customize > Additional CSS
:.site-content .entry-header .entry-title { color: #2d2d2d; font-family: 'Source Sans Pro'; font-size: 29px; }
Adjust the colour value and font size value as required.
Every page needs an
h1
tag, ideally, yes.May 16, 2018 at 6:54 am #9773
CaduckenParticipantAlmost there — how can we add something about taking out the extra letter-spacing, which is still inherited from the h1 text (and looks way too spacy)? It’s doing what I want though, thanks!
May 16, 2018 at 6:59 am #9775
Andrew MisplonKeymasterSure. The letter spacing is being added by Easy Google Fonts plugin. One option is to remove it from the EGF settings, unless you need it elsewhere. The way it’s been added to Easy Google Fonts means it will impact every
h1
tag in the site. The theme isn’t adding the letter spacing.Or you can add it to the Additional CSS rule:
.site-content .entry-header .entry-title { color: #2d2d2d; font-family: 'Source Sans Pro'; font-size: 29px; letter-spacing: normal; }
letter-spacing: normal
May 16, 2018 at 7:01 am #9776
CaduckenParticipantThanks. Yes, I realised when I added it (the spacing) that it was affecting every h1 tag, but it works very well on the headers. It’s going to be good to have this bit of customising! Many thanks again, Andrew.
May 16, 2018 at 7:03 am #9777
CaduckenParticipantPERFECT. Top marks again, great support.
Thanks Andrew.May 16, 2018 at 7:04 am #9778
Andrew MisplonKeymasterGlad to hear you’ve made progress 🙂
- AuthorPosts
You must be logged in to reply to this topic.