Issue with filter color in Event Calendar

Ask the Community General Questions
1

55
55666×455 25.3 KB

Guys, the button of filter has changed colour today? It was white, now - orange in my site. How do I get it back? :upside_down_face:

2

Hmmm, but the colour in my account is ok :roll_eyes:

66
66624×450 23.5 KB

4

Hi there, @Tender_S :waving_hand:

I am so sorry about this issue!

Could you please send me a link to the page, where your widget is installed? I’ll be happy to check it for you :slightly_smiling_face:

5

Here is :slightly_smiling_face:

6

Thanks! The issue occurred because of this selector in the settings of your website’s theme. This is quite a general selector, which targets all buttons on your website, and the devs recommended making it more specific to avoid any issues:

image
image669×472 32.3 KB


In the meantime, we’ve fixed it using this code in the Custom CSS field on the Style tab of your widget’s settings :slightly_smiling_face:

.global-styles,
.es-modal-content-body button {
  position: relative;
  min-width: 0px;
  min-height: 36px;
  cursor: pointer;
  padding: 7px 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  border-style: solid;
  border-width: 1px;
  transition: 0.2s;
  border-radius: 32px;
  color: rgb(17, 17, 17);
  border-color: rgba(17, 17, 17, 0.3);
  background-color: rgba(17, 17, 17, 0);
}

.es-filters-wrapper button {
  position: relative;
  min-width: 0px;
  min-height: 36px;
  cursor: pointer;
  padding: 7px 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  border-style: solid;
  border-width: 1px;
  transition: 0.2s;
  border-radius: 8px;
  color: rgb(17, 17, 17);
  border-color: rgba(17, 17, 17, 0.3);
  background-color: rgba(17, 17, 17, 0);
}
7

Morning Max,

Thanks so much for your help! Seriously so so so appreciated :smiley:

Have a great day!

Kindest,

Sam

Sam Kirby | Editor

image001.jpg

+61 456 980 955
thefieldguidetoowoomba.com | Instagram

8

Yeahhh :slightly_smiling_face: The colour button is normal again! Thanks for quick reaction!

9

Awesome, you’re very welcome :wink:

10

Hello! Guys, the button of filter has changed colour today again? :grin:
It was white, now - orange in my site.

11

Hi there, @Tender_S :waving_hand:

Apologies for the inconvenience!

The class of the element changed, that’s why it stopped working. I’ve replaced .es-filters-wrapper button with .es-filter-button-button and everything is back to normal now:

image
image1538×503 30.2 KB


If you have any questions left, we’re always here to help :wink:

12

Еее ) Again, it’s fast responsive and quick to make a decision. Thanks :slightly_smiling_face:

13

No sweat :wink:

14

@Max I’ve started the Second widget. And I need your help again with buttons / filters :upside_down_face:

P.S. Can I do it myself so as not to worry you again?

image
image869×336 109 KB

15

Hi there, @Tender_S :waving_hand:

Please try to use the CSS code from your 1st widget. If it doesn’t help, we’ll need to check a page, where the 2nd widget is installed :slightly_smiling_face:

16

I used (Style CSS):

.global-styles,
.es-modal-content-body button {
position: relative;
min-width: 0px;
min-height: 36px;
cursor: pointer;
padding: 7px 15px;
display: flex;
align-items: center;
font-size: 14px;
line-height: 18px;
font-weight: 500;
border-style: solid;
border-width: 1px;
transition: 0.2s;
border-radius: 32px;
color: rgb(17, 17, 17);
border-color: rgba(17, 17, 17, 0.3);
background-color: rgba(17, 17, 17, 0);
}

.es-filter-button-button {
position: relative;
min-width: 0px;
min-height: 36px;
cursor: pointer;
padding: 7px 15px;
display: flex;
align-items: center;
font-size: 14px;
line-height: 18px;
font-weight: 500;
border-style: solid;
border-width: 1px;
transition: 0.2s;
border-radius: 8px;
color: rgb(17, 17, 17);
border-color: rgba(17, 17, 17, 0.3);
background-color: rgba(17, 17, 17, 0);
}

But the result is not correct again :smiling_face_with_tear: It’s black and orange when hovering over. Screen:

1
1642×194 14.5 KB

But I would like to see as in the constructor :upside_down_face: :slight_smile:

2
2528×200 6.05 KB

