The first task in our customisation was the layout - choosing which panels to show and configuring what appears inside them...
Using the buttons at the top of the Layout Tab we enabled the following panels within the theme (and disabled any panels not listed)...
We've moved the menu in to the "navigation" panel so that the menu panel can be used to display a site banner message.
After selecting the desired panels, we set the background colour on most of them to "transparent" - the notable exceptions being:
#f3f4f3(a light grey colour)
#e0e0e0(a medium grey) - this is the colour that appears by default when no tab is selected
There are a couple of other simple panel settings we made using the panel editor:
92px- this is the size of the top part of our header background images (see Theme Images for the actual images)
center- this make short site banner messages look a bit nicer.
NB: To set the text size and alignment of the menu panel you need to temporarily enable the panel, make the changes and then disable it.
The next step was to get some customised content in to the panels as follows...
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.
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.
We decided to customise our menu in several ways:
The menu notation is quite involved and as such we will discuss it on the next page, 2 - Menu Customisation.
The left sidebar is where we display tabs, if applicable to the space being viewed. To do this we used the following notation:
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.
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:
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.
You can manually create some navigation in the panel that will look like widgets, for example:
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...
The first row is fairly self-explanatory - the page title on the left, search box on the right.
The footnotes panel shows comments, children and page update information, depending on what you are looking at within a space...
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.
In the footer panel we've just used basic wiki notation to show our legal messages, etc:
As mentioned earlier, we've moved the menu notation in to the navigation panel and hidden the menu panel.
This provides us with a super-simple way to display a site banner message that will appear on all pages above the menu bar.
To display a banner message, we:
The message should be kept short - you don't want a huge block of text appearing at the top of all pages.
Just like tabs in the left sidebar you could easily pull the message from somewhere else, however we decided to just edit messages directly within the theme layout for now.
An example message we've used in our menu panel to display an announcement throughout the site: