How to replace CSS files not listed in Themer's Guide

[Mike]

I am having difficulty replacing the TEC stylesheets. I’ve followed the instructions listed here in the Themer’s Guide here: https://theeventscalendar.com/knowledgebase/themers-guide/#customizingstyles

It only lists instructions for THREE of the dozens of stylesheets utilized by TEC + assorted Tribe plugins.

• tribe_events_stylesheet_url (The Events Calendar core styles)
• tribe_events_pro_stylesheet_url (Events Calendar PRO styles)
• tribe_events_pro_widget_calendar_stylesheet_url (The Events Calendar calendar widget styles)

I added the following to my functions.php file:

/**
  * Replace Tribe CSS Files
  */

function replace_tribe_events_calendar_stylesheet() {
   $styleUrl = get_bloginfo('template_url') . '/tribe-events/custom-events-stylesheet.css';
   return $styleUrl;
}
add_filter('tribe_events_stylesheet_url', 'replace_tribe_events_calendar_stylesheet');

function replace_tribe_events_calendar_pro_stylesheet() {
   $styleUrl = get_bloginfo('template_url') . '/tribe-events/custom-events-pro-stylesheet.css';
   return $styleUrl;
}
add_filter('tribe_events_pro_stylesheet_url', 'replace_tribe_events_calendar_pro_stylesheet');

Unfortunately, although this IS the code listed in the themer’s guide, it does not work for anyone using a child theme…. which is the default behavior EVERYONE should be using when customizing a wordpress theme. I had to replace get_bloginfo('template_url') with get_bloginfo('stylesheet_directory') to have it even load the customized stylesheets, and this is not listed anywhere in the themer’s guide. I was lucky enough to have found it in the forums, but others might not be.

Then I copied ALL of the CSS files from the TEC and TEC Pro plugins into:
http://thepaintandpour.us/wp-content/themes/you-child/tribe-events/custom-events-stylesheet.css
and
http://thepaintandpour.us/wp-content/themes/you-child/tribe-events/custom-events-pro-stylesheet.css

I tried batching all of the CSS files together in each “master” CSS file (for TEC, TEC Pro, and TEC Widgets), but there are a lot of glitches that lead me to thinking it is not picking up everything, not to mention the mobile view issues. As a temporary fix, I added @media settings to all of the mobile CSS properties, but that is hardly a proper solution.

So my questions:

1. How do I replace the CSS for ALL of the Modern Tribe plugins.
2. How do I replace the mobile view files for the assorted plugins?
3. If I am using a particular stylesheet in settings (theme, full, or skeleton), do I copy over only those files into the custom CSS files, or all three?

In particular, I am looking for instructions on how to replace the following CSS files:

TEC
admin-menu.css
aggregator-fields.css
aggregator-page.css
debugger.css
events-admin.css
tribe-events-embed.css
tribe-events-full.css
tribe-events-full-mobile.css

TEC Pro
events-admin.css
events-recurrence.css
tribe-events-mini-ajax.css
tribe-events-pro-full.css
tribe-events-pro-full-mobile.css
widget-calendar-full.css
widget-this-week-full.css

TEC Filter Bar
filter-admin.css
filter-view.css

TEC Tickets
rsvp.css
tickets.css
tickets-attendees.css
tickets-attendees-print.css
tickets-embed.css

TEC Tickets Plus
meta.css
tickets.css
wootickets.css

If I might make a suggestion, EVERY css file and EVERY template view for all plugins should have instructions on how to replace them with edited versions in the Themer’s Guide AND in the title comments listed on the top of each file. This should include EXACT directions, including the locations of the source file and the location where the custom file should be loaded. This should also include instructions on the appropriate functions to place in one’s functions.php file to enque to the custom CSS files for EVERY file, similar to that provided in the Themer’s guide

For example, look at this snippet from the Themer’s Guide:

Events Tickets Plus

Parent folder located at: /wp-content/plugins/event-tickets-plus/src/views/

attendees-list.php – The template for the public list of attendees. Note that there is no subdirectory needed for this template and it can go straight into the tribe-events folder when theming.
login-to-purchase.php – Renders a link displayed to customers when they must first login before being able to purchase tickets
meta.php – The template that displays custom fields that have been created for a ticket to fill in during registration. Note that there is no subdirectory needed for this template and it can go straight into the tribe-events folder when theming.
meta/checkbox.php – The template used for displaying checkbox options for custom ticket fields that get imported by meta.php
meta/number.php – The template used for displaying numeric custom ticket fields that get imported by meta.php
meta/radio – The template used for displaying radio button options for custom ticket fields that get imported by meta.php
meta/select – The template used for displaying selectable options for custom ticket fields that get imported by meta.php
meta/text – The template used for displaying custom ticket text fields that get imported by meta.php
tickets-plus/orders-edit-meta.php– Renders the meta fields for order editing
tickets-plus/orders-tickets.php – The list of ticket orders
eddtickets/tickets.php – Easy Digital Downloads table of tickets with the button to purchase in the front end. It shows in the event single, if the event has EDD tickets to sell
shopptickets/tickets.php – Shopp table of tickets with the button to purchase in the front end. It shows in the event single, if the event has Shopp tickets to sell
wootickets/tickets.php – WooCommerce table of tickets with the button to purchase in the front end. It shows in the event single, if the event has WooCommerce tickets to sell
wpectickets/tickets.php – WP E-Commerce table of tickets with the button to purchase in the front end. It shows in the event single, if the event has WP E-Commerce tickets to sell

