Customizing Colors

Kelley’s site has come leaps and bounds from where I left off last; but I don’t want us to get ahead of ourselves. So I want to explain how I got from the before to the after in the last post.

Here is a list of the main changes to the original theme (Sheep Theme VI 1.0)at the stage you see in the previous post.

Changed the colors
Replaced the header image
Changed the navigation image
Replaced the post image (the butterfly)

Changing colors in a theme:

I wish I could tell you that there was a place to go in all WordPress themes to change the colors of your backgrounds, fonts, and other elements of a theme, but I cannot. I can give you a general idea, however, of where to look for the codes to change. I will walk you through changing the colors on Kelley’s as an example.

First of all, go to the admin panel of WordPress. Read this WordPress documentation if you have no idea what the admin panel is. Go to Presentation/Theme Editor. There you will see the most common files associated with a WordPress theme. I will not overwhelm you with a definition of each of them, only the ones we will be changing as we go. For detailed documentation visit WordPress.org.

The colors we want to change are: the background color, the color of the menu items, and some of the font colors. These can all be changed in the Stylesheet, so click on the “Stylesheet” file on the right. This should open the file so you can make changes.

Caveat: Please save all of your theme files before you make any changes - just in case. And read this WordPress documentation.

Here is the first bit of Kelley’s Stylesheet:

body {
	background-color: #72a3aa;
	margin-top: -5px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	text-align: center;	
}

Notice in the first few lines, the definition of background-color? Well, all we need to do is change it - that will change the background color of the entire site. But, what, you say, if I have no idea what that funky number means?

Don’t fear - here is a very cool site that will help you determine the hex value of a colo: Color Schemer. This site will not only help you find a hex value of a color you may want to use, but will also display an entire “color scheme” that you can use as a palette for your site. This is remarkably helpful for those of us who are color challenged…

So, if you enter the “72a3aa” in the Color Schemer, you will see Kelley’s pretty green we replaced the background with in the Sheep theme. And we can replace it with any other color we choose.

Further down the Stylesheet, we see this code:

#navigation ul li a {
	display: block;
	font-weight:bold;
	color:#FFF;
	text-decoration: none;
	background:#7d9b55;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	font-family: "Trebuchet MS";
	font-size: 1em;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;

}

#navigation ul li a:hover {
	color:#7d9b55;
	background:#FFF;
}

This code defines the “style” of the menu. Without getting too technical, this says that there is an unordered list (ul) of items (li) that make up the navigation system. There are definitions for when these items are links waiting to be clicked ( ul li a), and when the user “hovers” over the menu items ( ul li a:hover). So, you could have a different color for when the user passes the mouse over the item.

For this theme, we wanted the menu items Kelley’s green, with a “hover” color of white - so the “background” color (background:#7d9b55;) is green for when the menu sits idle, and white (background:#FFF;) when an item is hovered over. This a good example, too, of using hex “shortcuts” - notice some of these use 6 digits (FFFFFF) and others 3 (FFF) - don’t get confused, they are the same thing - it is good practice, however, to be consistent and always use 6.

Now for font colors. Notice in the code above, in (ul li a) the line “color:#FFF;” This is the color of the font (white) when the menu background is green. Then, in (ul li a:hover), the line “color:#7d9b55;” defines the color as green, when the background is white (when hovered over). This is an example of changing font colors, but we need to change quite a few of these, so let’s move on.

We want to change the font colors for the title of a post, for the date, for the links to categories and comments, for the links within a post, and for the links within the footer.

Most of the time, these styles (or classes) are self-explanatory like the navigation “class” we changed above - but other times we may need to go to the source to see which class is being used to define the text style. In order to find the class that defines the color in the post-title and others, we will go to the file called “Main Index Template” - this is the file that determines how your blog entries will look. Here is a snippet of that file from Kelley’s theme:

<div id="container">
	<div id="content">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <!-- If the post is in the category we want to exclude, we simply pass to the next post. -->
                <?php if (in_category('10')) continue; ?>
		<?php the_date('','<h2>','</h2>'); ?>
	
		<div class="post" id="post-<?php the_ID(); ?>">
			<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
			<div class="meta"><?php _e(">"); ?> <?php the_category(',') ?> &#8212; <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>
	
			<div class="storycontent">
				<?php the_content(__('(more...)')); ?>
			</div>
	
			<div class="feedback">
		            <?php wp_link_pages(); ?>
				<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>		            
			</div>

			<div class="divider"></div>

		</div>

Please, don’t be intimidated by all of this code! All we are looking for are the “classes” used to determine the color of the fonts we want to change. If we look at the code, we see that “class=storytitle” is used to “style” the title of the post, “class=meta” used for links to the categories, and “class feedback” to style the links to the comments. Now we know what classes to look for in the Stylesheet.

Back to the Stylesheet, we easily find these styles, and change the font colors they define to the nice orange of Kelley’s theme. The footer styles are usually labeled accordingly, so we would look for at class called footer, and change whatever colors we needed to. The same for any fonts we might want to change in the “sidebar” area (i.e. look for a series of classes in the stylesheet called “sidebar”)

Another way to do all of this, is to determine the hex value of the color you want to replace in the existing theme (in our case the bright blue used in the title and links in the sheep theme), and replace every instance of it in the Stylesheet with the hex value of the color you want to use (the orange in our case). I use this method quite often, actually - it saves me having to find all of the different classes that utilize that color.

We will talk about changing out the images in the next post. In the meantime, if you want to know more about Cascading Style Sheets (CSS), please visit the excellent tutorial provided by the World Wide Web Consortium.