[Resolved] I would need to change the appearance of the language selector.
This thread is resolved. Here is a description of the problem and solution.
Problem: The client needed to change the appearance of the WPML language selector to have a transparent background and a custom SVG icon. Solution: We provided an example of custom CSS code that the client could use to modify the language selector. Here are the steps:
/* Targeting the WPML language switcher menu item */<br />#menu-item-wpml-ls-26-en {<br /> background-color: transparent; /* Set background to transparent */<br />}<br /><br />/* Targeting the submenu toggle button */<br />#menu-item-wpml-ls-26-en .sub-menu-toggle {<br /> background-image: url('path-to-your-svg-file.svg'); /* Replace with your SVG file URL */<br /> background-size: contain; /* Adjusts the size of the SVG to fit the element */<br /> background-repeat: no-repeat; /* Prevents the SVG from repeating */<br /> border: none; /* Optional: removes any border */<br />}<br /><br />/* Hiding the default plus and minus icons */<br />#menu-item-wpml-ls-26-en .icon-plus, #menu-item-wpml-ls-26-en .icon-minus {<br /> display: none; /* Hide the default icons */<br />}<br />
Additionally, to remove the border from the language switcher, the following CSS can be used:
I would need to change the appearance of the language selector. This is mine, visible on the site under development at the address ...
hidden link
This is the appearance I would like to give it: with a transparent background and the selector icon replaced. (The one I would use is an SVG file). hidden link
Languages: English (English )German (Deutsch )French (Français )
Timezone: Europe/Zagreb (GMT+01:00)
Such modifications are not within support scope I'm afraid. Something like this can give you an idea on how to achieve this, but this is not the tested solution and is only based on an existing switcher with unique ID, you will need to code this yourself or ask our https://wpml.org/contractors/ to help with this.
/* Targeting the WPML language switcher menu item */
#menu-item-wpml-ls-26-en {
background-color: transparent; /* Set background to transparent */
}
/* Targeting the submenu toggle button */
#menu-item-wpml-ls-26-en .sub-menu-toggle {
background-image: url('path-to-your-svg-file.svg'); /* Replace with your SVG file URL */
background-size: contain; /* Adjusts the size of the SVG to fit the element */
background-repeat: no-repeat; /* Prevents the SVG from repeating */
border: none; /* Optional: removes any border */
}
/* Hiding the default plus and minus icons */
#menu-item-wpml-ls-26-en .icon-plus, #menu-item-wpml-ls-26-en .icon-minus {
display: none; /* Hide the default icons */
}
hi Brunos,
thank you for your help.
I managed to do more or less what I wanted with the code I put below (maybe I can optimize and reduce it).
Can I ask you one more thing?
If you watch this video, you will see that when I go over the switcher, there is a separating line between languages. I can't find a way to remove it. hidden link
Thank you
Best regards
Luca
CSS custom
/* Targeting the WPML language switcher menu item */
a.wpml-ls-item-toggle
{
border: none;
background-color: transparent;
}
/* Add new toggle from font */
.wpml-ls-legacy-dropdown .wpml-ls-current-language > a:after {
content: "\f078";
font-family: "Font Awesome 5 Free";
font-weight: 400;
margin-left: 2px;
display: inline-block;
color: #ffffff;
}
/* Set font for switcher */
.wpml-ls-legacy-dropdown .wpml-ls-item {
padding: 0;
margin: 0;
list-style-type: none;
font-family: 'NewParis Skyline';
}
/* Remove background and border for each language for a and hover*/
.wpml-ls-legacy-dropdown .wpml-ls-current-language > a:hover {
border: none;
background-color: transparent;
}
I'm pleased to hear that you've successfully styled the language switcher. As previously stated by my colleague, offering custom code support falls outside our standard support scope. However, to assist you further, I'm providing a piece of code as an example that you can use to remove the border from the Language switcher.
If you require additional help with custom CSS or code, you might consider hiring one of our certified contractors from here: https://wpml.org/contractors/
Please let me know if you need further assistance in this matter. I will be happy to help.
