Posted in Moodle, Technical stuff, user interface design

Theme: Boost

Boost is the default Moodle Theme. Its clean, its minimal, its current, it has a side menu you can hide, … and it moves the Site Admin menu. As an old Moodler (been Moodling since Moodle 1.8), its that last one that tripped me up when I first saw it; a newer Moodler may not have any issue at all with it.

Login

Boost - login

Its pretty good. The image at the top comes from the Site Admin setting for ‘Logo’. The secondary colour (used for the button, linked text, and clickable icon), is from within the Boost settings.

Logged In Home Page

Boost - home page

The image at the top comes from the Site Admin setting for ‘Logo’… and here is where it falls over… its not dynamic, and so will look strange on different shaped and sized screens. Also, the Site Name (top left) is reversed out of the secondary colour – selected in the Boost settings.

In general, I don’t find this look very appealing. Its similar to the screen when not logged in – the difference is just the left-hand menu isn’t available, and the top right User Menu asks you to Login. There isn’t the Marketing Spots available like from other Themes… just what you build into the Front Page using Admin Settings and Blocks.

Another gripe, is that the Site Info Block comes up in a strange place, where the pic shows “Moodle4Mac”. I prefer to be able to put that into the Middle Column, or even chose to put it on the Left. No such luck here.

Profile Page (Secondary Pages)

Boost - profile page

The image at the top left comes from the Site Admin setting for ‘Compact Logo’, and its TINY! The Site Name (top left) is now text of the secondary colour, rather than reversed out like on the Home Page.

I’m not fond of this – I think its too small, and its not dynamic; it won’t increase with the size of the screen – its a set number of pixels rather than percent of the visible screen.

Positives: its clean, simple, and doesn’t look like a 90’s MySpace page.

Site Administration Menu

This slideshow requires JavaScript.

Now that I know about the Left Menu hiding feature (menu icon, top left), I like it – as an ADHD creature, the ability to focus is pretty nice. Might be nice to be able to add some more Blocks over here, but meh. See the slideshow above for the difference between the menu hidden and vision.

Personally – I love a dynamic dropdown menu for the Site Admin. I’m not fond of selecting a tab and scrolling down to get to something. I love being about to use the Search function to get to something I’m not sure where it might be hiding in the Menu. It’s my preference.

In Boost, there is no choice to change back to that dynamic menu. Use THIS, or bugger off! – is the feeling.

In the part two – I’ll be looking at the SETTINGS and some of the FIXES available for Boost.

Posted in Moodle, Technical stuff, user interface design

Theme: Boost – settings & plugins

Let’s start playing with Boost’s settings and see if we can make things a little nicer [spoiler: you CAN]

Boost Theme Settings

You can access these Settings through the Site Administration Menu, Appearance tab, Themes section, and select Boost.

General Settings ‘Presets’

Boost - settings
Boost – General Settings ‘Presets’

Theme preset

There are only two available: default.scss, and plain.scss. If you switch this to plain.scss, this is what happens…

Boost Theme Preset
Boost Theme Preset “plain.scss”

I don’t know about you… but I find this just a different flavour of yuck. Everything being LARGER… it might actually be useful if your audience is vision impaired.

What further horrors are contained in these Presets? Look – there is a way to add more Presets from a repository on Moodle.net, or one of your own design!

Additional theme preset files

I was not hopeful as I clicked the link to the Moodle.net Boost Preset repository… but LOOK! Wow! They take Boost and make it nicer to look at! Maybe I should be thinking of Boost like Bootstrap… its a BASE THEME that you need to build on. Still don’t love the Site Admin menu – but that’s okay.

Download the Preset file of your choice, upload into Additional Theme Preset Files, and select it in Theme Preset. Easy Peasy!

General Settings ‘Brand Colour’

Boost - settings 2
Boost – General Settings ‘Brand Colour”

Hurrah! I can add a nice bit of secondary colour to Boost. Don’t use the colour picker palette, that’s for people who want to be yelled at by Marketing… get the HEX colour code from your Brand Guide and type that in.

