2 - Clickr CSS

The Clickr theme is almost complete, but needs a small amount of CSS to complete it...

Basic Design

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:

/* remove top padding from header */
.atb-title {
 padding-top: 0;
}

Then we need to set the background colour for the cells containing the breadcrumbs and search box:

/* grey table cells at top of page*/
.tdGrey {
 background-color: #f3f3f3;
 border-bottom: 1px dotted #ccc;
 padding: 2px 5px;
}

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:

/* 12px breadcrumbs */
.breadcrumbs, .breadcrumbs a {
 font-size: 12px;
}

And add some padding to the left of the page title to make sure it's not touching the space logo:

/* padding for page title */
.pgTitle {
 padding-left: 5px;
}

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:

/* footer top border */
.atb-footer {
 border-top: 1px dotted #ccc;
}

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:

/* remove list padding from footer links */
.atb-footer ul {
 padding-left: 17px;
}

Next, we set the font size of the links:

/* links in footer */
.atb-footer a {
 font-size: 11px;
}

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:

/* user name displayed directly below "Your Account" */
.atb-footer a.clUser {
 color: #000;
 text-decoration: none;
}

Finally, we add some styling to the attribution statement to make it look a little more Clickr-like:

/* powered by */
#poweredby {
 padding: 8px 0;
}
#poweredby, #poweredby a, #poweredby span, #poweredby div {
 font-size: 9px;
}

Context Sensitive Links

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:

<body class="atb-body layout-CLICKR  mode-view context-page" id="document">

There are several classes that will change depending on what the user is looking at:

layout- – this class defines which Layout ID is being used, which is useful if you want a master style sheet to apply different styles to it's child layouts.
mode- – this defines the "mode", for example "view" or "edit", within the current context...
context- – this defines the current "context" or "feature within Confluence" that's being viewed, eg. "pages" or "blogposts", etc.
action- – when specified, this shows the name of the internal Confluence action that's been called and is useful in cases where there isn't a defined mode or context.

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:

.context-space-administration .smAdmin {
 color: #9999ac;
 font-size: 11px;
 font-weight: bold;
}

So, when the <body> tag has a class of context-space-administration, we apply the styles to the link with class smAdmin.

We simply repeat this process for the other context-sensitive links as follows:

/* links at top of page */
.mode-view .cmView,
.mode-edit .cmEdit,
.mode-view-attachments .cmAttach,
.mode-view-information cmInfo,
.context-space-pages .smPages,
.context-space-labels .smLabels,
.context-space-attachments .smAttach,
.context-space-blogposts .smNews,
.context-space-activity .smActive,
.context-space-operations .smAdv,
.context-space-administration .smAdmin {
 color: #9999ac;
 font-size: 11px;
 font-weight: bold;
}

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.

Page tree

Basic Design

Context Sensitive Links

2 Comments

Unknown User (baaderst)

Unknown User (gfraser)