You have some control over your modules by determining on which menu item they appear. You do that with the Menu Assignment tab in Module Manager for that particular module.

What if you want to style the module in a different manner than the other modules?

What if you don't want the module to appear on mobile devices to help with download speed and maybe to take up less room on the screen.

Add a class name to the module

To add a class name to a module for custom styling, go into Extensions -> Module Manager and open up the module in question.

Click on the Advance Tab. You will see a text box next to Module Class Suffix. This is where you put the class name. 

There is something to note about this text box. If you do not put a space before the class name, Joomla will append your class onto other text. As an example, you type in redbackground for the class name in the Module Class Suffix box. You do not add spaces. You save the module.

If you were to then open a webpage from your site and look at the page with a diagnostic tool such as Firebug, you will see the following:

<div class="moduletableredbackground">
<div class="customredbackground">
</div>
</div>

Joomla added your class name to the end of the class for the divs that contains your module. You may be fine with this, but if you want your call name to stand along, put a space before the name in the Module Class Suffix box.

You may also add multiple class names in the Module Class Suffix box, just separate each class name with a space.

Now that you have a class name on that module, you can style it how ever you want. Use your diagnostic tools to be sure you are selecting the correct element and classes for your custom styling.

For example:

.redbackground {background: #890000; color: #ffffff;}

Make it so the Module does not display on Mobile Devices

To target this specific module for mobile devices, you need to add the display: none to the proper @media calls in your stylesheet. For example:

@media (max-width: 767px) {
    .redbackground {display: none}
}

Things to keep in mind

You may need to be more specific with your styling in some cases. You may need to target the module in order to overwrite other styling that is modifying that element. Use your diagnostic tools to see what all is styling the element. You may need to add #aside before the class or something along those lines.


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.