Different font color for custom widgets

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

Problem:
The client needed to change the font color of the WPML language switcher widget to adapt to different background colors on their website. Additionally, the client encountered an issue with a line break occurring between the language flag and language name within a specific pixel range.
Solution:
Firstly, we informed the client that they do not need to use a custom language switcher to hide the current language; this can be done by unchecking the "current language" option in WPML > Languages > Language Switcher Menu options. Regarding the need for different font colors for different background colors, we advised that custom CSS would be necessary to achieve this.
We also mentioned that WPML provides styling options in the language switcher settings, which can be found by clicking "edit" on the language switcher. However, these settings can sometimes be overridden by the theme or other active plugins' CSS. We provided a link to an example of the styling options area: https://cdn.wpml.org/wp-content/uploads/2023/02/language-switcher-footer.png
For the line break issue, we requested access to the site to review the code, suspecting that a lack of horizontal space might be causing the problem. However, the client later reported that the issue no longer occurred.

Please note that the solution provided might be irrelevant due to being outdated or not applicable to your case. If the issue persists, 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 you still need assistance, please open a new support ticket with us.

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.

Tagged: Exception

This topic contains 3 replies, has 2 voices.

Last updated by Mihai Apetrei 1 year, 1 month ago.

Assisted by: Mihai Apetrei.

Author	Posts
April 10, 2024 at 3:43 pm #15505709
katjaK-13	Hello, we are using the custom widget since we don't want to display the current language. The problem with the custom widget though is that you can only design one option. The widget is displayed on our website on different background colors. So we need the font to be black sometimes and white other times. This seems like it would be such a simple and necessary feature, especially for a paid plug-in. Maybe I have missed something. Could you help me out here? All the best, Katja
April 10, 2024 at 4:26 pm #15505883
Mihai Apetrei WPML Supporter since 03/2018 Languages: English (English ) Timezone: Europe/Bucharest (GMT+03:00)	Hi Katja. Inside WPML > Languages > in the Language Switcher Menu options, you should be able to edit the menu language switcher and UNcheck the "current language" option. This way, it will never show the current language. So, you don't need to use a custom language switcher for that. In regards to the colors, I am not sure WHEN you need to have separate background colors, but usually you will need to use custom CSS for that. Please let me know how things go. Mihai Apetrei
April 12, 2024 at 12:29 pm #15512901
katjaK-13	Hello Mihai, Not relevant: I see, we are using the language switcher widget in our headers though, not as part of the menu. We have a left aligned menu but need the language switchers aligned to the right. I used some CSS to hide the current language in this case now. It just seemed like something basic to me. I think maybe you misunderstood the background color part. Many websites have more than one header. A light and a dark header style for example which would require different font colors for the language widget. That seems basic to me and not like something I should have to write CSS for. Because then I could just keep using Polylang for free 😉 Relevant: But yes, since I solved my problem just a final question. I have a Pixel range of like 65px staring at a screen size of around 1090px where I get a like break between language flag and language name. That seems a bit weird, I would expect it to be designed in a way where a line break wouldn't even be possible between the two. All the best Katja
April 12, 2024 at 9:38 pm #15514187
Mihai Apetrei WPML Supporter since 03/2018 Languages: English (English ) Timezone: Europe/Bucharest (GMT+03:00)	Hi Katja. We definitely have styling options in the lower part of the language switcher settings (when you click "edit" on it first) but those can sometimes be overwritten by existing CSS that comes from the current theme or (at least) one of the active plugins. Here is an example of the bottom area with fields with the styling options: hidden link In regards to the other multilingual plugin that you mentioned you could use, I want to mention there are many differences and extra features that come with WPML compared to that one you mentioned, especially to the free version. But, of course, it is important that someone uses the right product that brings the features they are looking for and solves their project need. In regards to the breakline that you mentioned, I'm trying to access the site to see the actual code of that section in your screenshot but I'm asked for a password. Can you please share it in the private fields below? You can just add some dummy information for the other fields. My guess is that there might not be enough width (horizontal space) and that's why this is happening but I can tell for sure until I am able to see the code. I will be waiting for your response. Mihai
April 22, 2024 at 12:53 pm #15550569
katjaK-13	Hello Mihai, thanks for the assistance. I forgot about this ticket and interestingly the line break does not happen anymore, so I'll just hope it stays like that. Thanks again!