Categories: CMS & E-CommerceWeb DevelopmentTutorials

Joomla! 1.5 Template Reference: Part 2

3 min read

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.