Top C

Top-c with its default module styling.

More

Top D

Top-d with its title4 module suffix.

More

Top E

Top-e with its title5 module suffix.

More

Top F

Top-f with its title6 module suffix.

More

Header A

Header-a with its default styling.

More

Header B

Header-b with its box1 class suffix.

More

Header C

Header-c with its default styling.

More

Header D

Header-d with its box2 class suffix.

More

Header E

Header-e with its default styling.

More

Header F

Header-f with its box3 class suffix.

More

Feature A

Feature-a with its default styling.

More

Feature B

Feature-b with its default styling.

More

Feature C

Feature-c with its box4 class suffix.

More

Feature D

Feature-d with its default styling.

More

Feature E

Feature-e with its box5 class suffix.

More

Feature F

Feature-f with its default styling.

More

Utility A

Utility-a with its title6 class suffix.

More

Utility B

Utility-b with its default styling.

More

Utility C

Utility-c with its default styling.

More

Utility D

Utility-d with its title4 class suffix.

More

Utility E

Utility-e with its default styling.

More

Utility F

Utility-f with its title5 class suffix.

More

Showcase A

Showcase-a, using the box1 bottomshadow module class suffix.

More

Showcase B

Showcase-b, using the box2 shadow1 module class suffix.

More

Showcase D

Showcase-d, using the box4 module class suffix.

More

MainTop A Module

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

More

MainTop B Module

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

More

MainTop C Module

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

More

Content Top C

Content-Top-c using its title2 module class suffix.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu.

More

Module Variations

Module Variations allow you to individually style a module Enter any available suffixes at Extensions → Module Manager → Module → Module Class Suffix

There are 30 suffixes: box1-5, title1-6, shadow1-9, notice1-4; flush, flushtop, flushbottom; plus standardcase, uppercase and lowercase.

  • Box: 5 variations to change the background of the module.
  • Title: 6 suffixes that vary the appearance of the module title.
  • Shadow: 9 suffixes which adds a drop shadow to the module.
  • Notice: 4 suffixes to match custom typography notices.
  • Standard/Upper/Lower Case: change the case style of the module title.
  • Flush/FlushTop/FlushBottom: removes the margin/padding around the module surround.

Content Bottom C

The Content-Bottom-c module position, using its title3 module class suffix.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu.

More

Sidebar A

All Sidebar positions can be alternated, such as Side Main Side.

This is done via a sliding configuration option in the template manager.

More

Sidebar A

Sidebar-a using its title5 module suffix.

More

Sidebar A

Sidebar-a using its box3 shadow3 module class suffix.

More

Sidebar A

Sidebar-a using its box4 shadow6 module class suffix.

More

Sidebar B

Sidebar-b using its title4 module suffix.

More

Sidebar B

Sidebar-b using its default module styling.

More

Sidebar B

Sidebar-b using its title6 module suffix.

More

Sidebar B

Sidebar-b using its default module styling.

More

Sidebar B

Sidebar-a using its box5 shadow9 module class suffix.

More

The MainBottom-a module position, using its notice1 module suffix.

The MainBottom-b module position, using its notice2 module suffix.

The MainBottom-d module position, using its notice3 module suffix.

Sidepanel

The Sidepanel position appears on every page. Therefore, the Mainbody grid is forced from full width to a distribution of 9.

There is a legacy function to force a full mainbody width if that is necessary. You will need to append ?layoutmode=component to the URL, such as via RokNavMenu.

More

Sidepanel

The Sidepanel module position, using its default module styling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu.

More

Suffix Combinations

Note: You can compound multiple suffixes together such as title2 standardcase flush. There are over 200 possible stylistic combos. The order must be box → title → icon → button for style combos, such as box2 title2 shadow2

Sidepanel

The Sidepanel module position, using its default module styling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu.

More

The Bottom-a module position, using its notice4 module suffix.

More

Bottom B

Bottom-b using its default module styling.

More

Bottom E

Bottom-e using its default module styling.

More

Bottom F

Bottom-f using its default module styling.

More