topic Re: Language Switcher in CMS Development

Language Switcher

Giuseppe — Fri, 03 Nov 2017 14:16:18 GMT

Hi there,

I have found this nice post https://community.hubspot.com/t5/COS-Design-Support/Language-Switcher-Icon-change-to-Fontawesome/m-p/11127 which is exactly what I am trying to implement. Actually I would be grateful if someone could help me either in changing the colour of the globe icon (#ff8300) or to change the icon itself.

I am not an expert ( as @Jsum well knows 🙂 ) and I cannot find the globe_class and relevant css.

Re: Language Switcher

Reg — Fri, 03 Nov 2017 14:23:30 GMT

You need to override the class.

.globe_class {
    background-image:none;
}

.globe_class:before {
    content: "\[UNICODE]";
    font-family: FontAwesome;
    color: #ff8300;
}

In the .globe_class:before selector you can change the "content: "\[UNICODE]";" to the unicode value of the font awesome icon you want such as "content: "\f042";"

Re: Language Switcher

Giuseppe — Fri, 03 Nov 2017 14:48:58 GMT

@Reg

that is very kind of you. I am so sorry but...where I can find the class? I am nor a designer neither an expert...really sorry but would appreciate any input...

Re: Language Switcher

Reg — Fri, 03 Nov 2017 14:54:39 GMT

You would need to paste it into your stylesheet. Each website has a .css stylesheet that allows for the styling to occur.

Re: Language Switcher

Giuseppe — Fri, 03 Nov 2017 14:56:38 GMT

@Reg yes, I know more or less on how to work on the css stylesheet but do you mean that I have to add your suggested code to my stylesheet?

Re: Language Switcher

Reg — Fri, 03 Nov 2017 15:01:25 GMT

Yes exactly 🙂 but don't forget to replace the UNICODE with the icon you would like.

Re: Language Switcher

Giuseppe — Fri, 03 Nov 2017 15:05:26 GMT

By any chance could I kindly ask you where I should put that code? in my own stylesheet (template purchased at the HS MarketPlace) I cannot find any .globe_class...

Re: Language Switcher

Reg — Fri, 03 Nov 2017 15:09:24 GMT

Yes you should put it into your stylesheet(from theme), the styles will override the ones included from default sheets.

Re: Language Switcher

Giuseppe — Fri, 03 Nov 2017 15:38:13 GMT

@Reg awesome! I did it and it works and now the globe icon is #ff8300. The very last thing: how can I make bigger the globe? I applied:

border-radius: 30px;
width: 30px;
height: 30px;

but I have the feeling that is wrong since the size of the globe icon does not change 🙂

Re: Language Switcher

Giuseppe — Fri, 03 Nov 2017 16:20:57 GMT

@Reg settled. Thank you so much