The document discusses the OpenCms Theme Engine, which aims to optimize workflows by separating website design from content. It allows bundling of layout resources into deployable themes, user agent filtering for different browsers, automatic support for grids and classic layouts, and dynamic CSS generation. Designers can create themes via a user interface while maintaining strict separation from content, saving time on layout changes. The Theme Engine will be available for download on December 1, 2012 from Componio GmbH to help bridge the gap between designers and developers.

1. The OpenCms Theme Engine
How Software AG is optimizing workflows
with OpenCms 8 and the Theme Engine
Robert Diawara
Manager Online Communities, Software AG
Sebastian Bolt
Componio GmBH
Sept. 25th 2012

2. Why a Theme Engine
Fill the gap between Designers and site developers
Provide a user friendly interface for design implementation
and maintenance.
 Save time, when you have layout changes (simply create a new theme)
Strict separation of the design from the content
 Content is maintained only once, even if the page exists with different
layouts.
 Different themes can be applied to different „siblings“ of the same object.
 Themes are linked to folders by default.
 Themes linked to a folder apply to all elements in that folder as well as to all
subfolders and all elements in subfolders.
 Themes can be assigned to single files on an individual base.
2

3. Theme Engine – Sample 1
3

4. Theme Engine – Sample 2
4

5. What does the Theme Engine offer ?
Bundling of all layout related resources in one deployable
package
 Scripts
 CSS Files
 Container Pages
 Formatters
User Agent filtering
 Usage of different CSS Files and Scripts for different browsers
Automatic support for Grids
 All CSS classes are generated automatically
Automatic support for classic three column layouts
 All CSS classes are generated automatically
Automatic CSS Generation
5

6. What does the Theme Engine offer ?
Bundling of all layout related resources in one deployable
package
 Scripts
 CSS Files
 Container Pages
 Formatters
User Agent filtering
 Usage of different CSS Files and Scripts for different browsers
Automatic support for Grids
 All CSS classes are generated automatically
Automatic support for classic three column layouts
 All CSS classes are generated automatically
Automatic CSS Generation
6

7. Creating deployable Themes
7

8. Creating deployable Themes
8

9. Creating deployable Themes
9

10. Creating deployable Themes
10

11. Creating deployable Themes
11

12. Creating deployable Themes
12

13. Creating deployable Themes
13

14. Theme maintenance
14

15. Script Management
15

16. Script Management (2)
16

17. CSS Management
17

18. CSS Management
18

19. CSS Management
19

20. What does the Theme Engine offer ?
Bundling of all layout related resources in one deployable
package
 Scripts
 CSS Files
 Container Pages
 Formatters
User Agent filtering
 Usage of different CSS Files and Scripts for different browsers
Automatic support for Grids
 All CSS classes are generated automatically
Automatic support for classic three column layouts
 All CSS classes are generated automatically
Automatic CSS Generation
20

21. User Agent Filtering
21

22. User Agent Filtering
22

23. What does the Theme Engine offer ?
Bundling of all layout related resources in one deployable
package
 Scripts
 CSS Files
 Container Pages
 Formatters
User Agent filtering
 Usage of different CSS Files and Scripts for different browsers
Automatic support for Grids
 All CSS classes are generated automatically
Automatic support for classic three column layouts
 All CSS classes are generated automatically
Automatic CSS Generation
23

24. Grid Support
24

25. Grid Support
25

26. Grid Support
26

27. Automatic Samples for Grids
27

28. What does the Theme Engine offer ?
Bundling of all layout related resources in one deployable
package
 Scripts
 CSS Files
 Container Pages
 Formatters
User Agent filtering
 Usage of different CSS Files and Scripts for different browsers
Automatic support for Grids
 All CSS classes are generated automatically
Automatic support for classic three column layouts
 All CSS classes are generated automatically
Automatic CSS Generation
28

29. Classic Three Column Layout
29

30. Classic Three Column Layout
30

31. Classic Three Column Layout
31

32. What does the Theme Engine offer ?
Bundling of all layout related resources in one deployable
package
 Scripts
 CSS Files
 Container Pages
 Formatters
User Agent filtering
 Usage of different CSS Files and Scripts for different browsers
Automatic support for Grids
 All CSS classes are generated automatically
Automatic support for classic three column layouts
 All CSS classes are generated automatically
Automatic CSS Generation
32

33. Configuring the Grid
33

34. Theme Dimensions
34

35. Automatic CSS Generation
35

36. Automatic CSS Generation
36

37. What does the Theme Engine offer ?
Bundling of all layout related resources in one deployable
package
 Scripts
 CSS Files
 Container Pages
 Formatters
User Agent filtering
 Usage of different CSS Files and Scripts for different browsers
Automatic support for Grids
 All CSS classes are generated automatically
Automatic support for classic three column layouts
 All CSS classes are generated automatically
Automatic CSS Generation
37

38. Integration with existing Code
38

39. Integration with existing Code (2)
39

40. Integration with existing Code (3)
40

41. Applying Themes to the Content
41

42. Where can I get the Theme Engine
http://www.componio.net
Planned release: Dec. 1st 2012

43. Outlook to the next Version
43

44. Thank you for your attention
Your Feedback ...