[Résolu] CSS wpml-ls-current-language for specific language

Hello Jerome,

Thank you for reaching out to WPML support.

Based on what you've described, I understand that you're interested in changing the font color to white for the currently selected language and applying specific background images to the French and Dutch language selectors when they are the current language. Here's a conceptual approach you can consider:

- Changing Font Color: To change the font color to white for the currently selected language, you would typically target the `wpml-ls-current-language` class. The CSS property you'd be looking to use is color.

- Applying Background Images: For setting background images specific to the French and Dutch languages when they are the current language, you would need to target the combination of classes that represent the current language and the specific language. You've already identified classes like .wpml-ls-item-fr and .wpml-ls-item-nl for this purpose.

Given these points, your CSS might conceptually look something like this:

/* Set the font color to white for the current language */
.wpml-ls-current-language a {
    color: white !important; /* Ensures font color override */
}

/* French language specific styling when it's the current language */
.wpml-ls-item-fr.wpml-ls-current-language, .wpml-ls-item-fr.wpml-ls-current-language:hover {
    background-image: url('https://cdn.wpml.org/wp-content/uploads/2024/02/bg-lang_left-hover.svg'); /* Background for current French */
    background-repeat: no-repeat;
}

/* Dutch language specific styling when it's the current language */
.wpml-ls-item-nl.wpml-ls-current-language, .wpml-ls-item-nl.wpml-ls-current-language:hover {
    background-image: url('https://cdn.wpml.org/wp-content/uploads/2024/02/bg-lang_right-hover.svg'); /* Background for current Dutch */
    background-repeat: no-repeat;
}

However, As part of our WPML support policy, while we're here to help with any issues or questions related to WPML functionality, providing custom code solutions or custom CSS is beyond the scope of our support. The provided code is for demonstration purposes and may assist in resolving your issue. However, for additional help with custom CSS or design modifications, it's best to contact a web developer or designer. You can also hire a professional developer from here: https://wpml.org/contractors/

I hope you can understand. Please feel free to let me know if there is anything else if you need help with. I will be happy to assist.

Best regards,
Prosenjit