# Language switcher style **URL:** \ **Category:** CMS Development\ **Created:** [August 15, 2018, 7:30am UTC](https://community.hubspot.com/t/language-switcher-style/9845 "2018-08-15T07:30:04Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![rafael\_ibrahimi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rafael_ibrahimi/32/21752_2.png) [@rafael\_ibrahimi](https://community.hubspot.com/u/rafael_ibrahimi)\ **Post date:** [August 15, 2018, 7:30am UTC](https://community.hubspot.com/t/language-switcher-style/9845/1 "2018-08-15T07:30:04Z")
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/](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](https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-to-manage-multi-language-content-with-hubspots-cos)? ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/b/6b404bb0e26d741ac77ba857bb8bc451a804b776.png) Thank you! Rafael ---
**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\ **Post date:** [August 15, 2018, 12:34pm UTC](https://community.hubspot.com/t/language-switcher-style/9845/2 "2018-08-15T12:34:39Z")
Hi Rafael. Yes, you can add your own CSS to your stylesheet to override the default CSS for the Language Switcher module. For example: ```auto .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! * * * [![|300](https://d2qpr2jzcazej7.cloudfront.net/original/2X/e/e6ddb445b684524bbcbd802044a9ca3919d1fbc7.png)](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity)HubSpot Design / Development / Automation [Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity) ---
**Author:** ![rafael\_ibrahimi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rafael_ibrahimi/32/21752_2.png) [@rafael\_ibrahimi](https://community.hubspot.com/u/rafael_ibrahimi)\ **Post date:** [August 15, 2018, 1:56pm UTC](https://community.hubspot.com/t/language-switcher-style/9845/3 "2018-08-15T13:56:02Z")
Thank you Stephanie! The word “language” now appears under the globe instead of appearing beside it: **[https://gabi.thinkstep.com/us/life-cycle-assessment](https://gabi.thinkstep.com/us/life-cycle-assessment)** I used the exact same code you provided. Can you help me with this? ---
**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\ **Post date:** [August 15, 2018, 2:14pm UTC](https://community.hubspot.com/t/language-switcher-style/9845/4 "2018-08-15T14:14:38Z")
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: ```auto .lang_switcher_class:after { content: 'Language'; position: absolute; top: 50%; transform: translate(35%, -50%); } ``` * * * [![|300](https://d2qpr2jzcazej7.cloudfront.net/original/2X/e/e6ddb445b684524bbcbd802044a9ca3919d1fbc7.png)](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity)HubSpot Design / Development / Automation [Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity) ---
**Author:** ![rafael\_ibrahimi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rafael_ibrahimi/32/21752_2.png) [@rafael\_ibrahimi](https://community.hubspot.com/u/rafael_ibrahimi)\ **Post date:** [August 16, 2018, 9:49am UTC](https://community.hubspot.com/t/language-switcher-style/9845/5 "2018-08-16T09:49:17Z")
This is great, thank you a lot Stephanie! ---
**Author:** ![mansigovani](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mansigovani/32/43872_2.png) [@mansigovani](https://community.hubspot.com/u/mansigovani)\ **Post date:** [February 7, 2020, 4:16pm UTC](https://community.hubspot.com/t/language-switcher-style/9845/6 "2020-02-07T16:16:08Z")
@Stephanie-OG , can you please share the Javascript to display the current language? ---
**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\ **Post date:** [May 29, 2020, 4:12pm UTC](https://community.hubspot.com/t/language-switcher-style/9845/7 "2020-05-29T16:12:22Z")
@mansigovani this will display the current language without the need to write any additional Javascript. ```auto {% if content.translated_content|length %}
{% module "language-switcher" path="@hubspot/language_switcher", display_mode='localized', label="Language Switcher" %}
{{ locale_name(locale) }}
{% endif %} ``` You can see more info here: [Multi-language Content - HubSpot docs](https://designers.hubspot.com/docs/features/multi-language-content#include-a-language-switcher) ---
**Author:** ![mansigovani](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mansigovani/32/43872_2.png) [@mansigovani](https://community.hubspot.com/u/mansigovani)\ **Post date:** [May 29, 2020, 4:24pm UTC](https://community.hubspot.com/t/language-switcher-style/9845/8 "2020-05-29T16:24:17Z")
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%}