Theme Press for Confluence : tutorial for webdesigners


Posted by
Mathieu VISIERE

June 12, 2014

In our previous article, I presented you the newly created ad-on ThemePress, which is specialised in Confluence themes customisation.

Although this tool is quite intuitive, it requires some explanations to be handy and fully enjoyable.

I will therefore share my best practices with you, web designers, so you can create your theme with Theme Press and learn a few tips.

Now start your Confluence, follow the guide and let’s go!

Beginning with Theme Press, the best practices

Theme Press installation in a few clicks

Don’t be afraid to install Theme Press, it’s really easy: you just need to add the add-on directly from Confluence admin.

Once it is done, you will proceed in 2 steps: activate Theme Press and create its default space. The following video will show you how to do it:

Setting up Confluence

Once you have completed the 2 previous steps, here are 3 others that will allow you to fully enjoy it :

Creating your home space

Initially, we create a new space that will be used next as the homepage of our new website.

In order to do this, create your space directly from the admin bar:

create_space

Then select “Empty space”, click on next and write the name of your space, for example “HOME” and validate.

Let’s move on to the next step !

Define your new space as homepage

  1. Go to Confluence admin
  2. In the “Configuration” section, go to “General Configuration”
  3. In “Website Configuration”, click on “Edit”
  4. In “Website Homepage”, pick the space previously created with Theme Press
  5. Now click on Confluence logo and you should land on your newly created space!

Add the dashboard’s shortcut in Confluence toolbar

  1. Go to Confluence admin
  2. In the “Administration” section, go to “Application Navigator”
  3. Add a “Dashboard” link with its address
    (ex in local environment: http://localhost:1990/confluence/dashboard.action)
  4. Voilà ! You dashboard is now available directly from Confluence bar :)

Creating your theme

Watch out, you must be a Confluence admin to use the Theme Press designer ! And remember, you should only use it in a test environment!

Now Confluence is ready, it’s time for you to make full use of  Theme Press features starting with creating your own theme.

Theme Press is set up with its default theme named “Lumen”. We will duplicate this to create our own one based on it.

Just follow this video to do so :

Setting up your graphical identity : logo and color palette

Your theme is now active and ready to be set up.

As you can see it in the video, each section has an interactive help guide to teach you all the possible actions.

Don’t hesitate to browse through the sections and to take a look at these helps to be at ease with the different settings of the theme.

Our advice to set up your theme properly

  1. Add your logo
  2. Set up your color palette : once your main colors are set, they will appear directly in the color picker
  3. Explore the “Content” section to set up styles and recurring elements
  4. Configurate your theme structure with the “HTML structure” section : searchbox, menus, titles, …
  5. If you wish, you may customise Confluence elements directly from the “Confluence” section

Once your theme is ready, remember to export it in order to keep a copy.

Discovering tabs

Now you have your theme, we are going to move on to the architect and the page editor.

For each page, Theme Press editor has 3 tabs : “Page”, “Architect” and “Theme” as you saw it in the video above.

The “Page” tab

This tab will enable you to define the structure of your page, based on a default layout. You may change the layout through the “Architect” tab > “Layout Source” tab, by clicking on the little eye.

In addition, you can create a new layout to fit your needs.

Once you chose it, you can customise your page thanks to layers made of columns and flexible blocks.

The items formatting is very intuitive, for example elements are highlighted if you click on them (cf. screenshot below). With a little bit of practice you will realise that structure edition is much simpler than it seems.

layer_highlight

The “Architect” tab

This tab allows you to control the general layout of your website, both within specific spaces or at a global level.

When you go through a section of the architect, you can access the item of your choice by clicking on the little eye.

Once you are on this item, you can see that the “Page” tab is replaced by the name of the element, meaning you are editing its layout.

For more information, remember to read interactive helps for each element.

If you have questions about these two tabs, don’t hesitate to contact us.

Tips and tricks

Hiding Confluence elements

If you want to hide Confluence elements such as comments and likes, go on your layout and set up the following options :

layout_elements

Useful shortcuts

.  : Display/ Hide the designer

z  : Display/ Hide Confluence menu

x  : Activate / Deactivate content editor

To go further

Macros and specific features of Theme Press

Theme Press includes specific features and several macros, for instance a content slider, fully clickable blocks, layout macros, etc …

You can learn all about them now by following this link :

http://help.brikit.com/dosearchsite.action?queryString=macro&startIndex=0

Some of those macros are customisable at the bottom of the “Theme” tab column.

Next release : Theme Press 1.0.1

New features will come soon with the next release: theme gallery and mobile optimisation.

Theme gallery will allow you to share the themes you created thanks to Theme Press but also to choose one of the pre-saved themes. Thanks to this new feature, a community should be created around the product, allowing the users to share their knowledge and ideas.

Mobile optimisation will help you “transforming” your website into an adapted solution for your Android or iPhone smartphone (through responsive design targetted on these two user agents).

You will then be able to create an other version of your theme adapted to smartphones simply by using the editor.

Ressources

  • Theme Press Website
    http://www.brikit.com/display/themepress/Brikit+Theme+Press
  • Theme Press Documentation 
    http://help.brikit.com/display/PRESS/Brikit+Theme+Press+Documentation
  • Theme Press Support 
    https://brikit.atlassian.net/login?dest-url=%2Fsecure%2FDashboard.jspa
  • Theme Press Answers Forum
    https://answers.atlassian.com/questions/ask/?tags=addon-com.zenfoundation
  • Theme Press video tutorials
    http://help.brikit.com/display/PRESS/Theme+Press+Videos
  • Theme Press on the Atlassian Marketplace
    https://marketplace.atlassian.com/plugins/com.brikit.themepress
  • Brikit Website
    http://www.brikit.com/display/brikit/Welcome
For any question or additional information, don’t hesitate to leave a comment on the article!