Theme Builder

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

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:

• 1 - Layout and Panel Content — The first task in our customisation was the layout - choosing which panels to show and configuring what appears inside them...
• 2 - Menu Customisation — The menus are customised to make them easier to use and also allow space-level and user-level customisation...
• 3 - Tabs — The tabs are stored on a separate page within the space and then imported in to the left sidebar...
• 4 - CSS — Our theme is almost complete, but it looks ugly - style sheets to the rescue!