Beautifying Calendar Filters

Since Moodle 2.4 we have all been treated to some great new icons which look modern and clearly communicate the purpose they serve. I’m a huge fan of this and all the design work which is now going into Moodle releases, however the new icons have caused a few problems in production.

I particular their medium-grey colour can make them difficult to distinguish on a dull background, and in general they just look best on either a very light or very dark background. The calendar filters are one example where the icons don’t really stand out as well as they could against the background. Here’s how they look by default:

default events key
The default events key.

This is difficult because personally I want my event colours to be quick a bit darker than the defaults, but I also want to avoid having the icons fade into the background in this events key.

My solution was to style the icons onto a plain background and to use the border colour to differentiate the different types of events in the events key list. Combining this with border radius and an “inset” border style I was able to create a modern looking list of icons which stand out clearly and have good browser compatibility:

improved events key
My improved events key

If you’d like to try this out for yourself you can find my CSS below:

/*event colours*/

.filters .calendar_event {
margin-bottom: 8px;
font-size: 1.2em;
}
.filters .calendar_event a {
text-decoration: none;
}
/*the icon span is first child but has no class or id*/
.filters .calendar_event span:first-child {
display: inline-block;
border: 3px inset #333;
border-radius: 100%;
background-color: white; /*same as block bg colour*/
position: relative;
padding-top: 2px;
height: 18px;
width: 20px;
margin-right: 5px;
}

.duration_group,
.calendar_event_group {
background: #E18B2D;
}
.filters .calendar_event span.calendar_event_group {
border-color: #E18B2D;
}

.duration_user,
.calendar_event_user {
background: #955282;
}
.filters .calendar_event span.calendar_event_user {
border-color: #955282;
}

.duration_course,
.calendar_event_course {
background: #1AB388;
}
.filters .calendar_event span.calendar_event_course {
border-color: #1AB388;
}

.duration_global,
.calendar_event_global {
background: #0080db;
}
.filters .calendar_event span.calendar_event_global {
border-color: #0080db;
}

One thought on “Beautifying Calendar Filters”

  1. Nice one, Mark. Interesting icon choice you have there. personally, I think that the grey outline of the eye icon could be improved. Just my personal taste that’s all. Frankie Kam.

Leave a Reply