Skip Navigation

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client needs to set a transparent or semi-transparent background color for the language switcher button in WPML but found no documentation on how to achieve this.
Solution:
We recommend applying custom CSS to achieve the desired transparency effect. Here is the CSS code you can use:

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle { 
position: relative;
padding-right: calc(10px + 1.4em);
background: transparent;}
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {
content: "";
vertical-align: middle;
display: inline-block;
border: .35em solid transparent;
border-top: .5em solid;
position: absolute;
right: 10px;
top: calc(50% - .175em);
color: #fff;
}
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
border-width: 0 1px 1px;
background: transparent;
border: solid 1px #ffffff3b;
}

Please test the changes on a staging site before applying them to your live site. If you need further assistance, consider hiring a professional from our contractors' page.

This solution might be outdated or not applicable to your case. We highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If this does not resolve your issue, please open a new support ticket.

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.

Tagged: 

This topic contains 1 reply, has 2 voices.

Last updated by Marsel Nikolli 4 months, 3 weeks ago.

Assisted by: Marsel Nikolli.

Author Posts
June 21, 2024 at 8:27 am #15772351

pccS

Background of the issue:
I need to have a transparent or semi-transparent background color inside the language switcher button on my site hidden link.

Symptoms:
I haven't found any documentation about how to achieve a transparent or semi-transparent background color for the language switcher button.

Questions:
How can I set a transparent or semi-transparent background color for the language switcher button in WPML?

June 21, 2024 at 9:00 am #15772755

Marsel Nikolli

Hi,

Thank you for contacting WPML Support, I will gladly help you.

To achieve what you need requires CSS custom coding which is beyond the scope of this support forum, but we'll try to put you in the right direction to resolve your issue.
If you think you need further help, we recommend you check our contractors' page: https://wpml.org/contractors/.

---

From what I was able to check on your website, the following CSS classes should be changed to something similar:

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
    position: relative;
    padding-right: calc(10px + 1.4em);
    background: transparent;
}
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {
    content: "";
    vertical-align: middle;
    display: inline-block;
    border: .35em solid transparent;
    border-top: .5em solid;
    position: absolute;
    right: 10px;
    top: calc(50% - .175em);
    color: #fff;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
    border-width: 0 1px 1px;
    background: transparent;
    border: solid 1px #ffffff3b;
}

* Please test the changed code on a testing site to prevent any possible damage on the production site.

Thank you for understanding and I hope you find this information helpful.

Kind regards,
Marsel

June 25, 2024 at 11:17 am #15819782

pccS

Hi, thank you, that works for me 🙂