Moodle 1.9 Zebra Theme

Danny Wahl's picture Danny Wahl  •   •  Moodle

This was my first Moodle theme – it is a fork of the Aardvark theme by Shaun Daubney from Newbury College.  As you can see there are still some similarities between the two themes, but Zebra retains the old li floating menu instead of the fancy YUI one.  I chose the name zebra for a couple of reasons.  The first being to represent that it was a fork from Aardvark (A-Z, get it?) and the second being to goof on the fact that I added easy color schemes to it, so it’s more than black and white.  I don’t want to brag but MoodleNews called it “AWESOME“.

This is actually still the theme we use here at the school, and it’s the demo site you’ll see linked from the Moodle themes respository.  The reason for adding the color scheme was to make it easy to deploy district wide (6 schools total) and for non-admin inclined people to punch in their schools’ color-schemes and voila, unified themes with a personalized flair.

I’ve had a few people message me at the Moodle forums asking how to change the colors and it’s actually a rather straight forward procedure, you just navigate to the theme folder and look for ‘colors.php’, open it and edit the color you want.  I’ve even included a few non-dithering color schemes for examples.

// colors.php
//This is the file where we define the colors for Zebra

$zebra_main_background = "#666666"; //Main Background Color
$zebra_first_color = "#000000"; //Links & Menu
$zebra_second_color = "#00cc00"; //Hovering
$zebra_third_color = "#999999"; //Labels & Fonts
$zebra_fourth_color = "#ffffff"; //Backgrounds

$zebra_color_scheme = "dark"; //gradients/highlights: light, dark
$zebra_menu_color_scheme = "dark"; //gradient of menu (probably shouldn't change this): light, dark
$zebra_3d_view = "small"; //3d rounding on menu: small, medium, large, xlarge

//Sample Color Schemes:
//Eggplant:     #ffffff, #003333, #660066, #333333, #cccccc, dark, dark, small
//Cola:        #666666, #cc0000, #ff9900, #ffffff, #333333, light, dark, xlarge
//Girly:    #ff33cc, #ff99ff, #ff6600, #9933cc, #ffffff, light, light, medium
//Night:    #000000, #996600, #0066cc, #ffffff, #000099, dark, dark, large
//Grayscale:    #666666, #000000, #00cc00, #999999, #ffffff, dark, dark, small

What happens from here is pure magic!  Just kiddings, it’s simple php (and CSS).  Open up zebra.css and you’ll see that it requires colors.php, then it takes the variables ($zebra_main_background, $zebra_first_color, etc…) and plugs them into the CSS.

/* colors.css */
/***
***    COLOR COORDINATING
***/

<?php include 'colors.php'; ?>

/*
Main Background  
*/

.forumpost .left,
#course-view .weekscss .section,
#course-view .section td.side {
    background: <?php echo $zebra_main_background; >;
}

#calendar .nottoday,
.minicalendar .nottoday,
table.minicalendar,  
.generaltable .cell{
    border-color: <?php echo $zebra_main_background; ?>;
}

Ta-da!  Unfortunately the ability to include Php is gone in Moodle 2.0 – but you can write a post-processor to basically do the same thing.  Of course, as with Aardvark (and the rest of the internet) the menu doesn’t work with Internet Explorer 6, can we move on from that already?  You can download the Theme from the Moodle themes repository or here.  Support is provided via the Moodle forums.