Targeting translation widget css/js

Ask the Community Customization
1

Has anyone had success with changing the text-decoration or color of the translate widget text upon hover using either CSS or JS?

Thanks!

1 Like
4

Welcome to the Community, @deployllc :wave:

This CSS code should do the trick:

[class*="container__Wrapper-sc"]:hover * {
  color: green !important;
}

Try it out and let me know if you like the result :slightly_smiling_face:

6

Hi Max, That worked great!

Follow-up question. How would you target the primary text “English” that the user clicks on to open the translation options, along with the items in the dropdown “English & Espanol”?

For instance, we’re trying to have the primary text you click be uppercase with the items in the dropdown being Title Case or “normal”.

Thanks again for your help!

:+1:

7

Hi @Max Sorry for linking questions together but any idea in addition to my previous reply how to get the globe icon and caret to also change color when that style you provided is applied? I see that the “Icon__IconContainer-sc” and the “name__NameContainer-sc” are nested within the “container__Wrapper-sc”. The targeting is still a bit outside of my expertise.

Thanks in advance!

1 Like
8

Hi there, @deployllc :wave:

I see that you’ve managed to make the text to be uppercase and we’ve just adjusted the classes:

[class*="name__NameContainer-sc"] {
  font-size: 18px;
  line-height: 18px;
  font-family: "FavoritPro – Medium";
  font-weight: 400!important;
  letter-spacing: 1px;
  font-style: normal;
  text-transform:uppercase;
}

And here is the full code to change the color of the glob icon, text and dropdown icon on hover:

[class*="container__Wrapper-sc"]:hover *,
[class*="Icon__IconContainer-sc"]:hover * {
  color: #41ff9f !important;
  fill: #41ff9f !important;
  text-decoration: none !important;
}

[class*="dropdown-item__Wrapper-sc"] *{
  text-transform: none !important;
}

Have a look and let me know if you like the result :slightly_smiling_face:

9

@Max That worked perfectly! I truly appreciate your help on this. You’re definitely a master of the CSS!

2 Likes
10

Wow, thank you so much for your kind feedback, @deployllc :heart:

I’d like to mention that we also have a CSS Codes category, where you can find the most popular codes for different apps.

The Website Translator is quite a new app, and we haven’t added any solutions there yet, but we are going to fill in this category in the near future :slightly_smiling_face: