Styling your blog

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
* Kubrick
* Icy Blue
* McChris templates
* Viewfinder Design
* Gollum
* W.
* not-so-blue
* Thememaker

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 );
</style>

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);
</style>

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.]

This entry was posted in Uncategorized and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

6 Comments

  1. Posted 10/2/2004 at 7:15 am | Permalink

    so if one was to build a blogroll, it would be into the css code?

    my browser is working strangely: encrypted emails are not poping up from my email site. i have to cut and past: then plop into the browser:

    i am wondering about cookies and css. do the programs act as cookies to get everything looking like they do on the finished product?

    can one put a message in the cookie so one can keep track of them?

    also with firewall, can they block parts of one blog?

    thanks stef

  2. Posted 10/2/2004 at 9:31 am | Permalink

    > so if one was to build a blogroll, it would be into the css code?

    In WordPress, there is a blogroll utility that allows management of the blogroll through the administration menu. But normally, since blogrolls are content rather than form it is part of the main page.

    i am wondering about cookies and css. do the programs act as cookies to get everything looking like they do on the finished product?

    One can use cookies to record the user’s preferences. Some sites allow you to use one of a number of possible style sheets, and store that preference as a cookie. My Photo Gallery does that, for example.

    Afraid I can’t really answer the other questions.

  3. Posted 10/2/2004 at 2:46 pm | Permalink

    For true CSS inspiration, see the CSS Zen Garden.
    I go there much more often than I should.

  4. Posted 10/22/2004 at 1:38 pm | Permalink

    Wow! I never expected to see my blog mentioned along with such notable company. :-) Especially in that I think my layout could use some serious work. But thanks for the compliment just the same. Hopefully my next attempt at design will be a little better.

  5. Posted 11/13/2004 at 9:32 am | Permalink

    Downloaded a style sheet, everything worked great except no color.

  6. Posted 11/13/2004 at 10:58 am | Permalink

    John: I need to rewrite this (again). Unfortunately, people package their style sheets in a lot of different ways, which makes things difficult. I have this on my To Do list.

One Trackback

  1. By Wittering with Intent » True Blue on 1/24/2005 at 11:29 am

    […] Well thanks to the pioneering efforts of my mate nik, and some marvellous choices on Alex Halavais’s page, it is now blindingly obvious which large Southern Hemispherical contine […]

Post a Reply to Les

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>