opencms days 2012 - how software ag is optimizing workflows with opencms 8 and the theme engine

The OpenCms Theme Engine

Robert DiawaraManager Online Communities, Software AG

Sebastian BoltComponio GmBHSept. 25th 2012

How Software AG is optimizing workflowswith OpenCms 8 and the Theme Engine

2

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.

Why a Theme Engine

3

Theme Engine – Sample 1

4

Theme Engine – Sample 2

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

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

7

Creating deployable Themes

8

Creating deployable Themes

9

Creating deployable Themes

10

Creating deployable Themes

11

Creating deployable Themes

12

Creating deployable Themes

13

Creating deployable Themes

14

Theme maintenance

15

Script Management

16

Script Management (2)

17

CSS Management

18

CSS Management

19

CSS Management

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

21

User Agent Filtering

22

User Agent Filtering

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

24

Grid Support

25

Grid Support

26

Grid Support

27

Automatic Samples for Grids

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

29

Classic Three Column Layout

30

Classic Three Column Layout

31

Classic Three Column Layout

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

33

Configuring the Grid

34

Theme Dimensions

35

Automatic CSS Generation

36

Automatic CSS Generation

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

38

Integration with existing Code

39

Integration with existing Code (2)

40

Integration with existing Code (3)

41

Applying Themes to the Content

Where can I get the Theme Engine

http://www.componio.netPlanned release: Dec. 1st 2012

43

Outlook to the next Version

Thank you for your attention

Your Feedback ...