Basic Backgrounds

Recolouring a background is easy enough: put body{background-color:#ffffff;} in your stylesheet, with whatever colour you want in place of the #ffffff.

Background images work in a similar way: body{background-image:url(background-image.png);}, with the name of your background image in the parentheses. By default, the image will repeat – you can change this by adding the background-repeat declaration, for example:
body{
background-image:url(background-image.png);
background-repeat:no-repeat;
}

To move the image away from the centre, use the background-position declaration: body{background-position:left top;} will align the image to the top left corner. You can get pixel-specific if ‘left top’ isn’t accurate enough: background-position:20px 100px; will put the background image twenty pixels from the left and a hundred pixels from the top.

It’s usually a good idea to specify a background colour even if you’re using a background image. The background colour will show if the image has transparent sections or doesn’t repeat over the whole screen anyway, but even if the image covers the entire screen, a background colour will come in useful if there’s ever a problem which prevents the image from loading.

If your code’s starting to feel a bit long, you can combine the background declarations. body{background:#ffffff url(background-image.png) no-repeat left center;} works the same as body{background-color:#ffffff;background-image:url(background-image.png);background-repeat:no-repeat;background-position:left center;}, and is significantly faster to type.

You don’t need to save all your cool backgrounds for the overall body, either. They can be used for everything from major columns to a few selected words, just by changing the chosen selector. blockquote{background-image:url(quote.png);} or something similar is commonly used to add a quotation mark image to blockquotes. strong{background-color:#f0e9a7;} will add a bit of colour to your any bold words in your text.

For greater precision, use IDs or classes: p.tip{background-color:#f0e9a7;} will only change the background colour if you specially mark a paragraph with <p class=”tip”>.

More Background Tricks

Attachments: Usually a background image will move along with the rest of the page as users scroll through the content. Use background-attachment:fixed; to keep a background in one place.

Lists: Bullet lists are normally marked with, well, a bullet. And a rather plain and ordinary one at that. This can easily be replaced with a bullet-sized image. Remove the old bullets with ul{list-style:none;} and add in the new ones with ul li{background:url(bullet.png) left top no-repeat;}. Unless your bullet image is very thin, you should also include padding-left: in your ul or li attribute, set wide enough to indent your list properly so the text doesn’t overlap the bullet image.

Gradients: CSS-generated gradient backgrounds are supported by most modern browsers and are popular on many types of websites. The trick is getting the gradient to work on all browsers – while many browsers support CSS gradients, they don’t use the same code. Chrome uses a -webkit prefix, Firefox needs -moz-linear, and (current) IE uses -ms-linear. (Old versions of IE use some kind of mess which i will not even attempt to interpret.) It’s probably a bit of a cop-out to not include a proper description of creating CSS gradients, but they’re worthy of an entire article on their own. CSS Tricks has a solid article on CSS gradients, and gradient generators exist to create the code for all browsers at once.

Looking for some good background colours (or any other colour to spice up your website)? You don’t need to stick with boring black-and-white! I can create a great five-colour website colour scheme for you. For $5, you can have a unique new website colour scheme.

Related posts:

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

Colours:
Background: #78aa63
Header text: #2d2d29
Banner: #863540
Paragraphs: #c6d584 and #e2ddaa

I’m working on getting the hang of WP child themes – some day I’d like to be able to create entire themes on my own, but even once I can do those, child themes are a faster and easier way to recolour an entire site. So while right now this one’s just a sample, some day soon it may be available as a fast install for your WordPress blog.

Lime Garden striped iPod case by KeelanRosaColour

Thoughts?

There’s plenty of ways to make websites more accessible to people with disabilities, but some of the lists on how to do so are a bit overwhelming. I recommend everyone make their sites as accessible as possible, but if you’re not sure where to start, here’s a few simple things you can put into effect immediately.

1. Links – Make links clear and descriptive. People who use screen readers will often end up tabbing from one link to another, or getting all the links in one list. If you set up all your links as ‘click here to read a great article’, visually impaired users will hear a long list of ‘click here’ with no other reference to where your links go. Much better would be ‘click here to read a great article‘ – though if your links are styled properly, it should be obvious where the links are without something as redundant as ‘click here’, and you could drop it completely: ‘this is a great article‘.
2. Image descriptions – For best accessibility, every image should have some sort of description in its ‘alt’ tag (e.g. <img src="image.jpg" alt="image description" />). If for some reason or another an alt tag can’t be used, making sure all the important information in the picture is included in the accompanying text is a good substitute.
3. Audio transcripts – There’s a wide variety of reasons why a person might not be able to understand audio alone. It might not be possible to provide a full transcript of an hour-long seminar video, but it’s easy enough for shorter videos. This goes double if you’re working from a script or prepared statement and thus already have a written copy of everything spoken. If you can’t do a full transcript, try to at least post a useful summary.
4. Autoplay – For the love of all things holy, do not have audio or video play automatically.
   • It’s bad for visually-impaired people using text-to-speech screen-readers, because it interferes with the screen reader.
   • It’s bad for hearing-impaired people for a whole pile of reasons, but i’ll stick with the one i’m most familiar with: people with certain auditory processing disorders can hear more or less like anyone else if there’s no conflicting sounds. If we’re trying to listen to something else and music suddenly starts up, we have trouble understanding either sound. If you can’t even get song lyrics because the words and instruments interfere with each other too much, having a conversation when a video blog has just gone on autoplay is certainly impossible.
   • It’s bad for people with certain cognitive disorders who are highly sensitive to sudden, unexpected changes; imagine nails screeching on a chalkboard every time you hear something unexpected. Or, for the really loud and dramatic stuff, your speakers spontaneously combusting. Not going to be spending much longer on a website which has such effect, are you?
   • It’s also annoying for able-bodied/neurotypical people who like to actually control what their own computer is doing.
5. Colours – Changing colours is a quick way to change a web design, but it’s important to be sure the colours don’t ruin the site for colour-blind users. Don’t make colour the sole indicator of anything important – links, by default, are underlined as well as a different colour from the rest of the text, and the underline can be important to colour-blind users. It’s also important to be sure text and its background contrast well enough for a colour-blind user to read it. You don’t need to stick with black on white for everything, but high-contrast colours are much easier to read than colours which barely contrast at all.

Extra Web Accessibility Resources

A simple introduction to web accessibility – lists the four main types of disabilities which affect web browsing and how to help users work around them
Colour Contrast Check – allows you to check the contrast of two colours and be sure any text written with them will be legible
Wave – helps you check general accessibility

Looking for help in choosing a good, accessible colour scheme? You don’t need to stick with black-and-white to have easily-legible text! I can create a five-colour website colour scheme for you which will include colours which contrast perfectly. For $5, you can have a new website colour scheme in under 24 hours.

Thoughts?

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.

Thoughts?

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!

Thoughts?

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.

Related posts:

1. Changing a Website Colour Scheme, Part One: CSS Basics

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.

Thoughts?

The best way to create a rewarding experience for your site visitors is with a visually striking, useful, and easily navigable website. A variety of programs make it possible for anyone to create a site with limited experience and no programming knowledge, but to make the site truly great, there’s a few things you should keep in mind…

1. Know your objective in having an online presence. Do you want to sell a product, or just inform? Either way, your homepage must focus on what you are providing your audience. Design the site around your focus. Spice up the page with a picture or two and include a short introduction to explain what your site is about. Include helpful and relevant links, but avoid cluttering your site with useless links and banner ads, which can distract your audience from what you want them to do on your site and make you look less professional in the eyes of your visitors.

2. Be consistent. Some elements can and should change from page to page – for example, a sidebar showing new products would be useful on most pages but redundant on your sales page. Most elements, however, should stay as similar as possible. This is especially true of navigation – you want your visitors to know exactly where they are and how to get where they’re going, rather than getting frustrated with a menu which jumps all over the page. Have a unifying thematic design or motif for your website which carries across each page and keep your site elements consistent within this design.

3. Use, but don’t overuse, colour. Colour is important as it can elicit strong emotions from your visitors. Associating the colour with what you are selling or offering can also enhance the appeal of your site. Overusing colour and drowning your site in fifteen different hues, however, will make your site look disjointed and chaotic. Use as few colours as possible and let the focus of your site, like products or information, stand out from your colour scheme.

4. Keep your fonts legible. Common and persistent type fonts and sizes are also important in creating a unified design. Few things are as confusing to read as a page with several font types. Prudent design rules limit your fonts to one or two, one for the title and one for the body text. Stick to websafe fonts, which are more likely to appear the same across all your user’s computers. Font size is more flexible and can be varied amongst sub-headings and sidebars.

5. Make sure your site pages have reasonable file sizes for fast loading. Another part of creating a good experience for your site visitor comes in not making them wait for your site – whether it be the main page or subpages – to load. While broadband internet connection helps with speed, it’s still useful to make sure your site will load quickly for those using dial-up. It’s good for page rank, too: even Google monitors how fast your site loads against average loading times.

6. Find the time to refine the elements in your website before posting it. If you’re designing on your computer, confirm the appearance of your site before you even upload it to the webhost. If you’re designing in your site’s content manager (e.g., in WordPress), preview the design before you make it live.

Software can automate the design process, but a perfect website isn’t developed in a single day. Creating a quality site takes time, but with focus and effort, you can achieve exactly the design you want.

Want to take your website design to the next level? Check out ‘CSS Basics‘ for tips on using CSS to customise a website.

Thoughts?