How to Customize Joomla Warning Messages

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

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;
  • 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.

What's Next?

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.

  Click here to join the Everything Club