Joomla gives the possibility to use language overrides and translate each word of the module, plugin, component if the value (actual text) is placed in the code of an extension with a language string. And now we can go to the next step of 2 scenarios:

1. You know what constant you want to translate or override its translation - it means that you are ready to jump here How to override translation in Joomla 3
2. You do not know the constant is but you know the value to translate, however, when you are looking for the string in language overrides then you get tons of results and have no idea which one you should translate - the solution can be the Debug Language option in Joomla backend. Once you find out the constant you may override translation for the value of a constant using language overrides in Joomla.
   
   

What is Language CONSTANT and its VALUE in Joomla?

Language Constant in Joomla is the unchanging item of the string you want to override. It's implemented in the modules, templates, components, etc. core code to give you the simple possibility to translate text.

For example:

MOD_LOGIN_FORGOT_YOUR_USERNAME = "Forgot your username?", where:

• MOD_LOGIN_FORGOT_YOUR_USERNAME is a language constant
• Forgot your username? is a value of a language constant
  
  

How to debug language in Joomla?

The easiest way to find out the constant name of the value you want to translate is using Language debug option available in the Joomla configuration. 

Go to Joomla backend and navigate System - Global configuration - System tab and set Debug Language to Yes in Debug Settings.  Language display must pick the Constant option.

It will result in displaying all constants of its values at the backend and frontend. It may be a little bit hard to navigate at the backend now but usually,  the language constant includes its logic name meaning after its prefix_ which can be helpful for recognizing "where you are" :)

To revert the action to the standard view with language values displayed click here as shown below and remember to save settings.

How to translate language constants values in Joomla? 

Each constant that can be easily translated in Joomla overrides is placed between asterisks. 

To override the constant default value go to Extensions - Languages - Overrides at the Joomla backend.

Select a Language and the client (site or administrator) you want to override from and click the New button. If you have more language installed on your Joomla website then they appear in the selector as well. 

Then follow steps in the following order:

1. Enter here the constant name of the value you want to modify
2. Select Constant item
3. Click search button
4. Results will be displayed below, click on the item you want to modify
5. Modify the text
6. Click Save button
   
   

The overridden language value is now available on the overrides lists:

Do you find this article helpful? Rate us with the 5 stars, thanks! 

To make our templates even easier to modify, we've added the ability to include your own JS scripts. Learn more how to do this.

How to add custom JS to a Joomla template?

Joomla templates usually contain many scripts, but adding your own may not be an easy task. Usually, to add your custom JS you need to load the file in the template index or layout file. The problem is that such changes can be overwritten when the template is updated.

Custom.js file for your own JS scripts

To have complete control over your own JS scripts, our Joomla templates based on EF4 Framework let you create a custom file called custom.js where you can put all your JS scripts.

Where to keep the custom.js file?

This file does not exist in the template by default, so you need to create it manually in the following location:

/templates/[template-name]/js/custom.js

Our EF4 Framework will automatically detect this file after refreshing the page and it will be added to the head section of the template after other JS scripts.

Accessibility icons are available on each WCAG and ADA Joomla template and by default, its titles are written in English:

• Contrast
• Enable default mode
• Enable night mode
• Set high contrast black white mode
• Set high contrast black yellow mode
• Set high contrast yellow black mode
• Layout
• Enable fixed layout
• Enable wide layout
• Font
• Smaller font
• Larger font
• T
• Default font
  
  

You may simply translate those titles into your language using Joomla language overrides, follow the tutorial -> How to override translation in Joomla 3 template?

When are hidden elements useful?

The Hidden menu may be useful when you are trying to view modules or articles that are not related to any item on your menu.

The simple solution to making this work is to create a menu with the item that has a 'Single Article' link to the article. However, these elements will be visible in other areas of your website, so you need to hide them.

The hidden menu item can be useful when you need to hide the “ Home “ link from your menu or create links to special sales pages, promo pages or pages that are only intended for some visitors.