You want a nice medium-toned colour so it can be seen on black (such as the links on the Footer in the above image), as well as work as a text colour on white and white reversed out on the button colour. You only get one choice… so pick well!

Advanced Settings

Boost - settings 3
Boost – Advanced Settings

Do you want to add to the stylesheet, and you know your CSS (Cascading Style Sheets) and SCSS (Sassy Cascading Style Sheets)?

  • Yes? Excellent! Have a play with putting code into here.
  • No? Click back over to the General Settings tab and forget this part ever existed. Seriously – its not for messing about with.

I am not confident with CSS, and didn’t even know that SCSS even existed until I clicked on this tab… so I’ll be skipping this.

Boost Theme Plugins

Boost - plugin fixes for theme
some of the plugins available to ‘fix’ Boost

I easily found Plugins designed to overcome some of the shortfalls of Boost. Personally, I’d be very tempted to try out Boost Navigation Fumbling plugin and the Custom Navigation plugin… sounds like they might fix some of my personal hates.

Go to Moodle.org’s Plugins repository, type Boost into the search and go wild!

While you are there… check out some Themes based on Boost… you might save yourself a lot of work customising Boost yourself.

 

Posted in editorial rant, EdTech, Moodle, Technical stuff, user interface design

Moodle UX: The Naked Moodle

Boost is the default theme for Moodle 3.3 (and the upcoming 3.4) installations. If you’ve been Moodleing for a while, you might find the navigation to be confusing at first… and you’ll either love it or hate it. I’m personally not fond, but hey, not everything is about my personal preferences. Apart from that, its nice and clean, and gives you a fresh look.

Let’s have a peek and get a little content in here…

The Naked Moodle

fresh naked moodle - home
Naked installation of Moodle – Boost Theme

A Naked Moodle is one of the scariest things you will ever see. It has so much possibility in it, but it looks unfriendly and unyielding. From the thumbnail, you can see that its not going to be scary forever. As soon as we begin to add in our own elements, such as colours, logos, text… we can tame it!

If you have an installation of Moodle that was put together by a Moodle Partner, such as My Learning Space (who I work with), they will often do this initial work for you on your Live Moodle. but because we are playing with an installation on your laptops, you don’t get to leap ahead to something friendlier.

TIP: Run Moodle on your Laptop

I used the Moodle4Mac  (Moodle4Windows is also available) which came with a virtual server filled with everything I need to run Moodle offline ONLY on my laptop – no-one else can access this Moodle.

You might also have access to a ‘test Moodle’ or ‘sandpit Moodle’ which IS on the server, but only for trying things out – it won’t have students/staff, and it won’t be running current courses.

If you are going to mess about with Admin Settings, or even build new Courses, this is a fantastic way of doing that and finding out the problems BEFORE you touch the Live Moodle on the web server that all users have access to.

I’ll be mostly talking about playing with the Moodle on your laptop (or desktop or test/sandpit Moodle installation); but if I need to talk about the Moodle on the web server, that likely has courses already running and users added, I’ll refer to that as your Live Moodle.

Let’s add some logos

Before we look at what is available in Theme Settings, there is a place in Site Administration to add some Logos to the site. I got all inspired and made a video…

TIP: Logo Sizes, Shapes, and File Formats

Unfortunantley, Moodle doesn’t give us exact sizes for what might look good on the site and that seems to be so you are in control and you need to think about what screens will be seeing your Moodle.

Moodle does give you a hint that the Logo would be better as a wide shape, and the Compact Logo is more square shaped “…such as an emblem, shield or icon. The image should be clear even at small sizes.”

Of the two file formats accepted, JPEG and PNG, I’d use the PNG most of the time. PNG makes vectors (lines and plain colours) beautiful, and that’s what you need when you are talking a little graphic with a shield or similar. JPEG/JPG is better at photos and pictures with blended colours. Maybe use JPEG for the wide Logo if you need it.

Next… we’ll look at what we can do using the Theme Settings for Boost