You’ve been looking around the blogosphere, checking out some of the millions of other blogs out there, and you are starting to notice that some blogs are striking and look as though someone has thought about their design. Is this no more than vanity? No, people are more likely to read, and to trust, a website that is more visually compelling.
So, you are not a designer, how do you make a website that is not quite so, well, boring? There are a few things you need to know before we can start changing the look of your blog.
The content of the blogs we are using, driven by WordPress, is made up of a page of HTML and a programming language called PHP. While that produces the content, a stylesheet, written in CSS tells the browser how to display that content. So, when you are editing your blog to make it more visually appealing, usually you can often do this just by changing the stylesheet. If there is new content you want on your blog, sometimes you need to change the index page (index.php).
CSS, while it might sound scary, is not entirely new to you. In fact, we talked a little bit about CSS a couple of weeks ago. CSS is just a way of controlling how the browser displays the page. Each piece of the content on the page has a label indicating what it is. For example, each blog post’s title is labeled “storytitle.” On the style sheet, you can then specify how you want “storytitle” labeled sections to be displayed: what size, what font, in a box, what color, where on the screen, etc.
“Oh, no,” I hear you thinking, “I am going to have to learn a whole new language to do this.” Luckily, this is not the case. In the discussion that follows, I will point you toward some pages that provide free style sheets for you to use, and explain how you make use of them to change the look of your WordPress installation. In a later post, I will talk very briefly about some of the ways you can “tweak” existing style sheets and images to further change your blog.
Where can you find free styles to use? Try one of these. We’re going to be using a style from the first one, Alex King’s compilation of award-winning styles.
* Alex King’s Competition
* Icy Blue
* McChris templates
* Viewfinder Design
You may or may not remember that when we set up our blogs, I set up my own, called Blue Lagoon. For no good reason at all, I have decided I want to use the 1st prize winner on Alex King’s site, Pink Lilies. First I go to the listing on King’s site, and click on the link to download a zip file, which contains the new files I need.
Once I’ve downloaded it (to my desktop), I unzip the file. How you do this will depend on what operating system you are using and what software you have. For most of you, you should be able to right-click the file and “unzip” or “expand” it. The new folder will contain a number of image files, as well as the new style sheet. All we need to do now is get those up to your blog.
Login to your blog, and choose the Upload tab. Upload each of the images and the style sheet as we discussed in an earlier post. You probably don’t have to upload the “screenshot” image, if there is one.
Now we need to tell word-press where to look for the new style sheet. On the main menu, click on “Templates.” The first thing you will see is the main index.php template. Look for the line that looks like this:
<style type="text/css" media="screen">
@import url( <?php echo get_settings('siteurl'); ?>/wp-layout.css );
Change this section to point to your new style sheet (here we are assuming it is called “style.css” — you should check to see what the css package is actually called):
<style type="text/css" media="screen">
@import url( <?php echo get_settings('siteurl'); ?>/wp-content/style.css);
Then press the “Update File” button to save your changes. Now click on the “View Site >>” button up on the toolbar to see if your changes have “taken.”
Congratulations, your blog has a new skin. Have you run into difficulties? Email or IM me. Or drop by the lab on a Wednesday night!
[Note: I changed this a bit to reflect a somewhat easier approach. Thanks to Yon Soo.]