I had an email this afternoon from a lady who just purchased the Genesis Theme Framework and News Child theme a few days ago. She really wanted to know how she could change the font style, size and color on the child theme, so I thought I’d put together a short tutorial to share with everyone else also how easy it is to do this.
To change the font style, size and color is very simple to do across all the premium themes for Genesis, that’s the beauty about using it for its ease of use and customization. There are some elements however that are beyond my knowledge but I’m learning how to do them slowly.
Ok let’s begin…
Step One
Once you’re logged into your WordPress dashboard head straight over to Appearance > Editor. Just a couple of obvious tips: When you’re on the editor page just make sure that the right theme is selected, I know it will obviously be since you’re using the theme in question, but it doesn’t hurt just to make sure. Also make sure the stylesheet is also highlighted.
Access your Editor file…
Step Two
Now scroll down the page, you may not have to depending on which theme you’re using for Genesis, you’ll see the line tag starting with body { followed by background, color etc…
The image below in this step is self explanatory, but I’ll explain in any case…
The background: #FFF… determines the color of the background outside the wrap in the News Child theme for example. You can change the color of this background to anything you want here. For example if I changed the #FFFFF (white) to #666666 (grey) you can see by the example below how easy it is to change the background color in your theme.
Ok now the text… if you look back at the last diagram the Color: #000… determines the color of the font you want to use. You can change this to any color you want just by changing the red parts shown, very easy.
The Font-Size: 16px… determines the size of the font; again you can change that to 10, 12, 14 or what ever you want, whether you want to increase or decrease font size… simple.
The Font-Family: Georgia… determines the style of font you are using i.e. Arial or Georgia… Again you can change that to what ever you want.
One other item that I’ve not highlighted in the diagram is that you can also adjust the line height. If you look at the diagram it’s set to 20px. So for example if I changed that to 30px and hit update file, that increases the line gap between the text in the content of your posts and pages, and vice versa to decrease it.
Step Three
Once you’ve made your desired changes simply hit the update file button to see the changes, adjust accordingly until you find the perfect balance.
If you have any questions please don’t hesitate to ask, enjoy.
