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.

...

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.

...

Theme resources are applied to the entire site.
Resources are all in one place.
Themes are an easy way to work with resources without having to modify the head section of your HTML
You can define more than one theme and switch between them, or apply a different theme to a variation of your site. For example, you could use a different theme for pages targeted at U.S. users and European users, or a seasonal theme for different times of the year.
You can still use different or additional overriding resources on a page-template level.

Configuring a theme with YAML

Magnolia 5.4.6+

See Using a site definition for an example with a YAML file based theme.

Configuring a theme with JCR

Themes are configured in the Themes tab of the Site app.

...

Three configuration nodes define the individual elements of a theme:

travel-demo-theme


`cssFiles`	Optional References CSS files.
`jsFiles`	Optional References JavaScript files.
`imaging`	Optional Defines image variations a.k.a renditions.

CSS files

Links to CSS resources are configured in the cssFiles node of the theme.

...

Advanced Tables - Table Plus

heading	0
multiple	false
enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

Node name

Value

Mgnl n

my-theme

Mgnl n

cssFiles

Mgnl n

bootstrap

Mgnl p

addFingerPrint

true

Mgnl p

link

/.resources/travel-demo-theme/libs/twitterbootstrap/css/bootstrap.min.css

Mgnl p

media

all

Mgnl n

travels-magnolia

Mgnl p

addFingerPrint

true

Mgnl p

link

/.resources/travel-demo-theme/css/travels-magnolia.css

Mgnl p

media

all

Mgnl n

roboto-condensed

Mgnl p

addFingerPrint

true

Mgnl p

link

https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700

Mgnl p

media

all

Properties:

cssFiles

optional

CSS node of the theme.

<name>

required

Arbitrary node name. Add a node for each sheet.

addFingerPrint

optional

Embeds a file content fingerprint in the resource URL. The fingerprint consists of a timestamp in the yyyy-MM-dd-HH-mm-ss-SSS format and the word "cache" both preceded by the the standard selector ("~" tilde). For example the travels-magnolia link (above) becomes /.resources/travel-demo-theme/css/travels-magnolia~2015-08-16-09-49-00-000~cache.css. Google recommends fingerprinting as a best practice.

link

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.

media

optional

Media associated with the linked CSS file. If you use a responsive web design framework like Bootstrap or Foundation set this property to all. See Media descriptors for a list of available media.

conditionalComment

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 "lte IE9" would be translated to:

Code Block

language	xml

<!--[if lte IE9]>
	//inclusion of the stylesheet or javascript resource
<![endif]-->

This simple theme example uses only the default Bootstrap minimized CSS with no customizations.

...

Advanced Tables - Table Plus

heading	0
multiple	false
enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

Node name

Value

Mgnl n

my-theme

Mgnl n

jsFiles

Mgnl n

modernizer

Mgnl p

addFingerPrint

true

Mgnl p

link

/.resources/travel-demo-theme/js/modernizr-2.6.2.min.js

Properties:

`jsFiles`	optional JavaScript node of the theme.
`<name>`	required Arbitrary node name. Add a node for each JavaScript file.
`addFingerPrint`	optional Embeds a file content fingerprint in the resource URL. The fingerprint consists of a timestamp in the `yyyy-MM-dd-HH-mm-ss-SSS` format, and the word "cache" both preceded by the the standard selector ("~" tilde). For example the modernizer link (above) becomes `/.resources/travel-demo-theme/js//modernizr-2.6.2.min~2015-08-16-09-49-00-000~cache.css`. Google recommends fingerprinting as a best practice.
`link`	required Path to the JavaScript file. See Web resources and Origins and loading order for different options for storing and loading resources.

Here's an example JavaScript alert box using JQuery and the default Bootstrap minimized CSS.

...

Advanced Tables - Table Plus

heading	0
multiple	false
enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

Node name

Value

Mgnl n

travel-demo-theme

Mgnl n

imaging

Mgnl n

variations

Mgnl n

1600

Mgnl p

class

info.magnolia.templating.imaging.variation.SimpleResizeVariation

Mgnl p

width

1600

Mgnl n

1366

Mgnl n

...

Mgnl n

240

Mgnl n

1600x1200

Mgnl p

class

info.magnolia.templating.imaging.variation.SimpleResizeVariation

Mgnl p

height

1200

Mgnl p

width

1600

Mgnl n

1366x1024

Mgnl n

...

Mgnl n

240x180

Mgnl p

class

info.magnolia.templating.imaging.VariationAwareImagingSupport

Properties:

imaging

optional

Imaging node of the theme.

variations

required

Image variations node.

<variation>

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.

class

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

Javadoc

0	info.magnolia.imaging.variation.Variation

.

MTE module provides

Javadoc

0	info.magnolia.templating.imaging.variation.SimpleResizeVariation

that resizes images to a defined size in pixels (see below for available properties).

<properties>

Add properties that are supported by the class used.

class

required

Javadoc

0	info.magnolia.templating.imaging.VariationAwareImagingSupport

provides support for variations.

enabled

optional

Enables and disables variation support.

Configuring a simple resize

The SimpleResizeVariation class is suitable for most resize variations. It resizes the original image to a defined size in pixels.

Properties:

<variation name>


`class`	required `SimpleResizeVariation` resizes images to a defined size.
`crop`	optional, default is `true` Whether cropping is allowed.
`height`	optional An integer that defines the height in pixels.
`width`	optional An integer that defines the width in pixels.

Behavior:

Although both the width and height properties are optional you must configure at least one. If you omit both the renderer intentionally throws an internal ImagingException and the image displays in it's original uploaded size.
If you define both width and height the image is sized down to the lower of the two and the rest is cropped, if necessary. Cropping starts from the middle, so the image is either cropped on top and bottom, or left and right.
If you define only width or height, the omitted property is calculated using the aspect ratio of the original image.
if you set crop to false, the image is resized to the specified size, and may be distorted (stretched).

See damfn and Working How to work with images using damfn for how to use variations in your scripts.

...

Advanced Tables - Table Plus

heading	0
multiple	false
enableHeadingAttributes	false
enableSorting	false
class	m5-configuration-tree
enableHighlighting	false

Node name

Value

Mgnl n

templates

Mgnl n

themes

Mgnl p

name

travel-demo-theme

Mgnl n

i18n

Properties:

themes

required

Theme node.

name

required

The value of this property must match the name of the theme configured in /modules/site/config/themes.

Using theme resources in template scripts

...

Page tree

Versions Compared

Old Version 1

New Version Current

Key

Configuring a theme with YAML

Configuring a theme with JCR

CSS files

Configuring a simple resize

Using theme resources in template scripts