[All Adaptavist Apps]

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Note

This tutorial replates to version 4 of our website - we've since re-designed the site so this tutorial is out of date.

Excerpt

This tutorial shows how we customised our website, including the tabs down the side and the fancy page borders, etc.

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 uses several elements from our Community Bubbles plugin. We've indicated which elements require the plugin ("My" and "Home" menus, right sidebar) and provided alternatives in case you don't have it installed.

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.

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
    • toggle the display of panel content based on context
  • customise the content of menus
    • show and hide menus based on user credentials
    • allow users to customise a menu
    • right-align menu items
  • enable space-level alterations to the theme design and navigation
  • create tabs on the side of a page
  • wrap your page in a graphical broder, which resizes automatically to the page size
  • customise headings, links and macro styles

We've provided all the graphical assets used by our theme so you can recreate our exact theme (with the exception of our company logo!) on your own wiki.

Contents

Excluding some basic graphic design, our theme customisation was achieved in four stages:

Children Display
excerpttrue
Align
alignright
Let's get started: 1 - Layout and Panel Content