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.
Cras vulputate velit elit. Curabitur gravida condimentum mi ut vehicula. Praesent dapibus sem quis nunc vulputate, id scelerisque tellus accumsan. Aliquam suscipit vehicula est, ut dapibus urna euismod eget. Nullam tristique non metus accumsan rhoncus. Etiam id euismod nisl. Nam consectetur blandit neque eget iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vel eleifend magna. Aliquam tortor lacus, hendrerit vitae efficitur vitae, feugiat id quam.
Sed pretium sodales nulla, non faucibus diam varius a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id hendrerit eros, eget pretium tellus. Ut lacinia ultrices purus, eu cursus nisi congue in. Etiam malesuada dictum diam at sollicitudin. Morbi tristique lectus ut nisi porta consequat. Fusce in justo blandit, fermentum sem sit amet, laoreet urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
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.
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.
- zen-bg
- zen-hot
- zen-new
- zen-right
- zen-centered
- zen-samll
- zen-medium
- zen-large
- zen-line
- zen-inset
- zen-border
- zen-corner
- zen-shadow
- zen-shadow2
- zen-rounded
- zen-primary1
- zen-primary2
- zen-primary3
- zen-secondary1
- zen-secondary2
- zen-secondary3
- zen-tertiary1
- zen-tertiary2
- zen-tertiary3
- zen-quaternary1
- zen-quaternary2
- zen-quaternary3
- zen-quinary1
- zen-quinary2
- zen-quinary3
- zen-senary1
- zen-senary2
- zen-senary3
- zen-septenary1
- zen-septenary2
- zen-septenary3
- zen-octonary1
- zen-octonary2
- zen-octonary3
- zen-nonary1
- zen-nonary2
- zen-nonary3
- zen-denary1
- zen-denary2
- zen-denary3
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 suffixzen-primary1 zen-inset zen-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.
- zen-icon
- zen-small-icon
- zen-medium-icon
- zen-large-icon
- zen-left-icon
- zen-right-icon
- zen-middle-icon
- zen-center-icon
- zen-bottom-icon
A typical module class suffix using the font icons looks like this:
example class suffixzen-icon zen-icon-comments zen-large-icon zen-bottom-icon zen-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.
- zen-large-icon - (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.
- zen-bottom-icon - (optional) Displays the icon at the bottom of the module. By default the icon is set to display at the top.
- zen-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.
