How best does one go about...

[JYLD]

I offer the following for completeness to this topic in case their are lurkers following this thread.

My final code to make the category box/gradient wider so it is more visually noticeable.

Code: Select all

/* This sets the category box to 24 pixels wide */
.calendar-category-box-gradient {
    width: 24px !important;
}

Code: Select all

/* This moves the reminder-icon to the left so it is not covered by the wider category box.  This does not affect calendar event containers with no category set */
.calendar-event-box-container[categories]:not([categories=":empty"])  .calendar-event-details {
    padding-right: 16px !important;
}

I also found the following tweaks to be more to my liking regarding event box containers and the reminder-icon.

Code: Select all

/* This colors the reminder-icon bright blue and makes it slightly larger */
.reminder-icon {
    fill: #0000FF !important;
    width: 14px !important;
    height: 14px !important;
}

Code: Select all

/* This makes calendar event boxes fill the entire space and not leave some unfilled space to the right.  That always seemed to annoy me that a calendar event box didn't fill the entire space */
.calendar-color-box {
    margin-right: -6px !important;
}

[JYLD]

If you want to color the entire event box with its associated category color. @Morat has posted how to do that in the links he gave above.

[Code Name]

JYLD - Thank you for those!

[JYLD]

With the css tweaks we've been discussing and a few others that I have made while working on these calendar tweaks. This is what my Calendar currently looks like:



A bigger version of this image, my complete CSS, and other materials can be found here:
https://github.com/JYLD/User-CSS-For-Fi ... -26-20.png