Say hello to the Joomla module class suffix builder – modFX

This blog post is written by ModFX developer Zahir.

Easy styling for your template modules!

When I first heard about the ingenious feature in Joomlajunkie templates called “module FX”, I was very impressed. Module FX – or modFX is a feature found exclusively in Joomlajunkie templates that allows you to mix and match your different module styles.

However, I soon realized that although this feature is very powerful and provides one with limitless possibilities, it may not be that easy for our users to understand and implement.

So, over the course of a few discussions with the junkie team, we decided that we should build a simple tool that allows our users to understand how to make the most of the module FX feature as well as simplifying the process of selecting the right combination of module class suffixes. As a result of this exercise, the modFX builder tool was built.

Read on to find out how this powerful little tool can help transform your Joomla! template.

What is the modFX Builder?

The modFX builder is a tool that allows you to easily build module class suffixes for joomlajunkie templates. This in turn provides immense flexibility in terms of how you can customize the look of each module on your Joomla! website.

A module class what???

So if the terminology has you a little confused, lets clear things up and explain what a module class suffix is and what the modFX builder can do for you:

A module class suffix gets appended to the end of your module class, which in turn allows you to style each module individually. The module class suffix is entered by going into your modules admin parameters (Extensions -> Module Manager -> Select your module from the list e.g. newsflash)

JoomlaJunkie templates have a nifty feature called modFX – which allows you to add a suffix to your module to provide a different style than the default styling. Suffixes exist for styling the header and the body of the module and on more recent releases, an icon too.

The modFX builder is a tool that serves two purposes:

1. Knowledge is power:

We want people to familiarize themselves with the concept of mix-and-match module class suffixes and how module class suffixes work. As far as we can tell, no other template vendors provide templates with modFX so this may be a little tricky for new visitors.

modFX aims to make it easy for people to understand how to use module class suffixes and harness the power of this feature. Once you know how they work, you can really take advantage of this tool to build you own modFX styles.

2. Get creative – Fast!

The modFX builder allows you to style your module quickly. Style your modules just the way you want them. Its easy to build the module class suffix using the modFX builder than to experiment with different suffixes on your live site since the modFX builder provides you with a more interactive and engaging way to style your suffix – in realtime!

We intend to ship modFX with every new template, and the modFX builder will be updated accordingly for newer templates.

To get started, read the modFX builder guide below or head straight to the modFX builder page. We have tried to make it as easy as possible to build your own module class suffixes using the modFX builder – and fun too!

Step 1:

To get started, click on the Joomlajunkie template you are working on.

Once you have selected your template you will see a small thumbnail confirming your choice as well as two handy links to the template’s guide page and the live demo of the template on our demo server.

Now head over to step two for the fun stuff.

Step 2:

You can now begin to customize your modules style by selecting any one of the following:

• a header style
• a background style
• icon style (this is available on the more recent templates only).

Use the dropdown menu to choose a style to your liking – you will notice that each time you change one of the parameters, the live preview of the sample module refreshes with your updated style.

So go on and play with the module’s parameters until you have a module style that meets your site’s requirements – once you have something you like, you can proceed to step three.

Step 3:

In the final step, all you have to do is copy the generated suffix code and paste it into your joomla website.

You will notice that your module class suffix is generated automagically every time you change one of the module’s parameters.

Now all that remains is copying the generated suffix and pasting it in your module’s suffix field – see screenshot below.

In the Joomla backend, this can be found under Extensions -> Module Manager -> Your-Module-Name e.g. newsflash

Paste the code generated in the module class suffix field (Extensions -> Module Manager -> Select your module from the list e.g. newsflash)

If you’re still a little confused as to how all this ties up together, I have created a short screencast to illustrate the process: In the screencast below, I use the modFX builder to style a module for the mocha template.

View the modFX Builder Tutorial from JoomlaJunkie from mozami (the developer) on Vimeo.

Now, go ahead and have fun building your modules!

---

Related blog posts:

Tags: Design, development, Joomla, tools of the trade