When it comes down to changing colours on a website, there’s only three declarations which affect colour: ‘background’, ‘color’, and ‘border’. ‘Background’ and ‘border’ are fairly self-explanatory; ‘color’ refers to changing the colour of text. These three attributes can be attached to almost any design element.
So which elements do they really need to be attached to in order to best utilise a custom website colour scheme?
Throughout this post, i’ll be using the default Twenty Eleven WordPress theme and the more elaborate Headway theme as examples. The general ideas apply to any site – WordPress or not – but for other designs, you’ll probably need to use something like Firebug to find out exactly which name each element has (unless your designer was very, very good about commenting their code).
1. Overall basic elements
For an immediately obvious change, start under the ‘body’ attribute. Changing ‘background’ here will change the background of the entire website, and ‘color’ will change the text sitewide. Links are a bit different, sorted under the ‘a’ tag, but can be changed with ‘color’ just like regular text. Links can also have borders and backgrounds, though usually they’re just underlined and a different colour than the regular text. Going overboard with decorating them can be a bit too distracting.
Depending on your site design, the overall website background and the ‘background’ your content goes over may be the same, or they may be entirely different. Many designs place all content in a large column, leaving the original background showing along the sides.
body{background:#ffffff; color:#000000;}
a{color:#0000ff;}
Twenty Eleven content background: #page{background:#ffffff;}
Headway content background: div.wrapper{background:#ffffff;}
2. Headers
In website design, ‘header’ can mean two different things: overall site header and the header tags which alter text headers in content. The overall site header is a more important design element, but sometimes changing the header tags will help change it. Many website designs use ‘h1’, ‘h2’, or similar header tags for the site name and tagline. These tags are often used in places besides the header design, for example the title of a blog post or an attention-grabbing announcement on the front page. It’s still a good idea to check the exact tags used in your header, though, as some websites will use a special paragraph class instead of h1, or use a separate h1 class for the header than the rest of the content.
Another obvious header change is not in the h1 tags, but in the header background. You can easily add an image to the header with background:url('image.png');, but if you don’t have a header image – or if the image has a transparent background or isn’t large enough to stretch across the entire top of your site – using a colour will work just as well. You can also edit the header element to add a border all around the header – or just use ‘border-bottom’ to add a border to the bottom edge, neatly separating your header from your main content.
You may also want to change the ‘a’ attribute in your header element. It’s common for the site name in the header to be a link, leading back to the site’s home page, and changing the ‘a’ attribute allows you to control what colour the header link is.
Twenty Eleven
Overall header: #branding{background:#ffffff; border-top:2px solid #cccccc;}
Header text: #site-title a{color:#0000ff;}
Tagline text: #site-description{color:#333333;}
Headway
Overall header and tagline text: .block-type-header{background:#ffffff; color:#333333; border-bottom:2px solid #cccccc;}
Header text: .block-type-header span.banner a{color:#333333;}
3. Footers, sidebars, and other extra content
Footers and sidebars tend to be a little less dramatic in appearance than headers. Content is the main point of a site, and headers grab a bit of attention; footers and sidebars are what comes after everything else. Some designs leave the background of the footer and sidebar the same colour as the content, leaving only natural column breaks to separate them. Text in these areas may also be slightly lighter or otherwise blend in more than in the main content area.
In many designs, sidebar areas are ‘fluid’, meaning their height changes to fit the amount of content they contain. This can cause problems for changing backgrounds, as the main site content is also fluid, and usually taller than the sidebar. Just changing ‘background’ in a sidebar thus results in an odd block of colour which runs out before it hits the bottom of the page. It varies by design, though – Thesis, for example, has full-height sidebars – so experiment a bit to see what looks best.
Twenty Eleven
Footer: #supplementary, #site-generator{background:#ffffff; color:#3333333; border-top:2px solid #cccccc;}
Sidebar: #secondary{color:#333333;}
Headway
Footer: .block-type-footer{background:#ffffff; color:#333333; border-top:2px solid #cccccc;}
Sidebar: .block-type-widget-area{color:#333333;}
Headway’s incredibly flexible when it comes to what kind of content goes where, so you might have something besides a widget area for your sidebar. If you’re having trouble getting the sidebar (and only the sidebar) to change, try adding a custom class to the block you’re using for your sidebar in the visual editor.
4. Menu
Menus consist primarily of links over a background, but they can be much more stylish with a little effort. Hover effects can change the background as well as the link, which tends to look overdone on other links but is an interesting effect on menus. The currently-active link can also be emphasised, which makes it easier to show users exactly where they are – useful if your page title isn’t clearly visible elsewhere on the page.
Twenty Eleven
#access {background:#ffffff; border-bottom:2px solid #cccccc;}
#access a {color:#000000;}
#access a:hover {background:#cccccc; color:#333333;}
#access .current_page_item a {background:#cccccc; color:#333333;}
Headway
.block-type-navigation {background:#ffffff; border-bottom:2px solid #cccccc;}
.block-type-navigation a {color:#000000;}
.block-type-navigation a:hover {background:#cccccc; color:#333333;}
.block-type-navigation .current_page_item a {background:#cccccc; color:#333333;}
5. Quotes
Not every site makes heavy use of quotes, but for the ones which do, they’re an important design element. Quotes can be quite lengthy, so making sure the background and text contrast as well as the main background and text is important.
A popular addition to quote backgrounds is an image of a quotation mark, added in using background:url(image.png) no-repeat top left;. Quotes often have decorative borders as well, which further separates them from other text. ‘border-left’ is especially common as a design element.
blockquote, q {background:#cccccc; border-left:2px solid #999999; color:#000033;}
6. Custom features
Once you can handle changing the colours in pre-existing CSS, you’ll almost certainly want to make your site stand out even more with some little extras.
This paragraph, for example, uses a custom p.tip class. It’s styled similarly to a blockquote – i could easily just style ‘blockquote’ like this and use it instead, but having a custom paragraph style is good for keeping them separate in case i ever need to separate them.
Custom classes and IDs can be used for almost anything you want to stand out. Sites which frequently feature guest writers will use custom paragraphs to separate the writer’s bio from their article. ‘h1.shop’ can be styled differently from ‘h1.home’. Particularly important links can be made brighter and bolder than links which are just added for a bit of extra information. Instruction-type sites have special div sections for contents and lists of materials as well as customised paragraphs to better bring users’ attention to warnings or tips.
You’re on your own on this one! Check out ‘CSS Basics’ for some inspiration and tips on how to develop custom features to maximise the individuality of your design.