How to customize CSS style for filter bar

[Bruce]

Hi. I want to customize the CSS styling of our filter bar.

I started by following instructions here:

Adding custom styles alongside default Filter Bar stylesheet

(Basically, edit functions.php, then copy the default styles from filter-view.css into my tribe-events.css file, and then
customize the Filter Bar styles that are now in tribe-events.css)

Then I found this alternative take on the topic:

Add custom filter-view.min.css

(Just create /my-theme/tribe-events/filterbar/filter-view.css and put my customizations in there.)

I am trying to use the latter technique but observing no effect at all. It seems my /filterbar/filter-view.css is not getting loaded?

I am also confused how these two approaches relate to each other. Now that I have started with the first technique does that affect the feasibility of the second?

And I am confused because the two posts referenced above seem like very different answers to the same question. I am looking also at https://theeventscalendar.com/knowledgebase/themers-guide/, and I have a vague sense that one technique maybe is about “replacing default style sheets” and the other is about “adding custom style”, but I find it very confusing.

Thanks for clarifying comments how I can customize style of my filter bar.

• This topic was modified 9 years, 11 months ago by Bruce.

[Geoff]

Hi Nobuko,

So sorry for the confusion here! I do know that there are a lot of templates in the plugin and various ways to customize them, os  it’s definitely easy to find yourself heading down a rabbit hole — I can help though!

I see our Themer’s Guide is a little outdated specifically for Filter Bar styles. We’re in the process of updating the guide, so I’ll be sure to make a note to fix this at the same time.

Here’s how it should work:

• Make a new file called filter-view.css
• Make a new folder in your theme directory called tribe-events
• Make a new folder in that one called filterbar
• Drop the filter-view.css file in that last folder

Now that the stylesheet is in your theme, it will load alongside the other Filter Bar stylesheet and override the default styles with your custom styles.

For example, adding this:

#tribe_events_filters_wrapper.tribe-events-filters-horizontal {
background: orange;
}

…will change the background color of the Filter Bar wrapper to orange (screenshot).

Does that work for you as well? Please let me know. 🙂

Cheers!
Geoff

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts