How to add system messages to your Joomla articles

This tutorial will guide you through adding system messages to your Joomla! articles.

This can be useful when you want to display an important message, alert or may be high light a new product or service you have to offer.

What will you need to complete this tutorial

• Access to the Joomla Administrator area
• FTP access to download and update the template CSS file
• Notepad.exe to edit and update the template css file

What will the end result be after you have completed this tutorial

You can add three different system messages (Error, Message and Alert) to new or existing articles.

The system messages will look like the exmaples noted below.

Step 1 : Download the attached system message images

The first step is to download the 3 GIF images alert icon, message icon and error icon to your PC.

To do this right click on each image select SAVE AS and save each gif image file to your PC

Step 2: Upload the system message images to the template image directory

The next step is to upload the 3 gif image files to the templates/your_template_name/images/ directory

Step 3 : Download the template CSS file

Download the template CSS file from the templates/Your_template_name/css/ directory to your PC

Step 4 : Open the template CSS file & add the CSS message code

Open the template css file you have download to your PC using Notepad.exe

When you have opened the CSS file scroll to the bottom of the file and add the code noted below to the bottom of the CSS file.

div.error {
  background: #f7e5e5 url(../images/error-icon.gif) no-repeat 8px 8px; 
  border-top: 2px solid #db9f9f; 
  border-bottom: 2px solid #db9f9f;
  margin:10px 0px;
  padding: 10px 10px 10px 40px;
  color: #551111;
}

div.error a {
  color: #cc0000;
  text-decoration: underline;
}

div.message {
  background: #e5eef7 url(../images/message-icon.gif) no-repeat 9px 8px; 
  border-top: 2px solid #8db1d4; 
  border-bottom: 2px solid #8db1d4;
  margin:10px 0px;
  padding: 10px 10px 10px 40px;
  color: #385c7f;
  text-align: left;
  font-weight: normal;
}

div.message a {
  text-decoration: underline;
  color: #4c88bc;
}

div.alert {
  background: #fff8cf url(../images/alert-icon.gif) no-repeat 9px 8px; 
  border-top: 2px solid #e0ce62; 
  border-bottom: 2px solid #e0ce62;
  margin:10px 0px;
  padding: 10px 10px 10px 40px;
  color: #64591b;
  text-align: left;
  font-weight: normal;
}

div.alert a {
  text-decoration: underline;
  color: #d26f3a;
}

div.error a:hover, div.message a:hover, div.alert a:hover {
  text-decoration: none;
}

Save the changes to the template CSS file and upload the updated file to the templates/Your_template_name/css/ directory

Step 5 : Add a new system message to your article

To add a new system message to an exisiting article or new article complete the following steps

1. Log into the Joomla Administrator area
2. Open an existing article or create a new article where you would like to add the system message
3. Select the HTML button in the Joomla! WYSWYG editor
4. A new window will now open where you can copy and paste the HTML code into the article
5. Please choose one of the 3 HTML code options

Option 1: Alert Message

<div class="alert">copy and paste this code to display the alert message</div>

Option 2: Message

<div class="message">copy and paste this code to display a message</div>

Option 3: Error Message

<div class="error">copy and paste this code to display an error message</div>

   6. After you have included the HTML code in the article select the SAVE button to save the changes

   7. The new message layout will now appear in the article