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

Last updated by Bobby 8 months, 1 week ago.

Assigned support staff: Bobby.

Author Posts
February 3, 2019 at 11:23 pm #3155940

fabianD-6

Tell us what you are trying to do?

We need to put the flags on header, next to the social links

Is there any documentation that you are following?

Dont have

Is there a similar example that we can see?

The flags in your site

What is the link to your site?

hidden link

February 4, 2019 at 9:04 pm #3159378

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hello,

sometimes the theme you use will offer the header position as a widget location ;
go to WPML->languages -> Add language switcher as Widget language switcher and see if there is a location for "Header"

if there is none then you can add it manually at any custom location using the following code

just go to your theme's header.php for example and add

do_action('wpml_add_language_selector');

=> https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#custom-locations

NOTE : to control the output of the custom switcher you can go to WPML->Languages->Enabled custom language switcher

let me know your results please

February 6, 2019 at 10:09 pm #3167747

fabianD-6

Hello,

thanks for your message.

We have already placed the language selector in the header. Now we should reduce the field (white) so that it is only the size of the flags.

We have tested with this code according to the instructions and also in the theme stylesheet but it is not working. Can you help us?

****** You can easily fix this by using the wpml-ls-menu-item CSS class.

li.wpml-ls-menu-item ul li a {
width: auto;
}

No need to edit your theme’s CSS file, simply add custom rules to the Additional CSS section under the Language switcher options. ******

Thanks !

February 7, 2019 at 6:01 pm #3171748

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hi There,

i am trying to view your site's front end so i can checkout the language switcher and test the CSS but i am getting a 503 error

please let me know if you need to whitelist my IP

February 7, 2019 at 6:39 pm #3171805

fabianD-6

Could you try again now? The host have some issues sometimes. Now is working ok !

February 7, 2019 at 9:55 pm #3172411

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

works now

try the following and let me know your results

.wpml-ls-statics-shortcode_actions, .wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu, .wpml-ls-statics-shortcode_actions a {
    border-color: #4c3e3e00;
}
.wpml-ls-statics-shortcode_actions {
    background-color: #9a1d1d00; 
}
.wpml-ls-legacy-dropdown {
    width: 20%;
    max-width: 20%;
}
.wpml-ls-statics-shortcode_actions .wpml-ls-current-language>a {
    color: #444444;
    background-color: #ffffff00;
    width: 20%;
}
.wpml-ls-statics-shortcode_actions, .wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu, .wpml-ls-statics-shortcode_actions a {
    border-color: #4c3e3e00;
    width: 45%;
}

NOTE : please do keep in mind that we cannot provide any custom work within the forum and that the above custom code is provided as a working example to help you further customize the language switcher as desired

February 7, 2019 at 10:18 pm #3172428

fabianD-6

Hello, thank you very much We almost see it well. Only the first flag appears a little flattened, can it be corrected? Find attached file. Thank you !

February 8, 2019 at 12:20 am #3172593

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

.wpml-ls-statics-shortcode_actions, .wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu, .wpml-ls-statics-shortcode_actions a {
    border-color: #4c3e3e00;
}
.wpml-ls-statics-shortcode_actions {
    background-color: #9a1d1d00; 
}
.wpml-ls-statics-shortcode_actions a {
    color: #ffffff00;
    background-color: #ffffff00;
}
.wpml-ls-legacy-dropdown {
    width: 20%;
    max-width: auto%;
}
.wpml-ls-statics-shortcode_actions .wpml-ls-current-language>a {
    color: #444444;
    background-color: #ffffff000;
    width: 40%;
}
.wpml-ls-statics-shortcode_actions, .wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu, .wpml-ls-statics-shortcode_actions a {
    border-color: #4c3e3e00;
    width: 63%;
}

notice how there is a width 40% and 63% above , the 40% contorls the first row in the drop down width and the second one controls the dropdown width

this should work well though.