How to Customize Your Joomla Modules

Modules in Joomla are set up for you to display in only one way. If you haven't already began working with the the template, or designing your own Joomla template, one of the easiest and beneficial ways to customize your Joomla website is by styling your Joomla modules.

The modules display all of the information on your Joomla website, that is part of the main content. Joomla modules control the look of your: Joomla navigation, News flashes, Sign-in form, etc. They are easy to change, and its also easy to add custom designs to individual joomla modules, with some quick changes. The snapshots in this post are taken from my current Joomla installation, and show the different ways you can display Joomla modules.

The CSS file you need to work with, will depend upon the template you are currently using in the Joomla installation. To find the file, look under your main Joomla installation directory--in the Templates Folder---Under the name of the template you are going to use. Go to the CSS file inside this template folder, and you will see the main CSS styles created by Joomla. Another, even easier way to edit the CSS in your Joomla installation, is to go to your administrator's control panel---site---templates. Click the radio button of the template you want to change, then click on the "edit css" icon in the upper right of the screen.

Once you start looking at your the CSS code Joomla has written in your template, you will notice that it is separated by section, well some of the templates are. If your template is labeled, the CSS file will have sections with comments that say what the styles are for...Look for the mark that says something like:

Moduletable

You will see that the modules have styles associated with them. H3, th, etc. You should have some prior knowledge of CSS and HTML to work with these. If not, a brief overview can be found on W3schools.com