Changing the colors of your WordPress blog theme
Changing the color scheme of a WordPress blog without changing the theme is not rocket science. In this post, I will explain how this can easily be done; but first, I will identify the major colored elements of a WordPress blog theme so that we know what to look for.
- The body includes all of the area surrounding your header, post area, sidebars and footer. The color for the body will be defined by the style for the <body> tag in style.css.
- The header includes everything — logo,widgets,menus — at the top of your WordPress blog. The color background for the header will often be set by a CSS property of its parent divider within styles.css.
- The post area includes the section of your blog where your blog posts are displayed. The color background for the post area will often be set by a CSS property of its parent divider within styles.css.
- The sidebar[s] includes your navigation menus either on the right, left or both sides of your blog. Your color background for your sidebars are set within style.css either by a property for the divider it is contained within, the <ul> (unordered list) tag and, in some cases, the <li> (list) tag.
- The widgets include all of the dynamic page elements that can be located in either the header, footer or sidebars. Your styles.css file will usually have background properties assigned to widgets based on their location on the page (e.g.: one for header, one for footer and one for a sidebar) in a div container.
- The footer includes all of the content at the bottom of your blog pages. The color background is usually changed by either a property for the divider it is contained within, the <ul> (unordered list) tag and, in some cases, the <li> (list) tag.
Every WordPress theme is built differently so there is no guarantee that the above may apply to your specific theme. However, you can use the Firebug plugin for Firefox to easily identify where your elements are getting their styles from. Instructions for doing that can be found here.
Changing the color:background property in styles.css
Now that we’ve laid out which elements of your blog pages have colored backgrounds, we can then proceed to change them in the styles.css file. In your admin control panel, go to Appearances –> Editor and then click on styles.css near the bottom in the right-hand side bar. It is here that you will look for the color:background property of the HTML elements listed above.
If your theme is well organized, it shouldn’t be difficult to find the color:background property on the elements you want. Sometimes theme designers will specify div containers that contain sidebars, the post area, headers (and the like) with a comment that looks like this:
/* Sidebar */ or /* header */
If there are no comments, the theme designer may have labeled the <div> containers appropriately, giving the sidebars (if you have multiple) names like “sidebar1″ and “sidebar2.” Of course your divs will be given what’s called selectors, which means they will either have a ‘#’ or a ‘.’ following “div” and preceding the name given to each element.
The “#” represents an ID and the “.” represents a class. The two are used to select HTML elements with your cascading stylesheet and thereby alter the style. You will most likely come across more IDs than classes because IDs are used to identify single occurring HTML elements (while classes are used for multiple) and you typically have only one header, one post area, one footer, etc.
Here is an example of a sidebar div container selected with an ID (taken from the stylesheet of this WordPress blog):
/* Sidebar ———————————— */
div#sidebar {
width:330px;
float:right;
margin:0;
padding-top:10px;
font-family:Tahoma, Geneva, sans-serif;
}
As you can see there is a comment identifying this snippet of code as the sidebar. You also may have noticed that there is no color:background property. For this particular theme, one was not set so the sidebar is using the background of the body which is the next highest parent tag that has a background.
Let’s take a look at the CSS for the widgets which, in this case, is selected with a class and called “widget”:
div.widget {
width:305px;
margin:0;
margin:0 0 2.3em;
padding-bottom:1em;
color:#555;
font-size:.8em;
background-color:#fff;
border:1px solid #dbe0c8;
}
A widget contained in my sidebar currently looks like this:
But after changing the background-color property to background-color:#000000; (make sure you don’t leave out the semicolon), my widget will look like this:
Now let’s look for the footer div and change the background there:
div#footer {
clear:both;
background-image:url(‘images/footer-bg.png’);
color:#fff;
font-size:.8em;
border-top:2px groove #a9ac92;
padding-bottom:20px;
font-family:Tahoma, Geneva, sans-serif;
}
As you can see there is no background-color property but instead we have a background-image property. I can replace that with background-color and specify any color I want using any six digit hex code color combination.
Now that I’ve given a few examples, it should be easy for you to identify and alter the backgrounds of the colored HTML elements that make up your WordPress blog pages. A fast way to find all of the color properties you want to change is to do a search in your browser (CTRL-F) for background:color.
Using correct color combinations/pallets
You should not take the decision of changing the colors of your theme lightly. Finding the right color combination can be very tricky considering how may colors and combinations exist in the hex color code format (six digits).
I am not going to get into the discovery of the color wheel, its history and evolution; but the idea is that colors which lie directly across from each other on the color wheel can be safely partnered with each other. A chemical reaction in the retina of the eye causes the colors on the opposite sides of the wheel to appear brigher. When those colors are stared at for long periods of time, the chemical begins to deplete; hence why you will see an impression of the color after looking at something else.
http://www.flickr.com/photos/new-pastpresentfuture/ / CC BY 2.0
Colors that lie right next to each other on the color wheel are called “mono colors.” Colors that can be found 120 degrees (or 1/3rd distance) apart from each other are called triads and colors 90 degrees apart (1/4th) are called tetrads. There are also analogic and accented analogic colors but the important thing to remember is that the way we can objectively determine if multiple colors will look good together is by analyzing their placements on the color wheel. This would be extremely difficult to do by eye. That is why it is a good idea to use a free color scheme creator.
Once you have created a color scheme to your liking, you can simply copy and paste the 6 digit hex codes into your style.css page like I did above.
Please post a comment if you are having difficulty changing the color scheme of your WordPress blog and I will be glad to help you!
Related posts
« What to do when you don’t know what to blog about
Taking advantage of creative commons content for your blog »
