Styling Joomla! error messages

One often-overlooked factor in designing Joomla! templates is styling Joomla!'s error messages to complement your theme. By default, these are styled by CSS in the system.css file found in the templates\system\css directory.

Getting ready

The easiest way to get Joomla! to display an error message is to attempt to log into your website with an incorrect username and password:

This inserts HTML into the page similar to the following code:

<dl id="system-message">
<dt class="error">Error</dt>
<dd class="error message fade">
<ul>
<li>Username and password do not match or you do not have an account yet.
</li>
</ul>
</dd>
</dl>

Joomla!'s system.css file, located in the templates\system\css directory dictates style for three main message styles:

• Error, for error messages

• Notice, for certain occasions that are not covered by the error style

• Default, which is used for other occasions not defined by the first...