Internet Marketing Online, Load Your Arsenal

by Janet Ashby Antigua Web Solutions Blog

K2 is a great WordPress theme that is relatively easy to adapt and change. The look of K2 is changed by making new ’styles’ which are placed in the ’styles’ folder and contain all the images and css files for the new style. All of the changes to the main K2 theme are done through the css (cascading style sheet) style file. None of the core files are changed in any way so that styles can be distributed and used by anyone who has the K2 theme installed on their WordPress site.

So how do we start to make a new style?

Step 1 :Gathering the Right Tools

All the tools I use regularly are listed in My Top Design Resources but for now here are the absolute essentials to gather before we start!

1. Firefox addon Web Developer

2. A good graphics program. Strong advocate of open source and the Unix environment as I am I still can’t get to grips with the Gimp for complex graphic manipulation! It’s free for both Windows, Unix and Mac so if you’re on a tight budget go ahead and try it!

3. A text editor. Some text editors color code the CSS and highlight any errors. I use Kate for linux which does this. (Sorry Windows Wordpad doesn’t!)

4. CSS cheat sheet

Step 2: So What’s a Cascading Style Sheet Anyway?

Let’s try to find out! The style ‘vader’ by Michael Heilemann comes with K2 and is licensed under creative commons so we can manipulate it and ‘remix’ and ’share’ as long as we follow the license.

Open up vader.css (it’s in /themes/k2/styles/vader/) in a text editor and have a look at it.

The first commented-out paragraph contains details of the author, any comments and license information. Below this is the part we will be editing. Here is the very first entry in the css file. It contains instructions for the body of the webpage- that is what you will see in the background.

body {
background: #111;
padding: 0 0 40px;
color: #bbb;
margin: 0;
}

At this point lets look at Vader in the web browser, make some minor changes and see the effect.

Step 3: Changing Some Colours

To change the background color to white change “background: #111″ to “background:#ffffff” and save the file. reload the webpage to see the effect.

Note that each section in the css file has a label (e.g. #page) followed by text in { } and each line ends with ; (semi-colon)

If you miss out a { or a ; you will have a very wierd looking page - so be careful!

Now everywhere you see a hex color (yes you will have to get used to hex numbers for colors I’m afraid) you can change the part of the web page that’s referred to.

But how do I know what #header, #page or #current-content refer to I hear you cry!

Don’t be afraid, here’s where firefox comes to the rescue! On the web developer toolbar click on Information - Display Div Order. Now your page probably looks a mess but all those lines mean something. Look closely and you’ll see that each outlined box is labeled. Right at the top the outer box is #page and below that #header. Each of the boxes has a corresponding entry in a css file.

Scroll down the css file until you find

#page, ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover {
background: black;
}

Change black to white (or any other color - yes you can use names for some primary colors!) and see the effect.

Now you will notice that there are labels on boxes on the web page that aren’t present in our vader.css. That’s because Vader is a ’style’. That is, it only contains instructions that change something in the original theme. You don’t need to specify things that you don’t want to change. It would be a good idea to look at the original css for K2 (it’s wp-content/themes/k2/style.css). You can copy and paste any sections that you want to change from this to the vader.css.

Next Installment Coming Soon!

So we’ve successfully changed some colours and navigated around the css file a bit! Next time we’ll look deeper into the workings, change some images and the look of the text!

This entry was posted on Monday, September 3rd, 2007 at 3:37 pm and is filed under Blog Consulting, BlogMarketing, Featured. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.