Customize locale icons

Oct 29, 2024

Although it's convenient to use country flags to represent languages, linguistic varieties do not map cleanly to political boundaries. If your website uses Concrete's built-in multilingual system, your linguistic requirements may require some customization. Here are some ideas.

Enable accessibliity labels

By default, Concrete provides tooltips for toolbar icons, but they may not always work correctly. Here's an example of a Toolbar tooltip that appears when hovering over an icon:

However, elements of some themes may overlap these tooltips like in this example:

In order to ensure that the meaning of the icons is clear, you can enable Toolbar titles. Go to Dashboard > System & Settings > Basics > Accessibility, tick the checkbox for "Enable Toolbar Titles", and select Save. When enabled, each Toolbar icon will be accompanied by a title.

This can be particularly helpful when the flags representing various linguistic locals look similar, especially when shrunk to just 16×16 pixels:

Use custom flags

Another issue that may arrise is the use of different writing systems. Many languages can be represtented by more than one writing system, even within a single region. For example, Chinese can be written with traditional or simplified characters but these may not be easily differentiated by flags. Mainland China uses simplified characters, while Hong Kong uses traditional characters. However, both flags are mostly red that look very similar as small icons:

You can override the region flags either in a theme or in the application directory (code). In the application/ directory, create an images directory, then within that directory, create a countries directory. Place a custom PNG graphic named as <country_code>.png, e.g. hk.png for Hong Kong and cn.png for China. In this example, rather than flags, we can use the Chinese characters that represent the traditional and simplified writing systems rather than flags.

Now when you view the locales, you will see icons that distinquish the writing systems rather than regions:

Further development

For those wishing to develop a more sophisticated solution, the CountryList service fires the on_get_countries_list event which could be used to modify the countries list (and possibly the names of matching icons representing those countries). Concrete relies on the Punic PHP-Unicode CLDR Toolkit library for locale information. If you have a specific need which has not been met, check out the project here.

Recent Tutorials
Bi-directional Express associations
Dec 18, 2024
By myq.

Set up associations between Express entries in both directions

Display Express Data Across Multiple Sites
Dec 17, 2024
By myq.

A guide to configuring Express entities and the Express Entry List block to ensure proper data display across multiple sites.

Customize locale icons
Oct 29, 2024
By myq.

How to customize locale (language region) flags

Concrete CMS Caching Guide
Oct 16, 2024

An overview of types of caching in Concrete and considerations when using them.

Redirect all requests to HTTPS
Oct 9, 2024
By myq.

How to follow best practices for a secure web

Upgrade Concrete versions 9.3.1 and 9.3.2
Sep 10, 2024
By myq.

How to get past a bug in versions 9.3.1 and 9.3.2 that prevents upgrading the Concrete core through the Dashboard

Improvements?

Let us know by posting here.