Skip Navigation

Home › Support › English Support › [Resolved] Split: edit font size

[Resolved] Split: edit font size

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

Problem:
The client needed help with customizing the font, size, and color of the language switcher text in different parts of their website, including changes when the header is fixed. They also needed guidance on targeting the switcher in the sidebar after switching from a footer to a widget-based switcher.
Solution:
1. To change the color of the language switcher in the top header, we advised adding custom CSS in the site's backend under Appearance > Customizer > Custom CSS. Here is the code to use:

.wpml-ls-legacy-list-horizontal a {<br />    color: red !important;<br />}

The 'color' value can be changed to any desired color or hexadecimal code. More information on CSS color properties can be found at:

2. For customizing the output of the language switcher shortcode, we recommended using the settings in the 'Custom language switcher' section on the WPML -> Languages page. Detailed guidance is available here:
https://wpml.org/documentation/support/wpml-coding-api/shortcodes/#wpml_language_selector_widget

Please note that this solution might be outdated or not applicable to your specific case. We highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If this does not resolve your issue, please open a new support ticket at WPML support forum.

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 is split from https://wpml.org/forums/topic/split-change-language-names/

Tagged: 

This topic contains 8 replies, has 2 voices.

Last updated by Mihai Apetrei 10 months, 3 weeks ago.

Assisted by: Mihai Apetrei.

Author Posts
August 1, 2024 at 8:08 pm #16031277

muaweyahG

Dear Mihai, Thanks for creating this ticket , I have edited the language name, I would like to modify the font and size , please help me with that, thank you again.
August 1, 2024 at 8:11 pm #16031282

Mihai Apetrei
WPML Supporter since 03/2018

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hi there.

Can you please be more specific - are you looking to increase the font-size for the languages in the language switcher or to increase the font-size in the translated pages?
August 2, 2024 at 10:51 am #16033034

muaweyahG

Hello, yes I would like to change the (font), (size) and (color) of the switcher text.

also how can I change its color when I am on the fixed header as you can see in the homepage, the menu text changes from white to blue.

hidden link
August 2, 2024 at 11:20 am #16033114

muaweyahG

Hello, I used the the code for the Footer language switcher :[wpml_language_selector_footer]
I was able to change the color and background, but I want to change the color of the switcher as it is showing after the social icons when I go to fixed header, thanks.

So I still need help with:

1- font for each language switcher.
2- font color when on fixed header; I am using this code to modify the color, I would like to know how to target the switcher: #et-boc .et-l .pa-fixed-header .et_pb_menu ul li a,
.pa-fixed-header .et_pb_social_media_follow li a.icon:before {
color: #0d4876 !important;
}

.pa-header.pa-fixed-header .et_pb_module .mobile_menu_bar:before {
color: #0d4876 !important;
}
these are two codes to change the header social icons and the menu text colors when its fixed.
August 2, 2024 at 12:40 pm #16033367

muaweyahG

I sorry for this, I turned off the footer as I do not want the switcher to appear in the footer, when I did that the color changed back.
so I changed the code to the widget [wpml_language_selector_widget] but nothing happens when I change the widget color, is that because I am choosing the (sidebar)? if so how can I target that?
August 3, 2024 at 4:41 pm #16035724

muaweyahG

Hello?
August 3, 2024 at 9:09 pm #16035924

Mihai Apetrei
WPML Supporter since 03/2018

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hi there.

Sorry for the delay but there's a pretty full queue at the moment and there are less people working on the weekend.

To change the color of the languages in the top header language switcher, you can go to your site's backend > Appearance > Customizer > Custom CSS > add the following CSS code and save:


.wpml-ls-legacy-list-horizontal a {
    color: red !important;
}

You can change the "color" value from "red" to whatever code or hexadecimal code you want (like #fff which is white).

You can find out more about CSS color property and the available values in the links below:

- hidden link

- hidden link

- hidden link

I hope that this example helps.

This is a customization, which falls outside the scope of our Support Policy. Before you begin, ensure that you are comfortable with code and please create a full website first.
August 3, 2024 at 9:46 pm #16035941

muaweyahG

thank you for replying regarding the color
please have a look on this:
I sorry for this, I turned off the footer as I do not want the switcher to appear in the footer.
so I changed the code to the widget [wpml_language_selector_widget] but nothing happens when I change the widget settings, is that because I am choosing the (sidebar)? if so how can I target that?
August 5, 2024 at 5:27 pm #16041294

Mihai Apetrei
WPML Supporter since 03/2018

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hi there.

To customize the output of this shortcode, go to the WPML -> Languages page and use the settings in the "Custom language switcher" section as mentioned here:
https://wpml.org/documentation/support/wpml-coding-api/shortcodes/#wpml_language_selector_widget