Set up category themes in #Moodle with #CSS pic.twitter.com/sDU3AaauJz

When we upgraded to Moodle 2.5 last Summer we decided to give the site a more corporate theme, very similar to the college website and also stop teachers having access to course themes.  Rather than developing a new theme from one of the simpler, standard themes I worked out that the new “Additional CSS” theme options it would be possible to easily modify the “Formal White” theme (using this method it is essential to keep a copy of the CSS in a separate document as a backup).

As I started working with the theme I noticed the wide range of body classes,  but particularly the category-1, category-2 etc classes.  I thought that I could easily personalise each curriculum area and give it its own identity.  We have a nice prospectus with clear, bold colours for each curriculum area and silhouettes so that made it easy to choose colours and styles.  To completely change the appearance of each category required just 2 lines of css for each one, plus an extra line for a category motif.  The simplest way to give a slight 3d gradient on the menu bars was to create a semi transparent png as an overlay.

The code to create this was:

.category-13 .navbar, .category-25 .navbar{background-image:url(“http://moodle.mysite.ac.uk/images/bkg_menu_middle.png”); background-color: #A7c209;}
.category-13 .block .header .title, .category-25 .block .header .title{background-image:url(“http://moodle.mysite.ac.uk/images/bkg_menu_middle.png”); background-color: #B6D31A;}
.category-13 #page #page-header #headerlogo:before{content: url(“http://moodle.mysite.ac.uk/images/bg1.gif”);}

This entry was posted in Moodle. Bookmark the permalink.

One Response to Set up category themes in #Moodle with #CSS pic.twitter.com/sDU3AaauJz

  1. Pingback: Simple Category Themes in Moodle | Anything and...

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>