Introduction to Morphs Module Suffixes (ModuleFX)

If you have ever used one of our templates before, you may recognize this feature. In fact, the popularity of this feature in our 1st generation templates sparked the birth of the entire FX Range of features available in Morph.

With Morph, you can apply any of the module styles to any module in any position by simply adding suffixes.

What is a suffix?

"A suffix (also postfix, ending) is an affix which is placed after the stem of a word"

In the Joomla world, a suffix refers to text added to the modules code.

Every module in Joomla has a parameter option (input box) where you can add a suffix or a combination of suffixes. This allows you to style each module individually.

You can use suffixes to add additional styling to a module or give it a different look from other modules on the page. When you add a suffix, or a combination (string) of suffixes, it will automatically be added to the default css class of the module in the modules code.

How to work with Module FX - before you start

The first thing you should do is take a look at the full list of preset ModuleFX styles available in Morph to get an idea what can be done.

There are loads of preset styles for the different elements of a module, ie. title/header and module container. There are also some "control suffixes" that can be used to force the modules to look differently, by removing padding, margin and borders, etc. Here is brief summary of the module suffix types.

How to work with Module FX - adding the suffixes

Adding a suffix is a lot easier that you may at first think, lets take a look at how this is done in the Joomla admin:

Open the module for which you want to add a suffix. On the right hand side you see "Module Parameters" > "Module Class Suffix" and that's where you add the suffix.

Chaining the suffixes together to apply multiple styles

By adding the suffixes together, you can easily change the color of the text, add a background color and add an icon all in one suffix. All you need to do is add a space between each suffix you apply and the rest will happen automatically.

For example, a header icon can be applied with a heading color to create a module with a specific icon and color by using a suffix something like this. "h3color03 h3bgcolor08 h3icon06"

Using control styles to further change the module

You can easily strip away any borders or padding from either the heading or the module body using a "control suffix" just the same way you add the styles. You just need to know what they are.