You can see the results of my CSS code for changing colours, as I am now using the WordPress Twenty Twelve theme for this blog
This article is sponsored by Octagon Technology
Changing Colours
I have been using the WordPress Twenty Eleven theme for my blog – but I really wanted to change to the WordPress Twenty Twelve theme, which is designed to be responsive so it looks good on whatever device it is viewed on without using extra plugins. I did not change though as I have been changing colours in Twenty Eleven using the theme extension plugin and this facility was not available with the Twenty Twelve – so I decided to wait for someone to create a plugin for changing colours in the theme..
However the plugin has not appeared, so this week I decided to get to grips with the CSS and fix the theme myself.
I was in the office (again) today so I finished the job and posted the CSS to help others – a one stop shop for changing colours in the Twenty Twelve Theme.
The first thing you need to do is create a child theme – see the WordPress instructions here. The instructions also explain why this is a good idea rather than altering the main code.
Once you have an empty style.css file, paste the following code into it.
/*
Theme Name: Twentytwelve Child colour fixed
Description: Child theme for the twentytwelve theme – this child theme can be edited to change the theme to corporate colours
Author: CSC
Template: twentytwelve
*/
@import url(“../twentytwelve/style.css”);
/*change the colour of the post headings*/
body.custom-font-enabled {
font-family: “Open Sans”, Helvetica, Arial, sans-serif;}
a {
outline: none;
color: #688902;}
a:hover {
color: #E3F712;}
/*change the colour of the post entry title*/
.entry-title {
color: #688902;}
/*change the colour reply, category and tag links in posts*/
.comments-link a,
.entry-meta a {
color: #688902;}
.comments-link a:hover,
.entry-meta a:hover {
color: #E3F712;}
/*change the colour of the tag cloud*/
.widget-area .widget
a {
color: #688902;}
/* change the colour Small headers*/
.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th {
color: #688902;}
/*change the colour of the widget hover*/
.widget-area .widget a:hover {
color: #E3F712 !important;}
I created this file from multiple Google searches and using a Portable Apps copy of Firefox with the FireBug add in, to inspect the elements on the page that I wanted to change.
To create your own colour scheme change the colour codes.
The code may not be very neat, but it works, giving my site the overall “green” look it needed as part of the sponsorship for the site I get from Octagon Technology. I hope this file helps you with changing colours on your web site.
You can download the style sheet used on the Octagon Technology WordPress site, which is very similar to the one listed above, except the main heading font is larger – here.
Pingback: Clive's Blog - WordPress Twenty Twelve - Octagon Technology Ltd
Thank you so much for posting this! I know enough CSS to do some basic changes to the Twenty-Twelve theme, but it would have taken me many more hours (and a lot more frustration) to search this out on my own.
Still fidgeting with the overall colour scheme on my site, but it’s a much smoother process now. Thanks again for taking the time to post the code : )
Thank you! I’m brand new to WP but have had amazing luck finding everything I need in the support forums except for the simplest thing of all, text color. I won’t whine about the hours since it sounds like your experience was similar. I have html and css experience so I was amazed at the difficulty I had getting this done. This code was fantastic, worked right the first time and the only regret is I didn’t look outside of the forums sooner. Thanks again for your effort and willingness to share what seems to be some kind of WP trade secret.
Here’s some code to thank you.
Hides that HTML, etc. tag list by the comment field boxes.
.form-allowed-tags {
display: none;
}
Enjoy!