Moodle.net

Boost presets

Moodle 3.2 ships with a new theme "Boost". Boost is an extremely flexible theme that allows direct customisation via uploading a "Preset" file (no plugin installation required). The preset file contains a list of SCSS instructions which is used to generate the new stylesheets for the theme. 

Preset files can be written from scratch or imported from a Bootswatch file.


Page: 1 2 3 4 5 6 7 8 9 10 11 12 13 ()
Name: Boost Image Preset
Description:

This Boost Preset sports a full screen image for the login page and a header image.  You can customize both images by changing the URL as described below.

 Use your own image

Important:  Change the default image URL in the file before uploading to your moodle server.  

Open the preset with a text editor such as notepad.  Find and change the following code in "bold" below in your preset file.  You will need to find an image on the internet preferably with a width larger than 1024px :

#page-header .card {
height: 225px;
background: url();
 background-size: cover;
 background-position: center;
}

and the second place to change the image is:

body#page-login-index {
 background: url();
 background-size: cover;
background-position: center;
}


Course Page with Header Image

Preview

Moodle Login Page

preview

Changelog:

  • Version 1.2 fixes some CSS issues that popped up between beta and release versions of Boost.
  • Version 1.3 added a background color to the edit cog in the header.  It also changes the height of the header image to be smaller once inside a course activity.  

Version: v1.3
Moodle versions: 3.2
Preview:
Preset file: text/x-scss preset-BoostImage.scss
Page: 1 2 3 4 5 6 7 8 9 10 11 12 13 ()

Moodle™ is a registered trademark.
Privacy | Contact