Text is perhaps the thing people want to change most of all in their themes. The font's wrong, the line height is bad, etc etc. There are a lot of things that you might want to change with the text, so let's get into it.

We know how inspect something now, and it's no different to inspecting the header; right click on it and choose 'Inspect'.



As before, scroll down until you find the code that's controlling the parameter that you want to change. Let's find the colour first:





We can check that this is the right code by changing something in it and seeing what happens on the screen:





And we can see what happens:





Lovely.

Things are a little different here, there are actually several CSS classes being instructed here. It doesn't matter though, we can copy all of them.





And paste them into our theme and add the curly brackets:





Now we can add the code that will adjust our text. I want to make it black rather then the dark grey that it currently is, perhaps adjust the line height and make the text slightly larger:





They're not big changes I know - I quite like the appearance of the text in this theme, but you get the idea anyway.





The only other thing I really want to adjust is the font. We can try adding it to the current class we've got, and if it doesn't work we can hunt out the correct class in the Inspector. Let's try it though.

Fonts are a bit different on the web to what they are on the computer. There are a series of 'Universal' fonts that web designers use.

There is a list here if you're interested.

For now I'm just going to add in the following:

font-family: Arial, Helvetica, sans-serif;

What this does is tells the computer first to try Arial, then Helvetica, and if it doesn't have either of those fonts to use a sans-serif font (a sans-serif is a font like the one you're reading now - no little twiddly bits on the ends of the letters like in the TwentyTen theme).

So let's type it in:





Update the file and see what happens to our website:





Ahhhhhhhh... that's a lot nicer!

The text is perhaps a little huge, but we can change that easily by changing our child theme.



Join the Discussion
Write something…
Recent messages
firstburn Premium
can u create a forumn page in your wordpress site
Reply
mhamilt Premium
Yes, although it gets a bit tricky. I'm not sure why you'd want to, the comments section on blogs is usually sufficient for user interaction. This plugin may help: http://wordpress.org/extend/plugins/mingle-forum/
Reply
firstburn Premium
i have a blogg i left 4 yrs called breaststrokeforbegginers.wordpress.com because i could not put and adsense code to it. i think with this tutorial i might start using wordpress again.
Reply
Kyle Premium Plus
Wordpress is definitely a wonderful platform...it is not perfect, but it is has come a long way and it sure beats the old days of building websites from scratch!!
Reply
mhamilt Premium
Yeah, I tried Wordpress even just three years ago and hated it. Now I couldn't imagine using anything else! And it gets better on a very regular basis.
Reply
Denisara Premium
firstborn - you could not put adsense codes into breaststrokeforbegginers.wordpress.com because you were using the free wordpress version (yoursite.wordpress.com). If you owned your site it would be yoursite.com. You can't monetize a free wordpress, or blogger etc. You have to 'own' your site to be able to do that.
Reply
Kyle Premium Plus
Excellent training Mark...this is going to be valuable for many!
Reply
BIS Premium
Very useful tutorial which is very easy to follow.

Thanks

Beverley
Reply
mhamilt Premium
Thanks Beverley!
Reply
SquidooSlfMstr Premium
Well written tutorial, Mark! Do you know if you do your site customization on the parent theme, do you lose all that when the theme owner makes updates? Is this why you would want a child theme?

Thanks again for doing this tutorial.

Charlie
Reply
mhamilt Premium
Yes, this is one of the reasons why child themes are good - you do lose any changes made if the theme you're using is updated.
Reply
Top