1. 1

2. Documentation
2

3. Documentation Theme
3

4. Before
4

5. After
5

6. You can do it too!
Let’s get started
6

7. Confluence Themes 101
How to build a Confluence Theme
Jens Schumacher
Product Manager – Atlassian
7

8. Building Blocks
• Module Types
• Colour Schemes
• Style Sheets
• Layouts
8

9. Colour Schemes
• The simplest way to match the look and feel
of your Corporate Identity
• Headings
• Text
• Links
• Header
• Menu Items
• etc.
9

10. Colour Scheme Module
<theme key="mytheme">
<colour-scheme key="earth-colours"/>
</theme>
<colour-scheme key="earth-colours" name="Brown and Red Earth
Colours">
<colour key="property.style.topbarcolour" value="#000"/>
<colour key="property.style.linkcolour"value="#999999"/>
</colour-scheme>
10

11. Colour Scheme Module
<theme key="mytheme">
<colour-scheme key="earth-colours"/>
</theme>
<colour-scheme key="earth-colours" name="Brown and Red Earth
Colours">
<colour key="property.style.topbarcolour" value="#000"/>
<colour key="property.style.linkcolour"value="#999999"/>
</colour-scheme>
11

12. Example
12

13. Style Sheets
• Web standard
• Used to style web pages
• Separation of document content
and presentation
13

14. Style Sheet – Resource Module
<theme key="mytheme">
<resource type="download" name="my-theme.css"
location="styles/my-theme.css"/>
</theme>
14

15. Style Sheet – Resource Module
<theme key="mytheme">
<resource type="download" name="my-theme.css"
location="styles/theme.css"/>
</theme>
15

16. Example
16

17. Layouts
• Powerful
• New elements
• Version specific
17

18. Layout Types
main
context
• Global
• Space
• Page
• Blog
• Mail
18

19. Layout Types
19

20. Layout Types
main
context
19

21. Layout Module
<layout key="main" name="Main Decorator"
overrides="/decorators/main.vmd">
<resource type="velocity" name="decorator"
location="simpletheme/main.vmd" />
</layout>
20

22. Layout Module
<layout key="main" name="Main Decorator"
overrides="/decorators/main.vmd">
<resource type="velocity" name="decorator"
location="simpletheme/main.vmd" />
</layout>
21

23. Global Navigation
Example
22

24. Global Navigation
Example
22

25. Try it yourself!
• http://atlss.in/themetutorial
23