This lists the source of the template files, but NOT where to upload the custom files. It also does not inform us how to replace the CSS files for this plugin, or even where they are located. This is a glaring hole in your instruction files, and needs to be patched. The entire Themer’s Guide needs to have these critical elements added, to allow customers to properly modify their fields in an upgrade friendly manner.

This is definitely a phase two aspect, but an image map should be provided of all elements on each page/view and instructions on what CSS fields can be used to customize them. For example, in the month view, an image map should be provided for customizers that allows them to hover over each element and see exactly what CSS will affect changing it’s color/size/whatever. I know that there are CSS inspector tools that do this, somewhat, but as an example, I don’t seem to be able to figure out what CSS can change the month view’s current day header formatting. With an image map that shows the respective CSS on an overlay for each element, it would make our lives SO much easier when attempting to edit the CSS to create our own layouts.

Thanks for reading!

[Andras]

Hello Mike,

Welcome back and thanks for reaching out!

I’m afraid fully replacing / overwriting the css files is not possible. Also in the knowledgebase article you mentioned it says:

Keep in mind that when you put a custom stylesheet in the tribe-events folder, it will be loaded in addition to our stylesheets.

What you can try to do however is choose ‘Skeleton Styles’ under Events > Settings > Display tab > Default stylesheet used for events templates and then create your own css rules either in your child theme’s style.css file or in a separate one in you child theme folder. In the latter case don’t forget to enqueue that style as well.

 

If I might make a suggestion, EVERY css file and EVERY template view for all plugins should have instructions on how to replace them with edited versions in the Themer’s Guide AND in the title comments listed on the top of each file.

Thanks for the suggestion. The themer’s guide gives quite a detailed description on how the specific views and sections (like meta info) can be overridden. And if you take a look at the files which you mention, you will see that in the header you can find the instructions on how that specific file can be overridden. This, for example is taken from the map.php file from Events Calendar Pro

/**
* Map View Template
* The wrapper template for map view.
*
* Override this template in your own theme by creating a file at [your-theme]/tribe-events/pro/map.php
*
* @package TribeEventsCalendar
*
*/

Since CSS files are not over-writable the same way, it wouldn’t be useful adding information like that there.

And you might be right that it should be mentioned for some more of the files in that list (or groups of files) where the override should be placed. I’ll forward this to the team and we’ll check it out.

 

I know that there are CSS inspector tools that do this, somewhat, but as an example, I don’t seem to be able to figure out what CSS can change the month view’s current day header formatting.

CSS inspector tools are really great and that is what we also use when helping out questions like that. Sometimes it might need a bit of digging, but if you are familiar with HTML structure and CSS a bit, then the inspector tools are of great help.

As to your questions, here is the css snippet that will change the current day’s header in month view:
td.tribe-events-present div:first-child, td.tribe-events-present div:first-child a {
background-color: red !important;
}
I hope my answers clarify the topic and I hope it helps you get started. Let me know if you need any more help.

Cheers,
Andras

[Andras]

One more thing to clarify about this:

I had to replace get_bloginfo('template_url') with get_bloginfo('stylesheet_directory') to have it even load the customized stylesheets

And this is what the text in the article says:

“Let’s say you want to replace the custom core and PRO stylesheets offered by the plugin and <span style=”text-decoration: underline;”>load your theme’s own stylesheets</span> called custom-events-stylesheet.css and custom-events-pro-stylesheet.css respectively. You can use the aforementioned filters like this:”

That means that you have the stylesheets placed in your theme’s folder, and that is the parent theme. We might need to clarify this in the knowledgebase a bit more.

get_bloginfo(‘template_url’) gives URL of the active theme’s directory. Within child themes, both get_bloginfo(‘template_url’) and get_template() will return the parent theme directory.

And your fix was correct, as stylesheet_directory already looks in the child theme.

 

Cheers,
Andras

[Mike]

So exactly which CSS files does this code replace?

/**
  * Replace Tribe CSS Files
  */
 
function replace_tribe_events_calendar_stylesheet() {
   $styleUrl = get_bloginfo('template_url') . '/tribe-events/custom-events-stylesheet.css';
   return $styleUrl;
}
add_filter('tribe_events_stylesheet_url', 'replace_tribe_events_calendar_stylesheet');
 
