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