Page History
A theme is a collection of resource files that gives a site its visual identity through the use of colors and typography. A theme consists of Cascading Style Sheets (CSS), Javascript files and an imaging configuration which tells the Imaging module what to do with images for a particular page or component.
...
A theme is a module or part of a module composed of CSS, JS, and images.
When to use a theme
The Site module provides theme functionality. You can only create a theme if you use this module and have configured a site definition.
...
Theme resources can be stored in light (YAML) or Maven modules. Themes can reside in a dedicated theme module or form part of another module. A special module version handler is not necessary.
Resource loading
All Magnolia resources, including theme resources, are loaded under the /.resources ("dot resources") path.
...
Theme resources can also be loaded from an external source by specifying the full URL. This is very useful if you use a CDN to store, cache and deliver your static resources.
See Resources and Module structure for more.
Benefits of using a theme
...
cssFiles | optional CSS node of the theme. | |||||
| required Arbitrary node name. Add a node for each sheet. | |||||
| optional Embeds a file content fingerprint in the resource URL. The fingerprint consists of a timestamp in the | |||||
| required Path to the CSS file that is added to the HTML. See Adding style to HTML for more. See also Web resources and Origins and loading order for different options for storing and loading resources. | |||||
| optional Media associated with the linked CSS file. If you use a responsive web design framework like Bootstrap or Foundation set this property to | |||||
| optional Defines the conditional comment attribute for the linked CSS file. Conditional comments are used to overcome the limitations of legacy browsers such as Internet Explorer 9 and earlier. For example, the conditional comment "
|
...
jsFiles | optional JavaScript node of the theme. |
| required Arbitrary node name. Add a node for each JavaScript file. |
| optional Embeds a file content fingerprint in the resource URL. The fingerprint consists of a timestamp in the |
| required Path to the JavaScript file. See Web resources and Origins and loading order for different options for storing and loading resources. |
...
Themes can make use of the Imaging module to preconfigure image variations. A variation is a specific configuration that defines features of a target image. Variations can range from complex operations, such as applying filters and overlays, to simple resizing of the target image.
...
imaging | optional Imaging node of the theme. | ||||||||
| required Image variations node. | ||||||||
| required The name of the variation, a.k.a the rendition name. The name is used to call the variation in template scripts. Add one node for every variation. | ||||||||
| required You can use one of the available classes or create a custom one. The available properties depend on the class used for the variation. Any custom class must implement
MTE module provides
| ||||||||
| Add properties that are supported by the class used. | ||||||||
| required
| ||||||||
| optional Enables and disables variation support. |
...
Themes are assigned to a site in the theme node of the site definition in the Site app.
Example: Travel Demo Site Definition (CE)
...
Theme definitions from all sources and origins are available in the Definitions app. Select theme in Of type to find all theme definitions. You can hotfix themes in the Resource Files app. Select the theme definition and click Show in Resources in the Definitions app to access the file.
...
Overview
Content Tools