#CSS3 transforms to improve the #moodle feedback activity http://www.youtube.com/watch?v=QcoJnQ0gNfI

The Moodle feedback activity is useful in so many ways and we use it both in academic and business areas inside the college.  Unfortunately since Moodle 2 they made it very difficult to allow anonymous guest users to complete them, so we still use our old 1.9 install for public surveys.

We recently started using it across a whole faculty, so several hundred students had to use it.  When I showed a colleague she instantly commented on how unattractive it was so I decided to improve it slightly by modernising the CSS.  I added an animated background colour and glow on the text boxes, with subtle rounded corners.

Here is the CSS:-

.feedback_items input, .feedback_items textarea{
outline:none;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border: 1px solid #b7bbbd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 4px;}


.feedback_items input:focus, .feedback_items textarea:focus {
background-color: #EFF;
box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
}

You will probably like my post on using CSS3 to improve the appearance of the quiz here.

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

One Response to #CSS3 transforms to improve the #moodle feedback activity http://www.youtube.com/watch?v=QcoJnQ0gNfI

  1. Pingback: #CSS3 transforms to improve the #moodle feedbac...

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>