Adaptavist Website Theme

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 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.

In addition, our theme design uses several elements from our Community Bubbles plugin which is sold separately. However, these elements are optional and can be removed or replaced without affecting the overall design. If you don't have the Community Bubbles plugin installed and replicate our theme design without modification, you will likely see macro errors appearing in the "My" and "Home" menus as well as the right sidebar.

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: