[Fermé] Traduction de css perso pour éléments de menus inactifs
Il s'agit du forum d'assistance technique de WPML, le plug-in multilingue pour WordPress.
Il est accessible à tous, toutefois seuls les clients de WPML peuvent y publier leurs messages. L'équipe du WPML répond sur le forum 6 jours par semaine, 22 heures par jour.
Sun
Mon
Tue
Wed
Thu
Fri
Sat
-
9:00 – 14:00
9:00 – 14:00
9:00 – 14:00
9:00 – 14:00
9:00 – 14:00
-
-
15:00 – 18:00
15:00 – 18:00
15:00 – 18:00
15:00 – 18:00
15:00 – 18:00
-
Fuseau horaire du support : Asia/Dhaka (GMT+06:00)
Contexte de la question:
Dans mes menus, vous pouvez voir un élément grisé. Je l'obtiens en entrant la classe "custom-color" dans mon élément de menu, avec le CSS suivant :
Le problème est que le CSS ne fonctionne évidemment pas sur les pages traduites.
Symptômes:
Le CSS ne fonctionne pas sur les pages traduites.
Questions:
Y-a-t-il un moyen d'automatiser cela ou dois-je réécrire le CSS pour chaque langue en changeant les pointeurs ?
Y a-t-il un moyen de simplifier ce CSS en utilisant ".current-menu-ancestor.current-menu-parent" ?
To reduce the waiting time, I took this ticket and responded in English. Please let me know if you're okay with it or want to continue the conversation in French language. I will check and forward the ticket to one of our French supporters to assist you in the French language.
I understand the issue you're having. If you have defined custom CSS code, you need to ensure that the CSS is configured to work for other languages by including the html[lang=""] attribute selector. Otherwise, the CSS may not work properly in other language.
For example, the CSS for other languages should look like this:
/* To make it work on german language*/
html[lang="de"] #menu-menu-francais li.custom-color> a {
color: rgba(255, 255, 255, 0.2) !important;
}
If the Menu ID for another language is different than menu-menu-francais, make sure to update it in the CSS as well.
I hope you can understand. Feel free to let me know if you need further assistance in this matter or have any other queries. I will be happy to help.
The CSS seems correct, but the language code is not. For English, the language code should be "en-US". To find the correct code, inspect the page using the lien caché">browser developer tool and check the "lang" attribute within the HTML tag. The CSS for the English language should look like this:
I tried also without ">" (because we discovered with Divi that there is a bug with it in there CSS, which is documented and will be fix rather quickly in the next version) but it doesn't match neither
Hello There,
I hope you're doing well. Sorry for the delay in responding.
Glad to hear that you were able to make the CSS work on the primary menu.
I checked the menu on the link you shared. After reviewing the CSS, I noticed that the ID and class mentioned in the CSS are not present in the markup for the menu. Specifically, there is no ID called menu-de-francoise or class custom-color within the list items. This is why the CSS is not being applied.
Upon correcting the menu ID and class name in the CSS, the style was applied correctly to the menu items. Here is the corrected CSS:
Hi Vincent,
I hope you're doing well. Sorry for the delay in responding due to the weekend.
I checked the link again and realized I previously missed the menu with the menu-de-francoise ID. Therefore, the CSS I shared would work for the primary menu in the header, not the secondary menu with the ID menu-de-francoise.
I found the menu and noticed that there is no class named custom-color with the menu items. Which is why, the CSS you were previously trying to use wasn't working. I added the class menu-item in the CSS and the styles applied correctly in the menu items. Please check the attached screenshot.
Since you're using Custom CSS, it is sometimes required to apply the CSS for each language by using the Language selector. You can also simplify and generalize the CSS code by using more efficient selectors. Here's a more streamlined approach:
/* General inactive menu style for all menus */
li.custom-color > a {
color: rgba(255, 255, 255, 0.2) !important;
}
This single rule targets all `li` elements with the class `custom-color` that have an `a` child element and applies the specified color. It should cover all your inactive menu items without needing to specify each menu ID individually.
If all your menus follow the same styling rule, the CSS rule above is sufficient and will apply the styles globally across your menus.
Please feel free to let me know if you need further assistance or have any questions in mind. I will be happy to help.
Best regards,
Prosenjit
Le sujet « [Fermé] Traduction de css perso pour éléments de menus inactifs » est fermé aux nouvelles réponses.