How create a hidden menu?

You need to go to Menus > Manage > Add New Menu

Call it “ Hidden Menu “ in title input and for Menu Type put “hidden-menu”.

Save and close.

How create hidden menu items?

If you don’t want to create an entire hidden menu, you can create only hidden menu items.

Go to Menus > Manage > Choose your menu.

Create a new menu item.

Go to Link Type tab and set Display in Menu to “ NO “

First of all, you need download the DJ-MegaMenu install package. Log in to your account and download the package from the download area. If you bought a Joomla template at Joomla-Monster you should get the package from the download area. You may also buy DJ-MegaMenu separately at the DJ-Extensions.

Install DJ-MegaMenu module

Once you have the installation package on your drive, you can proceed with the installation.

1. Login to your Joomla back-end.
2. Go to Extensions > Manage > Install
   
   
   
   
3. Upload the package. ( If the installation is carried out correctly, you will be informed )
   
   
   
   
4. Next, go to Extensions > Plugins and make sure the plugin “ DJ-MegaMenu system plugin ” is enabled.
   
   

Enable DJ-MegaMenu module

DJ-MegaMenu is almost ready to use on your website. Now you need to publish to the module. Go to Extensions > Modules and create a new module.

From the list choose the “DJ-MegaMenu “

Set Joomla menu in DJ-MegaMenu module

1. Enter the name of the module
2. Choose the position, in most of our templates it is top-menu-nav layout position
3. Choose the Joomla menu to display in the module
4. Make sure, status is published.
   
   

How to configure a multi-column submenu in DJ-MegaMenu?

Learn how to add extra fields during the registration process for a new Joomla 3 user. If you want to add extra fields for your users during registration then it is required to use the Joomla User Profile plugin. It's default Joomla plugin that appears in the Joomla core. After enabling the plugin you have the possibility to add more fields to registered user profiles.

Check the short tutorial article and see how to this plugin works.

All types of fields that can be added directly to the profiles are listed below:

• Address 1
• Address 2
• City
• Region
• Country
• Postal / ZIP Code
• Phone
• Website
• Favorite Book
• About Me
• Date of Birth
• Terms of service
• Select terms of service article
  
  

Enabling the Joomla User Profile plugin

Open the administration panel, go to Plugin Manager and type "profile" in the "search" field. To enable the plugin, click the "x" button that is placed next to the plugin name.

Edit the Joomla User Profile plugin

Open the plugin, as you can see options are divided into two tables.

• User profile fields for registration and administrator user fields - when someone wants to register
• User profile fields for profile edit - for registered users

Each field can be set as: Disabled, Optional or Required.
Below you can find the first set of fields, which appear when someone is already registered, but also in your administrator panel.

Now let's take a look at the second set of fields, which appear when visitors are registered users already.

The usage of Joomla User Profile plugin

When you'll enable the configured plugin, you will see the registration fields for your website's registered users on your website.

Now let's check fields, how they look like during the registered user profile's edition.

And finally, let's see how the fields appear inside each user profile in administrator area.

The updates golden rules

1. Always doing backup - Backup is additional protection against unsuccessful updates. In case of failure, you will easily restore the page status before updating.
2. Never work on the live website - Before you update your live website - check how it was updated on your backup.
3. Updates from latest version - Try to keep up with the latest versions. This is always an extra guarantee that everything will go as planned.
   
   

Read how to make a Joomla website backup

Update Joomla from notification info

As soon as you are logged into back-end, you should see a notice that a new Joomla version is available for update. All you need to do is click on the "Update Now".

If you don’t have a notice on Control Panel, you can go to Components > Joomla Update. You will discover here two ways of updating Joomla:

1. Download the latest version from the server joomla.org (1)
2. Upload the latest Joomla package. (2)

With the second method, you need upload Joomla package and press button “ Upload & Install “.

In the first method, you must click the button “ Install the update”.

