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"
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
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
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.
Convert your module with the above effects into a rounded corners module.
Use this to easily apply different icons to your module headers.