Module & Menu Styles

Module Styles

By default, every module looks like this:

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

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

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:

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:

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

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

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:

Vertical Menu

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

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

Horizontal Menu

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

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.

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:

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

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:

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.

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.

Menu Click Dropdowns

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.

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

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

Continue to Error Pages →