Return to previous page

Style for language - by webtec - on WordPress WooCommerce support

This topic has 2 replies, 2 voices, and was last updated 6 years, 7 months ago ago by Rose Tyler

webtec

Participant

April 24, 2018 at 19:17

Hi,

What should I do to get the language and currency selector in the same style as your demo?
My site (selector language): http://prntscr.com/j9lrin
Your demo (selector language): http://prntscr.com/j9lpdn

My site (selector value): http://prntscr.com/j9ls3h
Your demo (selector value): http://prntscr.com/j9lsdr

Thank you

#191892 Copied

1 Answer

Rose Tyler

Support staff

April 25, 2018 at 09:26

Hello,

You need to use custom css code to change looks of your selectors.
For example, add this code in Theme Options > Styling > Custom css or in style.css file of child theme:

.top-bar .wcml-dropdown li ul a {
    background-color: #a80d2d;
    border: none;
    color: white !important;
}
.header .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover>a {
    background-color: #a80d2d;
    color: white;
    opacity: 1;
}
.top-bar.topbar-color-white a:hover{
    color: white;
    opacity: 1;
    background-color: #b55367ba;
}
.header-center .languages-area > div {
    border-color:  white;
}
.top-bar ul.wpml-ls-sub-menu, .top-bar .wpml-ls-legacy-dropdown a {
    background-color: #a80d2d;
    border-color: white;
}
.top-bar .wpml-ls-legacy-dropdown a, .top-bar .wcml-cs-active-currency {
    width: 100px;
    text-align:  center;
}
.top-bar .wpml-ls-legacy-dropdown a {
    border:  none;
}
.top-bar .wpml-ls-legacy-dropdown a:focus, .top-bar .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover>a {
    background-color: #b55367ba;
    color: white;
}

Regards

#191916 Copied