Including Cascading Stylesheets in Themes

Confluence allows you to integrate your own stylesheets within the theme plugin so you can have greater control over the appearance of your site. Confluence's main stylesheet is a useful reference when overriding styles and can be found in the Confluence install directory under ...confluence/WEB-INF/classes/styles/site-css.vm.

Step One: Defining the stylesheet in the atlassian-plugin.xml

To make a stylesheet available to a decorator, you will need to reference it as a resource from within the central configuration file - atlassian-plugin.xml.

Here is an example where a stylesheet is being used to define the 'leftnavigation' theme:

The resource parameter takes three arguments:

• Type: The type of resource-in this instance, 'stylesheet'.
• Name: The name of the stylesheet.
• Location: The location of the file represented in the jar archive you will use to bundle your theme.
  
  

Step Two: Using the stylesheet in the decorator

To reference the stylesheet in the decorator, you will need to use the #pluginStylesheet velocity macro.

For example, here's how you reference the leftnav.css file defined in the layout entry above:

The macro takes two arguments:

• completePluginKey: The complete plugin key which is constructed from the pluginkey and the layout key like this: {pluginKey}:{layoutKey}
  In the above example, com.atlassian.confluence.themes.leftnavigation is the key of the plugin, and main is the key of the layout.
• stylesheetName: the name of the stylesheet

If you place your stylesheet after the #standardHeader macro in the decorator, the contents of your custom stylesheet will override those in Confluence's default stylesheet.

If your stylesheet needs to reference the colour scheme, you need to use the space stylesheet macro instead:

You can then use colour scheme references in your stylesheet, similar to Confluence's stylesheets, and they will be replaced with the appropriate global or space-specific colour scheme:

RELATED TOPICS