Magnolia 5.3 reached end of life on June 30, 2017. This branch is no longer supported, see End-of-life policy.

Page tree
Skip to end of metadata
Go to start of metadata

You can define global CSS and JavaScript in the template prototype. For example, you could reference AngularJS or another JavaScript framework, add a menu slider script, or something else. Remember that referencing such files in the prototype is a global change – the files will be referenced from every page on every site.

Magnolia does not reference any CSS or JavaScript from the prototype by default. The pop theme includes all such resources. The demo sites reference the pop theme in their site definitionsSee Themes and htlmHeader area for more information about the default configuration.

Best practice

Configure CSS and JavaScript in the template prototype only if you need them on every page and don't plan to change them often. This is rare. Most JavaScript frameworks and function scripts are better placed in your theme. It makes switching themes easier.

For example, you probably don't want to reference a tracking cookie script in the prototype. Magnolia would serve the same tracking ID for all sites, whereas typically want to track each site separately. (Magnolia's Google Analytics module plugs itself into the theme aggregator scripts rather than the prototype, so you don't need to worry about GA.)

The example configuration below references custom Javascript and CSS files in the template prototype.

Node nameValue

 default

 

 templates

 

 prototype

 

 cssFiles

 

 styles

 

 farFutureCaching

true

 link

/resources/templating-kit/prototype/css/styles.css

 media

screen

 jsFiles

 

 fireworks

 

 farFutureCaching

true

 link

/resources/templating-kit/prototype/js/fireworks.js

The JavaScript adds exploding fireworks to the page and the CSS changes the header background color to green. Note that the htmlHeader area finds the custom JavaScript and renders it in the head element of the page.