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

Panel Selection

Using the buttons at the top of the [Layout Tab] we enabled the following panels within the theme...

• Header - the logos, space title and breadcrumbs appear here
• Menu - the menu bar appears here
• Left Sidebar - this is where tabs appear, if present
• Left Slider - this is used to display a coloured bar down the side of the tabs
• Right Sidebar - used to display various widgets such as Navigator and Related Communities
• Right Slider - used to hide the right sidebar
• Title - the page title, sometimes links and labels
• Footnote - used to display comments, etc.
• Footer - copyright statement, etc.

After selecting the desired panels, we set the background colour on most of them to "transparent" - the notable exceptions being:

• The Document panel background colour was set to #f3f4f3 (a light grey colour)
• The Title, Content and Footnotes panels background colour was set to #fff (white)
• The Left Slider background colour was set to #e0e0e0 (a medium grey) - this is the colour that appears by default when no tab is selected

Panel Content

The next step was to get some customised content in to the panels as follows...

Header Panel

We used table macros from the Content Formatting Plugin to arrange the content and then used various Theme Builder macros to display the space logo, space title, breadcrumb trail and linked the various elements with the menulink macro.

{table:cellspacing=0|cellpadding=0|width=97%|height=83|align=center}
 {tr}
  {td:valign=middle|width=55}
   {menulink:home}{builder-logo:global=false}{menulink}
  {td}
  {td:valign=middle}
   {menulink:home|class=space-title}{builder-spacetitle}{menulink}
   {div:class=breadcrumbs}{builder-breadcrumbs}{div}
  {td}
  {td:valign=middle|align=right|width=260}
   {menulink:dashboard|class=site-logo}!Builder:Theme Images^adaptavist-light-small.png!{menulink}
  {td}
 {tr}
{table}

Note: We decided to store the main Adaptavist logo as an attachment on a page rather than setting it as the global logo as we still have some internal areas of our site using the old global logo.

Menu panel

We decided to customise our menu in several ways:

• extra features shown to logged-in users - eg. the "My" menu
• include some functionality from our Community Bubbles plugin (eg. social networking)
• allow users to customise their "Home" menu (they can add their favourite spaces to it)
• ability to include space-specific menu items
• simplified View menu
• admin-only Edit menu
• static Contact menu
• icons on the right side of the menu

The menu notation is quite involved and as such we will discuss it on the next page, 2 - Menu Customisation.

Left Sidebar

The left sidebar is where we display tabs, if applicable to the space being viewed. To do this we used the following notation:

{builder-show:page=Tabs}{builder-hide:title=Tabs}{import:Tabs}{builder-hide}{builder-show}

Some spaces don't require tabs and those that do often have space-specific tabs. As such we decided to simply import a page called "Tabs" (if found) allowing complete customisation of the sidebar on a space-by-space basis.

The actual content of the Tabs page will be discussed later in the tutorial, in topic 3 - Tabs.

Right Sidebar

There are a wide variety of things that we want to display in the right sidebar and the list will grow and change over time. Again, we wanted the sidebar to be customisable on a space-by-space basis so we used another feature from our Community Bubbles plugin: Portals:

{portal:RIGHT-SIDEBAR}

This tiny bit of wiki notation is all it takes to display configurable widgets in the right sidebar. On a space by space basis we simply choose which widgets to show (if any) and Community Bubbles takes care of the rest.

Title panel

Just like the header panel, we've used a table to arrange the content in the title panel - only this time it's a bit more complex...

{table:width=100%|cellpadding=0|cellspacing=0|border=0}
 {tr}
  {td:valign=middle|width=90%}h1. {builder-pagetitle}{td}
  {td:align=right|valign=middle|width=10%}{search-box:all=true}{td}
 {tr}
 {tr}
  {td:valign=top}
   {builder-show:context=page,blogpost|mode=view}{builder-hide:label=hide-labels}
    {builder-labels}
   {builder-hide}{builder-show}
  {td}
  {td:valign=top|class=page-links}
   {builder-hide:title=Forum,Home,Support|recurse=true}
    {compound-menuitem:edit|flat=true|icon=document_edit|caption=Edit}
    {compound-menuitem:pageattachments|flat=true|icon=document_attachment|caption=Files (%count%)}
   {builder-hide}{builder-show:title=Forum|recurse=true}
    {compound-menuitem:newpage|flat=true|icon=document_add|caption=New Topic|page=Forum}
    {builder-hide:title=Forum}
     {compound-menuitem:newcomment|flat=true|icon=message_add|caption=Post Reply}
    {builder-hide}
   {builder-show}
  {td}
 {tr}
{table}

The first row is fairly self-explanatory - the page title on the left, search box on the right.

The second row is a little more involved:

• If the page title (or parent page title) is "Forum", "Home" or "Support" we hide the "Edit" and "Files" links
• If the page title (or parent page title) is "Forum" we show the "New Topic" link and also a "Post Reply" link (the latter being hidden if you are actually viewing the page called "Forum").

Footnotes panel

The footnotes panel shows comments, children and page update information, depending on what you are looking at within a space...

{builder-show:context=page,blogpost|mode=view}{builder-hide:title=Home}{div:class=line}{menuicon:document_info} {compound-menuitem:information|flat=true|caption=Info:} Added by {page-info:created-user} on {page-info:created-date}, last edited by {page-info:modified-user} on {page-info:modified-date} \\ {builder-children}
{builder-comments}{div}{builder-hide}{builder-show} \\

The content is only ever shown when looking at either a page or a blog post in the normal "View" mode (eg. it's hidden in edit mode). We also hide that content if you're looking at the home page (to keep home pages nice and clean).

You'll notice that we've got two slashes at the very end of the wiki notation - that's there to ensure that even when no content is shown there is at least something output within the panel (a line break) otherwise the border line around the panel won't work properly in some browsers.

Footer panel

In the footer panel we've just used basic wiki notation to show our legal messages, etc:

{copyright} 2007 Adaptavist.com Ltd.{copyright} All rights reserved worldwide | Registered in England and Wales #5456785 | VAT Reg. GB 872 1217 39 | EIN: 98-054 5295
Site powered by Atlassian's [Confluence|ADAPTAVIST:Confluence] wiki customised with Adaptavist's [Theme Builder|ADAPTAVIST:Builder] and [Community Bubbles|ADAPTAVIST:Bubbles] plugins. | [Privacy Policy|ADAPTAVIST:Privacy Policy] | [Terms of Use|ADAPTAVIST:Terms of Use]