Skip Navigation

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client was experiencing an issue with the language switcher colors on their website. On desktop, the hover color was orange instead of white, and on mobile, one language was displayed in black with an orange hover color, instead of all being white.
Solution:
We recommended adding custom CSS to override the template's styles. First, we provided the following CSS to change the current language color to white:

.wpml-ls-current-language > a { color: #ffffff !important;}

Next, to ensure all language links remain white in all cases, we suggested adding another piece of CSS:

.wpml-ls-statics-shortcode_actions a{ color:#ffffff !important;}

We advised the client to add these CSS snippets to their style.css file in the theme's root folder.
If this solution doesn't look relevant, please open a new support ticket.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 4 replies, has 2 voices.

Last updated by Marsel Nikolli 1 year, 5 months ago.

Assisted by: Marsel Nikolli.

Author Posts
December 20, 2023 at 2:29 pm #15103461

praevarynS

Hi,

I am trying to: make *all* the language switcher white color (Current language font color, other language font color *both* normal and hover: #ffffff)

Link to a page where the issue can be seen: hidden link

I expected to see: white

Instead, I got: on desktop - both languages white as should be, but hover color is orange... on mobile - one language is black, hover orange

Screenshot 2023-12-20 at 21.25.40.jpg
Screenshot 2023-12-20 at 21.26.16.png
Screenshot 2023-12-20 at 21.25.16.png
December 20, 2023 at 4:47 pm #15104935

Marsel Nikolli

Hi,



Thank you for contacting WPML Support, I will be happy to help you.


I was able to check your website and I noticed from the browser developer tool (as seen on the attached image) that the CSS styles of the language switcher are being overwritten by the CSS styles of the template.

Please try adding the following CSS code on your style.css file on the theme root folder:

.wpml-ls-current-language > a {
    color: #ffffff !important;
}

Let me know if this works out for you.

Regards,
Marsel

December 20, 2023 at 6:21 pm #15105481

praevarynS

Thanks!

December 21, 2023 at 4:10 am #15106475

praevarynS

Hello,

Just noticed that on mobile, hover color is still not white. As I mentioned, I would prefer if everything was white including *hover color*

Is this possible? What CSS should I use for this?

Thank you,

Screenshot 2023-12-21 at 11.08.04.png
December 21, 2023 at 8:35 am #15107497

Marsel Nikolli

Hi,

Could you please try adding the following code on the same file you added the code I suggested before:

.wpml-ls-statics-shortcode_actions a{
    color:#ffffff !important;
}

This should keep the language link set to color #ffffff in all cases.

Let me know how it goes,
marsel

December 21, 2023 at 9:48 am #15108227

praevarynS

That worked! Thank you, Marsel.