Author: Keelan

6 Elements to Change when Customising Your Website

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.

Colour Schemes

Frost

Colour schemes based on or inspired by the poetry of Robert Frost

A Dust of Snow

 
#2B3240
#CCC9C8
#F0F9FF
#332028
#EFE7DC

Freedom of the Moon

 
#001926
#F6FFBF
#FFFFEE
#240009
#B4948A

Pan With Us

 
#231919
#CECEDA
#BFBFDF
#1D251A
#F4E196

Snowy Evening

 
#370C0D
#7691AA
#C8D2DF
#380303
#EBE7B3

Eight Free WordPress Themes with Customisable Colour Schemes

So you know how to customise a website colour scheme, but maybe there’s still the issue of what design to start off with. Or maybe you’d like something you can change a little faster: tinkering with website CSS is all well and good, but you want your site up today, and it’s faster to switch up some built-in options than it is to figure out the custom CSS.

There’s WordPress themes with no options whatsoever, which need to be customised entirely through CSS, but fortunately there’s also a good many with built-in options. Some only give the options of a few pre-built themes, others are fully customisable. Some (like Suffusion) have both: pre-built themes which can then be further customised. A few even have a built-in CSS section, which gives you a place to customise CSS beyond the standard WordPress theme editor.

Here’s some samples of some easily-customisable WordPress themes, both as they look by default and how they look with their most basic customisations:

  1. Basic Simplicity – Most, though not quite all, colours are customisable, and there’s a custom CSS section in the settings page. The header doesn’t have a built-in upload feature like most themes with customisable headers do, but it’s still pretty easy to change.
  2. Blaskan – As far as colours go, only the background and header can be easily customised, but it’s still a good-looking theme.
  3. Blogolife – Six different colour themes to change the ribbon-like elements, and the header image and background are fully customisable.
  4. Graphene – Tons of options on this one, and not just in appearance. Pretty much every individual element can be customised. There’s also a built-in section for custom CSS.
  5. Mantra – Not every element is customisable, but a good many are, and there’s a custom CSS section to cover the rest.
  6. Suffusion – Includes over twenty prebuilt colour themes which are fully customisable, so you can ditch the default look right off and still have the ability to do a bit of tinkering.
  7. Twenty Eleven – This is currently the default WordPress theme, and while it’s not as highly customisable as some others, it’s the theme you’re guaranteed to have installed if you don’t want to bother uploading anything new. You can choose between a light (black text on white background) or dark (white on black) basic scheme and further customise links, page background, header image, and header text colour.
  8. WP Creativix – Doesn’t include much colour customisation beyond background and header/link text, but it does include a slider and some other nice design features.

Have you tried any of these themes? Know of another customisable WordPress theme which is even better? Leave a comment letting us know all about it!

Changing a Website Colour Scheme, Part Two: CSS Cheat Sheet

This is Part Two of the ‘Changing a Website Colour Scheme’ series. Still need to read Part One? Go to Changing a Website Colour Scheme: CSS Basics and learn everything you need to use this cheat sheet.

Basic Colour Options

There’s three main ways to declare colour in CSS: hex, RGB, and colour name.

Hex is most common among web designers. A hex code breaks a colour down into a six-figure code, ranging from #000000 (pure black) to #ffffff (pure white). Hex colours are declared by putting something like ‘color:#ff0000;’ in the appropriate place in your CSS.

RGB produces the same colours as hex; in fact, hex is a form of RGB itself. The first two digits in a hex code are red, the second two green, and the last two blue. Hex, however, uses letters as well as numbers, whereas RGB only uses numbers: pure black RGB will be 0,0,0 and pure white will be 255,255,255. This makes RGB codes a bit longer and less efficient to type out, but if you’ve found a colour listed only in RGB and don’t want to convert it to hex, RGB can be useful. RGB is declared with ‘color:rgb(255,0,0);’

Want to make something transparent? Change your declaration to ‘rgba(255,0,0,0.5);’. The last number is for alpha transparency, and can vary from 0.0 (completely transparent) to 1.0 (completely opaque).

Colour names are more limited than hex and RGB – hex or RGB can produce over 16 million different colours, but there’s only 147 different colour names which will work in CSS. Still, 147 is plenty of colour, and it’s much easier to remember ‘color:SeaGreen;’ than ‘color:#2e8b57;’. If you want precise control over your colours, hex or RGB is better, but if you just want a generic navy blue, names will work just fine. W3Schools has a list of colour names supported by all browsers to help you out.

Declarations Used to Change Colour

Background or background-color: will change the colour of the background. This doesn’t need to be used just for the overall background; ‘background’ can also be used to change the colour of a single element, such as a sidebar, navigation menu, paragraph, or link.

