Theme Builder Plugin - For Designers

Theme Builder makes it easier than ever to customise the look and feel of Confluence, tailoring it to the needs of both end-users and corporate identity...

Visual Layout Editor

The visual layout editor allows you to configure theme elements (eg. panels, menu settings, breadcrumb options, etc.) quickly and easily:

– pic of visual goodness –

Panel Editor

Use the panel editor to quickly customise theme panels without resorting to hand-coded CSS:

– pic showing some panel editing goodness –

Colour Picker

The colour picker provides plenty of ways to select colours:

– pic of HSV, then palette –

The related colours palette shows complimentary colours for the current selection:

– pic –

You can now use colours defined in the standard Confluence "Colour Scheme" interface which allows Site and Space Administrators to quickly change colours without editing the theme layout.

Panel Content and Settings

The contents of panels can contain anything from static wiki markup, macros, user macros, Scriptix macros, XSLT, HTML and more:

– pic showing some basic markup –

You can use virtually any Confluence macro, including those included with Confluence, Theme Builder and even third-party macros, to create dynamic and automated panel content.

Layout Inheritance

This is one of the most sought-after features of Theme Builder:

You can inherit settings from parent layouts. Why would you want to do this? Well, most wikis will want an overall consistent look and feel, such as a corporate identity, but there will be subtle changes depending on the type of space (global or personal) and how it's being used (documentation, normal wiki, website, etc).

Using inheritance, you can create a "master" layout and then base other layouts on that design:

You might want to have the same layout available in several different colour schemes or maybe with several navigation styles, etc. Inheritance makes this really easy to achieve.

If you change a setting on the "master" layout, any layouts based on it (and layouts based on them, etc) that do not override that setting will instantly update to reflect the changes.

Intelligent Navigation

You control the navigation! Whether it's menus, page hierarchies or static links, you're in complete control over where it goes and how it looks.

– pic of menus and trees and stuff? –

Automated Permissions

With automated permission checking included as standard, you don't even need to worry about updating the navigation because the theme does it for you, even down to removing adjacent separators in menus or even whole menus if none of the options are applicable for the current user or location!

– possibly a side-by-side pic showing how options are seamlessly removed from a menu, including unwanted separator? –

Automated Navigation

Because you can use macros in the theme navigation, you can take advantage of the huge number of navigation macros available for Confluence. For example, easily create cascading menus based on the page hierarchy in a space or add a table of contents based on headings in the current page:

– pic showing toc menu? or page hierarchy menu? –

Best of all, there's no programming involved - just drop in whatever macro suits your needs and you're done!

Completely Customised Printable View

This new feature allows you to completely customise the printable view for any layout. Simply create a layout that's designed to be printer friendly and set it as the printable view for any other layout!

– pic of super-printable layout –

Page-Level Layouts

Using simple macros, you can now choose a completely different layout on a page-by-page basis. This is a great way to create highly customised space home pages for example:

– example of space home page –

Mix with some of the other macros that are included and you can allow end-users to choose a page-specific layout by simply adding a label to a page or even configure a space to use a specific layout for specific sections of the page hierarchy, etc.

Community Bubbles Compatible

Our Community Bubbles plugin adds a wide range of social networking features to Confluence and also comes complete with it's own portals and widgets system.

Theme Builder is fully compatible with Community Bubbles allowing you to seamlessly merge social and Web 2.0 features in to your designs. See it in action...

By dropping a portal in to a panel, such as a sidebar, you can instantly deploy all manner of widgets in to the theme. Furthermore, Space Administrators can easily choose which widgets they want to use without constantly hassling you!

CSS Injection

Although Theme Builder provides a visual interface for editing most style elements, there's no substitute for hand-crafted CSS!

Tailored to Your Needs

The theme includes a set of default CSS which ensures that all the key features of the product work properly on-screen. However, if it's getting in your way, you can turn it off (either all of it or certain aspects of it) and have 100% complete control over the CSS delivered to the end-user.

You can also inherit and extend the CSS from a parent layout.

Custom CSS

You can add your own custom CSS in to the theme to take complete control over every last detail.

We don't assume that the software knows best and our user guide provides useful information that shows you how to force the theme to do exactly what you want it to.

Internet Exploder Specific CSS

We all know that Internet Explorer is is a bit buggy and needs CSS hacks to force it to do the most basic things. Rather than require lots of weird CSS markup, we've provided a separate CSS setting that only gets loaded if the browser is Internet Explorer.

Prolific CSS

The CSS you add doesn't just customise the theme elements - it lets you customise content, third-party macros and pretty much everything else that appears anywhere within the wiki.

– pic of some page content with a nice looking macro –

Pre-Built Layouts

To save you time, we've started a theme gallery - ready-made layouts that you can use as the basis for your own designs.

– pics of some of them –

Whether you just want to see how specific effects were achieved or whether you just want to save time by starting with something similar to your requirements, the gallery is invaluable.

If you have a layout that you want to share with others, let us know and we'll add it to the gallery with full attribution to you. We're sure other designers will appreciate it just as much as you'll appreciate their designs.

Real-world Examples

Want to see what can be done with Theme Builder? Take a look at these:

(would change this to something like thumbnails which, when clicked, go to the site)

• Parleys - e-Learning site
• JavaPolis - JAVA Conference Website
• SpringOne - Conference Website
• National Constitution Centre - Educational Resources
• Mule - Open Source Project
• CustomWare - Company Website
• XEN Repository - Technical Documentation

Our "Top Tips"

The designs that work best, with Confluence and the Theme Builder Plugin, are those that are super-clean.

There's lots of inbuilt CSS that's generally required by Confluence and a wide range of third party plugins and it can get in the way of your own designs.

Always remember that you're not customising a fixed-feature site, your customising a hugely flexible, dynamic and extensible wiki.

Keep the design clean and simple for best results!

Oh, and use Firefox or Omniweb for best browser performance when developing your theme designs