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

Last updated by tsakiridouI 11 months, 2 weeks ago.

Assigned support staff: Riffaz.

Author Posts
October 30, 2018 at 6:35 am #2860541

tsakiridouI

I created a widget language switcher to be able to insert it as a shortcode in my header with horizontal list, and I would like to add a vertical bar between the two languages.
Can you please help me out?
Thanks
hidden link

October 30, 2018 at 7:09 am #2860577

Riffaz
Supporter

Languages: English (English )

Timezone: Asia/Colombo (GMT+05:30)

Hi,

Thank you for contacting WPML support.

There are two solutions:
1.- One is creating a custom language switcher as described in this link: https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/
2.- The second one is through CSS (or JS).

Both solutions require custom coding and this custom change falls outside of our scope as support, that's why I also gave you a link where you can find our certified partners who can develop custom solutions like the one you desire: http://wpml.org/documentation/support/wpml-contractors/. They will be able to work on custom development with you.

Anyhow, try to add the following code to your Appearance > Customize > Additional CSS
This will give a separator as you have only two languages.

.wpml-ls-last-item.menu-item-type-wpml_ls_menu_item {border-left: 1px solid #000 !important;}

Let me know the results, please.

Regards,
Riffaz.

October 30, 2018 at 9:30 am #2860979

tsakiridouI

Hi tried both in
- WPML --> language --> additional CSS
- Theme settings --> custom code

But no luck

October 30, 2018 at 10:04 am #2861160

Riffaz
Supporter

Languages: English (English )

Timezone: Asia/Colombo (GMT+05:30)

Hi,

Replace the previous code with this:

.wpml-ls-item.wpml-ls-last-item {     
    border-left: 1px solid #000;
    padding-left: 16px; 
}

Let me know the results, please.

Regards,

October 30, 2018 at 11:26 am #2861448

tsakiridouI

It worked.
Thanks