This thread is resolved. Here is a description of the problem and solution.
Problem:
The client is trying to set a bright green color for the current (active) language and the hover color for inactive languages in the WPML language switcher, but the site is displaying different colors.
Solution:
We found that there is some CSS on the client's site with the
!important
attribute that is overriding the WPML CSS. We recommend two options:
1. Remove the
!important
attribute from the conflicting CSS.
2. Add the following custom CSS to the theme's custom CSS section:
.wpml-ls-current-language a span, .wpml-ls-item a:hover span {
color: #9ed60a !important;
}
We also provided a documentation link for further details on how to fix styling and CSS issues for language switchers:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/
If the solution provided does not resolve the issue or if the client needs further assistance, we recommend opening a new support ticket. It's also advisable to check related known issues at https://wpml.org/known-issues/, verify the version of the permanent fix, and confirm that the latest versions of themes and plugins are installed.
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 1 year, 1 month ago.
Assisted by: Noman.
 |
Tell us what you are trying to do? I set bright green colour as a the default of the current (active) language as well as the hover colour for inactive language - see the screenshot, but the site shows other colours in both cases. Is there any documentation that you are following? Is there a similar example that we can see? What is the link to your site? hidden link  |
 WPML Supporter since 06/2016 Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00) |
Hi, Thank you for contacting WPML Support. It seems there are some CSS is written on your site with !important attribute which overriding the WPML CSS as you can see in the attached screenshot. Either you can remove that attribute from CSS or you can simply use the below CSS in the custom CSS section of theme:
.wpml-ls-current-language a span, .wpml-ls-item a:hover span {
color: #9ed60a !important;
}
And it will look as in the attached screenshot. Here is a doc for more details: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/ Please let me know if this resolves the issue or if you need further assistance with this issue. Thank you   |
|
|
|
|
|
|
|
WPML Supporter since 06/2016 Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00) |
Thanks for the additional details. Could you please remove the previous provided CSS and use this one:
/* Header color */
#menu-main .wpml-ls-current-language a span, #menu-main .wpml-ls-item a:hover span {
color: #9ed60a !important;
}
/* Footer color */
.wpml-ls-legacy-list-vertical .wpml-ls-current-language a span, .wpml-ls-legacy-list-vertical .wpml-ls-item a:hover span {
color: #fff !important;
}
/* Header margin */
#menu-main .wpml-ls-first-item {
margin-left: 20px !important;
}
And see if this resolves the issue. Thank you   |
|
|
