Shoelace, an undiscovered theme

Introduction

Back in 2013 I created the Shoelace theme. At the time I wanted to learn more about themes and create something that was based on my particular style. I had already dabbled with themes with Mutant Banjo: moodle.org/plugins/theme_mutant_banjo, but wanted to start from scratch again based upin what I had learnt.

Shoelace for me is a vehicle for change and trying out new things technically whilst keeping the functionality quantity down. It’s a theme I never would want to become as big as Essential. It is a Bootstrap 2.3.2 based theme and one day I intend to update it to Bootstrap version 4. I do have a Bootstrap version 3 theme, Shoehorn, that I developed a little later: moodle.org/plugins/theme_shoehorn – but over time I discovered I no longer had the time to maintain it. Therefore Shoelace for me remains a theme that I want to keep going.

 

Disclaimers

Firefox® is a registered trademark of the Mozilla Foundation.

Moodle™ is a registered trademark of ‘Martin Dougiamas’ – moodle.com/trademarks.

I am independent from the organisations listed above and am in no way writing for or endorsed by them.

 

A first look

Out of the box (as seen with the Grid format and its supplied test course):

Shoelace theme as it looks out of the box

we have the look I first started with. A look that I hope is crisp and clean. This is version 3.5.0.2 (unreleased on Moodle.org at the time of writing but a small progression from 3.5.0.1 which is) for Moodle 3.5.

A while back I started to look at how websites had changed and evolved, to find out what the current fashion is. I worked out that its ‘minimalism’, more like having a sheet of paper and only putting on what you actually need to do the job. So I’ve added a setting called ‘seamless’ (which is under the ‘Look and feel settings’ (more about settings later)). This transforms the theme with one tick box to have this ‘minimal’ look:

Shoelace theme with the seamless option turned onYou will notice that the text on the yellow theme colour has changed. By default this has been white, but this does not look brilliant here, so with this version I’ve changed it to black. If you’re upgrading then you’ll need to change the ‘themetextcolour’ (in the ‘Look and feel’ settings section) but if from new then this will be the default.

 

Settings

To control the theme and explore what it has to offer I have broken down the settings into different sections which you can find under ‘Site administration → Appearance → Themes → Shoelace’:

Shoelace theme settings

Features

Without going though ever feature as that would make the article too long, I will cover a few and let you discover the rest.

We have already seen ‘seamless’, which can be found as a tick box on the ‘Look and feel’ section, along with colour, background image, icon colour and font settings (not shown):

Shoelace theme look and feel settings

I’ve shrunk the image here for the web. You may have to experiment with different colour values when using a background image in order to get the look right. This is where using a Moodle test server can be a bonus as you can do this and then transfer the values to the production server. There is also a ‘Style guide’ section that can give you an idea of how the Bootstrap components will look under your settings, but it is not perfect.

One of the limitations in Moodle themes is the inflexibility of the layout columns for a given page layout (please see: docs.moodle.org/dev/Themes_overview#The_different_layouts_as_of_21st_April_2013) the layout is fixed. So as an example for a course you could be stuck with a block region on the left with the content in the middle and right of the available area. This is down to how the theme’s config.php file specifies what layout PHP file to use for a given layout. Looking at an example in WordPress I saw an iconic radio button selection feature that changed its layouts dynamically. Having previously written iconic radio button setting code for Mutant Banjo and learnt a bit of Mustache (docs.moodle.org/dev/Templates) – hence Shoelace as a place for technical innovation – I’ve come up with the ‘Layout’ settings section:

Shoelace theme layout settings

Here you can adjust dynamically the structure of the page on a per layout basis without ever changing a single line of code. There are several options with two having horizontal ‘Middle’ and / or ‘Footer’ block areas where you specify the number of blocks per row (which can be found in the ‘Feature’ and ‘Footer’ sections). You may notice that the front page is not listed, this is because it is configured on it’s own page with additional options:

Shoelace theme front page settingsWhich after changing some of the settings can look like this:

Shoelace theme front page

I believe that this is the only Moodle theme that has this functionality.

And lastly there is a port from Shoehorn, ‘Alex Gorbatchev’s syntax highlighter version 3.0.83’ which is licensed under LGPLv3 and found on the ‘Features’ section of the settings:

Shoelace theme feature settings

When activated it operates on any course within the selected course categories. Note: Due to the overhead, you should only activate it on course categories with courses that will benefit. The effect is applied to any code that you specify should be highlighted:

Syntax highlighting in the Shoelace theme

Course editors will get a special ‘Syntax highlighting help’ button at the bottom of the course page that only they can see.

The whole idea of the functionality is to support computing and programming courses in environments where tools like the Raspberry Pi are being used to re-ignite the 1980’s personal computing revolution.

 

Where can I get Shoelace?

If you’re running a production site, then please only use the published releases on Moodle.org: moodle.org/plugins/theme_shoelace. And I do advise checking first on a test server before using for the first time or upgrading.

If you like to be at the leading edge of things, then the code is also available on GitHub: github.com/gjb2048/moodle-theme_shoelace where the ‘master’ branch refers to the latest version of Moodle supported, currently M3.5 and the other branches their respective Moodle versions. This is where I save my development code, so at any point in time the theme could be broken and have incomplete functionality. When I make a release on Moodle.org I first tag the code on GitHub, so any release there can also be downloaded here: github.com/gjb2048/moodle-theme_shoelace/releases with identical code.

GitHub is also the place to report genuine issues: github.com/gjb2048/moodle-theme_shoelace/issues, but I do prefer if you check and post on the Theme’s forum (moodle.org/mod/forum/view.php?id=46) first as that can save time if the issue has already been fixed and its a good starting point for triage rather than waiting for me to reply.

 

Your thoughts

I would love to hear your thoughts about the theme. Please do try it out and let me know what you think.

Gareth Barnard

Gareth Barnard

Developer at HRDNZ
Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Shoelace, and other modules such as course formats.
Gareth Barnard

Latest posts by Gareth Barnard (see all)

blank

Gareth Barnard

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Shoelace, and other modules such as course formats.

Gareth Barnard has 14 posts and counting. See all posts by Gareth Barnard

One thought on “Shoelace, an undiscovered theme

  • 16th June 2018 at 2:43 pm
    Permalink

    Great explanation of this Theme Gareth !
    The Themes I use most in Moodle are Clean, More, Essential, and Boost.
    But I like the approach and some of the functionality here, so we are going to use Shoelace for a new client site which is currently in development, so we get a deep understanding of using it for real.
    I think it’s quite possible we could start using Shoelace instead of Essential (which has quite a lots of things we never use).

    Reply

Add a reply or comment...

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social Media Auto Publish Powered By : XYZScripts.com
%d bloggers like this: