Make #Moodle Global Calendar Events Stand Out pic.twitter.com/kfV0QbaPI6

Recently decided to start using the calendar for promoting global events on our Moodle installation.  The problem was that the default calendar colours don’t really grab your attention, especially as I was trying to promote equality and diversity information.  I decided to use css3 gradients to make them stand out more clearly.  So this is the result.

We use ‘Formal white’ as our theme which has the Custom CSS option allowing you to add CCS through the Moodle admin interface, without having to have access to the server files.  This is the CSS I added.

.calendar_event_global{
background: -moz-linear-gradient(top,  rgb(206,106,255) 0%, rgb(201,97,252) 0%, rgb(95,255,255) 34%, rgb(102,249,98) 65%, rgb(255,96,96) 100%, rgb(255,105,106) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(206,106,255)), color-stop(0%,rgb(201,97,252)), color-stop(34%,rgb(95,255,255)), color-stop(65%,rgb(102,249,98)), color-stop(100%,rgb(255,96,96)), color-stop(100%,rgb(255,105,106))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(206,106,255) 0%,rgb(201,97,252) 0%,rgb(95,255,255) 34%,rgb(102,249,98) 65%,rgb(255,96,96) 100%,rgb(255,105,106) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(206,106,255) 0%,rgb(201,97,252) 0%,rgb(95,255,255) 34%,rgb(102,249,98) 65%,rgb(255,96,96) 100%,rgb(255,105,106) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(206,106,255) 0%,rgb(201,97,252) 0%,rgb(95,255,255) 34%,rgb(102,249,98) 65%,rgb(255,96,96) 100%,rgb(255,105,106) 100%); /* IE10+ */
background: linear-gradient(top,  rgb(206,106,255) 0%,rgb(201,97,252) 0%,rgb(95,255,255) 34%,rgb(102,249,98) 65%,rgb(255,96,96) 100%,rgb(255,105,106) 100%); /* W3C */
font-weight: bold;
text-shadow:1px 1px #DDDDDD;
}

This entry was posted in Code, Moodle. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>