I’ve started a new concept in customizing theme colour styles by taking the Corporate 3 theme and letting the end-user make their own colour palette choices with the use of HEX Colours (HEX Colors)…the values that look like this: #585D61

NOTE: You will see me spell color as colour (which is the Canadian method) as some words are spelled differently here.

Getting Started with The Corporate 3 Colour Settings

When you log into your WordPress 3.0 admin area, you will see a few additional menu links on the APPEARANCE menu panel off to the left, and depending on the theme, this list may look different. However, for this particular theme, your options will look like this:

wp-background-colour

The Theme-Options is the custom theme control panel for the Corporate 3 and the Background and Header options are enabled from the theme to show up in this panel as well.

When you look at the theme options settings, you will find several fields, all with colour values in them by default which may look like #585D61 while others have different values. The example value I just mentioned is the default background for the “Breadcrumbs background” setting, giving it a darker grey colour.

theme-colour-settings

There are many others but for this particular one, if you added a different hex colour value to this setting and click SAVE, you will notice a new colour for your breadcrumbs navigation area has changed on the front-end of your site. What this does is puts your new colour in a pre-coded css group so when the page loads, it automatically puts that value into the appropriate location of the css.

This will be the same for all of the other colour values within the theme’s settings. Here is an outline of what things you can change with the Corporate 3 theme:

  • Web page background colour (or even a background image)
  • Showcase header background
  • For the Showcase 1 header group with three widgets on the side, each can be different
  • Page link colours (most if not all)
  • Breadcrumbs background colour

I will only talk about the theme’s own settings for this tutorial and leave the other settings for the next tutorials.

Getting a Colour HEX Value for Your Theme’s Settings

Right now, I do not have a colour picker tool next to the individual fields in the theme’s own settings control panel but will be working on this for the next theme release. In the mean time, you have the option to go to any online hex colour tool by searching Google, or perhaps you are an accomplished or experienced graphics person with an application to get this value, like from Photoshop…

You may notice though within the theme’s settings control panel, I have a link in bold pointing to the WordPress Background option on the APPEARANCE >> BACKGROUND panel. This gives you a built-in colour picker that you can use for any of the theme settings because it will give you the colour values as you explore the various shades of your choice – and you can see the colour above it change as you move your cursor around the colour wheel.

wp-background-colour-picker

Basically you choose the colour you like then copy the value showing inside the from field it displays. So for example, if you wanted to change the colour background for the “Breadcrumbs” area, you can take the value shown in the screenshot above “#2255c3” and copy/paste it into the Theme’s setting for the Breadcrumbs Background Colour.

IMPORTANT: Make sure when you copy and paste any colour values that you also keep the # symbol as well. We need this in the css when you click SAVE, the complete value with the # included will be required to make it work properly.

For all other theme settings for colours, you will be doing the exact same steps as above. This gives you a lot more control of what colours you want in your web site than having a predetermined set of colours by the original designer. As more themes are developed, this will get more sophisticated.

By |2010-09-25T01:57:08+00:00September 25th, 2010|Blog|