This page details the module classes available in this theme.

Module Example Plain

This module uses no module classes

Module Example Shadow

Module Class Suffix:

zen-shadow

Module Example Shadow2

Module Class Suffix:

zen-shadow2

Small Example

Module Class Suffix:

zen-small

Medium Example

Module Class Suffix:

zen-medium

Large Example

Module Class Suffix:

zen-large

Color Variations

Color Example Primary1

Module Class Suffix:

zen-primary1

Color Example Primary1 and Shadow

Module Class Suffix:

zen-shadow zen-primary2

Color Example Primary1 and Shadow2

Module Class Suffix:

zen-shadow2 zen-primary3

Color Example Primary1

Module Class Suffix:

zen-primary1

Color Example Primary2

Module Class Suffix:

zen-primary2

Color Example Primary3

Module Class Suffix:

zen-primary3

Color Example Secondary1

Module Class Suffix:

zen-secondary1

Color Example Secondary2

Module Class Suffix:

zen-secondary2

Color Example Secondary3

Module Class Suffix:

zen-secondary3

Color Example Tertiary1

Module Class Suffix:

zen-tertiary1

Color Example Tertiary2

Module Class Suffix:

zen-tertiary2

Color Example Tertiary3

Module Class Suffix:

zen-tertiary3

Color Example Quaternary1

Module Class Suffix:

zen-quaternary1

Color Example Quaternary2

Module Class Suffix:

zen-quaternary2

Color Example Quaternary3

Module Class Suffix:

zen-quaternary3

Color Example Quinary1

Module Class Suffix:

zen-quinary1

Color Example Quinary2

Module Class Suffix:

zen-quinary2

Color Example Quinary3

Module Class Suffix:

zen-quinary3

Background Color Variations

BG Color Example

Module Class Suffix:

zen-bg

BG Color with Shadow Example

Module Class Suffix:

zen-shadow zen-bg

BG Color with Shadow2 Example

Module Class Suffix:

zen-shadow2 zen-bg

BG Color Example Primary1

Module Class Suffix:

zen-bg zen-primary1

BG Color Example Primary2

Module Class Suffix:

zen-bg zen-primary2

BG Color Example Primary3

Module Class Suffix:

zen-bg zen-primary3

BG Color Example Secondary1

Module Class Suffix:

zen-bg zen-secondary1

BG Color Example Secondary2

Module Class Suffix:

zen-bg zen-secondary2

BG Color Example Secondary3

Module Class Suffix:

zen-bg zen-secondary3

BG Color Example Tertiary1

Module Class Suffix:

zen-bg zen-tertiary1

BG Color Example Tertiary2

Module Class Suffix:

zen-bg zen-tertiary2

BG Color Example Tertiary3

Module Class Suffix:

zen-bg zen-tertiary3

BG Color Example Quaternary1

Module Class Suffix:

zen-bg zen-quaternary1

BG Color Example Quaternary2

Module Class Suffix:

zen-bg zen-quaternary2

BG Color Example Quaternary3

Module Class Suffix:

zen-bg zen-quaternary3

BG Color Example Quinary1

Module Class Suffix:

zen-bg zen-quinary1

BG Color Example Quinary2

Module Class Suffix:

zen-bg zen-quinary2

BG Color Example Quinary3

Module Class Suffix:

zen-bg zen-quinary3

Border Color Variations

Border Example

Module Class Suffix:

zen-border

Border with Shadow Example

Module Class Suffix:

zen-shadow zen-border

Border with Shadow2 Example

Module Class Suffix:

zen-shadow2 zen-border

Border Example Primary1

Module Class Suffix:

zen-border zen-primary1

Border Example Primary2

Module Class Suffix:

zen-border zen-primary2

Border Example Primary3

Module Class Suffix:

zen-border zen-primary3

Border Example Secondary1

Module Class Suffix:

zen-border zen-secondary1

Border Example Secondary2

Module Class Suffix:

zen-border zen-secondary2

Border Example Secondary3

Module Class Suffix:

zen-border zen-secondary3

Border Example Tertiary1

Module Class Suffix:

zen-border zen-tertiary1

Border Example Tertiary2

Module Class Suffix:

zen-border zen-tertiary2

Border Example Tertiary3

Module Class Suffix:

zen-border zen-tertiary3

Border Example Quaternary1

Module Class Suffix:

zen-border zen-quaternary1

Border Example Quaternary2

Module Class Suffix:

zen-border zen-quaternary2

Border Example Quaternary3

Module Class Suffix:

zen-border zen-quaternary3

Border Example Quinary1

Module Class Suffix:

zen-border zen-quinary1

Border Example Quinary2

Module Class Suffix:

zen-border zen-quinary2

Border Example Quinary3

Module Class Suffix:

zen-border zen-quinary3

Inset Variations

Inset Example

Module Class Suffix:

zen-inset

Inset Example Shadow

Module Class Suffix:

zen-inset zen-shadow

Inset Example Shadow2

Module Class Suffix:

zen-inset zen-shadow2

Inset Example Secondary2

Module Class Suffix:

zen-inset zen-secondary2

Inset BG Example Quaternary2

Module Class Suffix:

zen-inset zen-bg zen-quaternary2

Inset Border Example Senary2

Module Class Suffix:

zen-inset zen-border zen-senary2

New & Hot

New Example

Module Class Suffix:

zen-new

New with Shadow Example

Module Class Suffix:

zen-new zen-shadow zen-quaternary2

New with Inset Example

Module Class Suffix:

zen-new zen-inset zen-quinary1

Hot with Color Example

Module Class Suffix:

zen-hot zen-quinary3

Hot with BG Example

Module Class Suffix:

zen-hot zen-bg quaternary3

Hot with Border Example

Module Class Suffix:

zen-hot zen-border tertiary2

Rounded

Rounded with Shadow Example

Module Class Suffix:

zen-rounded zen-shadow

Rounded with Shadow2 Example

Module Class Suffix:

zen-rounded zen-shadow2

Rounded with Inset Example

Module Class Suffix:

zen-rounded zen-inset zen-secondary1

Hot with New Example

Module Class Suffix:

zen-rounded zen-new zen-quinary3

Rounded with BG Example

Module Class Suffix:

zen-rounded zen-new zen-bg zen-primary3

Rounded with Border Example

Module Class Suffix:

zen-rounded zen-hot zen-border zen-primary1

Corner

Corner Example

Module Class Suffix:

zen-corner

Corner with Color Example

Module Class Suffix:

zen-corner zen-primary3

Corner with BG Example

Module Class Suffix:

zen-corner zen-bg zen-secondary3

Corner and Inset Example

Module Class Suffix:

zen-corner zen-inset

Corner with Rounded Example

Module Class Suffix:

zen-corner zen-rounded zen-bg zen-quinary1

Corner with Border Example

Module Class Suffix:

zen-corner zen-bg zen-border zen-quaternary1

Icons

Icon Example

Module Class Suffix:

zen-icon zen-icon-twitter

Icon with Color Example

Module Class Suffix:

zen-icon zen-icon-spinner zen-tertiary3

Icon with BG Example

Module Class Suffix:

zen-icon zen-icon-bullseye zen-bg zen-quaternary3

Icon Small

Module Class Suffix:

zen-icon zen-icon-comments zen-small-icon zen-inset zen-bg zen-secondary2

Icon Medium Example

Module Class Suffix:

zen-icon zen-icon-cog zen-medium-icon zen-left-icon zen-bottom-icon zen-hot zen-bg zen-quinary1

Icon Large Example

Module Class Suffix:

zen-icon zen-icon-users zen-large-icon zen-middle-icon zen-border zen-quaternary1

Icon Small

Module Class Suffix:

zen-icon zen-icon-phone zen-small zen-inset zen-bg zen-secondary2

Icon Medium Example

Module Class Suffix:

zen-icon zen-icon-pinterest zen-medium zen-center-icon zen-middle-icon zen-corner zen-bg zen-tertiary2

Icon Large Example

Module Class Suffix:

zen-icon zen-icon-home zen-large zen-bottom-icon zen-center-icon zen-border zen-rounded zen-quinary2

Heading Icons

Title Icon Example

Module Class Suffix:

none

Header Class:

zen-icon zen-icon-code

Icon with Color Example

Module Class Suffix:

zen-primary1

