If you have ever used one of our (JoomlaJunkie) 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. In our first generation templates, this only worked in the sidebars. In Morph, you enable the FXgrid in the block level control settings and you're good to go. The FXgrid is part of Morph's ChromeFX feature, which you can read more about here.

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 of suffixes, it will automagically be added to the default css class of the module in the modules code.

It all started with the ModFX builder

joomla module fx builderFirst, take a look at the ModFX builder we created to help users of our 1st generation joomla templates build their module styles. This will give a good idea of how this feature works. Wanna know more? Read the modFX builder blog post.

ModuleFX in Morph is the same as it was in our previous templates, but much more advanced and useable. It allows you to modify the look of any module simply by using a string of suffixes - you can combine dozens of background, header and icon styles to get create different front end appearances.

How to work with Module FX

The list of preset ModuleFX styles in Morph is loooong. You are given loads of preset styles for the different elements of a module, ie. title/header and module container.

Most of these styles can be used in combination with each other to completely vary the effect. For example, a header icon can be applied with a heading color to create a module with a specific icon and color.

Not fancy enough? What about adding the suffix "rounded" and your module will automatically have round edges. We can keep on going if you like, but here is a list of some of the different types of styles you can apply and combine to get your website looking just how you want it, without touching any of the code.

Module Body background

Set different background colors, images, gradients and other effects.

Module Heading background

Set different background colors, images, gradients to module headers.

Module Body font size and color

Set different font color and size for the content in your module.

Module Heading text

Set the font size, color and even upper/lowercase letters on headings.

Rounded corners

Convert your module with the above effects into a rounded corners module.

Icons styles

Use this to easily apply different icons to your module headers.

read more about "the fx range features"