Please make sure to update to WPML 4.3.6 and check our list of Known Issues before reporting

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 topic contains 13 replies, has 2 voices.

Last updated by markD-33 11 months ago.

Assigned support staff: Noman.

Author Posts
February 25, 2019 at 12:58 am

markD-33

Hi,

I had opened a Support ticket for which I haven't received any answer in more than 48 hours : #3230936.

So... I found by myself a way to add the shortcode. But some things just won't work and I need your help since I've searched quite a bit already.

Here's the issue:

The language switcher that I've added using a shortcode ([wpml_language_selector_widget]) does not display how it is supposed to. I have set a few different rules in the CMS, but they don't apply and the language switcher doesn't look part of the website design.

1. Even though I've set the border (#e7edf3), background (#e7edf3) and font (#393939) to the same color as the site's, it just doesn't apply.
2. The border slides under the switcher once I click on it (see video, I circle the line I'm talking about).
3. I can't/don't know how to, set the font to the same one as the menu (Monserrat, 16px, HTML#393939).

So how can I do that?

I've added a video so that it is as clear as possible. As soon as I have a final solution, I'll move it to the proper place on the website (real header element).

hidden link

Thanks,

Mark

February 25, 2019 at 9:53 am #3238819

Noman
Supporter

Languages: English (English )

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

Hi,

Thank you for contacting WPML Support. Sorry for having issues. You can fix this issue by adding following CSS in your theme’s or child theme style.css file OR Custom CSS section of the theme:

.wpml-ls-legacy-dropdown-click > ul > li > strong > a > span {
    color: #393939 !important;
    font-size: 16px;
    font-family: inherit;
}

.wpml-ls-legacy-dropdown-click > ul > li > strong > a {
    background: #e7edf3 !important;
    border: 1px solid #e7edf3;
}

And it will look as in attached screenshot. You can change font-family or colors in above CSS if you want to.

Thank you

February 25, 2019 at 2:49 pm #3240424

markD-33

Thanks Noman! I'll try to add the custom CSS to the site. I've already tried a couple of settings but it didn't work. I'll ask the people at Thrive Themes for support.

The screenshot you've sent is almost like I want it to appear. The other things that needs to be changed :

1. Français should be all caps.
2. Language switcher should be fit to content. At the moment it is almost three times as big as the text in it.

How can I change that?

Thanks a lot for your help!

Mark

February 25, 2019 at 3:19 pm #3240633

Noman
Supporter

Languages: English (English )

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

Hi,

You can achieve those 2 things using following CSS:

.wpml-ls-legacy-dropdown-click {
    width: auto;
    max-width: 100%;
    display: inline-block;
}

.wpml-ls-legacy-dropdown-click .wpml-ls-current-language > a > span {
    text-transform: uppercase;
}

And it will look as in attached screenshot.

Thank you

February 25, 2019 at 3:29 pm #3240687

markD-33

Hi Noman,

Thanks a lot!

So, should this be the final CSS :

.wpml-ls-legacy-dropdown-click > ul > li > strong > a > span {
    color: #393939 !important;
    font-size: 16px;
    font-family: inherit;
}
 
.wpml-ls-legacy-dropdown-click > ul > li > strong > a {
    background: #e7edf3 !important;
    border: 1px solid #e7edf3;
}

.wpml-ls-legacy-dropdown-click {
    width: auto;
    max-width: 100%;
    display: inline-block;
}
 
.wpml-ls-legacy-dropdown-click .wpml-ls-current-language > a > span {
    text-transform: uppercase;
}

Thanks for your help again!

February 25, 2019 at 3:31 pm #3240717

markD-33

By final CSS, I mean all the code that's from your first and second support message.

February 25, 2019 at 5:02 pm #3241240

Noman
Supporter

Languages: English (English )

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

Yes exactly, this will be final CSS.

Your welcome!

February 25, 2019 at 5:37 pm #3241453

markD-33

Hi Noman,

Even though I've added the CSS to the site, it just won't apply to the custom language switcher.

hidden link

How am I supposed to apply the CSS code so that it works with a custom switcher?

Thanks!

February 26, 2019 at 9:37 am #3243815

Noman
Supporter

Languages: English (English )

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

Hi,

You have added code in correct location, it should work. Could you please check for a possible theme and plugin conflict. To do that you can switch back to any default theme (e.g. Twenty Seventeen theme), Disable all plugins except WPML and see if this issue goes away with default theme and only WPML activated?

If still issue persists, Please provide temporary access (WP-Admin and FTP Login info) to your site, so that I can look into your setup and debug the issue.

Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

Thank you

February 26, 2019 at 3:16 pm
February 26, 2019 at 4:53 pm #3246266

Noman
Supporter

Languages: English (English )

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

Hi,

I have updated CSS selector as follows:

.wpml-ls-legacy-dropdown-click {
    width: auto;
    max-width: 100%;
    display: inline-block;
}

.wpml-ls-legacy-dropdown-click .wpml-ls-current-language > a {
		background: #e7edf3 !important;
    border: 1px solid #e7edf3;
}
  
.wpml-ls-legacy-dropdown-click .wpml-ls-current-language > a > span {
    text-transform: uppercase;
		color: #393939 !important;
    font-size: 16px;
    font-family: inherit;
}

And now it’s working as in attached screenshot.

Thank you

February 26, 2019 at 6:22 pm #3246755

markD-33

Hi Noman,

Were almost there. Can you please have a look at the video?

hidden link

The color of the text should be #393939, but it is not this color at the moment.

Finally, there is a strange line that appears under the language switcher. Can you please remove it?

Thanks,

Mark

February 26, 2019 at 7:27 pm #3247012

markD-33

I've deleted the test page. So please apply the CSS change to the following pages:

"Accueil"
"Homepage"

Thanks!

February 27, 2019 at 9:19 am #3249149

Noman
Supporter

Languages: English (English )

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

Hi,

I have added new CSS here:
hidden link

But site still showing old CSS as you can see in attached screenshot.

It might be some cache involve in your site that’s why I couldn’t see my new CSS.

Thank you

February 27, 2019 at 8:02 pm #3252413

markD-33

My issue is resolved now. Thank you!