How to create a language switcher in COS


#1

Hello guys!

We are looking to create a language switcher in our site that is able to “recognize” the page where the switcher is present and then when you click the selected language in the drop down the switcher presents the adequate link to the localized page based on your selection.

Has someone created something similar?
Any ideas on how to go about this?

Thanks a lot for your time and attention,

Nicolas E.


#2

Hi Nicolas,

Have you taken a look at the built-in language switcher module? It should do exactly what you need assuming you’ve used the multi-language feature to set the language of each of your pages.

More details here: https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-to-manage-multi-language-content-with-hubspots-cos


#3

Jeff!

Thanks so much for your reply!
We’ve tinkered with the module, and its functionality is perfect for our needs.
However, we need to do some UI appearance tweaks, like:

  • Changing the globe to white
  • Adding the native name of the active language
  • Etc.

Can you please provide some guidance on how to go about it?
We can’t seem to find the CSS that affect it.

Thanks a lot!

Nicolas E.


#4

Hey Nicolas,

Just wanted to follow up in regards to your last couple of comments. The Language Switcher module gets the default styling from this file: http://static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/sass/LanguageSwitcher.css

I would say the best way to make modifications, to the default rendered ‘globe’, is by applying a custom CSS class(to your Language Switcher Module) within the template and then override the styling within an attached stylesheet. This should help you with the Design tweaks you need to make.

As for adding the language - it sounds like you want to dynamically populate the current page’s language near the globe. Currently, this is not natively supported. However, we are working on functionality to help make building things out like this easier in the future.

Hope this helps!

  • Sean