Colors not working properly for all day events in month view

  • Resolved sem0812

    (@sem0812)


    1 month ago

    Hi,

    I have a problem with category colours on all day events displaying in month view. I have the category ‘external events’ set to show in black background with white font. If I set a time for the event (e.g. 9am – 5pm), it displays correctly. However, if I set it to an all day event (so no times defined), it shows in greyed out background with black text (I have added the black border for now as a sort of workround).

    In list view, my external events show in black bg with white text as they should, all good.

    Any clues please? All plugins up to date etc. Thanks

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Andy Fragen

    (@afragen)

    1 month ago

    Can you share an example where an all day event is set to the category external-events?

    Can you share a screenshot of your Category Colors Settings?

    Plugin Author Andy Fragen

    (@afragen)

    1 month ago

    So I did a little digging and there are conflicts with the themes/kadence/assets/css/tribe-events.min.css override some things like #primary .tribe-events .tribe-events-calendar-month__multiday-event-bar-inner and #primary .tribe-events .tribe-common-h8 causing this issue for you.

    You would need to modify or override these. You might be able to use the teccc_fix_category_background_color filter.

    In a quick test, adding a preceding #primary declaration to the specific affected CSS selectors seems to fix the problem.

    https://github.com/the-events-calendar/the-events-calendar-category-colors/wiki/Filters-and-Hooks#teccc_fix_category_background_color

    Thread Starter sem0812

    (@sem0812)

    1 month ago

    Thanks Andy for this. I would never have known how to work this out! Hopefully the category colour plugin devs will sort it out for a future update!

    Plugin Author Andy Fragen

    (@afragen)

    1 month ago

    @sem0812 there’s really nothing to work out in the plugin. The issue is how your theme works. The filter exists to override these sorts of issues with themes.

    All I did was look into your calendar to see what was overriding the plugin’s CSS.

    Plugin Author Andy Fragen

    (@afragen)

    1 month ago

    @sem0812 try adding this filter.

    // Overrides for all day events in Kadence theme.
    add_filter( 'teccc_fix_category_background_color', function( $empty, $cat_selector ) {
    	$slug = str_replace( '.tribe-events-category-', '', $cat_selector) ;
    	return "#primary article.tribe-events-calendar-month__multiday-event.tribe_events_cat-{$slug} h3, #primary article.tribe-events-calendar-month__multiday-event.tribe_events_cat-{$slug} .tribe-events-calendar-month__multiday-event-bar-inner,";
    }, 10, 2 );
    Thread Starter sem0812

    (@sem0812)

    4 weeks, 1 day ago

    Thanks Andy for this. Can you explain please where / how I apply this filter? My knowledge is limited to CSS so wouldn’t know where to start with this above code! Thanks very much

    Plugin Author Andy Fragen

    (@afragen)

    4 weeks ago

    You can add it to your theme’s functions.php file.

    Thread Starter sem0812

    (@sem0812)

    4 weeks ago

    Thanks Andy. I’ve added it to the functions.php file and resaved the category colours. That’s working OK, but it’s still not quite right – the All Day event has rounded corners and the text doesn’t wrap like an event with a start and finish time defined. Minor details I know but it was working so well before…

    https://noregretsrunning.com/#calendar

    • This reply was modified 4 weeks ago by sem0812.
    Plugin Author Andy Fragen

    (@afragen)

    4 weeks ago

    The display of an all day event is from the main Events Calendar plugin. This plugin simply changes the colors from the default. The rounded corners and non-wrapping aspects are how all day events are displayed. Hovering on the all day event will display the complete information.

    I’m glad the filter is working for you.

    Thread Starter sem0812

    (@sem0812)

    4 weeks ago

    Thanks Andy. Yes I know that hovering on the event will show all the info. But the all day event still l look off compared to timed events.
    I’ll go back to TEC as something has changed – all day events used to show exactly the same way as events with times, so it’s annoying that something has changed behind the scenes somewhere and I can’t find a setting for it! Thanks for your help with the colours though, that’s at least a start…

    Plugin Author Andy Fragen

    (@afragen)

    4 weeks ago

    I don’t think the display of all day events has changed. Really long event titles will be truncated. If the event spans more than one day the event title will display in the extra space.

    Thread Starter sem0812

    (@sem0812)

    4 weeks ago

    I’m not convinced they haven’t changed but quite frankly I can’t remember! I would have noticed as they designs are different and look wrong together.

    But the problem is, an all day event title gets truncated if it doesn’t fit on one line AND it has rounded corners, whereas a (long) title of a timed event wraps over to the next line and displays in full without being truncated (i guess a really long title might be truncated) and DOES NOT have rounded corners. So it’s a question of consistency between different events – they should all display the same in their little coloured blocks. It just currently looks odd! I’ve contacted support at TEC to see what they come up with.

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.