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

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.

The content in this tab is the content from a custom html module. In order to control the order of the tabs simply change the ordering of the items in the Joomla administrator.

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

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.

Structural Classes

Structural module classes

These module classes are used to adjust the positioning of a module. eg if you want to move your module 225px down then you would use the top225 module class.

  • top25 {margin-top: 25px}
  • top50 {margin-top: 50px}
  • top75 {margin-top: 75px}
  • top100 {margin-top: 100px}
  • top125 {margin-top: 125px}
  • top150 {margin-top: 150px}
  • top175 {margin-top: 175px}
  • top200 {margin-top: 200px}
  • top225 {margin-top: 225px}
  • top250 {margin-top: 250px}
  • top275 {margin-top: 275px}
  • top300 {margin-top: 300px}
  • top325 {margin-top: 325px}
  • top350 {margin-top: 350px}
  • top375 {margin-top: 375px}
  • top400 {margin-top: 400px}
  • top425 {margin-top: 425px} 
  • top450" {margin-top: 450px}
  • top475 {margin-top: 475px}
  • top500 {margin-top: 500px}

Appearance

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:

example class suffixprimary1 inset border

Font Icon Classes

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.