Language switcher style

[rafael_ibrahimi]

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-...?

Thank you!

Rafael

[Stephanie-OG]

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

[mansigovani]

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

[piersg]

@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

[mansigovani]

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%}

[rafael_ibrahimi]

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?

[Stephanie-OG · Accepted solution]

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

[rafael_ibrahimi]

This is great, thank you a lot Stephanie!