As soon as the upgrade is completed, you will see a screen with notice.

Manual Joomla update

1. Download Joomla package from https://downloads.joomla.org/
2. Extract the download package on your computer
3. Via FTP client ( for example Filezilla ) upload files with "replace" option
4. Go to your Joomla back-end and fix database (Extensions > Manage > database)
   
   

Go to System > Clear Cache and press button “ Delete”.

Where can I find the Joomla cache?

Your Joomla is up to date!

What is a Joomla cache?

Joomla cache "remember" all or a part of a website and this way it doesn't have to be pulled from the database. Part of the site is downloaded on your first visit to the website and this way the next visits will be faster. Avoiding the need to connect to your website database, a website can respond more quickly to a visitor.

Speed up your website! Must read article! Practical tutorial not only for Joomla users.

How to delete Joomla cache?

Sometimes, if you want to make changes on your website, you need to delete the storage cache. In the Joomla! you can empty it using the admin panel.

To do this, you need to login to your back-end Joomla and go to System > Clear Cache

Next, you need to empty your cache - press button Delete All or select items you want to clear.

Now, you can refresh your browser window check results.

Did nothing change on your website after clearing Joomla cache?

If you still don’t see the changes, you should make sure that your browser also doesn’t save the cache. If you want clear browser cache, most often - just press ctrl + f5 on your keyboard.

After installing the Joomla template with DJ-Classifieds or the ready to use classifieds website demo copy, you can see an error in the search field.

To get rid of the error, you need to generate Google Maps API keys that are unique to your domain. Then put your unique Google Maps API keys on DJ-Classifieds settings to make the search work correctly.

Here you can find all information how to use Google Maps API Keys.

What 500 Internal Server Error means?

Response status codes which beginning with the "5" number indicate that the server has encountered an error or is otherwise incapable of performing the request.

How the error 500 could look like on your site?

HTTP Error 500
Internal Server Error
500 Internal Server Error
HTTP 500 - Internal Server Error
Temporary Error (500)
HTTP 500 Internal Error
500 Error

How to solve 500 Internal Server Error? Most popular 500 Internal Server Error reasons:

Incorrect permissions

In most cases, the reason of 500 Internal Server Error is related to the incorrect file(s) or directories permissions.

Typical permissions in Linux environment are:

• 644 for files
• 755 for directories
  
  

Make sure your permissions are correct after upload or files extraction on the server. 

You can check permissions in System -> System information -> Folder permissions

and in your FTP client:

How to change permissions? Use your favorite FTP client and option File permissions (typically this option is available in right-click menu).

You are not sure if the permissions are correct? Please contact hosting administrator. More details in Joomla documentation.

Connection timeouts

If your script connects to external resources and those resources timeout, an HTTP 500 error can occur.
More appropriate timeout or upload limits rules should help.

Increase your php.ini settings:

max_execution_time = 60 upload_max_filesize = 32M

Corrupted .htaccess/php.ini file

It's not as common, but make sure your .htaccess or php.ini (if you have) files are properly structured.

Use code editor and validate the file code:

It is also a good idea to temporarily delete the file and check the result. This will help you locate the problem more accurately.

Temporary server issues

Sometimes the error 500 may not be strictly related to your page or extensions, often the problem occurs due to configuration or server issues and the administrator's help is necessary.

Hosting administrator have access to detailed server logs, so if all previous points seem to be correct it's the first place where you search for help.

What is 500 Internal Server Error?

In short words - error 500 is an HTTP status code that informs you that page cannot be generated correctly. Why? There may be many reasons, continue reading.

What are HTTP status codes?

HTTP status codes are standard responses given by web servers on the Internet.
The codes help to understand what is the status of content you requested by the server.
For example, code 200 means that the content was loaded properly. 'The request was fulfilled.'

You can check all requests and status codes in the browser developer tools. 