Sorry, but I don’t understand how change it (

17

This page isn’t published yet, right?

If so, could you please temporary publish it and share a link? We’ll be happy to look into this :slightly_smiling_face:

18

It’s published, but not indexed by Google and Yandex yet.

Link": https://m-pro.net.ru/kuda-shoditj-v-tambove/

19

Thank you!

We’ve fixed the issue with this script added to the Custom JS field on the Settings tab of your widget’s settings:

for (const sheet of document.styleSheets) {
  try {
    const rules = sheet.cssRules;

    for (let i = rules.length - 1; i >= 0; i--) {
      const rule = rules[i];

      if (!rule.selectorText) continue;

      let newSelector = rule.selectorText;

      if (rule.selectorText.includes('.elementor-kit-14 button')) {
        newSelector = newSelector.replace(
          /\.elementor-kit-14 button(?![^\{]*:)/g,
          '.elementor-kit-14 button:not([class^="base-button"]):not(.es-apply-filters-button-button):not(.es-clear-filters-button-button):not([class*="eapp-events-calendar"]):not([class^="react-calendar"])'
        );
      }

      if (rule.selectorText.includes('.elementor-kit-14 button:hover')) {
        newSelector = newSelector.replace(
          '.elementor-kit-14 button:hover',
          '.elementor-kit-14 button:hover:not([class^="base-button"]):not(.es-apply-filters-button-button):not(.es-clear-filters-button-button):not([class*="eapp-events-calendar"]):not([class^="react-calendar"])'
        );
      }

      if (rule.selectorText.includes('.elementor-kit-14 button:focus')) {
        newSelector = newSelector.replace(
          '.elementor-kit-14 button:focus',
          '.elementor-kit-14 button:focus:not([class^="base-button"]):not(.es-apply-filters-button-button):not(.es-clear-filters-button-button):not([class*="eapp-events-calendar"]):not([class^="react-calendar"])'
        );
      }

      if (newSelector !== rule.selectorText) {
        const cssText = rule.style.cssText;
        sheet.deleteRule(i);
        sheet.insertRule(`${newSelector} { ${cssText} }`, i);
      }
    }
  } catch (e) {}
}

Please check it out and let me know if everything is fine :slightly_smiling_face:

20

Yes, it’s better. There is right color :slightly_smiling_face:
But please note that the unnecessary pink color has been added to the filters :upside_down_face: . How to remove it? (screen)

7
7624×468 82.9 KB

21

We’ve adjusted the script and the pink color isn’t applied to the filters now:

const exclude =
  ':not([class^="base-button"]):not(.es-apply-filters-button-button):not(.es-clear-filters-button-button):not([class*="eapp-events-calendar"]):not([class^="react-calendar"])';

for (const sheet of document.styleSheets) {
  try {
    const rules = sheet.cssRules;

    for (let i = rules.length - 1; i >= 0; i--) {
      const rule = rules[i];

      if (!rule.selectorText) continue;

      let newSelector = rule.selectorText;

      if (rule.selectorText.includes('.elementor-kit-14 button')) {
        newSelector = newSelector.replace(
          /\.elementor-kit-14 button(?![^{]*:)/g,
          `.elementor-kit-14 button${exclude}`
        );
      }

      if (rule.selectorText.includes('.elementor-kit-14 button:hover')) {
        newSelector = newSelector.replace(
          '.elementor-kit-14 button:hover',
          `.elementor-kit-14 button:hover${exclude}`
        );
      }

      if (rule.selectorText.includes('.elementor-kit-14 button:focus')) {
        newSelector = newSelector.replace(
          '.elementor-kit-14 button:focus',
          `.elementor-kit-14 button:focus${exclude}`
        );
      }

      if (
        rule.selectorText ===
        '[type="button"]:focus, [type="button"]:hover, [type="submit"]:focus, [type="submit"]:hover, button:focus, button:hover'
      ) {
        newSelector = newSelector.replace(
          '[type="button"]:focus, [type="button"]:hover, [type="submit"]:focus, [type="submit"]:hover, button:focus, button:hover',
          `[type="button"]:focus${exclude}, [type="button"]:hover:${exclude}, [type="submit"]:focus${exclude}, [type="submit"]:hover${exclude}, button:focus${exclude}, button:hover${exclude}`
        );
      }

      if (newSelector !== rule.selectorText) {
        const cssText = rule.style.cssText;
        sheet.deleteRule(i);
        sheet.insertRule(`${newSelector} { ${cssText} }`, i);
      }
    }
  } catch (e) {}
}

Please check it out and let me know if everything is fine on your end :slightly_smiling_face: