Customizing the Color Scheme of WordPress

There are several ways to customize a WordPress Theme just like there are several ways to slice a pizza. The two easiest ways to change the color scheme if you are hosting a WordPress site is to 1) Create a child theme 2) Use the Edit CSS feature available to those who activate Jetpack.

How Do I Create a Child Theme?

If you are interested in creating a WordPress Child Theme, the information at WordPress.com Codex will help. I created one previously based on the Twenty Twelve theme. After hours pouring over the Codex and multiple blog posts I can up with a fairly decent finished product. I even went so far as to create custom post types for my Portfolio section. The page you will want to focus on for changing the color scheme is the style.css file. You basically will be copying this file into your child theme and manipulating it as you wish. The child theme details will override the details of the parent theme.
Needless to say I found myself spending more time figuring out different details than I spent actually blogging. The Twenty Twelve theme was a little underwhelming for my taste so along with defining a color scheme I also created a personal header. However, the Twenty Thirteen theme is a dynamic base theme that displays across devices nicely and simply needs some color changes to personalize it. You can create a header if you desire, but keep in mind that it will not be as dynamic as the rest of the blog for displaying on mobile devices and smaller screens.
I say all of this not to scare you off from creating your own extensive child theme, but to provide some insight for those who are simply toying with the idea for their personal blog. If you have any questions about creating a child theme, feel free to comment here or send me a message on my Contact page.

What CSS Do I Edit?

Once you have decided if you will be creating a child theme, or simply using the Edit CSS feature, you will need to decide what color scheme you would like your blog to have. I have always been a fan of the color purple… ok maybe it is more of an obsession with the color purple… so my choice was easy. For those who are unsure what color they would like, a few websites might help. Color Scheme Designer 3 is a great way to quickly pick colors using the color wheel. Color Picker.com is fantastic on its own or with others. Not only can you pick your colors and have the hex code provided, but you can select several colors that you would like to use for your CSS.
So now that you can choose you colors and get a hex code, as well as have access to the CSS, you will need to define what colors to change in the CSS code. If you use the Google Chrome browser the Inspect Element feature will be a fantastic help in identifying which codes/colors will need changed. The most difficult and contrary thing to change was the arrow for pagination, which I was looking for in the footer but ended up finding it as .paging-navigation. The code is below. If you would like my full CSS, just send me a message and I will happily share. Good luck to you as you begin customizing your WordPress Twenty Thirteen theme!

.paging-navigation {
background-color: #79718F;
padding: 40px 0;
}
.navigation a {
color: #433E52;
}
.paging-navigation .meta-nav {
background-color: #BFAB9D;
border-radius: 50%;
color: #fff;
}
.paging-navigation a:hover .meta-nav {
background-color: #433E52;
text-decoration: none;
}