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.

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

Problem: I'm trying to add some styling to the currency switcher, but I cannot set the background color of the active currency and the list items to white.

Solution: Solution here: https://wpml.org/forums/topic/currency-switcher-styling/#post-4309721 and here: https://wpml.org/forums/topic/currency-switcher-styling/#post-4319171

This topic contains 7 replies, has 2 voices.

Last updated by simona-3 2 months, 1 week ago.

Assigned support staff: Noman.

Author Posts
July 30, 2019 at 7:28 am #4305361

simona-3

hi
I'm trying to add some styling to the currency switcher
currently using this CSS to set the width of the switcher but I cannot set the background color of the active currency and the list items to white
also need to set the height to be the same as the language (please take a look in the top bar
on my website)

can you please help ?

July 30, 2019 at 7:30 am #4305363

simona-3

please help

July 30, 2019 at 9:26 am #4306089

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting WPML Support. I couldn’t see dropdown values in currency switcher. You can fix active currency background and height issue by adding below CSS in WPML >> Languages > Additional CSS section:

.wcml_currency_switcher li.wcml-cs-active-currency > a {
    background: #f7c8c5 !important;
    padding: 13px 5px !important;
}

.wcml_currency_switcher > ul > li {
	border:none !important;
}

Please let me know if this resolves your issue or you need further assistance with this issue.

Thank you

July 30, 2019 at 9:40 am #4306303

simona-3

thanks

I changed the background to white (#f5f5f5) for the active item
sorry I forgot to mention the drop down items appear only for french language
what is the code for these drop down items as well? (no need to change on over on)

also, the I need the box to cover the pink bar by height (same as the language switcher)
and the ^ sign to be the same

Thanks
Simon

July 30, 2019 at 4:39 pm #4309721

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Please use below CSS:

.wcml_currency_switcher li.wcml-cs-active-currency>a {
    background: #f5f5f5!important;
    padding: 14px 12px !important;
    background-image: linear-gradient(to bottom,#fff,#f1f1f1);
    background-repeat: repeat-x;
    height: 40px;
    box-sizing: border-box;
}

.wcml-dropdown .wcml-cs-submenu {
    right: 0 !important;
    left: auto !important;
    min-width: 150px;
}

.wcml-dropdown .wcml-cs-submenu li a{
    background: #fff;
	display: block;
    padding: 10px 20px;
    line-height: 18px;
    border: 1px solid #ebebeb;
    margin-bottom: -1px;
}

.wcml-dropdown .wcml-cs-submenu li a:hover{
    background: #fff;
}

.wcml-dropdown a.wcml-cs-item-toggle:after {
	font-family: FontAwesome;
	 font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
	content: "\f107";
	text-decoration: inherit;
    display: inline-block;
    speak: none;
    border:none !important;
    font-size: 14px;
    top:14px;

}

And it will look as in the attached screenshot.

Thank you

July 31, 2019 at 2:43 pm #4315453

simona-3

thanks a ton!

one last thing, how do I make the items border look the same as of the language switcher?

August 1, 2019 at 7:10 am #4319171

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Please use below CSS:

.wcml-dropdown .wcml-cs-submenu {
    box-shadow: 0 1px 10px rgba(0,0,0,.07), 0 1px 0 rgba(0,0,0,.05);
}	

.wcml-dropdown .wcml-cs-submenu li {
    border: none !important;
}

.wcml-dropdown .wcml-cs-submenu li a {
    border: 1px solid #ebebeb;
}

And it will look as in the attached screenshot.

Thank you

August 5, 2019 at 1:10 pm #4340717

simona-3

My issue is resolved now. Thank you!