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

Color Example Senary1

Module Class Suffix:

zen-senary1

Color Example Senary2

Module Class Suffix:

zen-senary2

Color Example Senary3

Module Class Suffix:

zen-senary3
 

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

BG Color Example Senary1

Module Class Suffix:

zen-bg zen-senary1

BG Color Example Senary2

Module Class Suffix:

zen-bg zen-senary2

BG Color Example Senary3

Module Class Suffix:

zen-bg zen-senary3
  

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

Border Example Senary1

Module Class Suffix:

zen-border zen-senary1

Border Example Senary2

Module Class Suffix:

zen-border zen-senary2

Border Example Senary3

Module Class Suffix:

zen-border zen-senary3
 

Legacy Color Variations

Legacy Example Primary1

Module Class Suffix:

zen-legacy zen-primary1

Legacy Example Primary2

Module Class Suffix:

zen-legacy zen-primary2

Legacy Example Primary3

Module Class Suffix:

zen-legacy zen-primary3

Legacy Example Secondary1

Module Class Suffix:

zen-legacy zen-secondary1

Legacy Example Secondary2

Module Class Suffix:

zen-legacy zen-secondary2

Legacy Example Secondary3

Module Class Suffix:

zen-legacy zen-secondary3

Legacy Example Tertiary1

Module Class Suffix:

zen-legacy zen-tertiary1

Legacy Example Tertiary2

Module Class Suffix:

zen-legacy zen-tertiary2

Legacy Example Tertiary3

Module Class Suffix:

zen-legacy zen-tertiary3

Legacy Example Quaternary1

Module Class Suffix:

zen-legacy zen-quaternary1

Legacy Example Quaternary2

Module Class Suffix:

zen-legacy zen-quaternary2

Legacy Example Quaternary3

Module Class Suffix:

zen-legacy zen-quaternary3

Legacy Example Quinary1

Module Class Suffix:

zen-legacy zen-quinary1

Legacy Example Quinary2

Module Class Suffix:

zen-legacy zen-quinary2

Legacy Example Quinary3

Module Class Suffix:

zen-legacy zen-quinary3

Legacy Example Senary1

Module Class Suffix:

zen-legacy zen-senary1

Legacy Example Senary2

Module Class Suffix:

zen-legacy zen-senary2

Legacy Example Senary3

Module Class Suffix:

zen-legacy zen-senary3

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 Quaternary3

Module Class Suffix:

zen-inset zen-border zen-quaternary3

New & Hot

New Example

Module Class Suffix:

zen-new

New with Shadow Example

Module Class Suffix:

zen-new zen-shadow zen-tertiary2

New with Inset Example

Module Class Suffix:

zen-new zen-inset zen-tertiary3

Hot with Color Example

Module Class Suffix:

zen-hot zen-quinary3

Hot with BG Example

Module Class Suffix:

zen-hot zen-bg senary1

Hot with Border Example

Module Class Suffix:

zen-hot zen-border senary3

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-senary1

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-primary2

Rounded with Border Example

Module Class Suffix:

zen-rounded zen-hot zen-border zen-secondary1

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-senary1

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-tertiary2

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-quaternary2

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-secondary2

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-quaternary1

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-quaternary3

Header Class:

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

Line with Rounded Example

Module Class Suffix:

zen-rounded zen-bg zen-quaternary2

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

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.

Read more ...

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.

Read more ...

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.

Read more ...

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.

Read more ...