Customise the body text
In the screen shot below you can see the default body text of the Graphene WordPress theme which I feel needs some tweaking.
The body text of the sample posts is Arial, which has its uses but not as body text. It’s also too small. I believe in making web type legible and that means setting body text bigger in a more readable font and with decent line spacing.
This is easy to do in Graphene. Go to Appearance/Graphene Options/Display and open the Text Styles Options which is seventh on the list. Scroll down to Content Text and set Georgia as your text font, 18px as text size and 28px as text line height. This is particularly useful as it’s relatively rare to be able to set text line height in a theme without adding some CSS code.
Changing your text font settings can transform a websiteI want to change the headings of the posts as well but this requires a little CSS. The code to change these to Georgia bold is:
.post-title,
.post-title a,
.sidebar h3 {
font-family: georgia;
font-weight: bold;
}
Copy this and again go to Appearance/Edit CSS, add a few lines of space to separate from the previous piece of code and paste it in. Remember to Save stylesheet so the changes take effect.
This is the CSS code for making the post headings Georgia bold.
This changes the look of the page substantially so it should be something like the screen shot below.
The website is starting to take on a new look now.
As a final change on the body area, I’m going to remove the calendar-type date. It’s a nice touch but it takes too much prominence which should be on the content rather than the date.
To remove the date, go to Appearance/Graphene Theme Options and click on Display. Scroll down to Posts Display Options which is fourth on the list, change the selection for Post Date Display to Hidden and click the button to Save All Options.
You can hide the date on posts, show the date with or without calendar icon or just as inline text. You can also hide the author, categories, tags and post comment count to cut the clutter.
The screen shot below shows sample posts without the calendar icon date.
I’ve addressed the basics of setting up a website in the first part of this three-part article and got the overall look and style of the site established. I’ll take it on further in the second part of the article which you can find here.