Confluence Docs 3.0 : Including Cascading Stylesheets in Themes This page last changed on Feb 05, 2008 by rkrishna. 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/styles/site-css.vm`.
| CSS for Confluence 2.6 Please refer to the information about changes in Confluence 2.6.
### 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
Adding a theme icon (Confluence Docs 3.0)
Including Cascading Stylesheets in Themes (Confluence Docs 3.0)
Applying A Theme To A Space (Confluence Docs 3.0)
Themes Overview (Confluence Docs 3.0)
Applying a Theme To A Site (Confluence Docs 3.0)
Creating a Theme (Confluence Docs 3.0)

Document generated by Confluence on Nov 05, 2009 23:27