The code 404 means that server can't display any content for given URL, eg. can't find an image you like to load.
'The server has not found anything matching the URI given'

So, the code can be very helpful to identify possible problems during page load.

The simplest method to restore a password to an administrator in Joomla is changing its value in a database. I mean here the scenario when you can't access Joomla administrator and can't use the frontend option "Forgot your password?" so then you may reset Joomla admin password in PhpMyAdmin.

Important! You need have access to your database using phpMyAdmin or another client.

Change a password to your Joomla in a database

Login to phpMyAdmin of your website and select your Joomla database.

Now find and browse the table with “_user” phrase after the table's prefix, for example, prefixtable_user.
In next step, find the user whose password you want to change and click Edit or the yellow pen. 

As you can see, the Joomla password is with the MD5 encrypted.
Type your password and remember to select the field type from varchar to MD5 before saving changes then press “Go” to save settings. 

Please use this reset password temporarily just to enter admin area once and change it via user interface afterwards.

Was this tutorial helpful? Please rate. Thank you!.

The EF4 Framework comes with the off canvas sidebar which you can use to display any module. It can be useful for many purposes. The most popular one is using the off-canvas sidebar to display a vertical menu for mobile pages instead of the horizontal menu which usually is the default one for desktops.

How to display the off canvas sidebar in Joomla template?

You can display the sidebar in few easy steps.

Step1: Enable the off-canvas setting.

Go to Extensions -> Templates -> Styles -> [template_name] -> Basic Settings

In the Basic Settings, you can also specify the sidebar width and position.

Step2: Publish a Joomla module.

Publish a module on the "offcanvas" module position. It is a built-in Joomla module position in the off canvas sidebar.

Go to Extensions -> Modules -> New and choose the module type you want to display in the off-canvas sidebar. Type "offcanvas" as the module position name:

Step3: Publish the off-canvas toggle button.

It is a button which opens and closes the off-canvas sidebar. You can add the button in two ways.

Using custom HTML code

In our older Joomla templates, we used a custom HTML code to display the off-canvas toggle button. You can use a custom HTML Joomla module for that purpose and simply paste the following code into the module:

<a class="toggle-nav menu"><span class="icon-align-justify"></span></a>

More about how to display a custom HTML module.

Using JM Offcanvas Button module

Another way is using the JM Offcanvas Button module. It is a free module that you can download from your account at Joomla-Monster.com.

The module with the off-canvas toggle button you can display on any module position in your template. A good idea is to place the button somewhere at the top of a Joomla template.

How to use the off canvas sidebar as the mobile menu?

Let's assume that you want to display the off-canvas sidebar as mobile menu. Let's take a look at the steps you need to take:

Step1: Hide the off-canvas toggle button for desktop users

We want to display the off-canvas sidebar for mobile users only, so we need to hide the toggle button for desktop users. You can do that by adding the following module class suffix to the module parameters:

visible-phone

More about Bootstrap utility classes to show and hide modules.

Step2: Hide the main menu for mobile users

Next step is to hide the main menu for mobile users because we want to use the off-canvas sidebar menu for that purpose. The main menu is usually displayed in the top of the template. If you are using a Joomla-Monster template, it will probably be the DJ-Menu or DJ-MegaMenu module published on the "top-menu-nav" module position. In the menu module parameters you need to add the following module class suffix:

hidden-phone

If you are using a DJ-MegaMenu module as your main menu, you should also disable the mobile menu in that menu, because we do not need it this time.

NOTE: Please note that DJ-MegaMenu has its own mobile menu which you may find very useful. Beside the off-canvas menu, there is also a possibility to display a simple select menu or more advanced accordion menu for mobile users.

Step3: Publish a menu module.

The last step is to publish a Joomla menu module on the "offcanvas" module position. Simply, go to Extensions -> Modules -> New -> Menu. Select the main menu and type "offcanvas" as the module position name:

In the face of the growing popularity of WCAG 2.0 and Section508 standards as a Joomla! Administrator or developer, you may encounter a lot of troubles while working on an accessible website. In this article, I would like to show you most common problems while adjusting a website to WCAG recommendations and how to deal with them.

You may ask: Why this is so important? Please check this article where we explain details regarding making a web content accessible and compatible with WCAG 2.0 standards.

How to follow recommendations for making web content accessible WCAG 2.0 (Section 508).

The first thing you should remember is: even if you use WCAG ready website template that perfectly meets WCAG requirements, still you need to prepare a web content according to the WCAG rules. A best WCAG Joomla template can only help you to achieve this goal. 

The second: some of the problems may require Joomla! Core or  Joomla template modifications. In Joomla CMS environment, as a Joomla template provider, we are not always able to deal with all (less important) issues. Each project requires an individual approach. But how to check the web accessibility of the website? We using most popular - Web Accessibility evaluation tool http://wave.webaim.org

NOTE: This tool is also available as the extension for Chrome browser.

List of most common issues :

NOT valid HTML code

This point may be obvious to most people - especially web developers, but in my experience, during long hours on the project, we often forget to re-check the code correctness of the many modifications we made.

Why it matters?

Validity is an important step towards accessibility. It does not guarantee accessibility, because valid websites may not be accessible and invalid websites may be accessible, but there are some kind of validity issues that may lead to inaccessibility of a website. A good example of such an issue is a data table with duplicated values of the id attributes. When the id attribute is not unique on a page then the validity test will fail. This may also lead to inaccessibility issues, because screen readers may have a problem with associating data cells and header cells as expected.

How to fix it?

Web accessibility tools do not check for all validity issues. You should better use a markup validation tool:
https://validator.w3.org/
After validating your website, you may see a list of errors and warnings if there are any. It will point you to the exact line from the source code where the issue occurs so you will know where to fix it.

Contrast errors on accessible website

"Very low contrast between foreground and background colors." 
Simply, in the above example, the contrast between font color and the background color is too low.

Why it matters?

If you are using a light background, then you should make sure that the text is dark enough so users with low vision will be able to read the text.

How to fix it?

Make font color darker, or the background color lighter. Basically, in our accessible Joomla templates, we have high contrast mode option available, which should deal with this type of errors.

But in some cases, you may need to adjust color for your custom HTML / modification. You can do it with CSS, find here the guide how to modify or add CSS styles in the Joomla template based on the EF4 framework.

body.highcontrast a
body.highcontrast2 a,
body.highcontrast3 a { 
color: #8bfffb;
}

NOTE: Classes 'hightcontrast', 'highcontrast2', 'highcontrast3' are applied to body only in high contrast mode depends on selected version.

Redundant links

"Adjacent links go to the same URL." 
It means that you have 2 or more adjacent links with the same address.

Why it matters?

Let's take an example: you have a product image with title and both elements are linked to the same product page. This causes additional navigation when using keyboard and repetition for screen readers.

How to fix it?

Remove unnecessary A tags, for example, disable title or image link in extension if possible, take care of uniqueness of all href attributes.

Missing first level heading

"A page does not have a first level heading." 
It means that you do not have H1 tag on a page.

Why it matters?

A first level heading should be displayed on every page. It makes page navigation easier and describes the content of a page.

How to fix it?

You can, for example, enable Page Title in Menu item or just publish Custom HTML module with this tag on selected pages.

NOTE: 'sr-only' class is used to show text only for screen reader devices. H1 tags are also important for SEO reasons.

Empty links

"A link contains no text."
Some of your A tags do not have text or have the only image without the ALT attribute.

Why it matters?

The text of a link is very important for navigation using a keyboard and for screen readers. It helps to present the link to the user.

How to fix it?

Check links and give them some text content, add the ALT attribute to all your images. Using additional CSS styles, you can display text only for screen reader devices ('sr-only' in our WCAG templates). For example:

