Back to Top

Design

Joomla! uses an internal system called "MosMessage" to display system messages to the user...on a live site, these can be confirmation messages (such as sending an email) and therefore can be fairly important.

The problem is that by default, they are rarely assigned a "style class" in the template's CSS file, meaning that the message text is often very subtle and easily missed.  The CSS file for a template controls how everything looks: fonts, colours, positions - and can be used to modify the way these system messages are displayed to the user...which can be invaluable if the messages are of some importance.

Thankfully, changing the look of the MosMessage text is pretty straightforward - and of course, being included in a CSS file means that it will apply globally across your whole site.

To customise the MosMessage style, you will need some fairly basic CSS knowledge - however, we'll explain below what each of the settings do.

To get started, open up the main CSS file for your current template.  You can normally access this via the Administrator, in Site->Template Manager->Site Templates.  Click the Radio button for your default template and click the "Edit CSS" button.

Now insert the following code at the top of the CSS file:

.message {
text-align: center;
color: red;
font-weight: bold;
background: #eee;
border: 1px solid #f55;
padding: 15px;
margin-bottom: 25px;
}

Make sure you click the "Save" button to save your changes.

What The CSS Entries Mean

.message {
This simply sets a CSS Class definition for "message" - the class used by MosMessage.

text-align: center;
Makes any text displayed center-justified.

color: red;
Makes the text colour bright red.  You can also use hex colour definitions such as #ff0000.

font-weight: bold;
Makes any text displayed bold.

background: #eee;
Sets the background colour for the message box.  In this case, light-grey.

border: 1px solid #f55;
Gives the message box a solid, 1 pixel wide red border.

padding: 15px;
Adds 15 pixels of 'padding' to the left, right, top and bottom of the box.

margin-bottom: 25px;
This gives us a 25 pixel space underneath the box, to position any content below away from it.

Try experimenting with your own settings until you get something that fits in with the template you are using.