Event Calendar Color Coding

[Sp0rtsJunki3]

In version 5.3, the calendar mod shows events and highlights them. All events are highlighted the same color. Is there an easy way to change the highlight color depending on event type...say, via topic prefix?

[glennrocksvb]

Can you send a link? Need to see the existing HTML and CSS in order to suggest customization.

[Sp0rtsJunki3]

PM sent

[Sp0rtsJunki3]

glennrocksvb, I went live with the 5.3.0 RC1 last night, you can now see the calendar on my website. I use topic prefixes to distinguish between event types (look in the Tournaments and Games channel). Ideally, there is some css that will allow me to change the highlight color based on the topic prefix name.

[glennrocksvb]

I don't see any prefixes in any of the topics in Tournaments and Games channel.

[Sp0rtsJunki3]

Most of them are setup as icons, but they are there. Examples include usa_fp, usssa_fp, tc_fp

https://www.softballutah.com/forum/main-category/tournaments-and-games

[glennrocksvb]

Ok I see them now. So do you want to change the topic title link color depending on the prefix used?

[glennrocksvb]

Is this what you wanted?

/* Friendly Prefix */
.js-topic-prefix[href*='friendly_fp'] + .topic-title {
    color: red !important;
}
.js-topic-prefix[href*='friendly_fp'] + .topic-title:hover {
    color: blue !important;
}

/* USA Prefix */
.js-topic-prefix[href*='usa_fp'] + .topic-title {
    color: yellow !important;
}
.js-topic-prefix[href*='usa_fp'] + .topic-title:hover {
    color: green !important;
}
/* ...and so on */

Change prefix ids and color values as needed.

[Sp0rtsJunki3]

No, I'm talking about changing the colors on the actual calendar, based on my topic prefix. I'm not sure if it's even possible, I'd like to be able to find a way to discern between event types. VB doesn't have an "event type" field, so I've gone about making them with topic prefixes.

Maybe it would be easier (an add-on) to create event types as part of the event function?

[glennrocksvb]

Unfortunately, the topic prefix is not included in the Calendar view. So it's not possible using pure CSS solution. It would require scripting to add the prefix. I haven't installed vB 5.3 yet so I don't know how they implemented the Calendar view.