Color: despite the rather generic name, ‘color’ only changes the colour of text. It can be used in the body{ selector to change text throughout an entire webpage, or used in other selectors to change the text colour in a single element.

Border: puts a border around an element. You’ll also want to list size and type of border, for example ‘border:2px solid #ff0000;’. Borders can also be dotted or dashed, and you can make different borders on each side of an element by using ‘border-top’, ‘border-right’, ‘border-bottom’, and ‘border-left’ in place of ‘border’.

If you’re using borders on paragraphs or other text-heavy elements, you may also want to use the ‘padding’ declaration to give the text a little extra room (e.g. ‘padding:2px;’). Otherwise the text at the edges might bump up against the border and be difficult to read.

Sample Selectors & Declarations

body {background:#ccccff; color:#000033;} – changes the background of the overall site and all the main text
a {background:#cccccc; color:#333333;} – turns links dark grey and places them over a light grey background
p.alert {background:#ffffcc; color:#330000; border:2px solid #330000; padding:2px;} – for any paragraphs classed ‘alert’, changes the background to yellow and the text to red, and surrounds the alert with a red border
p.tip {background-color:#F0E9A7; padding:6px;}
p.tip strong {color:#07608E;}
This is what i use for my little yellow ‘tip’ paragraphs (like the one below, pointing you to Part One of this series). Without any extra styling, the HTML element <strong> only makes text bold, but it can be styled separately for different paragraph classes. In my ‘tip’ paragraphs, i’ve changed <strong> to a different colour from the rest of the text in order to make it stand out even more.

This is Part Two of the ‘Changing a Website Colour Scheme’ series. Still need to read Part One? Go to Changing a Website Colour Scheme: CSS Basics and learn everything you need to use this cheat sheet.

Changing a Website Colour Scheme, Part One: CSS Basics

The best way to change an entire website’s colour scheme is by using CSS. For those who are unfamiliar with it, CSS (or Cascading Style Sheet) is a method of consistently styling websites. A cascading style sheet can be saved as a separate file (usually style.css or something similar) and then linked to in the code of a website, meaning the same style sheet can be used for multiple web pages, or even multiple sites. Making a change in a style sheet which is used across a website will then change the entire website. Especially for large sites, it’s much more convenient to use one style sheet than to change every single page individually.

Selectors, IDs, Classes (and other things you don’t care about)

If you’re only recolouring a pre-existing site, you don’t need to know much about selectors, IDs, and classes. Use a tool like Firebug to find what you want to edit; it’ll show exactly what selector you need to change, as well as any relevant IDs and classes.

Firebug can help you find your CSS selectors - just click the 'inspect' button and then mouse over what you want to change. The name of the element will instantly be highlighted, showing you what you need to change in your CSS.

Basically, a selector is something which can be changed using CSS, such as a paragraph, heading, or blockquote. Some selectors also have a class – for example, if you need a specially-styled paragraph for important announcements, you might create an ‘announcement’ class, and every paragraph classed as an announcement would look like your ‘announcement’ class, rather than a regular paragraph. IDs are similar to classes but more specific, usually used for something which will only appear once on a page, such as the main header.

Declarations (the bit you do care about)

Declarations are the changes you’re making to your selectors – the declaration of what you’re changing.

Example:

blockquote {background-color:#fe09a7;}

Here, ‘blockquote’ is the selector and ‘background-color’ is the declaration – basically, we’re declaring an intent to change the background colour of every blockquote on the site.

External Style Sheets

There’s several ways to put CSS in a website, but using an external style sheet is the most convenient for making sitewide changes. An external style sheet is a file consisting entirely of CSS selectors and declarations, and is linked to in pages by putting <link rel=”stylesheet” type=”text/css” href=”yourstylesheet.css” > between the <head> tags at the top of your site.

If you’re recolouring an existing site, all the work of creating and linking an external style sheet is already done. Just find your old style sheet – it will end in .css and will probably be named something like style.css. Save a backup copy so you can revert if necessary and edit away.

Advanced tip: once you know how to create external style sheets, you know everything you need to start making WordPress child themes. Child themes allow you to customise a WordPress theme without worrying about losing your customisations if the theme is changed or updated. Creating a child theme is as simple as adding a special header to a CSS file and uploading it to your site as a theme.

And now, a confession: I am maybe a bit too much of a CSS geek to be writing this sort of thing. I’m quite certain there’s one or two (or ten) things i skimmed over as ‘too obvious’ which aren’t obvious to everyone else. So what can i do to make this ‘basic’ article clearer to you?

Still deciding where to start? Check out Changing a Website Colour Scheme, Part Two: CSS Cheat Sheet now for a colour-centric list of CSS selectors and declarations.

Frost

A work-in-progress theme, (currently) based on the Robert Frost poem, ‘A Dust of Snow’. This is just some sample babbling so it’s not completely empty.

A Dust of Snow

The way a crow
Shook down on me
The dust of snow
From a hemlock tree

Has given my heart
A change of mood
And saved some part
Of a day i had rued

– Robert Frost

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.