Hey @gega79
It sounds like you are the perfect candidate for the following plugin.
Other than that targeting specific CSS elements as you did is usually the way to go!
Let me know if that works for you.
Geoff
Thread Starter
gega79
(@gega79)
Hi @geoffbel
Thanks for getting back to me.
Yes, I did add that plugin. It adds a small piece of colour next to the heading. It appears to be either that or the whole heading background changes colour. What I’m trying to achieve is similar but it’s the date column on the left-hand side. Here is a visual of what I’m trying to achieve:
https://paste.pics/246468224751d85e9ed33d551909eb2f
I’ve narrowed it down to the following css:
.tribe-events .tribe-events-calendar-list__event-date-tag-datetime
but I can’t get it to specify a date so I can colour-code each day. If I change the background css here then it applies to all dates.
The actual html code for the 22/10 date is:
<time class=”tribe-events-calendar-list__event-date-tag-datetime” datetime=”2022-10-22″ aria-hidden=”true”>
When I apply a background colour as inline code (element.style) in the Web Dev plugin for Chrome, the background changes but I don’t know how I write the CSS to apply this for different dates.
I know this is partly down to my lack of css skills, so any help I could get I would really appreciate.
Kind Regards
G
Hi @gega79, apologies for the delay here. If I understand correctly you wanted to change the colors for the date box on the left section of the event. Could you share the direct URL to the page? I’d like to check and see what we could do here.
Please do not share any credentials, this is for us to follow the WordPress Forum Guidelines.
Looking forward to hearing from you.
Best,
Abz
Thread Starter
gega79
(@gega79)
Hi @abzlevelup
Thanks for getting back to me. This is the page:
https://scottishinterfaithweek.org/events
Yes, I want to add colour behind the actual dates and have those colours to change depending on the category they have been designated. You can see that I have done this with the event headings.
Any help you could give me would be appreciated.
Kind Regards
G
-
This reply was modified 3 years, 5 months ago by
gega79.
Hi @gega79, it seems like there’s no parent class/id per category for the dates on the left side. That being said we are unable to style it like the details on the right side with the category class. We do not have this feature at the moment. Although you can style the dates via this Custom CSS, it wouldn’t be dynamic per category/date:
.tribe-events-calendar-list__event-date-tag.tribe-common-g-col time {
background-color: #ccc !important;
max-height: 80px !important;
padding: 20px !important;
}
See screenshot here:
https://share.getcloudapp.com/04uWdZzN
However, I would encourage and recommend you to add it as a feature request in this link: https://evnt.is/ideas, this would help us track users needing this feature.
Nevertheless, I am unable to provide you with an exact date for when this feature will be available or if it is possible. As our development team considers certain factors before implementing one like if a feature request has enough votes.
Best,
Abz
Thread Starter
gega79
(@gega79)
Hi @abzlevelup. Thank you for getting back to me.
Yes, I knew I would be able to change the colour behind the dates, but it would be one colour applied to all dates, rather than colour coded by category.
Thank you for sending me the link for submitting a feature request. I have just submitted it along with a screenshot. Hopefully it’s something that could be built into future updates.
Thank you for taking the time to have a look at it for me. I really appreciate it.
Kind Regards
G
Hi @gega79, no worries. I could see that you already changed the color. Good one.
Appreciate you sharing and submitting this feature request. If you have some time to review, that would be amazing!
https://wordpress.org/support/plugin/the-events-calendar/reviews/
I’d be closing this thread and please do not hesitate to bump a new thread on our way. This is for us to track down topics/issues efficiently and for us to follow the WordPress Forum Guidelines.
Have an awesome day!
Best,
Abz
Hi @gega79
I also wanted to colour code the date box by category. I managed to get it working last night.
https://paste.pics/d7a728666314bccf29f2db65b75e3026
This was my (probably questionable) method:
I changed line 36 of date-tag.php from
<div class=”tribe-events-calendar-list__event-date-tag tribe-common-g-col”>
to
<?php
$event_classes = tribe_get_post_class( [ 'tribe-events-calendar-list__event-date-tag', 'tribe-common-g-col' ], $event->ID );
?>
<div <?php tribe_classes( $event_classes ) ?>>
This gave me the following output:
class=”tribe-events-calendar-list__event-date-tag tribe-common-g-col post-2834 tribe_events type-tribe_events status-publish hentry tribe_events_cat-auction cat_auction”
I put this into my stylesheet:
.tribe-events-calendar-list__event-date-tag.tribe-common-g-col.tribe_events_cat-auction.cat_auction {
background-color: blue;
}
