The Clickr theme is almost complete, but needs a small amount of CSS to complete it...
The Clickr theme doesn't have many design elements so only a small amount of CSS was required as follows...
First, we need to remove the default padding at the top of the Title panel:
Then we need to set the background colour for the cells containing the breadcrumbs and search box:
You'll notice that we've also set a bottom border and some padding on these cells, just to make them look more similar to the actual Clickr theme.
We then set the font size of the breadcrumb trail:
And add some padding to the left of the page title to make sure it's not touching the space logo:
That's all the basic design that's needed for the top of the page. Now we move on to the footer section...
First, we add a border to the top of the wide grey Footer panel:
Because we've used an unordered list for the links in this panel, there's an unwanted padding on the left side of the bullet points which is removed as follows:
Next, we set the font size of the links:
In the Clickr theme, the user's name is shown directly below the "Your Account" heading. The easiest way to display the user's name is to link to their profile, however this would make their name look like a normal link.
To make the user's name look like normal text, we apply the following style:
Finally, we add some styling to the attribution statement to make it look a little more Clickr-like:
You'll remember from the first page of this tutorial that we added classes to lots of the links in the Title and Footer panels - it's now time to make use of them.
As users browse through your wiki, additional classes are automatically assigned to the HTML <body> tag. For example, if you're looking at a page you'll see something like:
There are several classes that will change depending on what the user is looking at:
We can use the mode or context classes in conjunction with the classes that we've added to links in order to style specific links according to the mode or context being viewed.
For example, if we wanted to change teh colour, font size and weight of the Space Administration link (which has
class=smAdmin) when we're looking at pages in the Space Administration section (which is a context of "space-administration" resulting in a <body> class of
context-space-administration), we can do the following:
So, when the <body> tag has a class of
context-space-administration, we apply the styles to the link with class
We simply repeat this process for the other context-sensitive links as follows:
And that's it, we have a Clickr theme created using Theme Builder.
The theme customisation took about 3 hours to develop and test, then 2 hours to document. Unlike the Clickr theme that's bundled with Confluence, this version is a completely editable layout so you can further customise it to your needs.