YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Set up the Joomla modules

This tutorial shows you how to set up the module system in your Warp based template.

Create a module

After installation of the template click on Extensions » Module Manager » New in the administration menu on top. Select a module and configure it on the following screen. Publish it to one of the template's module positions. For more detailed instructions on how to use modules see the Joomla Documentation.

Using Styles / Icons / Badges

Modules can be displayed in different styles with additional icons and badges. The /layouts/module.php takes care of displaying all these module variations.

As Joomla doesn't provide flexible parameters for modules we make use of the Module Class Suffix to pass parameters to style our modules. We use the following pattern to pass the parameters: KEY-VALUE. For example, if you use color-orange you can access the variable color which has the value orange. The Warp framework uses four pre-defined module parameters: style, color, badge and icon. But you can also add your own parameters. For example: myparameter-myvalue. Via the Module Class Suffix, you can pass as many variables as you want ... you just separate them with a space. For example: style-rounded color-black. All these variables can be accessed in the /html/modules.php file which controls all module handling and loading.

Pre-defined Module Parameters

The available values for the module parameters vary depending on which template you are using. Check out the Module Variations page of your template to find out which values are available.

  • style: Defines module appearance.
  • color: Defines which color variation gets loaded (only works if a module style comes with color variations.)
  • badge: Adds a badge to your module, usually in the top right corner.
  • icon: Adds an icon to the title of your module.

Add subtitles to module headers

Add sublines to menu items and module headers

A subtitle can be added to a module title by simply placing your subtitle text behind two "|" (pipe) characters. Navigate to Extensions » Module Manager and add the subtitle text behind two "|" characters in the title property of your module.

Publish a module in the menu

Publish your module on the position menu. Having both your main menu and your module published on the menu position, it should look like this in your Joomla module manager:

Module Manager showing modules on position "menu"

Set the module width in the menu

Set the width of a module on the menu position

In your Joomla backend, navigate to Extensions » Module Manager. Click on the module you have published on the menu position. In the parameters to the right you have to add the width to the module class suffix, e.g. dropdownwidth-255. Now the module in your menu will have this width.

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!