function replace_tribe_events_calendar_pro_stylesheet() {
   $styleUrl = get_bloginfo('template_url') . '/tribe-events/custom-events-pro-stylesheet.css';
   return $styleUrl;
}
add_filter('tribe_events_pro_stylesheet_url', 'replace_tribe_events_calendar_pro_stylesheet');

I need to know exactly which CSS files are replaceable, and which files are not. Even in the Themer’s Guide, it does not list the exact files one can and can not replace. So let’s break it down based off the available replacements listed:

tribe_events_stylesheet_url (The Events Calendar core styles)
Which of these CSS files can be replaced with this code?

admin-menu.css
aggregator-fields.css
aggregator-page.css
debugger.css
events-admin.css
tribe-events-embed.css
tribe-events-full.css
tribe-events-full-mobile.css
tribe-events-skeleton.css
tribe-events-skeleton-mobile.css
tribe-events-theme.css
tribe-events-theme-mobile.css

tribe_events_pro_stylesheet_url (Events Calendar PRO styles)
Which of these CSS files are replaced with this code?

events-admin.css
events-recurrence.css
tribe-events-mini-ajax.css
tribe-events-pro-full.css
tribe-events-pro-full-mobile.css
tribe-events-pro-skeleton.css
tribe-events-pro-skeleton-mobile.css
tribe-events-pro-theme.css
tribe-events-pro-theme-mobile.css
widget-calendar-full.css
widget-this-week-full.css

tribe_events_pro_widget_calendar_stylesheet_url (The Events Calendar calendar widget styles)
This one confuses me the most. Where does it fit in? Is it just the Pro CSS plugins for?:

widget-calendar-full.css
widget-this-week-full.css

And are you really telling me that I can not replace the CSS for the other plugins? Having seen some of the customization done to TEC within your own showcase, I have a very hard time believing that, as they show obvious modification of those plugins. In fact, here is a snippet from your forums showing how to replace the CSS for the Community plugin:

add_action( 'wp_enqueue_scripts', 'override_community_styles', 100, 0 );
function override_community_styles() {
	//Remove Community Styles
	wp_deregister_style( 'tribe_events-community' );
	wp_dequeue_style( 'tribe_events-community');
	
	//Add your Custom Styles
	wp_register_style( 'custom-community-styles', 'http://www.URLTOYOURCSS.com/styles.css', array(), '1.0', 'screen' );
	wp_enqueue_style( 'custom-community-styles' );

}

And here is a post showing replacement of custom CSS for the Filter Bar:
https://theeventscalendar.com/support/forums/topic/add-custom-filter-view-min-css/

So obviously, it IS possible to replace CSS in plugins not specifically listed in the Themer’s Guide. So beyond my questions listed above, I need to know how to replace the CSS in the Event Tickets and Event Tickets Plug plugins. Is there someone who can assist me with this?

[Andras]

Hey Mike,

I need to apologize, there was a misunderstanding on my side.

Yes, with that code at the beginning of your latest post, you can indeed replace the stylesheet, if you want.

Depending on your setting under Events > Settings > Display tab > Default stylesheet used for events templates these files will be replaced:

Setting: Skeleton styles
tribe-events-skeleton.css
tribe-events-pro-skeleton.css

Setting: Full styles
tribe-events-full.css
tribe-events-pro-full.css

Setting: Tribe Event Styles
tribe-events-theme.css
tribe-events-pro-theme.css

 

This one confuses me the most. Where does it fit in? Is it just the Pro CSS plugins for?

Events Calendar Pro comes with an enhance calendar widget. Those stylesheets are for that.

I do hope these answer your questions so far.

 

I need to know how to replace the CSS in the Event Tickets and Event Tickets Plug plugins. Is there someone who can assist me with this?

I will need to ask for a bit of patience on this one. Let me look / ask around if this can be done easily and if there is something for this available.

Thanks for hanging in there!

Andras

[Mike]

Thanks for checking on how to replace the Ticket plugin CSS, I really need that info for the next phase of our modifications.

However, I still need to know, how do you replace the mobile stylesheets for TEC and TEC Pro? I know I can additional CSS the custom-events-stylesheets.css or custom-events-pro-stylesheets.css, but I am looking to specifically replace the mobile views of the TEC and TEC Pro stylesheets entirely.

[Andras]

Hi Mike,

Let me check that for you if that’s needed at all, or you just need to set up @media queries in your css. I’ll get back to you.

A.

[Andras]

Hey man,

News is, you don’t need to separately remove the mobile stylesheets. The code that replaces the base stylesheets also replaces the media ones. So in your new custom-events-stylesheet.css you will need to set up @media queries to deal with mobile view.

E.g:
.tribe-events-single-event-title {
background-color: red;
}
@media screen and (max-width: 1024px) {
.tribe-events-single-event-title {
background-color: blue;
}
}
 

Does this answer your question?

Cheers,
Andras

[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