11
2
Documentation
2
3
Documentation Theme
3
4
Before
4
5
After
5
Let’s get started
6
You can do it too!
6
Jens Schumacher
Product Manager – Atlassian
How to build a Confluence ThemeConfluence Themes 101
77
Building Blocks• Module Types• Colour Schemes• Style Sheets• Layouts
88
Colour Schemes• The simplest way to match the look and feel
of your Corporate Identity
• Headings• Text• Links• Header• Menu Items• etc.
99
10
<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>
Colour Scheme Module
10
11
<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>
Colour Scheme Module
11
Example
1212
Style Sheets• Web standard• Used to style web pages• Separation of document content
and presentation
1313
14
<theme key="mytheme"><resource type="download" name="my-theme.css" location="styles/my-theme.css"/>
</theme>
Style Sheet – Resource Module
14
15
<theme key="mytheme"><resource type="download" name="my-theme.css" location="styles/theme.css"/>
</theme>
Style Sheet – Resource Module
15
Example
1616
Layouts• Powerful• New elements • Version specific
1717
Layout Types
context
main
• Global• Space• Page• Blog• Mail
1818
19
main
context
Layout Types
19
20
<layout key="main" name="Main Decorator"overrides="/decorators/main.vmd"><resource type="velocity" name="decorator"location="simpletheme/main.vmd" />
</layout>
Layout Module
20
21
<layout key="main" name="Main Decorator" overrides="/decorators/main.vmd"><resource type="velocity" name="decorator"location="simpletheme/main.vmd" />
</layout>
Layout Module
21
22
Glo
bal N
avig
atio
n
Example
22
Try it yourself!
23
• http://atlss.in/themetutorial
23
Recommended
