topic Re: Language switcher style in CMS Development

Language switcher style

rafael_ibrahimi — Wed, 15 Aug 2018 07:30:04 GMT

Hi there,

I want to implement a language switcher on my HubSpot pages. For some reason in my case it doesn't look that good so far https://edge.thinkstep.com/fr-fr/ (globe icon on the right). Neither the globe nor the dropdown look good. And I also can't get a globe and the current selected language displayed (even when editing the .globe_class CSS class).

Is there a way of having the language switcher styled exactly like the one I found on this page https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-to-manage-multi-language-content-with-hubspots-cos?

Thank you!

Rafael

Re: Language switcher style

Stephanie-OG — Wed, 15 Aug 2018 12:34:39 GMT

Hi Rafael.

Yes, you can add your own CSS to your stylesheet to override the default CSS for the Language Switcher module. For example:

.lang_switcher_class:after {
    content: 'Language';
}

Will add the word "Language" after your globe and so on (you should be able to use JavaScript to have it switch to the current language).

If you Inspect Element on the module you should be able to find other classes you can style (e.g. lang_list_class for the drop-down list).

I hope that helps!

HubSpot Design / Development / Automation

Website | Contact

Re: Language switcher style

rafael_ibrahimi — Wed, 15 Aug 2018 13:56:02 GMT

Thank you Stephanie!

The word "language" now appears under the globe instead of appearing beside it:

https://gabi.thinkstep.com/us/life-cycle-assessment

I used the exact same code you provided. Can you help me with this?

Re: Language switcher style

Stephanie-OG — Wed, 15 Aug 2018 14:14:38 GMT

The code I provided was only a sample of how to start styling the Language Switcher module. You'll need to continue using CSS to style the module accordingly.

You can move the text using CSS positioning, for example like this:

.lang_switcher_class:after {
   content: 'Language';
   position: absolute;               
   top: 50%;                      
   transform: translate(35%, -50%);
}

HubSpot Design / Development / Automation

Website | Contact

Re: Language switcher style

rafael_ibrahimi — Thu, 16 Aug 2018 09:49:17 GMT

This is great, thank you a lot Stephanie!

Re: Language switcher style

mansigovani — Fri, 07 Feb 2020 16:16:08 GMT

@Stephanie-OG , can you please share the Javascript to display the current language?

Re: Language switcher style

piersg — Fri, 29 May 2020 16:12:51 GMT

@mansigovani this will display the current language without the need to write any additional Javascript.

{% if content.translated_content|length %}
    <div class="header__language-switcher header--element">
        <div class="header__language-switcher--label">
        {% module "language-switcher" path="@hubspot/language_switcher", display_mode='localized', label="Language Switcher" %}
        <div class="header__language-switcher--label-current"> {{ locale_name(locale) }}</div>
        </div>
    </div>
{% endif %}

You can see more info here: https://designers.hubspot.com/docs/features/multi-language-content#include-a-language-switcher

Re: Language switcher style

mansigovani — Fri, 29 May 2020 16:24:17 GMT

Thank you, @piersg! I really appreciate your time and help!

I used simple if and else condition and looks like works perfect for my website.

{% if content.language %}
{% if content.language.languageTag=='es' %}
Español
{% else %}
English
{% endif%}
{% endif%}