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.

 

 


Subscribe to the weekly Packt Hub newsletter

* indicates required

LEAVE A REPLY

Please enter your comment!
Please enter your name here