Tag: CSS

CSS Background Tips

If you don’t know any CSS at all, you might want to check out the CSS Cheat Sheet before reading further. Changing backgrounds is pretty basic, but a little extra understanding won’t hurt.

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.

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.

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.