Language switcher style

SOLVE
rafael_ibrahimi
Member

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

 

Unbenannt.png

 

Thank you!

Rafael

0 Upvotes
1 Accepted solution

Accepted Solutions
Stephanie-OG
Solution
Key Advisor

 

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

Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

View solution in original post

0 Upvotes
7 Replies 7
Stephanie-OG
Key Advisor

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!

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

0 Upvotes
rafael_ibrahimi
Member

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?

 

0 Upvotes
Stephanie-OG
Solution
Key Advisor

 

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

Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

View solution in original post

0 Upvotes
rafael_ibrahimi
Member

This is great, thank you a lot Stephanie!

0 Upvotes
mansigovani
Contributor

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

0 Upvotes
piersg
Key Advisor

@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
Contributor

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

0 Upvotes