Customizing Language Selector

Backlight supports multiple languages which can be selected by clicking on the globe button in the top pallet. Although my site is only in english, I prefer language labels instead of a globe icon when browsing sites.

Here I’ll show you how you can add this to your site. Doesn’t this look prettier?

Changing the globe icon to simple labels such as EN, DE, or FR can be easily done with a few lines of custom stylesheet (CSS) code:

/* Language switching */

html .fa-globe:before {
   font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, 'Droid Sans', sans-serif;
   font-weight: 700;
   font-size: 0.875em;
}	

html[lang="en"] .fa-globe:before {
   content: "EN";
}

html[lang="de"] .fa-globe:before {
   content: "DE";
}

html[lang="fr"] .fa-globe:before {
   content: "FR";
}

#language-selector ul {
   width: 75px;
}

The changes are kind of self explanatory:

  1. define the font family with font weight and size
  2. define the language labels based on the selected language
  3. some aesthetics where I reduce the size of the popup

As you can see, only a few lines of css code inside your custom stylesheet file are needed.


Did you like this post? Did you use the given code? Please consider supporting me by buying me a coffee!

Buy Me A Coffee


Thanks!

5 thoughts on “Customizing Language Selector”

    1. Thanks, Rod! My initial implementation was much more complicated using the phplugins API. Reviewing the code made me think of this simpler approach.

  1. Thanks, Daniel for this CSS. I too am building a French-English site, and with your and Rod’s help, I finally got around designing a unique site with both languages using the language switch. I did implement this code and it works well. However, I have two questions:
    – could I change the button with another image, like French and English
    flags, as an example?
    – is it possible that when you press the button, you automatically
    change language rather than having a drop-down selector as is the
    case now?
    I hope I am not asking too much.

    Thank you.

    1. Bonjour Pierre,
      – Yes, you should be able to use images:
      html[lang=”fr”] .fa-globe:before {content: url(fr.jpg);}
      – Yes, I have an implementation, but haven’t posted it yet. Stay tuned!

      1. Thank you Daniel,
        I implemented your code and of course it works. Added a wrinkle: when in Fr the text in on the grey background and the reverse when in En mode.
        The size is still a bit big, the background is too big and I would prefer the button to be at the extreme right, but why quibble?

Leave a Reply

Your email address will not be published. Required fields are marked *

Web Design Consulting

Do you need help designing your web site or getting Backlight working the way you want? Contact me to discuss your idea or project.


Buy me a Coffee

If you like what I share here, please consider buying me a coffee or a print. This helps keeping me motivated to continue posting. Thank you!

Buy Me A Coffee

Categories