Mundorévès

Cada día me veo en un mundo al revés

Customizable Style Sheets in Confluence Themes

I've been using a trick for allowing customizing CSS in the Approvals Workflow Plugin and in themes.

The trick proved to be very handy in a recent high-speed project with Headshift I just completed. The Designer was able to make last-minute CSS tweaks by simply updating an attachment. I would later update the theme's stylesheet.

The way it works is by using an attachment in the space's home page as an alternative stylesheet.

A helper checks if the attachment styles.css exists in the space's home page, and if so, it will return a link to if as a stylesheet, which is included in the HTML.

public class CssHelper {

    private static final String CUSTOM_CSS_NAME = "styles.css";

    private SpaceManager spaceManager;

    public String getImportThemeCssLink(String spaceKey, String contextPath) {
        Space space = spaceManager.getSpace(spaceKey);
        if (space == null) {
            return "";
        }
        Page homePage = space.getHomePage();
        Attachment attachment = homePage.getAttachmentNamed(CUSTOM_CSS_NAME);
        if (attachment == null) {
            return "";
        }
        return "<link rel=\"stylesheet\" href=\"" +
                contextPath + "/download/attachments/" + 
                homePage.getIdAsString() + "/" + CUSTOM_CSS_NAME +
                "\" type=\"text/css\" />";
    }

    public void setSpaceManager(SpaceManager spaceManager) {
        this.spaceManager = spaceManager;
    }
}

it has to be defined in atlassian-plugin.xml:

    <velocity-context-item key="cssHelper" name="Theme CSS Helper" 
          context-key="cssHelper"
          class="com.headshift.confluence.css.helper.CssHelper"/>

In the main.vmd you can add the following at the end of the <head> section:

$cssHelper.getImportThemeCssLink($spaceKey,$req.contextPath)

That's it! the extra CSS will be included only if it exists.

Labels

 
  1. Jul 21, 2008

    Anonymous says:

    Seems like a lot of work to do something that simple... Here's what I'd do: 1. ...

    Seems like a lot of work to do something that simple... Here's what I'd do:

    1. Attach style sheet to home page

    2. Add link tag to import the style sheet using Confluence's Custom HTML feature (the HEAD section)

    Done

    1. Jul 21, 2008

      Roberto Dominguez says:

      Yeah, that works too... provided you have a theme that applies to the entire sit...

      Yeah, that works too... provided you have a theme that applies to the entire site, or if you are ok with having a broke link to a css that doesn't exist.

      Also, what I have found in big corp installations is that they are using several themes, and confluence admins are usually reluctant to make changes in all pages/spaces.

      Also, this works not only on themes but also on plugins.

  2. Apr 07, 2009

    Anonymous says:

    Thank you for sharing this nice trick. Love the image on the header.

    Thank you for sharing this nice trick. Love the image on the header.

Add Comment