Theme Builder Plugin

[All Adaptavist Apps]

Page tree

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

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 (and disabled any panels not listed)...

  • Left Sidebar - used to create the left margin
  • Right Sidebar - used to create the right margin
  • Title - this is used to display the navigation and headings at the top of pages
  • Footnote - used to display comments, etc.
  • Footer - used to display the links sections at the bottom of pages

Panel Styles

All panels were set to a transparent background and no border, with the exception of:

  • Footer panel - background colour set to #f3f3f3
  • Document panel (accessed by clicking on the "Powered By" text at the bottom of the layout preview) - background colour set to white (#fff)

We then set a few additional styles as follows:

  • The text size of the Title panel was set to 11px.
  • The width of the Title, Content and Foonotes panels was set to 750px.
  • The width of the Left Sidebar and Right Sidebar was set to 40%
  • The Document panel was set to 100% width

The sidebars effectively push the Title, Content and Footnotes panels in to a central column. The Footer panel, which appears below the sidebars, takes up the whole width of the screen.

Panel Content

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

Title Panel

The title panel contains all the wiki notation for the breadcrumb trail, search box, context sensitive links, space logo and page title.

To achieve the desired layout with minimal fuss, we used two tables (not particularly semantic, but reliable across multiple browsers and operating systems).

To force the central column of the screen to be 750px each of the tables has a fixed width of 750. Even though the sidebars are told to use 80% of the screen width, they won't be able to override this width set on the table and will shrink accordingly.

The first row in the table contains two cells, one for the breadcrumbs and the other for the search box:

{table:width=750|cellpadding=0|cellspacing=0|border=0}
 {tr}
  {td:valign=middle|class=tdGrey}
   {builder-breadcrumbs}
  {td}
  {td:align=right|valign=middle|class=tdGrey}
   {search-box}
  {td}
 {tr}

The class=tdGrey is allows us to set the background colour of the cells in this row, later in this tutorial.

The second row in the table contains the context-sensitive links (line feeds added for clarity) and contains one cell which spans two columns (so it has the full width of the table):

 {tr}
  {td:colspan=2|align=right|class=cmLinks}
   {builder-show:context=page,blogpost}
    {compound-menuitem:pageView|caption=View|class=cmView|flat=true} •
    {compound-menuitem:edit|caption=Edit|class=cmEdit|flat=true} •
    {compound-menuitem:pageAttachments|caption=Attachments (%count%)|class=cmAttacch|flat=true} •
    {compound-menuitem:information|caption=Info|class=cmInfo|flat=true}
   {builder-show}
   {builder-show:context=space-pages,space-labels,space-attachments,space-blogposts,space-activity,space-operations,space-administration}
    {compound-menuitem:recent|caption=Pages|flat=true|class=smPages} •
    {compound-menuitem:labels|caption=Labels|flat=true|class=smLabels} •
    {compound-menuitem:spaceAttachments|caption=Attachments|flat=true|class=smAttach} •
    {compound-menuitem:mail|caption=Mail|flat=true|class=smMail} •
    {compound-menuitem:space-socialbookmarks|caption=Bookmarks|flat=true|class=smBmark} •
    {compound-menuitem:news|caption=News||flat=true|class=smNews} •
    {compound-menuitem:activity|caption=Activity|flat=true|class=smActive} •
    {compound-menuitem:advanced|caption=Advanced|flat=true|class=smAdv} •
    {compound-menuitem:spaceadmin|caption=Space Admin|flat=true|class=smAdmin}
   {builder-show}
  {td}
 {tr}
{table}

The builder-show macro is used to show the relevant set of links depending on what users are looking at. The first set of links is shown when looking at individual pages or blog posts (news items) and the second block of links is shown when looking at space level pages, such as labels or space admin.

You'll notice that there are lots of "class" properties on the macros - they are used to highlight the currently selected link later in this tutorial.

Second Table - space logo, page title

The second table contains one row with two cells as follows:

{table:width=750|cellpadding=0|cellspacing=0|border=0}
 {tr}
  {td:valign=middle|width=1px}
   {menulink:home}{builder-logo}{menulink}
  {td}
  {td:valign=middle|class=pgTitle}
   h1. {builder-pagetitle}
  {td}
 {tr}
{table}

The class=pgTitle allows us to add some padding between the space logo and page title later in this tutorial.

Left and Right Sidebars

The default "Left Sidebar" and "Right Sidebar" text was removed from both sidebars and replaced with a line break:

 \\

Note: There is a space before and after the two slashes.

If desired, you could easily add custom content or navigation to the sidebars, for example you could move one or more of the navigation sections (see Footer panel below) in to a sidebar.

Footnotes panel

The content of the Footnotes panel was left unchanged - by default it shows comments and children. If desired, an on-screen label editor could be added using the builder-labels macro.

Footer panel

The footer panel contains a large amount of links in 5 sections:

  • Browse Space
  • Explore Confluence
  • Your Account
  • Other Features
  • Add Content

To arrange the links in to sections, and also ensure they appear in the correct place, a table was used:

{table:align=center|width=750px}
 {tr}
  {td:width=20%|valign=top}*Browse Space*
   {ul}
    {compound-menuitem:recent|caption=Pages|class=smPages}
    {compound-menuitem:labels|caption=Labels|class=smPages}
    {compound-menuitem:spaceAttachments|caption=Attachments|class=smAttach}
    {compound-menuitem:mail|caption=Mail|class=smMail}
    {compound-menuitem:space-socialbookmarks|caption=Bookmarks|class=smBmarks}
    {compound-menuitem:news|caption=News|class=smNews}
    {compound-menuitem:activity|caption=Activity|class=smActive}
    {compound-menuitem:advanced|caption=Advanced|class=smAdv}
    {compound-menuitem:spaceadmin|caption=Space Admin|class=smAdmin}
   {ul}
  {td}
  {td:width=20%|valign=top}*Explore Confluence*
   {ul}
    {compound-menuitem:labels|caption=Popular Labels}
    {compound-menuitem:notationguide|caption=Notation Guide}
   {ul}
  {td}
  {td:width=20%|valign=top}*Your Account* \\ {menulink:profile|class=clUser}%user%{menulink}
   {ul}
    {compound-menuitem:userspace|checkexists=true|caption=Your Space}
    {compound-menuitem:history|caption=History}
    {compound-menuitem:profile|caption=Preferences}
    {compound-menuitem:siteadmin|caption=Administration}
    {compound-menuitem:logout|caption=Log Out}
    {compound-menuitem:login|caption=Log In}
    {compound-menuitem:signup|caption=Sign Up}
   {ul}
  {td}
  {td:width=20%|valign=top}*Other Features* \\ 
   {builder-favicon}
   {builder-watchicon}
   {compound-menuitem:printableView|icon=printer|tooltip=Printable view|imginside=true|flat=true}
   {compound-menuitem:exportPDF|icon=pdf|tooltip=Export to PDF|imginside=true|flat=true}
  {td}
  {td:width=20%|valign=top}*Add Content*
   {ul}
    {compound-menuitem:newpage|caption=Add Page}
    {compound-menuitem:newnews|caption=Add News}
    {compound-menuitem:newcomment|caption=Add Comment}
    {compound-menuitem:pageattachments|caption=Add Attachment}
   {ul}
  {td}
 {tr}
{table}

As you can see, the table contains a single row with 5 cells, each set to a width of 20% (100% / 5 = 20%).

The table itself is set to 750px width so it's the same size as the other elements on the page. It's centered within the Footer panel by using the align=center parameter on the table macro.

Within each of the 5 table cells, there is a bold heading, followed by a line break, followed by several links.

The {ul} macro has been used to wrap groups of the compound-menuitem macro - we've not added the {[flat=true}} parameter like we did in the context-sensitive links table because we want these links to output as list items and therefore the {ul} macro is needed to form a syntactically correct unordered list.

The "Other Features" column is used to display several links as icons. For the first two links we use the builder-favicon macro (add page to favourites) and the builder-watchicon macro (watch page for updates). For the remaining items we use the compound-menulink macro to specify a link and icon, with the flat=true parameter (don't output as a list) and imginside=true parameter to make sure the icon is hyperlinked.

That's it for our panel configuration, there's only one step left...


Next page: 2 - Clickr CSS
  • No labels