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
If you want to create a custom module, copy the CSS styles associated with modules inside your Joomla CSS file. Paste it directly under the previous module code, and if you want, write a comment above it to help you dissassociate the two next time you open up your CSS file. A comment in a CSS file looks like this:
/* Custom Module */
Then, simply add a dash and a custom name to the end of each module div tag, like this:
moduletable-usermenu
Where "usermenu" is the custom name of the module you're creating. Change the styles according to what you want your module to look like.
We're not done!
Go back into the backend of your Joomla installation, and open up the module that you intended to customize from the "modules" section of your Joomla site.
You will see two options under "Parameters"
One says, "menu class suffix"
The other, "module class suffix"
Simply add the dash and custom name you used inside the CSS file to the "Module class suffix" option. It would look like this:
-usermenu
Save, and now you are done!
Good luck, and get creative with your Joomla Modules!
Add this page to your favorite Social Bookmarking websites
| Next > |
|---|
