Ever since my last post on Marginalia on Moodlenews, I'd been thinking about how to adjust the colour to suit (1) my Moodle theme; and (2) my own taste. I thought to myself, "Why not show the grammar mistakes in red, and the corrections is green?". Plus I really liked the red-bordered effect of the Marginalia demo.
Lately, I've managed to tweak and improve the colour scheme - at least for myself. For example, with due respect to Geoffrey Glass, whom I think did a great job with the block, I felt that the yellow highlighting in the default code was a bit too bright and slightly gaudy looking. So I changed the corrected text to be shaded instead as a rose-coloured highlight. How did I do it? Well, open up /blocks/marginalia/marginalia/marginalia.css and look for the code at line 7:
.hentry .entry-content em.annotation {
background: #fdf377;
font-style: inherit;
}
Change the hexadecimal colour code from #fdf377 (bright yellow) to #FFDFDF (rose) to achieve a different coloured highlight!
I also wanted to have, on a mouse hover, red-bordered error text, and green-bordered left-margin corrections. After all, what could be more logical and intuitive than to use red to symbolise errors and green for corrections. Thanks to Firefox's Firebug extension, I was able to "cross-examine" the actual code that was responsible for these colour effects. A special mention also goes to Geoffrey Glass for pointing me to /blocks/marginalia/annotation-styles.php which contains the code:
.hentry .notes li.hover,
.hentry .entry-content em.annotation.hover,
.hentry .entry-content em.annotation.hover ins,
.hentry .entry-content em.annotation.hover del {
color: red;
}
Changing red to green would mean that both the grammatically-wrong text (in a student's post) and my correction text (in the right annotation margin) would end up as green. After almost an hour, I finally figured it out! Here's the same code split into 2 sections:
.hentry .notes li.hover {
color: green;
background: #ccffcc;
background: #ccffcc;
/* By Frankie */
}
.hentry .entry-content em.annotation.hover,
.hentry .entry-content em.annotation.hover ins,
.hentry .entry-content em.annotation.hover del {
color: red;
/* By Frankie */
}
Eureka! So that's how I managed to get TWO colours (red for in-forum-post mistakes and green for margin annotation of corrections) with a single mouse hover! But wait, there's more! I really, really wanted to have text-box effect with the mouseover like what you can see in the Marginalia demo by Geoffrey Glass. So I examined Geoffrey's annotation-styles.php file. In the end, after much trial-and-error, I hit pay-dirt. Here's the code that I used to produce the red-box-and-green-box effect:
.hentry .notes li.hover {
color: green;
outline: 1px solid green;
background: #ccffcc;
}
em.annotation.hover {
color: red;
outline: 1px solid red;
}
For some strange reason, I had to remove the code
.hentry .entry-content em.annotation.hover ins,
.hentry .entry-content em.annotation.hover del
in order to achieve the desired effect. Strange and I don't understand why, but it works.
As a summary of my changes made (colour tweaking codes), you can download my tweaked annotation-styles.php and marginalia.css files from here:
http://scm.moodleace.com/file.php/1/public/annotation-styles.php
http://scm.moodleace.com/file.php/1/public/marginalia.css
Here's a screenshot after several hours work of tweaking the code:
So now, you can get the desired effect for your Moodle site in less time than it took me for mine.
Personally I'm having a absolute blast making margin-side corrections to my students' posts. I love seeing those red and green boxes light up when I do a mouseover. I'm also hoping that they (my students) are appreciating my side comments which are actually corrections of their grammar and punctuation mistakes. I hope you enjoy using and tweaking this useful block to suit your theme and colour taste.
This tool can be used not only for language teaching, but for any kind of feedback by the instructor. Lastly, I leave you with some interesting thoughts on Marginalia by Derek Chirnside over at Moodle Lounge.
Cheers!
