Changing Your WordPress Theme’s Colors Using CSS
When it comes to choosing a theme for your blog there are a lot of them out there. In fact, it would probably take you a few days to sort through which themes you liked if you were provided a list of all that existed. But what happens when you find a great theme but the colors don’t work for you or your site? Many people encounter this issue and may even skip over the theme because they don’t know how to change the colors!
Fear not though, changing the colors on a WordPress theme isn’t rocket science. All that you need is a little bit of CSS know how to get you set on the right track. Let’s get started!
Modifying the CSS Stylesheet
In order to change the colors you are going to need to modify your theme’s CSS stylesheet. The theme’s stylesheet will be located inside of the theme’s folder located inside of the WordPress Themes directory. An example directory structure would look like http://yourdomainname.com/wp-content/themes/yourthemename/style.css.
If you’ve found a style.css file yet you aren’t sure if it is the right one for your theme you can always look at the first few lines of text contained within the style.css file. These lines will contain information about the theme’s name, the author, the version of the theme as well as other information.
It is a good idea to create a backup copy of your style.css file before proceeding, that way if something goes wrong you can just reload the file and start fresh.
Inside of the style.css file you will find various lines of code that when put together correctly form a beautiful website. The basic CSS code that controls a section on a webpage goes like this:
BODY {
background: white;
}
In the above example BODY defines a certain section of the website and the text inside of the { } brackets define the look and color of the BODY section. But how do you know where the BODY section is on the website? The answer to this question lies within the HTML code.
<html> <head> <title> Example Page </title> </head> <body> <p>This is an example of a simple website page.</p> </body> </html>
The above example is a very simple design of a website. Notice the <body> </body> tags? The content inside of those tags is what is defined as the BODY section inside of the style.css file. As a simple example lets make the background on the BODY section black and the text white. Inside of your style.css you would put:
BODY {
background: black;
color: white;
}
In the above example, we selected which section of the webpage we are modifying with BODY. Inside of the { } brackets we placed background: black; and color: white;. As you can guess background: black; sets the background color of the body section and color: white; determines the color of the text within the BODY section.
A More Advanced Example
That is a very basic example so lets dive into the CSS a little bit more and do some real coding. As I stated earlier, in order to change the color of a section of your website you are going to need to find the name for that section. In order to find a section you need to look at your website’s source code. The source code is the HTML for your website as well as any content that is on that particular page for your website.
When looking at the source code for your WordPress theme you are going to see a whole lot of DIV tags along with various other peices of code that you may not understand. Lets take a look at another example:
<html> <head> <title> Example Page </title> </head> <body> <div id="page"> <div id="header"> <div id="mainmenu"> <ul class="mainmenulinks"> <li><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> </ul> </div> </div> <div id="content"> <h1>This is text contained within an H1 tag.</h1> <p>This is a paragraph below the H1 tag.</p> </div> </div> </body> </html>
In the example above there is a lot more going on yet it is still somewhat simple compared to a full fledged website. Lets say you wanted to change the background color of the menu section that contains the Home and Page 1 links. Inside of your style.css file you would write:
#mainmenu {
background: blue;
}
Notice that this time instead of writing just the name of the section a # was added to the front. This is because we used a <DIV> tag and gave it the mainmenu ID. Had we not placed the # in front of the name the background color would have not been applied. So we have the background color for the main navigation menu set to blue but what if we want to place a border around the menu links themselves?
We set the colors for the unordered list section of course. The unordered list section is contained within the <ul> </ul> tags. So while this area surrounds the links themselves the mainmenu section that we changed the background color on above surrounds the unordered list section.
.mainmenulinks {
border: solid 1px red;
}
Notice that this time we did not use the # symbol and instead used a . in front of the name. This is because of the way that the section was defined in the HTML. Look at the example again and notice that the tag is set to <ul class=”mainmenulinks”>. When class is used instead of id you have to use a . to control the look instead of a #. In the example that I just showed you we actually killed 3 birds with one stone. We set the type of border, how many pixels we wanted the border to be as well as the color.
A few years ago instead of seeing border: solid 1px red; you may have seen something like:
border-color: red; border-style: solid; border-width: 1px;
The above example still achieves the same effect yet it produces 2 more lines of code that are in fact not needed.
This should give you a basic overview and a little bit of insight into changing the colors on your theme. There is a whole lot more that is going on when it comes to CSS yet I wanted to keep this as simple as possible and easy to understand.
If you have any questions related to the post or need some help with your CSS code, feel free to leave a comment below.
Feedback!
If you read this post and understood it great! Let me know in the comments below. If you are still having issues and can't get it figured out, you are more than welcome to leave a comment or send me an email using the contact form and I'll do what I can to help!