Confluence Docs 2.10 : Modifying Look and Feel (for themes)
This page last changed on May 15, 2008 by edawson.
Here's how you can define a new look and feel for Confluence in your theme:
Layout: Working with decoratorsWhat are decorators? Confluence comes bundled with a set of decorator or VMD files that you can customize. Broadly these are categorised into Site, Content and Export decorators. These are further grouped into categories called contexts and under each context has various modes (ways of viewing the context). To make editing easier, layout for similar screens (example: view and edit page screens) is configured through the same VMD file. So, if you want to customize how the Confluence View Page Screen or Edit Page Screen looks, you can make both of these changes inside one decorator file: page.vmd.
For example, if you wanted to remove the 'Attachments' tab on the view page screen, you would make this layout change in the page.vmd file - where the 'view' mode is handled (as shown below). #* Display page based on mode: currently 'view', 'edit', 'preview-edit', 'info' and 'attachments. See the individual page templates (viewpage.vm, editpage.vm, etc.) for the setting of the mode parameter. *# ## VIEW #if ($mode == "view") <make layout modifications here> #elseif ...
Step One: Copying the decoratorsThe easiest way to begin configuring a new layout is by copying the default decorator files and editing them to suit your theme.
Step Two: Creating a directory structure for the decorators:You should place your decorators in a directory hierarchy which makes sense to you. We recommend that you place the atlassian-plugin.xml file at the top level of the directory structure, and then place the decorators in directories which make a meaningful division of what they do. Here is an example:
atlassian-plugin.xml com/atlassian/confluence/themes/mytheme/ com/atlassian/confluence/themes/mytheme/global.vmd com/atlassian/confluence/themes/mytheme/space.vmd com/atlassian/confluence/themes/mytheme/mail.vmd com/atlassian/confluence/themes/mytheme/blogpost.vmd com/atlassian/confluence/themes/mytheme/main.vmd com/atlassian/confluence/themes/mytheme/page.vmd Step Three: Editing the decoratorsTo edit the decorators, you will require knowledge of a very simple programming language called Velocity. Learn more about Velocity. Decorator Macros When editing the decorators, you will need to use Decorator Macros to draw complex or variable parts of the page such as menus and breadcrumbs. See Working With Decorator Macros Theme Helper Object When editing decorator files you will also come across a variable called $helper - this is the theme helper object. The following table summarises what this object can do:
If you are on a page or space screen you also have access to the actual page and space object by using $helper.page and $helper.space respectively. If you want to deliver more into what other methods are available in this object, please see our API's for ThemeHelper.
Step Four: Configuring the central configuration file to reference the new decoratorsHow to do this is explained in Configuring the theme plugin Working with colour schemes for themesConfiguring the colour schemeThe easiest way to configure a colour scheme is to do it dynamically from the Administration Console (as you would normally when you want to change the site's colour scheme online), and then express it as an xml file. This method makes it possible for you to experiment with different colours and test them out before including the colour scheme in your theme.
More information on customising colour schemes Expressing the colour scheme as XMLOnce, you have decided on the colours for the different UI elements, you will need to configure the atlassian.plugin.xml to include the new colour scheme. How to do this is explained in detail in Configuring the theme plugin. RELATED TOPICS
|
![]() |
Document generated by Confluence on Dec 03, 2008 15:04 |