Octagon Technology

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.