How to Customize Joomla Warning Messages

: Written by Alex Smirnov Alex Smirnov; Published: 20 July 2020 20 July 2020

How to Customize Joomla Warnings Messages

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:

warning on failed login

And here is how they will display after some customization:

warning after some cusomization

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":

go to extensions languages overrides

You will arrive to the "Languages: Overrides" screen. Click on the down error, as shown on the screenshot below:

click on the down error

From the dropdown options, select your site language. For my demonstration, I am using "English (United Kingdom) - Site":

select your site language

In the top left corner, click "New":

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:

enter this language constant

Click inside the "Search For" field and in the dropdown of options click "Constant":

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:

click on the text

You should see that the text filled the "Text" field on the left side of the screen:

change this text

Change it as you see fit. For my demonstration, I changed it to the following:

enter text as you see fit

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":

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:

both 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:

click on the name of your 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 css

Click "New File":

click new file

You will see the box with the title "Create or Upload a new file.". Enter "custom" in the "File Name" box:

enter custom file name

Click on the "- Select a file type -". Select the "css" file type and click "Create":

select css as file type and click create

You will see the custom.css file open and empty. Paste in the following CSS code:

.alert {
 padding: 8px 35px 8px 14px;
 margin-bottom: 20px;
 text-shadow: 0 1px 0 rgba(255,255,255,0.5);
 background-color: #eeeeee;
 border: 1px solid #fbeed5;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
 font-size: 24px;
 line-height: 1.6;
}