A theme is edited in an extension module in the workspace. The structure of a theme is described in Section 6.4.1, “CoreMedia Themes”.
When you create a new theme it is a good idea to extend at least the CoreMedia Blueprint basic theme because it deals with
some common problems, such as conflicting JavaScript frameworks. The basic theme is located in
modules/cae/cae-themes/basic-theme.
Extending an existing theme requires two steps:
Add a dependency to this theme in the POM of your own theme. This is necessary for code completion in your IDE.
Add links to all CSS and JavaScript files of the theme that you extend to the theme descriptor of your new theme .
When you import resources from another theme, you need to follow a certain order:
- CSS files
First, you have to import the CSS files of the parent theme, then your own files.
- JavaScript files
1. Vendor-specific JavaScript files of the parent theme 2. Vendor-specific JavaScript files of your theme 3. CoreMedia-specific JavaScript files of the parent theme 4. JavaScript files of your theme
The reason for this order is the use of noConflict(true) in the first CoreMedia-specific
JavaScript. Because, CoreMedia cannot customize third-party addons, noConflict() can only be called
after the inclusion of third-party addons. All CoreMedia-specific JavaScript files use a CoreMedia-specific namespace for
JQuery to avoid conflicts. As a result, you cannot rely on $ and jQuery global scope variables.
 |  |  |
 |