New Responsive Bootstrap Theme Design taking shape

My new theme for Leeds College of Music is now entering the final stages of design.  It has altered slightly from the last time I blogged about the development.  It’s now cleaner and more functional.  The design is very similar to the new look adopted by Microsoft (it wasn’t intentional but it simply led to that through the use of simple shapes and white space).
It’s still the same Bootstrap theme but more emphasis on functionality.  And it’s Moodle 2.5 ready.  Roll on August when it’s deployed.  Hopefully it won’t have changed again.

Moodle 2.5 Space Theme Design

Moodle 2.5 Space Theme Design

Moodle Latest News block becomes Featured CMS frontpage block

Today I’ve been developing a concept to turn the frontpage news block into something that resembles a CMS news block (WordPress-esque).
It’s basically a clone of the Latest News Block but uses image thumbnails, removes some clutter and formats nicely.
It’s designed to go in the centre block of a Moodle theme (if the theme supports it), but works in a narrow 220px left or right column too.

The image is just a file attachment in the course forum, and the script looks for an image called “feature.jpg”.  So as long as user attaches an image of that name it displays a thumbnail of that image.

I need to refine the code and make it place a default image if the user forgets to add a file, or make it a required field.  It would be nice to add a sticky option too to stop posts from sliding down the list, but it’s a good start to making Moodle behave more like a CMS.

When I’m happy with the code I’ll release it.

Here’s a screenshot:

Featured Article Moodle Block

Featured Article Moodle Block

New responsive theme project for Leeds College of Music

For the past few weeks I have been developing a new responsive theme for Moodle 2 as part of my role at Leeds College of Music.  The framework is complete it’s now just a matter of further tweaking the CSS as I drive down the various levels in Moodle.
The aim of the theme is to create an environment that looks and feel like an app, regardless of the platform, and above all, create something that is engaging to both Higher and Further Education students.

The front page:

fullpage_mac

The front page needs to be fresh, simple and inviting.  With clear navigation, clean white space and generous padding.  Yet at the same time, bearing in mind how it renders on a smaller screen.  The search box in the top right links to a custom site search block that I am creating alongside the theme.  This will allow users to search courses, users, news posts and documents all from one box.  The results returned will be dependent on the courses the user has access to.

Mobile phone display:

iphone_front_page_collapseiphone_frontpage_menu

Designing for mobile is at the top of the priority list, switching between the various platforms during development is essential.  The site needs to feel organic on the phone so that users will want to use it (think ebay or Facebook).  The blocks are automatically shifted to the bottom of the screen whilst the main content takes center stage.  Thus reducing the need to scroll.
The menu is also responsive and uses JQuery to collapse the elements and provide a toggle switch (similar to Bootstrap).
The theme also cleverly removes any clutter such as the breadcrumb bar and editing options and these become nestled in the header, tapping the header reveals more advanced Moodle options.

Tablet:

Designing for the tablet is easier as there is more screen space to play with.  In order to achieve this I ensured that the blocks are re-sizable so on smaller tablets 1 or 2 columns are shown (i.e in portrait mode) and 3 or more are shown on wider displays (i.e landscape or high-res displays).

ipad_front_page

Other Considerations/design elements:

Styling the buttons and forms is essential if I want to make the theme look more bespoke and less “Moodley”.  I am using a separate stylesheet for this task.  Changing the Turn Editing On button to look like an app button with “roll-over states” makes it a much more pleasant experience and more obvious to the user.
I have changed the icon size of the resources and activities to 32×32 and added more padding so that they stand out.

screens

I still have a long way to go, the left blocks still need work to make them look modern as do the standard Moodle menus.  These may become full width elements with rollover states.  There is the danger of over complicating the theme and loosing the simple clean lines that white space provides but at the same time, too simple can be conceived as too boring.

I aim to have the theme installed at my institution for the summer.  Along with a whole plethora of new funky Moodle mods, hacks, tweaks and blocks.  Simplicity and ease of use is essential, stripping out clutter with the theme needs to be done rather than core code hacks.

 

 

Site Wide User Grade Report

In FE and HE Colleges and Universities students are often enrolled onto various modules (Moodle Courses) that make up the degree or qualification.

Assignments are therefore scattered across multiple Moodle courses and there is no way for a tutor to see ALL the grades a particular student has received all in one place.  Currently the tutor needs to go into each assignment to view the grades, or the view the gradebook for each course.

To get around this and to streamline the admin process I have written a report called Student Marks/Grades.  It’s basically an admin report that allows a user to search against the student IDNUMBER field and return all the grades, comments and feedback associated with each Moodle Assignment.

The report is an admin report that uses the view:reports capability.  It works with both standard Moodle grades and scales.
The code can definitely be improved and needs updating for Moodle 2.3+ but for now it works well.

The report is now currently in beta use at Leeds College of Music and is slowly becoming more bespoke as requests are added.

reportgrade

Block Building for Moodle 2

This year, instead of hacking the Moodle core to death we have decided to stick with core Moodle code, and this time we have put all our custom pages in their own folder.
I am in the process of converting many custom code projects into blocks and mods. An it’s surprisingly easy with Moodle 2.

Today I built a simple course header block that displays the course title with a nicely rounded CSS background image.
Previously we used to draw course headers in Photoshop but now we don’t need to.
And because we can place blocks in the centre of our theme the headers sit very neatly at the top of the course content above the resources.

At present it’s limited to 1 image but the plan is to develop it further whereby the tutor can select from a variety of images when in editing mode.
For example, there may be an image for construction courses, one for hairdressing courses etc… Plus a few generic ones.

This saves hours of time – no more Photoshop!

The next mod we need to build is similar to a label but instead creates a pre-drawn banner and associated link to a child course. At present we draw images, add them to a label and hyperlink them to a hidden child course. Painful and time consuming!

However, time is always the issue. And we are fully stretched with a new term just a few days away so finding time to code is harder than the code itself!
It will be non stop tech support for the next month and then we will see how we go!

And the senior powers that be require a Moodle reporting engine that links to our MIS system! I’d rather build the fun stuff but need to keep the bosses happy!