Custom CSS by day of week

[Kenneth]

Events Calendar Pro is excellent plugin, but is either lacking a few basic things, or I’m just not able to find them.

Today, I’m looking to add custom css class to days of the week. We have some custom displays that show our events in a list view using shortcode. Shows up in this order: day, date, event name, location

Our events are all weekends, Thursday – Sunday, and when listed, they look like this:
Thurs….
Friday….
Saturday….
Sunday…..
Thurs….
Friday….
Saturday….
Sunday…..
Thurs….
Friday….
Saturday….
Sunday…..

With all the details of the event on each line it’s hard to read. What I’d like to do is add a line of CSS to put a margin after Sundays. What this would require would be to add a class for the day of the week. .sun .mon .tue .wed .thur .fri .sat.

Where and how could I add that class in the code?

[Cliff]

Hi Kenneth. Thanks for your question.

I assume you’re using the Events List shortcode

Here’s the rendered shortcode –> no way to target each day by a CSS class.

You might be able to create your own shortcode based on the existing shortcode’s code — by copying the code from /wp-content/plugins/events-calendar-pro/src/Tribe/Shortcodes/Events_List.php and create a shortcode like my_own_tribe_events_list instead of tribe_events_list

FYI: We’re limited in helping with customizations, per our Scope of Support / Terms.

I hope this is helpful.

[Kenneth]

That is pretty much what I suspected, that there isn’t an easy way to do it. It would be EXTREMELY helpful if this function was added to a future release. It makes styling lists of dates so much easier.

I’m used to working in Drupal, where adding a custom CSS class to any field is extremely easy and doesn’t require writing any code. Maybe someday WP will have such modern features. 🙂

I’d pay a developer to scribble out some php to make this work, but since we’re already into him for over four grand, and we’re a poor theater company, this will have to wait.

But seriously, you should add this feature.

[Cliff]

Kenneth, here’s a Theme Override for you. It turned out to be pretty easy and quick, so I’m happy to help in this way:

https://gist.github.com/cliffordp/9222f36879ddfb37fb5687c9d5c4382d

Please read the comments in that file’s header and let me know how it works for you.

[Kenneth]

Awesome! thank you for that. Although, last night I buckled down and played with the code myself and figured out a solution. Our developer had built us a custom shortcode file, so I needed to make changes there. I added classes for day and date (ie: .sun .Jul-17). My goal was to have a simple list of performances, with a division between weekends to make it easier to read.

This page gave me some grief, but it was solved by creating custom css specifically for this page:
http://greenstage.org/backyard-bard/

But the result is good. I’ll just have to tweak it for next year’s calendar.

Thanks for your help!

[Cliff]

Ah, good for you and thanks for the update!

Cool implementation 🙂

[Author]

Posts