When using tribe event CSS Code – how do I change attributes?

All: I got my answer to Question #2 above. It’s a setting under WP General Settings. But still looking for info on Question #1 above.

Thank you in advance!

Hi @letaajohnson, good to hear back from you. Let’s see what we can do here.

For #1, you might want to have something like this ??

.tribe-events-page-template .tribe-events-calendar-month__calendar-event * {
    color: blue;
}

This will change all the colors on the box inside the title. Please note that you can change the color blue with other colors or HEX color code to your needs.

Let me know if that helps!

Abz – thank you so much! That did the trick as well.

This CSS code can do some amazing things. Is there a library of custom CSS code addon’s somewhere – and – what that custom CSS code does?

Your solutions are awesome and makes me think there’s a lot more stuff out there to use.

Leta

Hi @letaajohnson, that’s great. Happy to help! If you have some time to review, that would be amazing!

Yes, CSS can do amazing stuff, and you can customize your website’s design further. You can also learn CSS at this link here.

Is there a library of custom CSS code addon’s somewhere – and – what that custom CSS code does?

We do not have an add-on. However, we have a bunch of articles in our knowledgebase that should be able to help you — https://theeventscalendar.com/knowledgebase/tag/css/.

Have a great day!

Abz:

Can I ask one more quick question and then I’ll close this post:

Is there a way to show overlapping events differently?

The example: Events for October 2023 – Houston Area Tall Texans (H.A.T.T.) (tcihouston.org)

If you look at October 13th – I have 2 multi-day events and 1 single day event. The 2 multi-day events are ‘hiding’ part of my single day event.

Any ideas? Thanks in advance. I love this plug-in and will actually promote it to other tall clubs needed a good events calendar.

Leta

Hello @letaajohnson,

Thanks for your reply.

Yes. However, this would require a bit of customization. Please note that we can only provide limited support for customization like this per our scope of support. 

Refer to this article regarding customization: https://theeventscalendar.com/knowledgebase/k/custom-development/. 

Here is a list of template files for The Events Calendar.?You can view our?Full guide on customizations, our REST API, and our Developer Docs here:https://docs.theeventscalendar.com.

I hope that helps. Do not hesitate to reach out if you need further assistance. 

• This reply was modified 1 year, 6 months ago by Frank Remmy.

Hi @letaajohnson

As for the overlap, could you try adding the following CSS and see if that helps?

.post-type-archive-tribe_events .tribe-common .tribe-common-h7, .post-type-archive-tribe_events .tribe-common .tribe-common-h8{padding:0 !important;}

Let me know if you have further questions or concerns.

Darian: That code worked perfectly. The multi day events aren’t covering single day events – and they are showing better as separate lines.

You are amazing. I want to know where I can learn these tribe event css code. Can you point me in the right direction?

Thanks so much,

Leta Johnson

Hi @letaajohnson

Thanks for your confirmation. I’m glad that I was able to help you with this one.

You could try checking our knowledgebase article and an article on mozilla.org on how to create/debug CSS.

https://theeventscalendar.com/knowledgebase/basic-font-and-color-changes-with-css/

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

Let me know if you have further questions or concerns.

Hello there,

It appears that we haven’t heard back from you in a while, so I’ll assume that the matter has been resolved. If you need any more help, feel free to start a new thread and we’ll be happy to assist you.