topic Re: Language Switcher in CMS Development

Language Switcher

nandinighosh — Mon, 27 Feb 2023 20:34:34 GMT

I'm currently working on customising the language switcher classes and trying to find the html code that structures the <div class="language_switcher_class> with the <div class="globe_class"> in it. The default hubspot language switcher module only contains a line of code to specify the display mode. Can anyone help me with where I can find the html code that contains the structuring for the language switcher tab?

Re: Language Switcher

Jaycee_Lewis — Tue, 28 Feb 2023 19:14:57 GMT

Hi, @nandinighosh 👋 Thanks for reaching out. Hey, @Stephanie-OG @Indra, can you help @nandinighosh with their project?

Best,

Jaycee

Re: Language Switcher

Stephanie-OG — Tue, 28 Feb 2023 20:24:51 GMT

Hi @nandinighosh

The code you're seeing in the Language Switcher module is the language switcher tag and I'm afraid the HTML can't be edited. However, others seem to have found possible custom solutions on threads like this one.

What kind of customizations are you trying to do? I've managed to make it look fairly different using CSS only. You could have something like side-by-side language options:

Langauge Switcher - Side-by-side options

Or a customized dropdown:

Langauge Switcher - Custom dropdown

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

Re: Language Switcher

nandinighosh — Tue, 28 Feb 2023 20:33:55 GMT

Hi Stephanie!

Thank you for your response! I'm trying to edit my language switcher css so that instead of the menu appearing on hover over just the globe icon, the menu appears if I hover over the entire capsule containing the icon and language label.

As of now this is what happens:

Thanks!

Re: Language Switcher

Stephanie-OG — Tue, 28 Feb 2023 21:23:01 GMT

It you set the hover on the parent element that contains everything it should work. For example, on HubSpot's boilerplate theme (GitHub) it's wrapped in the header__language-switcher class in the header global group like this:

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

And so the CSS is:

.header__language-switcher .lang_list_class { border: 2px solid; border-radius: 3px; box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2); display: block; left: calc(100% - 24px); opacity: 0; min-width: 100px; padding-top: 0; text-align: left; top: 100%; transition: opacity 0.3s; visibility: hidden; } .header__language-switcher:hover .lang_list_class, .header__language-switcher:focus .lang_list_class { opacity: 1; transition: opacity 0.3s; visibility: visible; }

If you mean centering the dropdown (the lang_list_class), you could update the positioning of the CSS above, like this (I updated the left property and added a transform property):

.header__language-switcher .lang_list_class { border: 2px solid; border-radius: 3px; box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2); display: block; left: 50%; opacity: 0; min-width: 100px; padding-top: 0; text-align: left; top: 100%; transform: translateX(-50%); transition: opacity 0.3s; visibility: hidden; }

And then the before and after pseudoelements like this to center the arrow:

.header__language-switcher .lang_list_class:before { left: 50%; top: -25px; } .header__language-switcher .lang_list_class:after { left: 50%; top: -22px; }

But your code could also be different if it's not based on the boilerplate. If you could send a link I can always take a look.

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

Re: Language Switcher

nandinighosh — Wed, 01 Mar 2023 18:07:32 GMT

Hi Stephanie,

Thank you so much! I'll try setting the transition on the parent class instead of just the globe subclass and see if that helps. I appreciate the in-depth code snippets.

Re: Language Switcher

nandinighosh — Wed, 01 Mar 2023 19:26:52 GMT

This is the relevant CSS code I have:

.header__language-switcher { margin-left: 25px; background: #ebeff0; padding: 0 10px; border-radius: 20px; } .header__language-switcher--label { display: flex; align-items: center; } .header__language-switcher--label-current { font-size: .8rem; line-height: 26px; color: #20252e; font-weight: 600; letter-spacing: .075rem; text-transform: uppercase; } .header-left .lang_switcher_class { display: block; } .header-left .globe_class { margin-right: 10px; width: 16px; height: 16px; } .header-left .lang_list_class { left: calc(50% - 5px); box-shadow: 0 10px 30px -10px rgb(32 37 46 / 20%); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .header-left .lang_list_class li { border-left: none; border-right: none; background-color: #444e61; } .lang_list_class li a { color: #f4f5f6 !important; transition: all 0.2s ease; } .lang_list_class li a:hover { color: #ffffff !important; } .header-left .lang_list_class li:first-child { border-top: none; border-top-left-radius: 8px; border-top-right-radius: 8px; } .header-left .lang_list_class li:last-child { border-bottom: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .header-left .lang_list_class:before, .lang_list_class:after { border-bottom-color: #444e61 !important; }

The HTML is:

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

Re: Language Switcher

Stephanie-OG — Thu, 02 Mar 2023 19:55:17 GMT

The HTML is the same as the boilerplate's and the CSS looks like a modified version but I'm not seeing anything there with any hover effect. I think the CSS I sent should work.

If not, if you could send me a link to the page I can take a look.

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

Re: Language Switcher

LaMartins — Fri, 31 Mar 2023 22:03:40 GMT

Hi @Stephanie-OG

Could you help me to display only the first two letters of the language? I mean, for English, only display "EN" on the language switcher - like both images you've just presented as an example.

I've tried something similar to the code below but isn't working.

{% set locale_name = lambda locale: locale['display Language'][0:2]|upper %}

Thanks a lot!

Re: Language Switcher

Stephanie-OG — Sat, 01 Apr 2023 13:39:16 GMT

@LaMartins - I've just used JavaScript to do it in the past:

// Switch language switcher text (e.g. from "English" to "EN") langLinks.forEach(function (item) { var langLink = item; var language = langLink.dataset.language; langLink.text = language.toUpperCase(); });

But a HubL option would be nice because sometimes you can see the transition on load.

Re: Language Switcher

Stephanie-OG — Sat, 01 Apr 2023 13:43:45 GMT

@LaMartins - this solution by @Anton looks like a possible custom HubL solution you might want to check out!

Re: Language Switcher

ZAswad — Fri, 12 May 2023 14:04:33 GMT

That is great, but please can you help where I can add this code to be shown as a template to the global content?

Re: Language Switcher

ZAswad — Thu, 25 May 2023 14:10:39 GMT

Hello Stephanie,
Please can you direct me on how to change the language Switcher Icon to the Canada flag?