Change post/page title style

Hey Aidan.

Before you modify style.css – make a backup of it! Select all and copy into a text editor at the very least. That way you can copy it back and save it if you mess something up.

Option 1
In style.css do a search for .post-title and change the text-transform option to none instead of uppercase. This will reset it back to normal, when you add a new post you need to make sure you type the title in the desired case though.

Option 2
Another option is to set the text-transform to lowercase and then add an extra pseudo element to change the first letter only to uppercase.

So first modify the .post-title style to lowercase. You can see it in the first example below.

.post-title {
	font-family: 'Abril Fatface', serif;
	font-size: 3em;
	text-transform: lowercase;
	letter-spacing: 1px;
	text-align: center;
}

Then add this directly below the .post-title code.

.post-title::first-letter {
  	text-transform: uppercase;
}

That should do what you need. The ::first-letter element will work for you because it’s being used on a block level element (the h2 tag) but it won’t work on an inline element, like an anchor tag.

Let me know how you go.

Good luck ??

Hi dodgyJim73,

Thank you so much for your quick response to my query. I went with option 1 as it seemed the simplest for me – I don’t mind changing the case manually, as well. Worked a treat.

Thanks again and all the best.

Cheers,
Aidan.

Awesome, glad to help! ??