Advanced Filter Bar Customisation

[Justin Tippett]

Hi guys, I’d like to be able to customise the background colour of my advanced filter bar. It would appear as though there is no settings to be able to do this? I did search the forums and noticed some CSS which I tried but it didn’t seem to work.

Given its a premium add on though I would have thought something so simple as to change the colour options would be part of the settings in the Settings/Filters tab. Hope you can help.

[Sky]

Hi there,

All color controls live in the Customizer. To change the Filter bar color, use the Customizer > The Events Calendar > Global Elements > Filter Bar Color.

Hope that helps. Please let me know if you have any additional questions about this.

Thanks,
Sky

[Justin Tippett]

Hi,

That doesn’t appear to be correct. That only seems to impact the ‘normal’
filter bar. As per my original message, I want to customise the advanced
filter bar.

[image: Events Calendar filter bar colour.png]

Also, and this may be an issue with my theme perhaps or it’s a bug, but
even when I change the colour for the normal filter (as per above image)
and can see the colour change, but when I publish, the colours default back
to standard.

[Sky]

Hi again,

Yes, you are correct, that is only for the search bar. It doesn’t appear that there is a customizer setting for the Filter Bar.

You can just add a bit of CSS to change the background color of this.


@media only screen and (min-width: 767px){
#tribe_events_filters_wrapper.tribe-events-filters-horizontal, .tribe-filters-closed
#tribe_events_filters_wrapper.tribe-events-filters-horizontal {
background: red;
}
.tribe-events-filters-horizontal .tribe-events-filters-content {
border-color: transparent;
background: transparent;
}
}


I tried setting the color of the search bar in the customizer on my local install, and it is showing the correct color on the front end. Are your theme styles perhaps overriding this?

Hope that helps! Let me know you have any additional questions.

Thanks,
Sky

[Justin Tippett]

Yeah couldn’t get this one to work so suspect it’s conflicting somewhere with one of my many plugins. Cheers, Justin

[Sky]

Hi again,

You can also try adding “!important” on to the styles to force override any conflicting styles.

For example:


@media only screen and (min-width: 767px){
#tribe_events_filters_wrapper.tribe-events-filters-horizontal, .tribe-filters-closed
#tribe_events_filters_wrapper.tribe-events-filters-horizontal {
background: red!important;
}
.tribe-events-filters-horizontal .tribe-events-filters-content {
border-color: transparent!important;
background: transparent!important;
}
}


Let me know if that works for you.

Thanks,
Sky

[Justin Tippett]

Hi Sky, still no luck with this one. All the other tickets I’ve been able to resolve but this one is proving to be a bit stubborn. It’s not the end of the world but if there is something else I can try that would be helpful. Cheers, Justin

[Sky]

Hi again,

So sorry, I just realized I am providing styles for the horizontal filter bar, and you are using the vertical.

This should get you started:


@media only screen and (min-width: 767px){

#tribe_events_filters_wrapper.tribe-events-filters-vertical, .tribe-filters-closed
#tribe_events_filters_wrapper.tribe-events-filters-vertical {
background: red!important;
}

.tribe-events-filters-vertical .tribe-events-filters-content {
border-color: transparent!important;
background: transparent!important;
}

#tribe_events_filters_wrapper .tribe-events-filters-group-heading, .tribe-events-filter-group.tribe-events-filter-select {
background: transparent!important;
}

}


Please note that we are limited in the amount of support we can provide for customizations such as this here in the forums. If you need to style any other elements in this, try using the browser inspector tool to view the element to see what you need to override.

If you are not familiar with CSS, I would recommend finding a front end developer to help you with your customizations.

Hope that helps! Let me know if you have luck with the latest CSS.

Thanks,
Sky

[Justin Tippett]

Thanks Sky, yes indeed that was the issue and we are now back on track 🙂

Whilst I really appreciate your support and advice, I find the ‘limited support’ comment quite frustrating. You provide customisation for your normal filter bar in the plugin settings – yet I purchase an advanced filter bar and there are NO customisations available? And you make it out like you are doing me a favour in helping me?

I would suggest that when someone buys an advanced filter bar it would be reasonable to expect that it also comes with at least the same functionality as the one that is included in the base level…

The reason I purchased your product is for ease of use – I really don’t want to have to be playing around with CSS!

[Sky]

Hi again,

I am sorry to hear of your frustration. Please review our Terms of Support page to see what types of things are covered for support. https://theeventscalendar.com/knowledgebase/what-support-is-provided-for-license-holders/

CSS modifications are generally not covered in our support criteria, but I try to help when it will take just as long to explain that it’s not something we can help with. We are experiencing a higher than normal volume of support tickets right now, so I unfortunately have to limit the “above and beyond” assistance in cases like this.

If you would like to see this functionality as part of the plugin, please visit our User Voice forum to make the suggestion. If enough people vote on the idea, it may be considered for future releases.

Thanks,
Sky

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts