Our theme is almost complete, but it looks ugly - style sheets to the rescue!
Confluence and Theme Builder combined will by default make most content look quite nice. However, there are several things we wanted to further customise:
The entire style sheet was added to the "Custom CSS" setting on the CSS Tab. We decided to allow some minor discrepancies between browsers so we didn't use any Internet Explorer specific CSS or hacks.
Our page design requires the use of several graphics - you can see the actual graphics used by our theme on the Theme Images page. The URL's used for background images shown in the CSS below are just the links to these images taken from the attachments screen of the Theme Images page (by right-clicking and choosing "Copy Shortcut" or "Copy link location" depending on which browser you're using).
To wrap our pages in these graphics requires an understanding of the HTML output by Theme Builder - luckily we've got a page that describes it quite well: HTML Structure - you might want to open this in a new window/tab so you can refer to it for the remainder of this tutorial.
The outer page is wrapped in graphical borders to give a drop-shadow effect and the subtle gradient effect behind the header panel.
First we set the width and two margins of the "atb-shell" element so there's some space around our page. We also define the left border image and the overall background colour for the transparent panels that we defined in 1 - Layout and Panel Content:
Because the atb-shell element is the outermost element we're going to customise in our style sheet, all the other elements discussed later in this tutorial appear "above" it as far as the browser is concerned, allowing us to display the rounded corner images over the left border image.
NB: It's not the order in which the various blocks of CSS are output that cause this effect - it's the structure of the HTML.
Now we add the right border:
And then the subtle gradient background that appears behind our header panel:
We can't add that background to the .atb-header element because it would appear in front of the rounded corners at the top of the page.
Speaking of which:
Next, we add the bottom border:
And then the rounded corners at the bottom:
We've added some padding to the bottom of the footer panel to make sure the text shown in the panel doesn't overlap the bottom border.
We also need to add some padding (7px on the right, 5px on the left) to the lower portion of the page which contains the sidebars and everything between them for the same reason:
We then add some padding to our menu and navigation panels (5px on the left and right), again so it's content doesn't overlap the border graphics:
Because we're using the default menu design, we also need to change the menu background and border colour:
You may have noticed that our header graphics actually include a border line, but we've set our header panel height (back in 1 - Layout and Panel Content) so it doesn't get shown. Instead the border set via CSS on the top of the menu bar is shown. We've taken this seemingly strange approach so that when the menu panel is shown (ie. our optional site message banner) it has both a border at the top (from the theme graphics) and a border at the bottom (from the menu bar).
All of the outer borders are now complete and we could have probably stopped at this point, however we wanted to have a border around the tabs and page content.
The following style creates the grey border that appears between the menu bar and the rest of the page:
Getting the border to appear on the left sidebar is more tricky because we need the tab images to appear on top of it. To get round this problem we made a 1 pixel background image and applied it to the sidebar:
To allow our tabs to appear flush with the side of the left sidebar we also had to remove the default padding on the right hand side of it.
At this point it's also worth removing the padding from the top of the right sidebar so that the widgets in our portal are top-aligned with the main page content:
Ok, now back to our inner borders, this time the rightmost border:
You might be wondering why we didn't just add that border to the left side of the right slider bar... We wanted to have a very subtle 3D effect by having an adjacent white border:
This gives the very subtle appearance of the page being "inset" in to the surrounding grey borders.
Next, we need to do the bottom border:
Now we've almost finished our inner border, it's time to turn our attention to the tabs.
The first thing we want to do is hide the little black arrow image that appears in the left slider bar. Although the slider will still be active (try clicking it - it'll hide the tabs!), visually we only want it to depict the colour of the selected tab so the arrow image has to be removed:
It's important to note that we've hidden it using "visibility" - this forces the browser to still render the image, ensuring that the slider bar doesn't disappear due to having no content.
We now need to make un-selected tabs look separate from the slider bar. Because the tabs appear over the inner border (which you'll remember we added using a 1 pixel background image) we need to add a real border - to the tab images:
By placing the border all the way around the tab images we also complete the last part of our inner border.
For Firefox users, we also add rounded corners to the tab border to make them look a little nicer and then add a margin to the bottom to space the tabs vertically.
But what about the selected tab? It needs to join up with the left slider bar to make it look "selected". Thanks to the "stab" class we added back on page 3 - Tabs, this is fairly trivial - we simply remove the right border:
You'll notice that we also remove the right border when the mouse hovers over a tab and when it's been clicked (active).
We next decided to improve the styling of our header panel content, starting with the links:
Next, we customised the space title:
And then the breadcrumb trail:
Because our menu is using the default design, we wanted to remove the background image when the mouse hovers over items on the menu bar and instead using a dark background and white text:
The default menu CSS also added too much spacing either side of our icon-only links on the right side of the menu, so we added the following:
We also felt that the separators on the menu bar were a bit "chunky" for our liking and decided to customise those as well:
To make it more obvious which items on the menu bar would take you to another page when clicked, we decided to set a the mouse cursor to "pointer" when you hover over them (hover over "Home", which will take you to the home page, and "View", which won't go anywhere, to see the effect on the cursor):
Note: We've not restricted the style above to the .atb-navigation panel as we want it to take effect on all menus, regardless of where they may appear.
When content appears in the footnote panel, it can sometimes look as if it's part of the main page content. To get round this issue, we added a
div with class of "line" back in 1 - Layout and Panel Content and apply a dotted border and some padding to the top of that
Because we're also displaying our own "Powered By" line (a requirement of the Atlassian Confluence and Adaptavist Theme Builder EULA) we can also hide the standard "powered by" message that appears at the very bottom of the page:
After completing the overall page design, we then decided to customise certain elements of the content as well...
We used custom fonts and sizes for our headings (including those within blog posts):
We also wanted to customise links and items in the page tree ("Navigator" widget in the right sidebar):
We use the expand macro all over our site and wanted to make it far more obvious that the title can be clicked to show the content:
We also use the code macro extensively (as you can see from all the blocks of CSS on this page!) so we wanted to make it's output look a lot nicer:
We're using portals and widgets on home pages and in sidebars - all prominent places - so they also need some CSS attention:
And that's it. You're looking at the results!