Migrating my customized theme

Theme XML file

Let's say you have a theme file called theme-custom.xml where you have defined your own page layouts and styles.
You now want to keep in this file only the page layouts and get rid of all the styles.

Page layouts

Nothing has changed here in terms of page layouts.
Keep your existing page/section/cell/fragment structure for each page in the <layout> element.

Page, section, cell and fragment formats

With the old system, to add a style on one of these elements, you had to use:

If you take a look at the new default theme file document-management.xml, you will see that a class attribute has been added on each page, section, cell and fragment element. It references a CSS class in one of the CSS stylesheets declared in the styles extension point.
Taking the same example, we now have:

And in themes/css/header.css:

Therefore, in order to migrate, you need to:

• Remove all <layout> elements embedded in <formats>.
  Copy/paste them in your favorite text editor since you will need to translate them into CSS later!
• Add a class attribute on each page, section, cell and fragment element.
  Here you can take advantage of the classes that exist in the Nuxeo default theme file, especially if you did not customize these elements.
• Make sure these CSS classes are defined in a CSS stylesheet embedded for each page it should apply to (see below about CSS stylesheets).
  If you use the classes that apply to the Nuxeo default theme (nxHeader, logo, ...), they will already be defined!
  Else you will have to define them in a custom CSS file.

Styles

With the old system, CSS styles were defined in the XML theme file:

With the new system these styles are defined in CSS stylesheets. In this case in themes/css/basic.css:

Therefore, in order to migrate, you need to:

• Remove all <style> elements embedded in <formats>.
  Again, copy/paste them in a text editor since you will need to translate them into CSS later!

Theme contributions: pages, flavors and styles

You now have to translate all styles from the old XML format to the new (and nicer) CSS one.
If you take a look at the new theme contribution file theme-contrib.xml, you will see that 3 extension points have been added.
For each one, you need to check that the existing contributions match your specific need and if not you will have to add yours.
Lets say you have a customized theme named myCustomTheme with a specific page myPage for which you want to use the myFlavor flavor and the my_custom_styles.css stylesheet.

Pages

Add a <themePage> contribution to the pages extension point.

Style order is important! The theme engine will actually concatenate all the stylesheets defined in the <styles> element, in the order of their declaration, to build one big stylesheet named myCustomTheme-styles.css. So if you need to override a CSS class existing in one of the Nuxeo stylesheets, for example .nxHeader .logo in header.css, you will have to do this in a custom stylesheet declared after the Nuxeo one. For example my_custom_styles should come after header.

Flavors

Add a <flavor> contribution to the flavors extension point.

Of course you need to create the corresponding file for each preset (in this example in the themes/palettes/ directory).
You can take example on the Nuxeo default presets.

Styles

Add a <style> contribution to the styles extension point.

Finally you can take advantage of the flavor system by making your CSS stylesheet dynamic! For example:
In my_custom_styles.css:

In myFlavor-backgrounds.properties :

Old palette contributions

Finally, you can get rid of the old palette contributions to the presets extension point, if you had any. They are not used anymore.