We relaunched our website. Take a look around to see what's new.

Using Module Classes

This template comes with a wide variety of ways in which to style your module content. There are a tonne of options to choose from and you can even combine them. Check out the descriptions in the content below or view them in action at the bottom of this page.

This template comes with a wide variety of ways in which to style your module content. There are a tonne of options to choose from and you can even combine them. Check out the descriptions in the content below or view them in action at the bottom of this page.

Functional module styles

The following module types are invoked on your site when you select the module chrome from the drop down list in the module settings of the module that you are trying to target.

Zentabs

This module chrome allows you to display multiple modules in a tabbed format. This chrome requires at least two modules published to the same position using the same module chrome in order to function.

This is another custom html module published using the zentabs module style.

This is a custom html module published to the tabs position. Tabbed layouts like this can easily be added by publishing multiple modules to the tabs position.

Zenslider

This module chrome uses the title of the module to trigger the opening or closing of a slider which slides up and down to show and hide the content of the module. Click on the title of the item below in order to hide or show the content in the module.

Slider

This is text from another custom html module given the module style - zenslider.

Appearance module classes

Appearance classes are used to change the way a module looks. The primary and secondary class suffixes use colours that are defined in your template settings or via the variables.less associated with the primary and secondary variables.

primary1

primary2

primary3

secondary1

secondary2

secondary3

inset

border

shadow

shadow2

hot - adds the word hot to the .moduletable h3 span:after

new - adds the word new to the .moduletable h3 span:after

The appearance module classes can be used in combination with each other to create more compel xmodule styles. To use multiple styles together please ensure that each module class suffix is separated by a space as per the following example. Also please note that there needs to be a space before the start of the first class in order to render the class output properly:

Font Icon Module classes

Using a combination of module classes, it is possible to create a wide range of module styles using the font awesome font icons. The icons that are available for use are referenced from the font awesome font library, however you need to ensure that the template has included the Fotn Awesome Library in it's css file. This is done in the settings tab in the template settings and will be available after you enable the option, select all icons and then compile the less to css.

A typical module class suffix using the font icons looks like this:

example class suffixicon icon-comments large bottom secondary1

zen-icon - initiates the font icon display

zen-icon-comments - selects the icon to display. You can see a full list of icons available on the typography page.

large - (optional) You can choose between tiny, medium or large which set the font-size of the icon as follows: 1em, 2em (default), 4em and 8em.

bottom - (optional) Displays the icon at the bottom of the module. By default the icon is set to display at the top.

secondary1 - as per the examples on this page this refers to the built in colour control in the template.

You can scroll down to the bottom of this page to see a very small selection of the styles in action.