Including Cascading Stylesheets in Themes

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:

<layout key="main" name="Main Decorator" class="com.atlassian.confluence.themes.VelocityDecorator"
overrides="/decorators/main.vmd">
<resource type="velocity" name="decorator"
location="templates/leftnavigation/main.vmd"/>
<resource type="stylesheet" name="leftnav.css"
location="templates/leftnavigation/leftnav-css.vm">
</resource>
</layout>

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:

#pluginStylesheet("com.atlassian.confluence.themes.leftnavigation:main" "leftnav.css")

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:

#pluginSpaceStylesheet("com.atlassian.confluence.themes.leftnavigation:main" "leftnav.css" $spaceKey)

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:

.navItemOver {
    color: $action.navSelectedTextColor;
}

RELATED TOPICS

adminhome.gifdochome.gif