Pages

Friday, August 16, 2013

Wood theme revisited with Julian Ridden's Wood theme for Moodle 2.x

Oak Tree in Ontario August 2011
Source: commons.wikimedia.org

"A Bootstrap based theme for Moodle 2 recreating the classic 1.9 Wood theme with a modern twist" Source: https://github.com/moodleman/moodle-theme_wood

I was recently intrigued by this Twitter post. 



I think it was because the image of Julian Ridden's Moodle 2 Wood theme reminded me of my old wooden chessboard, no hang on, .... or was it my bookshelf(?)...

...or maybe because it brought back memories of the venerable Wood theme of Moodle 1.9.


Wood theme. Moodle 1.9.
Long time no see.

So with a quick Google search, I located the theme's Github page whereby I was able to download the Moodle2 Wood theme. I installed the theme by renaming the folder from theme_wood to wood. Here's what my profile page looks like.


Nice. However, the words "PUBLIC PROFILE" is almost lost in the background due
to low contrast between the font colour and the lighter grain of the wood.

It's nice. I can see the wood gain. I also noticed 3 things. Firstly, the wood background loaded slowly on my site and on my Internet line (my line's slow!). I discovered that the background file is a 841Kb PNG file named /theme/wood/pix/wood/1.jpgSecondly, the wood theme on my site looks lighter compared to the image in the Twitter screen capture. Thirdly, some of my lighter-coloured font text were difficult to read due to the low contrast between the lighter shades of the background and the text.

I am sure that the original background image, 1.png, is fine on your site as Julian originally intended it to be. For me, I decided to use Paint.Net to make the background lighter and to save it as a smaller jpg file size. 

I fired up Paint.Net. What a great free image editing utility program for Windows!


Paint.Net reduces the Brightness to -67
and the Contrast to -25. Adjust to taste.

To reduce the image file size, I proceeded to save the backgound image as a JPG file at 57% quality.


Paint.Net does its magic. What's your flavah? Quality at 57%.
A poorer quality JPG albeit at a smaller file size.

The result? A darker background image "1.jpg" file, sized at 135Kb instead of the original 841Kb file. Here's what the same profile screen looks like with my 'modified' 1.jpg file.


This screenshot is relatively darker compared to the same
screenshot a few paragraphs above.

here's a coursepage with the modified background image. The coursepage title can be seen against the darker background.


A coursepage with the adapted Wood theme

Finally, here's what the front page looks like. 


The main page. 

A mousehover over the first and third courses will cause the white background to change into the wood background. Like so.



Finally, I just want to say that in preparing this blog post, I made use of TinyPNG.com to crush the png screenshot files into smaller sized files. Don't you just love the Panda?


This is one happy Panda!
Its diet consists of bamboo shoots and PNG files.

That's all for now. Thank you for the Moodle 2.x Wood theme, Julian Ridden a.k.a Moodleman. Thank you for your prolific and multi-talented theming work. I raise a glass in toast to your creative genius. What will your cape bring us next?

Regards
Frankie Kam


Appendix
Click here to download the modified background (darker and smaller) image.
Click here to download Julian's Moodle 2 Wood theme.

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!

Ratings and Recommendations by outbrain