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:
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
- Go to Confluence admin
- In the “Configuration” section, go to “General Configuration”
- In “Website Configuration”, click on “Edit”
- In “Website Homepage”, pick the space previously created with Theme Press
- Now click on Confluence logo and you should land on your newly created space!
Add the dashboard’s shortcut in Confluence toolbar
- Go to Confluence admin
- In the “Administration” section, go to “Application Navigator”
- Add a “Dashboard” link with its address
(ex in local environment: http://localhost:1990/confluence/dashboard.action)
- Voilà ! You dashboard is now available directly from Confluence bar
Creating your theme
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
- Add your logo
- Set up your color palette : once your main colors are set, they will appear directly in the color picker
- Explore the “Content” section to set up styles and recurring elements
- Configurate your theme structure with the “HTML structure” section : searchbox, menus, titles, …
- 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.
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.
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 :
. : 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 :
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.
- Theme Press Website
- Theme Press Documentation
- Theme Press Support
- Theme Press Answers Forum
- Theme Press video tutorials
- Theme Press on the Atlassian Marketplace
- Brikit Website