Confluence 4.0 : Including Cascading Stylesheets in Themes
This page last changed on Sep 15, 2011 by edawson.
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 Step One: Defining the stylesheet in the atlassian-plugin.xmlTo make a stylesheet available to a decorator, you will need to reference it as a resource from within the central configuration file - 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>
Step Two: Using the stylesheet in the decoratorTo 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:
If you place your stylesheet after the 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
|
![]() |
Document generated by Confluence on Sep 19, 2011 02:41 |