Problem: The client needed to customize the language selector with different SVG images as backgrounds for each language (French and Dutch) and wanted to set the font color to white for the currently selected language, as well as apply specific background images when a language is currently selected. Solution: We recommended the following CSS to achieve the desired customization:
.wpml-ls-current-language a {<br /> color: white !important; /* Ensures font color override */<br />}<br />.wpml-ls-item-fr.wpml-ls-current-language, .wpml-ls-item-fr.wpml-ls-current-language:hover {<br /> background-image: url('/wp-content/uploads/2024/02/bg-lang_left-hover.svg'); /* Background for current French */<br /> background-repeat: no-repeat;<br />}<br />.wpml-ls-item-nl.wpml-ls-current-language, .wpml-ls-item-nl.wpml-ls-current-language:hover {<br /> background-image: url('/wp-content/uploads/2024/02/bg-lang_right-hover.svg'); /* Background for current Dutch */<br /> background-repeat: no-repeat;<br />}
We also informed the client that providing custom code solutions or custom CSS is beyond the scope of our support and suggested contacting a web developer or designer for further assistance. Additionally, we recommended checking WPML contractors for professional development services.
Please note that the solution provided might be irrelevant due to being outdated or not applicable to your case. If the solution does not resolve your issue, we highly recommend checking related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If you still need assistance, please feel free to open a new support ticket.