<a href="/link-to-a-page" title="Link title"><span class="sr-only">Link text</span></a>

Suspicious alternative text or missing alternative text

"Alternative text is likely insufficient or contains extraneous information." or "Image alternative text is not present."
You need to improve/add image description in ALT attribute.

Why it matters?

This text should describe what is on the image. It is very important for screen readers because it allows describing the content of the image to the user. The good ALT attribute is a requirement.

How to fix it?

Find the image in the content and add the ALT attribute to it. For example:

<img src="/path-to-an-image" alt="Image alternative text" />

Redundant title text

"Title attribute text is the same as text or alternative text."

Why it matters?

The title attribute is for an advisory purpose. It usually appears on hover. It should not contain the same text as the element or alternative text.

How to fix it?

Take care of your title attributes in links. Do not duplicate text from a link, make them unique. For example:

<a href="/path-to-a-page" title="Title is different than text">Here is the text</a>

Skipped heading level

"A heading level is skipped."
It means that you do not have a proper headings structure on your website.

Why it matters?

Skipped heading levels can make the page navigation very difficult.

How to fix it?

Let's assume that you have a H5 tag in an article content. You should also make sure you have other heading tags (h1, h2, h3, h4) in the source code before, according to the correct HTML semantic heading structure.

NOTE: It may be difficult to achieve because of the semantics of HTML5 but if possible keep it in mind.

Of course, there is lot more possible errors. However, I hope that I have given you a starting point on how to deal with these problems.

Remember that most of the accessibility tools give you helpful hints about what causes the problem and how to fix it. Example from Web Accessibility evaluation tool:

Good luck!

Follow this guide if you need to check the versions of the Joomla extensions installed on your website but you do not know how to do it. You may need it to check your current extensions changelog looking for important features or you just want to know whether you run the latest Joomla extensions versions for security reasons.

Here are the steps to check the current version of an installed Joomla extension. It does not matter which type of the extension it is. In the same way, you can check the version of each Joomla template, component, module or plugin.

Step 1. Go to Extensions -> Manage -> Manage (yes 2 times click Manage link)

Step 2. Search for the Joomla extension and voila!:

If you need to make your company logo image transparent or need to use any other transparent image on your site simply follow this step by step tutorial how to remove the background from an image.

We use Photoshop in this tutorial but the similar actions you may do with any software for digital photo editing for example:

• Gimp (FREE)
• Paint.NET (FREE)
• Affinity designer
• Corel Photo Paint
• Krita (for Linux also)
• pixlr
  
  

Open your image file in Photoshop

Press Ctrl + O (for Mac users Cmd + O) and navigate to the folder where your file is located. Select your image file and click on the Open button. 

Make a layer from an original image

Click on the lock on your Background layer. This action makes your image editable.

Photoshop layers are like sheets of paper stacked on top of each other. If you have any transparent areas, you can see what is in the layer below. You can also change their order by moving them up and down.

Select magic eraser tool

Go to the Tools panel, right-click on the eraser tool set (1) and select Magic Eraser Tool (2).

Magic Eraser Tool Erases a single shade of color from a layer. Magic Eraser Tool Erases a single shade of color from a layer.

Remove background from the image

Begin clicking on the all white areas you want to remove and make them transparent.

You can easily zoom in and zoom out to make the accuracy of your click larger. To do this, scroll up and down while holding down the alt key.

Save for web your edited file

Go to File > Export > Save for Web

"Save as..." option includes hidden unnecessary data, like meta data, app version, time created etc.
"Save for a Web..." removes all proprietary data from the file so the file size is smaller.

Choose image file format for transparent images

Set the file format to PNG-24 (to preserve transparency). You can also adjust the image size in the provided input boxes. Click Save button, enter the new filename and click Save.

PNG - Raster image file format and lossless compression of graphic data. It supports graduated transparency (alpha channel) and 48-bit color depth

Voilà! Your transparent image is ready to use on your website.