Being a little responsive

Responsive Views

Responsive Views


Last week I finally got the opportunity to really get my hands dirty with Moodle 2.5 and a responsive theme. This being my first dig about in Moodle 2.5 meant I had to learn a few things at speed, not least of all compiling my LESS code.

Since running a Windows 8 machine, I had a few issues finding a compiler that would work. I kept compiling the LESS code and getting a moodle,css file that was 0KB in size. Then I stumbled upon an AIR app for compiling LESS and suddenly I wasn’t as grumpy. For it’s simplicity and ease of use I certainly recommend taking a look at Crunch!. It worked like a charm.

The theme was based on Bootstrap-master with some tricky customization of the index.php page to create to views – students and admins. I split my css into to groups. The first group being generic changes that effected the whole theme. Those changes I made in the core LESS files and recompiled them into a css file.

The second group related to the custom code on the frontpage. I dropped this code into the custom.css page. By doing this I knew that if I reverted the index.php page back to the original file, all the custom css would be dropped and the site would function as a normal Bootstrap-themed site.

One small challenge from the client was to add the login fields as a widget on the frontpage. Initially I thought it would be a bit tricky to get this done, but in the end it proved to be rather easy and I cannot believe I haven’t done this in other themes.

Login Screen

Login Screen

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s