Internet Marketing Online, Load Your Arsenal

by Janet Ashby Antigua Web Solutions Blog

How To:Create a New K2 Style- Part 1

So we’ve changed a few things in the Vader Style sheet and seen the result. Lets go deeper and start to work on the images and link colours and styles!

Step 3 :Changing the Header Graphic.

You can change the header graphic by using the admin dashboard, presentation, K2 custom header but we’re going to use the CSS style sheet. This way you can also change the size of the header.

This one is easy! Find this

#header {
background: black url(’mustafar.jpg’) center center no-repeat;
width: 100%;
height: 224px;
}

Place a new graphic in the same directory as the CSS style sheet (wp-content/themes/k2/styles/vader) and change background: black url(’mustafar.jpg’) center center no-repeat; to use your new graphic. Lets call it header.jpg

Your code now looks like this

#header {
background: black url(’header.jpg’) center center no-repeat;
width: 100%;
height: 224px;
}

You don’t have to use the same size as the original graphic. If you want to, change the height to be the same as you graphic image.

Step 4: Changing the Title Color and Position

At this point let me explain about headings You’ll see a h1 and further down h2. We could also use h3, h4 etc. h1 is usually designated as the largest heading with the size decreasing through h2, h3 etc. In our case h1 is the large heading for the blog title. Just below it is .description which is the description (or tag line) of your blog. You can change their positions with ‘top’ and ‘left. There is no code for the colour of the headings as Vader is using the default color in the K2 style sheet but we can easily add a line to change the colour.
One more piece of information we need before we can change the title. The title is a link and ALL links are designated “a” so the code we need to change the title color is

h1 a{color:#ff1500;}

we also need to set the visited link to red too as follows

h1 a:visited{color:#ff1500;}

For efficiency we can combine both

h1 a, h1 a:visited{color:#ff1500;}

Don’t like the underline when we hover? Get rid of it as follows

h1 a:hover{text-decoration:none;}

Don’t forget about the visited links. Many times I can’t understand why my links aren’t changing colour because I’ve forgotten to set visited! In Firefox Web Developer you can click on miscellaneous, visited links and set all links as visited or unvisited to check.

Step 5 :Changing Other Links and Sidebar Links

Further down you’ll find

a, a:visited, .sidebar a:visited {
color: #4CA4B8;
}

Lets see what happens when we change the color here. I changed mine to red again (I like red!) So my code now looks like this

a, a:visited, .sidebar a:visited {
color: #ff1500;
}

All the links in the sidebar and a post I have are now red! We don’t have to change them all, we can split up the sections. Let’s make the links in the sidebar blue.

Actually .sidebar isn’t doing anything! If you use Web Developer to look at the boxes you’ll see that the whole sidebar is enclosed in a box labeled .secondary. So to change the links in the sidebar we need to add

.secondary a {color:#0000FF;} This will change all unvisited links to blue.

Now experiment using Web Developer to change other elements! Check out the CSS cheat sheet to see what other options you can use. Text-decoration for instance can be underline, italic, bold. You can also use font -style, font-weight, font-size and font-family.

In the next installment we’ll change the position of the top menu and use an image to change the menu background on hover. Have fun!

Originally posted 2007-09-07 16:11:43.

This entry was posted on Thursday, August 6th, 2009 at 2:12 am and is filed under Blog Consulting, WEB 2.0 Internet Marketing For Business. 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.