Adding a logo to your Igloo community is easy, but often you'll want to customize the template so its colours match your brand, giving people a smoother experience and a more consistent look and feel. We'll jump straight into it today, though you can find more information on the basics of CSS and how to use it in Igloo in the first article of this series. 

Colour

Colour in CSS can be chosen in a few different ways. The most common two are to select a colour by name, like blue or black, and let your browser use the associated colour. For more control, you can specify a hex code, like #ffff00. This will always have six characters, plus the # at the beginning, and can be used to set a wide range of colours. You can find more information an exercises on colour values in CSS here, in the W3C references.

Use Cases

Setting link colour

Links are marked with an <a> tag, and have four different states: regular, active, visited, and hover. You can change the colours of all four link types everywhere in your community using the following code: 

a {color: blue;}
a:active {color: red;}
a:hover {color: yellow;}
a:visited {color: pink;}

This will change all of the links in the community. You can narrow that selection by targeting particular classes and ids, changing the link colours on a single Page, or giving a Space separate branding. 

Navigation colour

Equipped with that knowledge, changing the colour of the navigation bar is easy. The main navigation always has an id of #primarynav and the secondary navigation, found in Spaces or on Pages, has an id of #systemnav. The background-color property controls the colour of these areas, rather than the color property used above. Knowing that, the following code can change them both to pink. 

#primarynav, #systemnav {
    background-color: pink;
}

The comma separating the two ids tells the code to target each of them, so you won't need two separate entries in the file. 

Backgrounds

The background-color property can change the background of anything in your community. Widgets, Pages, Channels, etc. But in additional to using colours, it can also pull images from a url, like this: 

body {
    background-color: url("flowers.png");
}

To use images from inside your community, choose an image, right-click on the download link, copy the url, and reference it in the quotation marks where Flowers is above. Remember, images are controlled by Access, so you'll need to make sure people have Read access to that picture. 

For more information about the specific functions outlined here, you can ask a question in the Community area, or ask Igloo staff directly in the weekly webinar.