I like many others use the excellent themes from Studiopress. They’re great themes that are superbly coded, however sometimes I find that I do need to tweak things in the CSS (style sheet) file, to slightly alter the theme to fit my taste. This is the case with a theme that I have on my blog at the moment called the Eleven40 theme. I say at the moment because I’m prone to change my theme from time to time 🙂
Whilst I’ll be showing how to edit the CSS code on this particular theme the process should be fairly similar for any well coded WordPress theme.
Check out the Problem with the Site
The title of each post is wrapped in h1 tags, which is quite standard for SEO purposes. By default it’s set at a pixel size of 48! This sizing is controlled by the CSS file. In my opinion 48px is a bit on the large side. Here’s how it looks at that size.
Editing the Eleven40 Style Sheet
Fortunately it’s very simple to change that size and especially so with Studiopress themes as their CSS file is very clearly laid out so that the right code to edit is easy to find.
If you’re not used to working on CSS then it isn’t as difficult as you might think once you’ve done it a few times. Just be aware that editing the file and getting the result you want can sometimes be a bit of trial and error. If you follow a few basic rules you won’t go far wrong or cause any damage to your site that you can’t reverse.
My next step is to go to Appearance/Editor in WordPress and select the style.css file to load in the theme editor window. I know that it’s the h1 tag code that I need to edit so by using the browsers ‘find’ feature ctrl+f I can type h1 into the ‘find’ pop up window and see all of the occurrences of ‘h1’ in the style sheet code. I just need to scroll through the few areas where it found h1 until I hit on the right code. You can see this code in the image below and that it says h1 has a font size of 48px.
So I want to change the size of the h1 tag from the 48px that it is now to about 30px. I first take a backup copy of the file in case I make a mistake as discussed on the page linked to just above. All I do is change the 48 to 30 and click the blue button at the bottom of the screen ‘Update File’ to save it.
Check the Changes
Loading the site again in the browser I can see that the size has reduced a lot and is much more in keeping with the size that I had in mind.
The only issue now I notice is that the h2 heading is bigger than the main h1 title. So using the same method above I just need to alter the size down a few pixels for h2 in the stylesheet. It’s possible that h3, h4, h5 and h6 may also need adjusting in this way, but as I never use h4-6 I don’t need to adjust them. H3 was an acceptable size without adjustment.
So that’s all there is to editing the h1 tag font size for the Eleven40 WordPress theme. It’s pretty much a similar process for all Studiopress themes. In fact most good premium themes should make it fairly easy for you to find the right code to alter. If you can’t, just ask on your themes support forum and I’m sure you’ll get the advice that you need.
I hope this was useful and as ever please feel free to comment if something isn’t clear or there is something that you would like to add. My final parting shot on this is don’t forget to back up the file BEFORE you start fiddling around 🙂