Cannot change the border of language switcher from shortcode

  • Resolved bethgee

    (@bethgee)


    3 years, 8 months ago

    Hi there,

    I am using CSS to restyle the language switcher (from shortcode) as my client wants.

    I have changed the background, color and hover colors. However, I cannot seem to get the CSS I am writing to overwrite the existing CSS for the border – I want it changed to {border: 0 0 1px 0 solid white} but the plugin CSS keeps overwriting mine…

    Also, what selector should I use to change the color of the down arrow – I cannot find this through my usual means.

    Thanks in advance,
    Beth

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Alex

    (@alexcozmoslabs)

    Hi,

    These need to be edited in CSS. You can try to add !important; for the line in order to prioritize your added code.

    See this image: https://tinyurl.com/yb6nfefw

    Thread Starter bethgee

    (@bethgee)

    As I said, Alex, I have added the additional CSS but it isn’t overwriting the one you linked to, even with !important.

    See here – https://ibb.co/Jzd2rtW

    The red coding is from the plugin, the green is my added CSS. Same selector, but the plugins border style keeps overriding mine, even with !important.

    I tried using the other selector (.trp-language-switcher-container) but this did the same thing.

    Thread Starter bethgee

    (@bethgee)

    And I also cannot work out what the selector would be for the down arrow. I need it to be white, not grey as it is as standard, but cannot work out what the selector would be for that!

    Plugin Support Alex

    (@alexcozmoslabs)

    Here is the code to bring the border to 0px and the down arrow to the white color for the language switcher shortcode: https://tinyurl.com/ygykvxa6

    Thread Starter bethgee

    (@bethgee)

    Since it took you over a week to respond, I eventually worked it out.

    In order to remove the background, border and change the color of the arrow, I have had to use:

    .trp-language-switcher > div {
    border: 0 !important;
    background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%);
    background-color: rgba(255, 255, 255, 0) !important;
    background-position-y: 10px
    }

    For future reference – it is more helpful to post the code here than put a screenshot so people can copy-paste!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Cannot change the border of language switcher from shortcode’ is closed to new replies.