Make a theme series (part 2): a splash of colour
Last week in Part 1 I explained how to set up the beginnings of your own theme. Now I’m going to show how to brighten things up, adding your own colours and beginning to define a layout. You’ll need the theme that you made last week, so if you haven’t done that yet you should go and follow Part 1 before carrying on with this article.
I’m going to use the October 2008 wallpaper by AthenaEmily.com as my inspiration for the colour scheme.
If you view your website with the theme from Part 1 it should look something like the image below.
1. Changing text colours
CSS can be used to add “styles” to any of the XHTML elements in index.php. CSS colour codes take a bit of getting used to, but there are plenty of websites to help you find them out. I use ColorSchemer a lot, as it helps you to pick out sets of matching colours. As you click the small coloured squares in the palatte at the bottom, you can see the various “hex colour codes” appear below the colour swatches. They look something like #ff00ff, where the first two numbers or letters represent red, the second two green and the final pair are the blue. The digit pairs are numbers in hexidecimal, rather than decimal, which is explained quite well on Wikipedia. So for example, #ff00ff means red is at its brightest, green is off and blue is at its brightest. Red and blue when mixed - in terms of light, not paint - produce magenta. In this example I’m going to use the eye-dropper tool in GIMP to select colours from my “inspiration image”.
In index.php you can see that you added <h1> heading tags around the main blog title, and <h2> tags around the post titles. So, to change the colour of these elements you can add corresponding CSS elements to style.css. I’ll only show the new code, but make sure you dont remove the comment header that is already in style.css. Add the new lines beneath it. Make sure that all colour codes begin with a # and that all lines inside the curly brackets (braces) end in a semicolon.
h1 {
color: #2c1201;
}
h2 {
color: #2c1201;
}
If you’re not American, note that you must use the American spelling of “color”. Feel free at this stage to change the colours to whatever you want, or copy mine: it’s up to you! On the left is what my theme looks like now. Yes, brown writing was a really poor example to go with, but if you look carefully you can see the difference! If you’ve been bolder than I have with your colour choice you should be seeing a bit more excitement right now.
index.php doesn’t show the tags that are in the_content(), but if you view your website in your web browser, right click the page and choose “View Page Source” (or something similar), you’ll be able to see that WordPress has wrapped your paragraphs in <p> tags. So you can colour the paragraph text in the same way as the headings:
h1 {
color: #2c1201;
}
h2 {
color: #2c1201;
}
p {
color: #2c1201;
}
2. Changing the background colour
You can see in index.php that the whole of the printable page is wrapped in <body> tags, so that is what’s needed to change the background colour of the whole page. Add the following to style.css:
body {
background: #d4bf86;
}
Now things are beginning to take shape!
3. Making a header
You can use <div> tags to divide your page into sections, making it easier to place groups of page elements. Since you’ll be more than one <div> on a page, you can set an ID so that you can target the CSS rules at just one particular <div>.
In index.php, wrap the main heading in a <div>. In future weeks we will add more things inside this <div>. It’s a really good idea to indent things with a few spaces to show that they are inside something else. It doesn’t affect the way the computer reads it, but when your code starts to run into several screenfulls it can save you from insanity when you’re trying to work out what is in what.
<div id="header"> <h1>My Blog</h1> </div>
That in itself won’t have changed the layout at all, but now you can style it with CSS, in style.css. I’m going to add a background image, and set the size of the <div> to be the same size as my image. It’s a good idea to make an images directory inside your theme directory, to keep all the images together. For example, my image is uploaded to wp-content/themes/your-theme/images/header_background.jpg. Notice that you use a # before an ID in CSS. You don’t need to label it as a div, because the ID can only possibly refer to that particular tag.
#header {
background: url(images/header_background.jpg) no-repeat;
width: 800px;
height: 250px;
}
Here’s what my theme looks like now.
Next week I’ll be delving deeper into stylesheets, explaining how to use a CSS reset to make sure that your layout is the same in most browsers. Then you’ll be able to start moving things around on the page so it’s not all squashed into the top left corner!
(3 votes, average: 5 out of 5)
Loading ...
Leave your response!