Common Joomla! CSS
As you can see, via template overrides, you can pretty much define any CSS ids or classes you want. For those of you who are into creating and tweaking template overrides, unless you’re going to create a highly custom, private, not-for-the-public template, my recommendation is you continue to use Joomla’s general CSS ids and classes for component and module output as much as possible.
This is a good way to ensure your template is familiar to other Joomla! administrators, especially if you want to offer your template to the public or for commercial sale. It’s easy for them to look up and customize CSS rules rather than forcing them to discover all the new and interestingly-named CSS ids and classes you created. For those of us working with Joomla’s core output or the Beez template overrides (which attempts to use Joomla’s standard CSS), here is a list of some of the most common CSS ids and classes. Those of you familiar with Joomla! 1.0 template design will be pleased to find these haven’t really changed.
This list has been put together after a bit of research and a lot of experimentation with the Web Developer Toolbar CSS tools. It is probably not complete, but if you account for these items in your CSS rules, you’ll be pretty well covered for most Joomla! projects, and it will be easy to spot any ids or classes not covered here and add them to your CSS sheet.
The Joomla.org forum has a post with a fairly comprehensive list, most of which you’ll recognize here, so it’s definitely worth checking out: http://forum.joomla.org/viewtopic.php?t=125508.
Joomla! 1.5 CSS ids
|
#active_menu |
This is generated by the type=”modules” include. Use it to style and control the currently selected main menu item. |
|
#blockrandom |
This is generated by the type=”component” include when you’re using the wrapper. This is the iFrame’s id. |
|
#contact_email_copy |
This is generated by the type=”component” include when you’re in the contact form page view. This is a field name id. |
|
#contact_text |
This is generated by the type=”component” include when you’re in the contact form page view. This is a field name id. |
|
#emailForm |
This is generated by the type=”component” include when you’re in the contact form page view. This is a field name id. |
|
#mainlevel |
This is generated by the type=”modules” include. Use it to style and control the main menu div holding each main menu item. |
|
#mod_login_password |
This is generated by the type=”modules” include. This is a field name id. |
|
#mod_login_remember |
This is generated by the type=”modules” include. This is a field name id. |
|
#mod_login_username |
This is generated by the type=”modules” include. This is a field name id. |
|
#poll |
This is generated by the type=”modules” include by the poll module. You can control the placement of the entire id with this. |
|
#search_ordering |
This is generated by the type=”component” include when you’re in the search form page view. This is a field name id. |
|
#search_searchword |
This is generated by the type=”component” include when you’re in the search form page view. This is a field name id. |
|
#searchphraseall |
This is generated by the type=”component” include when you’re in the search form page view. This is a field name id. |
|
#searchphraseany |
This is generated by the type=”component” include when you’re in the search form page view. This is a field name id. |
|
#searchphraseexact |
This is generated by the type=”component” include when you’re in the search form page view. This is a field name id. |
|
#voteid1,#voteid2,#voteid3, and so on |
This is generated by the type=”modules” include. This is generated by the poll module and are field name ids for the radio buttons. |
