confluence theming 101: how to build a theme - atlassian summit 2010 - lightning talks

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