course header 2000x350

In our last article, we used the Boost Preset options for the Fordson theme settings. In this article, we will look at how changing the Fordson Preset options to other values changes the appearance of our Moodle website. Click on Site Administration, Appearance, Themes, Fordson to see this screen:

01

Fordson theme settings are divided into 11 different categories with the first category called Presets.

Differences between Theme Preset Options

The Theme Preset options include Boost, Elearner, Modern Moodle, Perception, Pulse, and Spectrum Achromatic. Change the setting to Elearner and click Save Changes to see this result:

02

The problem with Elearner is that the blue bar is now hiding the Breadcrumbs links which are the same color. Change the setting to Modern Moodle and click Save Changes to see the result:

03

Again the Breadcrumb links are hidden. Change the setting to Perception and click Save Changes to see the result.

04

This is a lot better. We will need to increase the spacing between the Breadcrumb links. But it is easier to increase spacing than to change the font colors for the Breadcrumb links. Click on the Course Page and the Dashboard to see that they also look better. Change the setting to Pulse and click Save Changes to see the result. Sadly, Pulse also has a problem of hiding the Breadcrumb links. Click on Spectrum and Save to see that this option also hides the Breadcrumb links. So, we can use Boost to get normal Breadcrumbs or Perception to get pretty Breadcrumbs.

CSS to fix Perception Preset Breadcrumbs

You can fix the Breadcrumb spacing problem by going to Fordson Colors tab and adding this to the final CSS box:

.breadcrumb-item+.breadcrumb-item { padding-left: 2rem !important; }

05

This fixed the breadcrumbs spacing problem. But the CSS will get wiped clean with the next Theme update. Therefore a better long term solution is to create a new Theme Preset.

How to Create a New Fordson Theme Preset
Unzip and open the Fordson Theme folder and click on scss, then Preset. Copy the Perception .scss file. Then open the copy with Bluefish. Scroll to the end of the file, line 694. Then copy paste:

.breadcrumb-item+.breadcrumb-item { padding-left: 2rem !important; }

Then save and close the file. Rename the file Perception-custom.scss Then add it to the custom themes box. Then click Save Changes. Then change the Theme preset from Perception to Perception-custom. Then delete the CSS we added to the Fordson Colors tab SCSS box. Using this custom Theme Preset means that you can make whatever changes you want and they will not get over-written whenever there is a Fordson theme update.

How to convert Bootswatch themes to Fordson Preset themes

Fordson and its parent, Boost, are based on a CSS framework called Bootstrap 4. There is a website called Bootswatch that offers several Bootstrap 4 themes. Each of these themes can be easily converted to Fordson Preset themes. Here is the link to the Bootswatch website:

https://bootswatch.com/

There is a Moodle theme called Waxed that is based on Boost and has already converted many bootswatch themes to Moodle Boost Preset themes. Here is a link to a page where you can download the Waxed theme presets.

https://github.com/roelmann/moodle-theme_waxed/tree/master/scss/preset

One at a time, drag the SCSS files for Cosmo, Lumen and Yeti into the Fordson Add a Theme box. Then change the name of the waxed Pulse theme to Pulse-b and drag it into Fordson also. Click Save changes after adding each theme. This will put these themes into the Theme Preset options. Select theme one at a time to see what they look like. Here is Cosmo:

06

Note that there was no need to adjust the Breadcrumb spacing. Here is Lumen:

07

Here is Yeti:

08

Here is Pulse-b

09

Here is Perception-custom with the drab gray background color replaced with a blue background color by adding this to the end of the SCSS file:

header#page-header {background-color: #114499;}

10

Fordson Theme Layout Chooser Options
The Layout Chooser formats the page and positions custom course images in various ways. There are five layout options. These are Default Boost, Full Width Top Header image, Centered Content with Overlapping Top Header, Centered Content with Full Screen Header Image and Default Boost with Header image in Course Title Box.

To see what some of these look like, you will need to click on Custom Images and add a header image. Then click on Preset Adjustments and change the spacing. Here is what the Default Boost Header image in course title box looks like:

11

I did not like any of these options - which is why I set the heights to 0 and deleted the header image.

Section Style Chooser Options
Section Style Chooser allows you to customize how each week/topic is displayed on the Course pages. The options are Boost Default, Bold Notecard, Folder tabs, Clip Board, Simple Box, Highlighted Section Title, University Learner and Corporate Learner. Here is what Boost Default looks like:

12

Here is what Bold Notecard looks like:

13

Here is what Folder Tabs looks like:

14

Here is what Clipboard looks like:

15

Simple Box is like Boost only with lines between the sections.

Here is Highlighted Section Title:

16

University learner also places lines between the sections. Corporate Learner is similar to Bold Notecard. For now, we will use Highlighted Section Title.

Course Tile Display Options
Course Tile Display handles course listings and allows you to choose between a variety of tile and horizontal options. There are 9 options:

17

Here is the Default Moodle Course Display:

18

Here is Tile Style 1:

19

Here is Tile Style 2:

20

Here is Tile Style 3:

21

Tile Style 4 is like Tile Style 1. Here is Horizontal Style 1:

22

Here is Horizontal Image Background with Full Details:

23

Here is Horizontal Image Background without details:

24

Here is Horizontal Two Column:

25

Corporate Training just shows the Course Title. For now, we will use Horizontal Image Background with Full Details.

Block Display Location Options
There are only two options. These are Single Column Boost and Three Column Fordson. Here is the Dashboard with Single Column Boost:

26

The Dashboard with Three Column Fordson is about the same. But we will use the Fordson option which comes with extra features.

What's Next?
In our next article, we will continue to review Fordson Theme settings.