Diversify your CSS styles with module class suffixes

If there’s one thing that Joomla excels at when compared to WordPress, it’s in how incredibly flexible it is, with multiple ways to apply your own customization to each element of a page. By adding a CSS suffix to a module, you can individually style each module separately from the others for an eclectic, vibrant website. In most Joomla 3 modules this feature is included in the Advanced tab, where you can add your suffix into the Module Class Suffix field, though each module will have its own nuances. For example, with our News Show Pro GK5 module the feature is included in the Basic Settings tab. For the most part this feature is included in pretty much all modules in some form or another, though there’s likely to be a few exceptions..

If you’ve had a look at a few of our templates you might have noticed that we include a few different module styles as part of the package; you can check them out in our demo pages by looking in the menu for the Module Variations page (Features –> Module Variations), where we’ll put a few examples of such pre-made suffixes. For those of you who don’t fancy poking around our demo, here’s a few examples:

The thing is, we’re not going to include a huge range of suffixes in our template packages since we want to keep them at a reasonable weight, so just some core ones are added. however, if you’re the kind of person who likes to tinker and customize your site you’ll likely find the default suffixes far too limited, and you’ll want to add your own style to our template. Thanks to the module suffix field this is a breeze, and all you’ll need is a little bit of CSS knowledge, or CSS3 if you fancy rolling out some of the fancier visual effects.

Now if we’re going to be creating a new CSS suffix to apply to our modules, then we’ll need to know how to safely add our own CSS code to the template; if you’re not sure how to go about this then have an read of this Documentation Article; it covers the various options available for adding custom CSS to our templates.

As an example of how to add a custom style to a module, let’s create a gradient module background (gradient’s a fancy way to say a background that smoothly transitions between two or more colors). Although CSS gradients don’t use images, we’ll still apply them to an element using the background-image property. At this point we could use our super expert web designer ninja skills to manually create the gradient, but we’re feeling a bit lazy today so instead we’re going to use a Gradient Generator, which will take care of all the really hard work so we can just concentrate adding the CSS to appropriate file. There’s quite a few gradient generators to choose from online, so feel free to look around and find one that’s easy for you to use. Interestingly, even Microsoft got in in the action and made one (ie.microsoft.com/TESTDRIVE ). No matter what tool you use you’ll likely end up with the same result, so just go with what makes you comfortable.

Check my example CSS code that support CSS3 gradients in unprefixed form or with any of the following vendor prefixes: -ms-, -moz-, -o-, -webkit- :

.nicegradient { 
padding:20px;
background-image: -ms-linear-gradient(top, #FFF824 0%, #4CEF11 100%);
background-image: -moz-linear-gradient(top, #FFF824 0%, #4CEF11 100%);
background-image: -o-linear-gradient(top, #FFF824 0%, #4CEF11 100%);
background-image: -webkit-gradient(linear, left top, left bottom, 
color-stop(0, #FFF824), color-stop(1, #4CEF11));
background-image: -webkit-linear-gradient(top, #FFF824 0%, #4CEF11 100%);
background-image: linear-gradient(to bottom, #FFF824 0%, #4CEF11 100%);
 }

Then add above code to your override.css file and enable CSS override option in template configuration (Advanced settings tab) .

Now you can use your new, custom suffix in gavick templates.

Remember to add one space before name of Module Class Suffix.

Note: Mostly you can combine different suffix in one line – until their task is not over, if one does not preclude the other.

Clear Suffix

Default clear suffix, which you will find on each template, is very useful to create banners or images without additional borders, margins and paddings. The clear suffix is also very useful inside the mainbody, mainbody_top and mainbody_bottom module positions.

Magic Suffix

Useful if you want to use module without padding inside and with a little transparency effect. Please use my custom CSS.

.magic { 
box-sizing:border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 0 0 44px;
opacity: 0.75;
padding: 0;
width: 100%;  }

Note: There is significant difference between suffixes for modules (this article is about them) and suffixes for pages .