CMS Development

rafael_ibrahimi
Miembro

Language switcher style

resolver

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 Me gusta
1 Soluciones aceptada
Stephanie-OG
Solución
Asesor destacado

Language switcher style

resolver

 

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

Ver la solución en mensaje original publicado

0 Me gusta
7 Respuestas 7
Stephanie-OG
Asesor destacado

Language switcher style

resolver

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 Me gusta
mansigovani
Colaborador

Language switcher style

resolver

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

0 Me gusta
piersg
Asesor destacado

Language switcher style

resolver

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

Language switcher style

resolver

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 Me gusta
rafael_ibrahimi
Miembro

Language switcher style

resolver

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 Me gusta
Stephanie-OG
Solución
Asesor destacado

Language switcher style

resolver

 

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

0 Me gusta
rafael_ibrahimi
Miembro

Language switcher style

resolver

This is great, thank you a lot Stephanie!

0 Me gusta