Module & Menu Styles

Module Styles

By default, every module looks like this:

Module styles
Module styles

Using the Module Class Suffix module parameter, you can apply any of the available 32 color styles, for example:

Using module class suffix to apply styles
Using module class suffix to apply styles

After adding the module class suffix, the module background is changed to dark green.

Module styles
Module with background color applied

Refer to the Color Variations section for the complete list of available classes.

There are additional classes that can help you further adjust the module appearance. If you want the module to appear rounded, use one of these classes:

  • rounded-xs - extra small border radius
  • rounded-sm - small border radius
  • rounded-md - medium border radius
  • rounded-lg - large border radius

When using more than one CSS class name, add spaces between classes. For example, to add one of the rounded classes above, the syntax would be bg-dark-blue2 rounded-sm and the result can be seen below:

Module with rounded borders
Module with rounded borders

You can also add a visible border that's slightly darker than the chosen background color using the bordered class name, for example bg-light-brown3 rounded-sm bordered and the result is:

Module with visible border
Module with visible border

There are helper classes for extra margin or padding:

  • padding-5 - adds 5px padding
  • padding-10 - adds 10px padding
  • padding-15 - adds 15px padding
  • padding-20 - adds 20px padding
  • margin-5 - adds 5px margin
  • margin-10 - adds 10px margin
  • margin-15 - adds 15px margin
  • margin-20 - adds 20px margin

For example, to add an extra 10px padding to the module content, use the padding-10 class. For example bg-light-green4 rounded-sm bordered padding-10 can be seen below:

Module with padding
Module with padding

Module Title Styles

In addition to the styles for module content, there are classes for module headers as well:

  • titlebar
  • titlebar-outside

Use the above class names in the Header Class module parameter, for example:

Using the Header Class module parameter
Using the Header Class module parameter

This adds a visible header area for the module title seen below:

Module with title header
Module with title header

The module header also supports the same background styles and helper classes as the module itself. So we can combine them to achieve different styles. For example, using titlebar-outside bg-dark-red2 rounded-sm we get the following result:

Module header multile style classes applied
Module header multile style classes applied

Vertical Menu

To display menu links vertically, use the menu-vertical class name in the Menu Class Suffix parameter:

Using the module's menu class suffix
Using the module's menu class suffix

Below you can see the output of the menu module with the vertical CSS class applied.

Vertical menu module
Vertical menu module

Horizontal Menu

To display a menu horizontally, use the menu-horizontal in the Menu Class Suffix parameter.

Horizontal menu module
Horizontal menu module

Utility Classes

Hiding modules on phones or tablets

If you want to hide a module on phones or tables, you can use Bootstrap's utility classes in the module class suffix setting.

Bootstrap breakpoint classes
Bootstrap breakpoint classes

For example, to hide the module on very small devices (phones), use hidden-xs:

Mobile detection

The template has support for Mobile Detection. If you add the hidden-phone CSS class name to a module and the template detects a mobile device, it will prevent the module from loading for improved performance. The hidden-tablet CSS class name is also supported, but it's not recommended to use it because most tablets can display a large site layout.

Modules Inside Menus

The template allows you to create custom module positions inside menus. In the following example you can see the login module shown in a dropdown menu:

Login module in dropdown menu
Login module in dropdown menu

The first step is to create a Separator menu link in the horizontal menus where you want to display a module as a dropdown.

reating a text separator menu link
Creating a text separator menu link

Next, in the Note setting of the text separator menu item, write a custom name for the module position. The name must begin with menu-position. For example: menu-position-1:

Using menu notes to add the module position name
Using menu notes to add the module position name

Finally, go to the Module Manager and assign the module you want to display inside the menu to the custom position you wrote in the separator menu notes. If your custom module position isn't listed in the positions list, you can click on the select list, type in the name of your custom module position and press Enter.

Assigning a module to menu position
Assigning a module to menu position

You can assign up to 3 modules to the same menu position. To define how many columns each module will take, use the Bootstrap Size parameter, the same as with regular modules. For more information read Module Positions.

By default, a dropdown will appear when you mouseover the parent menu item. For horizontal menus, you can change the behavior to click and an arrow will be shown to indicate that it can be clicked.

The dropdown feature only works for menus of type System Links → Separator. Make sure you are using this menu type for your parent menus instead of System Links → Menu Heading does not work.

Dropdown menus with click to open behavior
Dropdown menus with click to open behavior

To enable this, go to the Module Manager and add the dropdown-click class in the Menu Class Suffix of your menu module:

Menu class suffix with dropdown-click class
Menu class suffix with dropdown-click class

This is recommended for menus that contain modules, but you can use it for any horizontal menu.

Continue to Error Pages →