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:

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:

Let's get started: 1 - Layout and Panel Content