We have almost completed the coding of the WordPress theme we where making. Now its time to make it a bit more visually appealing. As I have shown you in the first post of this series, We are making a minimal theme without many images.. So CSS is the star here.
This is how our theme going to be after Styling.
If you are taking this tutorial from the first post, you know that I am not going to teach you CSS or HTML here ! So I have already made a CSS file with all ‘things’ needed to style the visual elements of the theme. You are going to update the current CSS file of the ‘tutorial’ theme with the one I made. And applying its properties into the template files. I will show you one example (You know how to do it, but in case).
Get the Pre made CSS file here : style
Now.. We dont have this CSS properties applied to the template file. You have to take each CSS properties and add it to the template file. I have documented the CSS file with comments to ease the process.
It goes like this, This is an old snippet from header.php :
<body> <!-- Body of the page starts after this line -->
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a>
After adding the correct CSS properties the code should look like this :
<div id="canvas"> <!-- Start of wrapper -->
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="desc"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></div>
</div>
If you fails to add any CSS properties to the template, ask it in the comment, I will help you as soon as possible. If you have any problems in applying the css to the template, you can download the zip file that contains Tutorial theme we did so far, NP: This zip is not a complete theme.