1
Documentation




                2
Documentation Theme




                      3
Before




         4
After




        5
You can do it too!


                Let’s get started




                                    6
Confluence Themes 101
How to build a Confluence Theme



Jens Schumacher

Product Manager – Atlassian




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




                    8
Colour Schemes
• The simplest way to match the look and feel
  of your Corporate Identity


  • Headings
  • Text
  • Link...
Colour Scheme Module

<theme key="mytheme">
  <colour-scheme key="earth-colours"/>
</theme>

<colour-scheme key="earth-col...
Colour Scheme Module

<theme key="mytheme">
  <colour-scheme key="earth-colours"/>
</theme>

<colour-scheme key="earth-col...
Example




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




            ...
Style Sheet – Resource Module


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


 <theme key="mytheme">
  <resource type="download" name="my-theme.css"
  location="styles/...
Example




          16
Layouts
• Powerful
• New elements
• Version specific




                    17
Layout Types
   main

      context
          • Global
          • Space
          • Page
          • Blog
          • Mai...
Layout Types




               19
Layout Types
                main


               context



                         19
Layout Module


 <layout key="main" name="Main Decorator"
 overrides="/decorators/main.vmd">
  <resource type="velocity" n...
Layout Module


 <layout key="main" name="Main Decorator"
 overrides="/decorators/main.vmd">
  <resource type="velocity" n...
Global Navigation
                         Example




22
Global Navigation
                         Example




22
Try it yourself!




                   • http://atlss.in/themetutorial




                                              ...
Upcoming SlideShare
Loading in …5
×

Atlassian Summit 2010 – Confluence Themes

764 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
764
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide























  • Atlassian Summit 2010 – Confluence Themes

    1. 1. 1
    2. 2. Documentation 2
    3. 3. Documentation Theme 3
    4. 4. Before 4
    5. 5. After 5
    6. 6. You can do it too! Let’s get started 6
    7. 7. Confluence Themes 101 How to build a Confluence Theme Jens Schumacher Product Manager – Atlassian 7
    8. 8. Building Blocks • Module Types • Colour Schemes • Style Sheets • Layouts 8
    9. 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. 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. 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. 12. Example 12
    13. 13. Style Sheets • Web standard • Used to style web pages • Separation of document content and presentation 13
    14. 14. Style Sheet – Resource Module <theme key="mytheme"> <resource type="download" name="my-theme.css" location="styles/my-theme.css"/> </theme> 14
    15. 15. Style Sheet – Resource Module <theme key="mytheme"> <resource type="download" name="my-theme.css" location="styles/theme.css"/> </theme> 15
    16. 16. Example 16
    17. 17. Layouts • Powerful • New elements • Version specific 17
    18. 18. Layout Types main context • Global • Space • Page • Blog • Mail 18
    19. 19. Layout Types 19
    20. 20. Layout Types main context 19
    21. 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. 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. 23. Global Navigation Example 22
    24. 24. Global Navigation Example 22
    25. 25. Try it yourself! • http://atlss.in/themetutorial 23

    ×