Skip to content Skip to sidebar

Home › Support › English Support › [Resolved] The flags in the language switcher have rounded corners

[Resolved] The flags in the language switcher have rounded corners

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

Problem:
The client wanted to display the flags in the WPML Language Switcher without rounded corners, as they were appearing with rounded corners contrary to their expectation.

Solution:
We suggested that the client add custom CSS to their site to override the default styling. We provided the following CSS code to be inserted into WP > Appearance > Customize > Additional CSS:

img.wpml-ls-flag {border-radius:0px!important;}

We also reminded the client that any code snippet provided is for educational purposes and is not part of our support scope, which means we do not maintain or debug custom code.

If this solution does not apply to your situation, or if it seems outdated, we recommend opening a new support ticket. We also highly recommend checking related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please contact us through the 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.

Tagged: ,

This topic contains 3 replies, has 2 voices.

Last updated by Kor 1 year, 4 months ago.

Assisted by: Kor.

Author Posts
February 29, 2024 at 7:22 pm #15360373

glennB-5

I am trying to: Get the flags of the WPML Language Switcher to look "normal", i.e. without rounded corners.

Link to a page where the issue can be seen: The page is not public yet I am affraid.

I expected to see: "normal" flags with 90 deg corners.

Instead, I got: flags with rounded corners as in the image below.

I have been in contact with Elementor Support and they tell me it has nothing to do with Elementor or the Theme (Hello Elementor) that I am using.

Do you have any idea why this happens?

Best regards,
Glenn

LanguageFlag.jpg
February 29, 2024 at 7:47 pm #15360418

Kor
WPML Supporter since 08/2022

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Thanks for reaching us.

Checking your screenshot, it looks like it's related to CSS stylings. I need to inspect the Website to help you figure out a solution. Could you share the URL of the page in question?

February 29, 2024 at 8:09 pm #15360523

glennB-5

Yes, I think you are absolutely right, I just cannot seem to find what is causing it. The site is not public yet but here is a bypass link to a page where you can see the "disaster" 🙂

hidden link

March 1, 2024 at 12:43 am #15360786

Kor
WPML Supporter since 08/2022

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Thanks for your reply.

Please insert the custom CSS code below into WP > Appearance > Customize > Additional CSS to fix this. 

img.wpml-ls-flag {border-radius:0px!important;}

DISCLAIMER: Please know that any snippet or code suggested here is for educational purposes only. they are not meant to be the final solution but instead meant to point you in the right direction and are out of the scope of our support so we can't nor will modify, improve, debug or maintain it.
March 1, 2024 at 9:29 am #15361705

glennB-5

Thanks! That took care of the problem.

I do appreciate you taking the time to help out with this even if it most likely is not your plugin that is causing the problem.