Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (gfraser), last modified by Unknown User (gwilson) on Dec 22, 2011

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!
Let's get started: 1 - Layout and Panel Content

5 Comments

  1. Unknown User (shrike)

    Hi,
    Is there any chance we'll see updated tutorial for the curent version of the site?

  2. Unknown User (wwilkinson)

    Hello,

    I was wondering the same thing. It would be very helpful if this was available. Thanks.

  3. Unknown User (kelalaili)

    Hello,

    I am trying to customize our enterprise wiki to give it a nicer look and feel and I agree with Wayne and shrike, an updated tutorial would be great and very helpful.

    Thank you,

    Karim

  4. Unknown User (erush)

    Hi Guys,

    If you need to get up to speed quickly with Theme Builder we do offer the option of Theme Builder training.

    The details are available on the Theme Builder training page in the Training Space.

    The webinars are held at a time that's convenient to you.

    If that would be of interest, please create a ticket in our issue tracker or add your question and details to our contact page.

    Cheers.

  5. Unknown User (kelalaili)

    Hello again,

    I have already familiarized myslef with the Theme Builder Plugin, which I might add is pretty awesome and easy to understand.

    I was more interested with certain aspects of your theme implementation and specific questions :

    1. How did you add the arrow dislpayed under the current Space/SubSpace in the navigation and menu bar on your website ?
    2. How can I completely hide a section (Sidebar, Menubar, etc.) in context (edit, space details, etc.) ? I can hide the content of the section but I still get an empty space the width of the sidebar whereas I'd like it to have a width of 0px.
    3. Is it possible to change the arrow displayed on a drop-down menu ? (menuicon:navigate_close macro)
    4. When I search the site using the search box (search-box macro), the results are displayed using the basic Confluence layout. How do I set it to the custom layout created with Theme Builder ?

    Thank you for the support,

    Karim