Where do are the Custom CSS files for the Filter Bar located?

[Mike]

I see in the Themer’s Guide the locations of some of the CSS files, but not all:

Loading Custom Styles for The Events Calendar

To load custom styles for core views and elements, create a stylesheet called tribe-events.css in the tribe-events/ directory of your theme.
Loading Custom Styles for Events Calendar PRO (premium)

To load custom styles for Events Calendar PRO views and elements, create a stylesheet called tribe-events-pro.css in the tribe-events/pro/ directory of your theme.
To load custom styles for the Events Calendar widget, create a stylesheet called widget-calendar.css in the tribe-events/pro/ directory of your theme.
Loading custom Styles for Community Events (premium)

To load custom styles for Community Events views and elements, create a stylesheet called tribe-events-community.css in the tribe-events/community/ directory of your theme.

Where are the CSS files for the Filter Bar files located? If altered, where would I store them in my tribe-events/ directory?

Thanks!

[Cliff]

Hi, Mike. Thanks for your detailed request.

Filter Bar doesn’t load a separate CSS file, but you can add custom CSS a variety of generic ways on your site:

You can add custom CSS code via your child theme’s style.css file, via WordPress 4.7’s Customizer CSS settings, or via a third-party plugin (not guaranteed or supported by us), like:

• SiteOrigin CSS (helps you visually build CSS selectors via its Inspector and Visual Editor, if that’ll help you)
• Simple Custom CSS
• Jetpack (supports regular CSS and the LESS and Sass pre-processors)

If you’re not a CSS expert, Jetpack’s Custom Design reference may prove helpful.

Please let me know how it goes for you.

[Mike]

Something about this seems off. The Filter Bar, and in fact all of the “add on” plugins”, do load their own stylesheets. For example:

Event Tickets Plus has the following sheets in wp-content/plugins/event-tickets-plus/src/resources/css
admin.css
meta.css
tickets.css
wootickets.css

Filter Bar has the following sheets in wp-content/plugins/the-events-calendar-filterbar/src/resources/css
filter-admin.css
filter-view.css
filter-view-mobile.css

According to your response, I should just add my changes using my theme’s custom stylesheet. While this should work, it will result in BOTH the old styles and the new styles being loaded, which is unnecessary extra load and could lead to potential conflicts. I would like to REPLACE the default plugin stylesheets entirely with my own variations, in an upgrade friendly manner. So it seems to me that the proper approach would be to copy over the existing stylesheets from each plugin, make my own alterations, and then upload them somewhere in tribe-events/ as we would do for the primary stylesheets listed in the Themer’s Guide now.

Are you saying that there is no way to do this right now?

[Cliff]

Gotcha. Sorry I misunderstood what you were wanting.

Please search for “locate_stylesheet” in:

• /wp-content/plugins/the-events-calendar-filterbar/src/Tribe/View.php
• /wp-content/plugins/event-tickets/src/Tribe/RSVP.php
• /wp-content/plugins/event-tickets-plus/src/Tribe/Commerce/WooCommerce/Main.php

If this isn’t enough flexibility for you, please let me know and I can look into this further with our developers.

Please let me know how this goes for you.

[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