Top A

The Top-a position, using its default module styling.

Top B

The Top-b position, using its default module styling.

Top C

The Top-c position, using its default module styling.

Top D

The Top-d position, using its default module styling.

Top E

The Top-e position, using its default module styling.

Top F

The Top-f position, using its default module styling.

Header A

This is the Header-a module position, using the ribbon8 module class suffix.

Header D

This is the Header-d module position, using its default module styling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sem ut ipsum vestibulum euismod. Mauris et massa porta leo facilisis feugiat. Suspendisse id neque a sem facilisis blandit. Aliquam sem leo, commodo ut, rutrum auctor, iaculis.

Showcase A

This is the Showcase-a module position, which is using default module styling.

Read More

Showcase B

This is the Showcase-b module position, which is using default module styling.

Read More

Showcase E

This is the Showcase-e module position, which is using default module styling.

Read More

Showcase F

This is the Showcase-f module position, which is using default module styling.

Read More

Feature A

This is the Feature-a module position, using the ribbon1 module class suffix.

Read More

Feature B

This is the Feature-b module position, using its default module styling.

Read More

Feature C

This is the Feature-c module position, using the box1 module class suffix.

Read More

Feature D

This is the Feature-d module position, using the box2 module class suffix.

Read More

Feature E

This is the Feature-e module position, using the box3 module class suffix.

Read More

Feature F

This is the Feature-f module position, using the box4 module class suffix.

Read More

MainTop A

This is the Maintop-a module position, using the ribbon2 module class suffix.

Read More

MainTop D

This is the Maintop-d module position, using the box6 module class suffix.

Read More

MainTop E

This is the Maintop-e module position, using the box7 module class suffix.

Read More

MainTop F

This is the Maintop-f module position, which is using the box8 module class suffix.

Read More

Content Top A

This is the Content-top-a module position, using the ribbon3 module class suffix.

Content Top C

This is the Content-top-c module position, using its default module styling.

Module Variations

Module Variations

Module Variations allow for the individual styling of each module within a position, without it being global. Code wise, this is achieved by adding a class into the module code which loads from the Module Class Suffix field in the Module Manager. The theme CSS adjusts accordingly.

Enter any available suffixes at Extensions → Module Manager → Module → Module Class Suffix

There are 4 types of suffix: box1-8, ribbon1-8, footer and flush.

The Ribbon style modifies the module header with an under-wrapping ribbon graphic. Therefore, this style is best placed in the sidebar or the left most module in a row so overlap can occur. The Box style adds a colored block element around the module. Both can be placed inside any white areas: Feature, MainTop/Bottom, Content-Top/Bottom, Sidebar, Bottom & Footer. These will work in the Header, Showcase & Top positions but some may not blend as well visually.

Footer adds a single, solid, grey bar behind the module header to allow for a continuous bar across an entire module row - also confined to the white module areas. Flush will disable all padding and margin to the module for a tighter fit.

Content Bottom A

This is the Content-bottom-a module position, using the ribbon4 module class suffix.

Content Bottom C

This is the Content-bottom-c module position, using its default module styling.

Sidebar A

This is the Sidebar-a module position, using its default module styling.

All Sidebar positions can be placed in alternate orientations, such as Side Main Side Side rather than the default exhibited on the demo. This is done via a sliding configuration option in the administrator template parameters.

Read More

Sidebar A

This is the Sidebar-b module position, using the ribbon7 module class suffix.

Sidebar A

This is the Sidebar-b module position, using the ribbon8 module class suffix.

Sidebar B

This is the Sidebar-b module position, using the ribbon1 module class suffix.

Read More

Sidebar B

This is the Sidebar-b module position, using the ribbon2 module class suffix.

Read More

Sidebar B

This is the Sidebar-b module position, using the ribbon3 module class suffix.

Sidebar B

This is the Sidebar-b module position, using the ribbon4 module class suffix.

Sidebar C

This is the Sidebar-c module position, using the ribbon5 module class suffix.

Read More

Sidebar C

This is the Sidebar-c module position, using the ribbon6 module class suffix.

Read More

Sidebar C

This is the Sidebar-c module position, using the box7 module class suffix.

Sidebar C

This is the Sidebar-c module position, using the box8 module class suffix.

MainBottom A

This is the Mainbottom-a module position, using the ribbon5 module class suffix.

Read More

MainBottom B

This is the Mainbottom-b module position, using the box2 module class suffix.

Read More

MainBottom E

This is the Mainbottom-e module position, which is using default module styling.

Read More

MainBottom F

This is the Mainbottom-f module position, using the box6 module class suffix.

Read More

Bottom A

This is the Bottom-a module position, using the ribbon6 module class suffix.

Read More

Bottom B

This is the Bottom-b module position, using the ribbon4 module class suffix.

Read More

Bottom C

This is the Bottom-c module position, using its default module styling.

Read More

Bottom D

This is the Bottom-d module position, using the box7 module class suffix.

Read More

Bottom E

This is the Bottom-e module position, using its default module styling.

Read More

Bottom F

This is the Bottom-f module position, using the box5 module class suffix.

Read More