Make a theme series (part 3): finding your style
This week I’ll begin by explaining how to use a reset stylesheet (CSS file) to help your website to look the same in any web browser. Even if you already know how to do the rest of this week’s article, I really recommend you look at the CSS reset (step 1).
Then I will show you how to change font sizes and move some things around.
1. Resetting the styles
Before getting on with adding more styles to the theme, it’s a good idea to do a “CSS reset”. Not all web browsers have the same idea about what default style settings are, so your site might not look the same in all browsers. Resetting the CSS basically brings everything back to zero, to give you the best chance of your site looking the same no matter what browser it is viewed in. One of the most popular CSS reset files is available from Eric Meyer. You can right-click this link and chose “Save Link As” or “Save Target As” to download his reset.css directly from WP Mag. Save it in your theme’s directory, which in my case would make the file wp-content/themes/your-theme/reset.css.
Next you need to tell your index.php where to find the reset file. Find where the main stylesheet (style.css) is linked:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="all" />
There isn’t a specific bloginfo() template tag that will point to reset.css, so instead you need to use the tag that points to the whole of your theme’s directory, then add the filename on the end. Add a line above the main stylesheet link, so you end up with two lines as shown below. Note that the words “template_directory” should be written exactly like that. Don’t replace it with the name of your directory, WordPress will do that on its own.
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="all" />
Upload the files if you need to, then look at your site. You’ll notice that it’s gone quite squashed-up. That means everything has been reset and you can get on with styling it how you want!
2. Centering the page
To put your whole page in the centre of the screen you need to put it inside a <div>. That way you can then centre it relative to the <body> which will represent the whole width of the browser. In index.php you need to add an opening <div> tag after the <body> and a closing </div> tag before the </body>, like this:
<body> <div id="whole_page"> <div id="header"> <h1>My Blog</h1> </div> <?php while (have_posts()): the_post(); ?> <h2><?php the_title(); ?></h2> <?php the_content(); ?> <?php endwhile; ?> <?php wp_footer(); ?> </div> </body>
The id=”whole_page” will allow you to apply CSS rules to it. So in style.css you can add a section to target the whole_page div. To centre something you first need to give it a particular width, then set the left and right margins as automatic, which will result in them both being the same size and hence centering the div on the screen. My image is 800 pixels wide, so I will make my whole_page the same width:
#whole_page {
width: 800px;
margin-left: auto;
margin-right: auto;
}
Upload the two files you’ve just changed if you need to and look at your site to check the changes worked.
3. Resizing and moving the main header text
I chose an image for my header that has a space in it for the title of my blog, but at the moment that writing is really small and in the top-left corner. If you check in index.php you can see that the header text is wrapped in <h1> tags, so you can use that to target the text with CSS. I’m going to make my heading bigger then move it into the right place.
font-size: 4em; will make the text four times bigger than the standard text on the page. It is better to use ems rather than pixels to size the text because it makes it more reliably shown the same on different browsers. It will also help the browser to zoom in on it if someone chooses to display your site with bigger writing to help them read it more easily.
You need to tell the browser that’s displaying the page to position the heading text “relative” to the previous item inside the “thing” that it is in. In this case the heading text is inside the whole_page div. It is the first thing in the whole_page div, so it will be positioned relative to the top-left corner of that div. In my example I have positioned the h1 140px from the left side of the whole_page div and 120px from the top edge of it.
I found the h1 section of style.css and added to my example as shown below. You might want to use a different font size and different left and top values to match your image.
h1 {
position: relative;
left: 140px;
top: 120px;
font-size: 4em;
color: #2c1201;
}
5. Resizing the post titles
You should be able to work out how to make your post titles bigger. I’m going to make mine 1.2ems.
h2 {
font-size: 1.2em;
color: #2c1201;
}
Here’s what my example looks like so far:
6. Adding a space between the paragraphs
You can add a bottom margin to the <p> tags to put a gap below each paragraph. Find the p section in style css and add the margin line in. A 1em gap will give the equivalent of one blank line of text.
p {
margin-bottom: 1em;
color: #2c1201;
}
Next week I’ll be introducing more WordPress template tags, so you can add in the date, author name, links to static pages and things like that.
How are you getting on with making your theme so far? Got any problems? You can share them below!
(No Ratings Yet)
Loading ...
Leave your response!