How to use module class suffix


Module Class Suffix is a parameter in Joomla! modules. This toturial will show you the easiest way to add and use Module Class Suffix to fine-tune the appearance of your site. The guide will be shown in Joomla! 3.4.1 and do the same with other Joomla versions.

Configuration Guide

In this document, we will step by step instructions for adding and config Class Suffix Module. You only need to take a few quick steps:

1. Add a new Suffix Template Style

  • In Joomla adminitration area, log in Extensions > Template Manage then duplicate zo2_abc - Default(abc is the name of template).


And here is the result:


2. Edit the Suffix Template Style

  • Double-click on the new duplicated style and modify them. Follow these steps:

2. 1. Zo2


  1. Rename the style
  2. Choose suffix as the Custom Profile

  • Choose the place where you want to use Module Class Suffix


*After that, do not forget to choose Save & Close to save all the changes.

3. Add a new class suffix module

  • Follow the path Extensions > Module Manager, choose New then Custom HTML to create a new module.


4. Module Usage Guide

4. 1. Overview


  • Module: This box gives you permissions to do general settings such as source, Joomla categories, ordering
  • Menu Assignment: You can choose which pages your module can appear: On all pages, No pages, Only on the pages selected or On all pages except those selected.
  • Module Permissions: This helps you manage the permission settings (Delete, Edit, Edit State) for the user groups.
  • Options: allows you to choose Prepare Content or Select a Background Image
  • Advanced: This box consist of some advanced settings for you to edit: Altternative Layout, Module Class Suffix, Catching, Cache Time, Module Tag, Bootstrap Size, Header Tag, Header Class, Module Style.

4. 2. Module


  1. Enter the title
  2. Enter the content for the module


  • This is where you choose where this module will be displayed. On all pages, No pages, Only on the page selected, On all pages except those selected

4. 4. Module Permissions


  • This allows you to manage the permission settings for the user groups. There are 3 options for you to choose Inherited/Allowed/Denied
  • Delete: (Inherited/Allowed/Denied). Allow or deny Delete for users in the Public group. Delete Allows users in the group to delete any content in this extension.
  • Edit: (Inherited/Allowed/Denied). Allow or deny Edit for users in the Public group. Edit Allows users in the group to edit any content in this extension.
  • Edit State: (Inherited/Allowed/Denied). Allow or deny Edit State for users in the Public group. Edit State Allows users in the group to change the state of any content in this extension.

4. 5. Options


  • Prepar Content: Optionally prepare the content with the Joomla Content Plugins
  • Select a Background Image: If you select an image, it will automatically be inserted as an inline style for the wrapping div element.

4. 6. Advanced


  • Alternative Layout: Use a different layout from the supplied module or overrides in the default template. If you ignore this, choose Default
  • Module Class Suffix: A suffix to be applied to the CSS class of the module. This allows for individual module styling
  • Caching: Use Global/No Caching. Whether or not to cache the content of this Module. A setting of “Use Global” will use the Cache Settings from the Global Configuration screen.
  • Cache Time: The length of time, in minutes, before the Module is re-cached.
  • Module Tag: The HTML tag for the module to be placed in. By default this is a div tag but other HTML5 elements can also be used.
  • Bootstrap Size: (Values 0 to 12) This allows you to choose the width of the module via the span element built into bootstrap. For more information see the bootstrap documentation.
  • Header Tag: The HTML tag to use for the modules header or title this can be either a h1-h6 tag or a p tag.
  • Header Class: Here you can add optional CSS classes to add to the modules header or title element.
  • Module Style: You can use this option to override the templates style for its position.

4. 7. More options

4. 7. 1. Show title, Position and Status

In the right column, make sure to set the following:


4. 7. 2. Start Publishing, Finish Publishing, Access, Ordering, Language

You can also set the Start Publishing, Finish Publishing, Access, Ordering and Language


After that, click the Save & Close button to apply your changes.

Support Us

We want to know if you are happy, unhappy, or disappointed with something the feature has done, or if you have a suggestion about how we can do something better.

All feedback will be taken seriously and treated confidentially.