Joomla system messages, improve their visual appearance.

Joomla system messages, improve their visual appearance1

Unhappy with the visual appearance fo Joomla system messages display in the front end of your joomla site?

I was too. Thats why I decided to change them.

How do you change Joomla system messages? Easy, follow these steps:

1) Login to the Joomla administrator backend

2) Click on Extension-Template Manager

Joomla system messages, improve their visual appearance3

3) Click your template in the list:

Joomla system messages, improve their visual appearance4

4) Clik on on the icon “edit CSS”

5) Look for the main CSS file (probably called “system”, “template” or “style1” etc). Edit this file. NOTE: It only matters that you DON’T put the following code into one of the file that is not in use, in other words it does not matter so much where the code goes as long as it goes in a CSS file being used buy the site, so simply try the one you think is the main one and see if it works.
To change the way Joomla systems messages appear; you only need to add some code at the beginning of the CSS file which opens after you clicked it.

Add this:

.message {
text-align: center;
color: grey;
font-weight: bold;
background: #eee;
border: 2px solid #7e7e7e;
padding: 15px;
margin-bottom: 20px;
}

6) Click the save icon.

Joomla system messages, improve their visual appearance5

Now your Joomla system messages will look much better. You can play around with the settings of the CSS code, to change the typ colour or border colour. 

Remember to do something which will force an error on your site to check the Joomla system is now displaying it correctly.