One of the customer questions we received this week was about Joomla warning messages.
These messages are often displayed on the front of your site. For example, you'll see a warning if you enter an incorrect username or password during login. You may also see these messages in the Joomla admin.
In this guide, we'll show you multiple ways to customize these messages:
- How to change the text of the message of the warning
- How to use your own text instead of "Warning"
- How to add an image to the warning box
- How to change the background color of the warning box
Let's take a look at how to make these changes. Before we start, it's worth noting that we're covering messages from Joomla in this tutorial. Check out this guide for PHP messages.
Here is how the Joomla warnings messages are displayed by default:
And here is how they will display after some customization:
Let's get started.
Step #1. Change the text of the warning
There are actually two parts you need to customize in this step:
- The text of the message of the warning
- The word "Warning"
First, let's take a look at how to change the text of the message of the warning.
- In your Joomla administrator panel, go to "Extensions" > "Language(s)" > "Overrides":
- You will arrive to the "Languages: Overrides" screen. Click on the down error, as shown on the screenshot below:
- From the dropdown options, select your site language. For my demonstration, I am using "English (United Kingdom) - Site":
- In the top left corner, click "New":
- You will be taken to the "Languages: Edit Overrides". On the right side of the screen, enter "JGLOBAL_AUTH_NO_USER" in the "Search" field:
- Click inside the "Search For" field and in the dropdown of options click "Constant":
- You should see that the field "Search For" changed from "Value" to "Constant". Great! Click "Search":
- You will see the "Search Results" displayed. Click on the text:
- You should see that the text filled the "Text" field on the left side of the screen:
- Change it as you see fit. For my demonstration, I changed it to the following:
Note: As you can see, I added the "src" HTML tag in my language override to add an image to the warning. It works like a charm. The main thing here is:
- Making sure you uploaded the required image to the "Media" component.
- Making sure you entered here the correct path to the image.
- Click "Save & New".
- Now repeat the same step only this time enter the "Warning" in the "Search" box and select "Value" instead of the "Constant" in the "Search For" box. You should see the "Warning" in the search results. Click "Warning":
- Replace the text "Warning" displayed in the "Text" box to your liking. For my demonstration, I replaced it to the following text:
<h3 style="color:red;">Whoopsie! Something went wrong!<h3>.
- Click "Save & Close".
Good job! You will see both of the language overrides listed:
- Test your warning displayed upon a failed login. You will see that it looks very similar to the one at our screenshot at the top of this post. The only bit missing is the color of the background.
Let's change it.
Step #2. Change the color of the background of the warning
- Go to "Extensions" > "Templates" > "Templates".
- You will see the "Templates: Templates (Site)" screen. Click on the name of your active template. In my case, this will be Joomlashack Community template:
- You will be taken to the "Templates: Customise (name of your Joomla template here)". Click "css" on the left side of the screen. You should see the content of the "css" folder appeared underneath it:
- Click "New File":
- You will see the box with the title "Create or Upload a new file.". Enter "custom" in the "File Name" box:
- Click on the "- Select a file type -". Select the "css" file type and click "Create":
- You will see the custom.css file open and empty. Paste in the following CSS code:
padding: 8px 35px 8px 14px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
border: 1px solid #fbeed5;
- Click "Save" or "Save & Close".
When you check your warning, you should see its background color changed, as well as its font size and the height of the text lines.
Save $1000's when you sign up to Joomlashack's Everything Club.
You will get access to all our 31 extensions, templates, and Joomla training.