New style for Confluence documentation – what do you think

To mark the impending release of Confluence 5.0, we’ve applied a new style to the Confluence documentation. It’s done by means of some snazzy CSS, created by Andrew Prentice, Valter Fatia and Paul Watson.

What do you think of the new look? We’d love your feedback on the styles, the way some information is hidden until you hover over it (try zooming your cursor around the page to find the hidden bits) and the contrast with the standard Confluence 5.0 look.

Our customised styles

We’ve applied custom CSS only to the latest documentation space on the wiki – that’s the documentation for Confluence 5.0. This space is using the Documentation theme, but with a lot of CSS on top:

Documentation space with custom stylesheets

Documentation space with custom stylesheets

The standard Confluence 5.0 styles in the Documentation theme

The documentation for Confluence 4.3 is on the same wiki, but we haven’t applied the custom stylesheets. The wiki is already running Confluence 5.0, so you can see the new 5.0 look and feel without any custom styling. The space is using the Documentation theme:

Documentation space with standard styling

Documentation space with standard styling

The standard Confluence 5.0 styles in the default theme

Just for completeness, here’s the Atlassian Training space, on the same wiki, but using the default Confluence 5.0 theme:

A space using the default Confluence 5.0 theme

A space using the default Confluence 5.0 theme

How do you add CSS to a Confluence space?

It’s all in the documentation: Styling Confluence with CSS.

Thoughts? 🙂

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 25 February 2013, in Confluence, technical writing, wiki and tagged , , , , , . Bookmark the permalink. 15 Comments.

  1. Adding a comment from Twitter:

    I like the increased use of white space. Very elegant.

  2. Adding a comment from Anne Aloysious in LinkedIn:

    “I’ve been asked if this can be done & am happy to know that it is possible! :)”

  3. 3 people +1-ed this post on Google+. I’m guessing this means they like the new style, although it could just mean they approve of the fact that I shared it.

  4. Adding a comment from Twitter:

    why do we have to hack CSS? this modern look should be the default. my users don’t even know what CSS is.

    • Hallo cryptochrome
      The plan is to supply this look and feel as an add-on, via the Atlassian Marketplace. Using add-ons is the best-supported way of theming and styling Confluence. At this stage, it’s just a bunch of CSS while we play with it. Glad you like it!

      • Confluence has always looked a bit dated, too technical. This new style is exactly what it needs. No no… this shouldn’t be a theme through Marketplace (I already installed another theme that I want to keep (RefinedWiki)). This needs to become a default or it needs to be selectable as a text style right from the basic Confluence install.

      • Hallo cryptochrome
        That’s an interesting idea. Being able to select fonts and sizes for the UI elements, much as you can now for colours. I’ll put it to the Confluence team and let you know what they say.
        Cheers, Sarah

      • Hallo again cryptochrome
        Here’s a report-back, as promised. Unsurprisingly, opinion is divided in the Confluence team. 🙂

        On the one hand, people don’t think applying this style to any of the default themes is the right direction, but giving people the option to easily use themes like this is a good idea.

        On the other hand, people feel having a more visual way to style is an interesting one. A big win for people who don’t want to use CSS, which also means we could make it available to Confluence OnDemand users.

        So, the jury is still out. 🙂

        Cheers, Sarah

  5. Hi Sarah,
    has the DOM changed, DIV-IDs, CSS-Classes and stuff like that? The new theme is nice, but I’d prefer keeping our selfmade CI-adapted CSS.
    Best regards

  6. I styled my Confluence space in a similar fashion. Happy to see that you are delivering the new look as a plugin!

    However, I struggled to move the breadcrumb from the header to the page. I see that you have done exactly that in 5.0. Do I have to upgrade my 4.2.12 or can you share a tip how to do it?

  7. Is this available for use? css downloadable or an addon available?

  8. How could anyone on your team think that sticking to your old school default theme was better than replacing it by your new beautiful look?

    It still amazes me that OnDemand users can’t edit CSS. It’s 2014 folks, not 1999. Let’s get wih the times please.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: