How can I change the hover effect color of the language button from black to blue (#002fa7)? How can...

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

Problem:
The client needed to customize the hover effect color of the language button from black to blue (#002fa7) and the background color of the alternative language options from grey to light blue (#B3E5FF) in WPML.

Solution:
We fixed this by adding the following CSS code in the WordPress Customizer under Appearance -> Customize -> Additional CSS:

a.dropdown-toggle.cursor-init:hover {
    color: #002fa7 !important;
}

span.wpml-ls-native:hover {
    color: #002fa7;
}

ul.dropdown li.wpml-ls-item {
    background-color: #B3E5FF !important;
}

ul.drop-menu > li.wpml-ls-item, ul.drop-menu > li.wpml-ls-item > a, ul.drop-menu > li.wpml-ls-item > a > span, ul.drop-menu > li.wpml-ls-item > a > i {
    background-color: #B3E5FF;
}

ul.drop-menu > li.wpml-ls-item > a:hover > span {
    color: #002fa7 !important;
}

ul.drop-menu > li.wpml-ls-item > a > span:hover {
    color: #002fa7;
}

.submenu-dark .menu-horizontal .menu-smart ul {
    background-color: #B3E5FF;
}

Please note that this solution might be outdated or not applicable to your specific case. We highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If this does not resolve your issue, please open a new support ticket at WPML support forum.

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.

Tagged: Custom Work

This topic contains 0 replies, has 0 voices.

Last updated by Waqas Bin Hasan 1 week, 3 days ago.

Assisted by: Waqas Bin Hasan.

Author	Posts
January 29, 2025 at 8:15 am #16644747
bjornB-33	Background of the issue: I am working on a site under development and want to customize the appearance of the language button using WPML. Specifically, I want to change the hover effect color of the language button from black to blue (#002fa7) and the background color of the alternative language options from grey to light blue (#B3E5FF). Symptoms: I am unable to find documentation or guidance on how to change the hover effect and background colors for the language button in WPML. Questions: How can I change the hover effect color of the language button from black to blue (#002fa7)? How can I change the background color of the alternative language options from grey to light blue (#B3E5FF)?
January 29, 2025 at 8:46 am #16644954
Waqas Bin Hasan Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	Hi, Reference to our recent chat, I need to take a closer look at your site. So I request temporary access (WP-Admin and FTP), preferably to a test site where the problem has been replicated. Your next answer will be private, to share this information safely. Also provide detailed steps to reproduce the issue and links to pages in the admin and on the frontend. IMPORTANT: Please take a complete backup of the site to avoid data loss. I may need to activate/deactivate plugins also. See https://wpml.org/purchase/support-policy/privacy-and-security-when-providing-debug-information-for-support/ for details on privacy and security. P.S.: If you don't see the section for providing access information, do not write in the message box or the information may appear as public. Regards.
January 30, 2025 at 6:58 am #16649533
Waqas Bin Hasan Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	Thank you for the access. I 'll check this soon and 'll get back to you accordingly.
January 30, 2025 at 1:05 pm #16651659
Waqas Bin Hasan Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	Thank you for your patience and cooperation. I checked in your site and looks like you're using very older versions of WordPress and WPML plugins, which might be the reason there are some issues when trying to change switcher colors by editing the switcher. Anyhow, I'm trying to apply (force) your desired styles, instead of updating plugins at this point and 'll get back to you by tomorrow.
January 31, 2025 at 6:08 am #16653936
Waqas Bin Hasan Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	Thank you for your patience and cooperation. I've added following CSS in Appearance -> Customize -> Additional CSS (at the end of existing CSS): /* WPML Support */ a.dropdown-toggle.cursor-init:hover { color: #002fa7 !important; } span.wpml-ls-native:hover { color: #002fa7; } ul.dropdown li.wpml-ls-item { background-color: #B3E5FF !important; } ul.drop-menu > li.wpml-ls-item, ul.drop-menu > li.wpml-ls-item > a, ul.drop-menu > li.wpml-ls-item > a > span, ul.drop-menu > li.wpml-ls-item > a > i { background-color: #B3E5FF; } ul.drop-menu > li.wpml-ls-item > a:hover > span { color: #002fa7 !important; } ul.drop-menu > li.wpml-ls-item > a > span:hover { color: #002fa7; } .submenu-dark .menu-horizontal .menu-smart ul { background-color: #B3E5FF; } And I hope I got the closest possible you mentioned (see attached).