[All Adaptavist Apps]

Page tree

This tutorial shows how to re-create the Clickr theme that's bundled with Confluence, using Theme Builder.

Preface

This tutorial assumes that you are already familiar with the basic functionality within Theme Builder 3.x such as creating and editing layouts using the Layout Manager. It also assumes that you understand wiki notation (especially the use of macros, links and images) and have a good understanding of CSS.

This theme design is based on the Clickr theme developed by Mike Cannon-Brookes, CEO of Atlassian. The Theme Builder version of the Clickr theme can be seen in our Flickr space.

We've tried to keep the tutorial as brief as possible - if there is anything you don't understand, please post a comment on the associated page and we'll describe the troublesome aspect in more detail.

Note: The "notationguide" link used in this layout requires Theme Builder 3.0 Beta 27 or above.

Topics Covered

This tutorial will be useful to you if you are want to:

  • change which panels are shown in the layout
  • customise the content of theme panels
    • rearrange navigation elements
    • highlight navigation elements based on current location within the wiki

This theme design does not use any graphical assets and can therefore easily be applied to your wiki.

Contents

The theme customisation was achieved as follows:

  • 1 - Clickr LayoutThe first task in our customisation was the layout - choosing which panels to show and configuring what appears inside them...
  • 2 - Clickr CSSThe Clickr theme is almost complete, but needs a small amount of CSS to complete it...
Let's get started: 1 - Clickr Layout

Download

(warning) Backup all of your existing theme configurations before installing

A theme backup of this theme can be downloaded here (right-click, save to disk then install via Backups tab).