Header Class:

zen-icon zen-icon-umbrella

Icon with BG Example

Module Class Suffix:

zen-bg zen-secondary3

Header Class:

zen-icon zen-icon-star

Icon and Inset Example

Module Class Suffix:

zen-corner zen-inset zen-bg zen-quaternary1

Header Class:

zen-icon zen-icon-power-off

Icon with Rounded Example

Module Class Suffix:

zen-rounded zen-bg zen-quinary1

Header Class:

zen-icon zen-icon-road

Icon with Border Example

Module Class Suffix:

zen-border zen-quaternary2

Header Class:

zen-icon zen-icon-play-circle-o

Heading Line

Line Example

Module Class Suffix:

none

Header Class:

zen-line

Line with Color Example

Module Class Suffix:

zen-primary1

Header Class:

zen-line

Line with BG Example

Module Class Suffix:

zen-bg zen-secondary3

Header Class:

zen-line

Line with Icon Example

Module Class Suffix:

zen-corner zen-inset zen-bg zen-tertiary3

Header Class:

zen-line zen-icon zen-icon-power-off

Line with Rounded Example

Module Class Suffix:

zen-rounded zen-bg zen-primary3

Header Class:

zen-line zen-icon-lock zen-icon-large zen-icon-bottom

Line with Border Example

Module Class Suffix:

zen-border zen-quaternary1

Header Class:

zen-line

Alignement

Centered Example

Module Class Suffix:

zen-centered

Right Example

Module Class Suffix:

zen-right

Heading Center Example

Header Class:

zen-center

Heading Right Example

Header Class:

zen-right

Center Line Example

Header Class:

zen-center zen-line

Right Line Example

Header Class:

zen-right zen-line

Center Line with Icon Example

Header Class:

zen-center zen-line zen-icon zen-icon-thumbs-o-up

Right Line with Icon Example

Header Class:

zen-right zen-line zen-icon zen-icon-thumbs-o-down

This template is built using the Zen Grid Framework and contains 52 module positions for you to use to create flexible page layouts. For a full understanding of how the module positions work in framework compatible templates please visit the Zen Grid Framework documentation.

Zen Grid Framework v5 (zgf5) based themes feature a simple and easy to use user interface. There are a lot of features under the hood and at your fingertips, but the zgf5 interface keeps things organised with helpful hints, headings and menus to make sure you stay on the path.

Leggi tutto...

Zen Grid Framework v5 (zgf5) themes come with a simple Joomla plugin to replicate some key Mega Menu functionality in your Joomla site. The Zen Menu plugin can be downloaded here - please note that the plugin will only work with the html overrides found in zgf5 based themes.

Leggi tutto...

Flexible font control has always been a part of the Zen Grid Framework based themes and that tradition continues in Zen Grid Framework 4 (zgf5) themes by making it super simple to use standard web native fonts or any of the hundreds of fonts available on the google webfont directory.

Leggi tutto...

Zen Grid Framework 4 (zgf5) based themes feature an array of built in effects to add a little dazzle to your Joomla website. Some of these effects add key functionality to your site's user interaction while others are just there for the fun of it.

Leggi tutto...

Zen Grid Framework v5 (zgf5) based themes have a number of options for adapting your website design to suit the device or screen size your visitor is viewing your site with. Responsive design is more than just making sure that the design doesn't break. It's about providing an optimum experience for your user regardless of the medium they are using to view your site with.

Leggi tutto...

Zen Grid Framework V5 (ZGF5) themes come with a new and enhanced layout tool, that breaks open the previous paradigm of restrictive control over module positions. ZGF5 themes make it possible for you to drag and drop a module position into any row in the template or simply reorder the module position in it's given row.

Want to put the menu above the logo? Sure we can do that.

 

Or how about the menu below the logo and swap the logo and search module positions. 

No more messy overrides. Just simply drag a module to a new position and save.

Leggi tutto...

The accordion menu has long been a feature of Zen Grid Framework themes. A simple piece of javascript transformed your standard Joomla menu module into an accordion menu that allows the user to navigate through multi-level vertical menus in your site's sidebar. You can see an example of the mega menu infused accordion menu in the sidebar on this page.

Leggi tutto...