course header 2000x350

In this article, we will create a Custom Log In page. First, we will create an email based self registration process. We will then review how to replace the email confirmation step with a more reliable confirmation process. Third, we will use the Fordson theme to add some custom elements to our custom log in page.

Moodle Default Login Page
The default Moodle Log in page is pretty basic:

01

What is surprising about this form is that there is no link to an account self registration page for those who do not already have an account to your Moodle website. This is because, by default, Moodle only allows what it calls Manual Authentication - which means that you as the Administrator or your staff have to manually add each user.

Turn on Self Registration
It is important to understand that in Moodle Account Creation and Course Enrollment are two different things. If you want your learners to create accounts on your site and have access to your courses, then you first need to enable Email based self registration so they can create an account. You then need to enable self enrollment within your course(s) so students can self enroll to your courses. We will review Moodle enrollment processes in a later article. Here we will focus solely on the student self registration process. The email-based self-registration authentication method enables users to create their own accounts via the 'Create new account' button on the login page. They then receive an email at the address they specified in their account profile to confirm their account. By default, Moodle email-based self-registration is turned off. To allow your users to sign up to your site via email, you need to enable the option.

Log in to your Moodle site as an admin user. Then click Site Administration, Plugins, Authentication, Manage Authentication. The table at the top of the page shows Email based Self Registration is enabled if there is an Eye in the row. But scroll down the page to Common Settings and you will see that Self Registration is actually disabled. Change this to Email based self registration. Also check Allow log in via email. Scroll down the page to note the ReCAPTCHA site key box. We will add ReCAPTCHA to our registration form later. Click Save Change. Then click on the Log In page again:

02

Click on Create a New Account.

03

Students need to create a username, secure password and add their email address. Then click Create my new account. Here is a link to the New Account Registration page:

https://collegeintheclouds.com/login/signup.php?

Then create a new test user with a real email address.

04

Go Site Administration, Users, List of users to see the new user:

05

Click Confirm to manually confirm the new user.

Next try a real email address.

06

Then log into your Protonmail account to view the confirmation email.

07

After confirming, this screen appears:

08

Click Continue. This now logs us into the back end of Moodle but as a student rather than an administrator. Scroll down to the course and click on it. The screen explains that the student can not enroll themselves into the course. Log out of this user account.

Drawbacks of the Email Self Registration Process
There are several drawbacks to the Email Self Registration process. The most obvious is that some older or younger students may not have an email address to register with. You can solve this problem by having them register with a fake email address. The most common is This email address is being protected from spambots. You need JavaScript enabled to view it.. You can then manually confirm their registrations in your Moodle Users list.

Even if your users all have email addresses, the confirmation email may not actually be transmitted due to being blacklisted somewhere along the path. Even if not blacklisted, the confirmation email may often wind up in a users spam folder. It is also common for users to type in an incorrect email address.

In such cases, many teachers do not want to use the manual authentication process. But using the No Authentication option is also bad as it results in a bunch of spam users that then need to be deleted. Thankfully, there is an unofficial plugin, called Online Confirm that addresses this problem. Instead of requiring email confirmation after registration, the plugin sends the user to a new page where they can enter a code or take other actions to confirm their registration. We will install and set up this plugin next.

Download and Install the Online Confirm Plugin
Go to the following web page to download the plugin:

https://github.com/charbusch/moodle-auth_onlineconfirm

Click on the green Code button. Then click Download Zip. Then move the plugin to your Moodle Plugins folder on your Home computer.

To install the plugin, go to Site Administration, Plugins, Install Plugins. Then drag the plugin zip file from your File Manager into the box. Then click Install plugin from the Zip file. The installer will validate the plugin with OK. Click Continue. This brings up the Moodle Server Check screen. Scroll to the bottom and click Continue. This brings up the Plugins Check screen. Click Upgrade Moodle Database now. It should reply with Success. Click Continue. This brings up the Online Confirm New Settings screen.

Add your email address to be sent a Notification email whenever a new user registers. For now, leave Enable reCAPTCHA set for No and everything else at the default settings. Then click Save Changes. This brings up the Moodle Notification screen. Click Check for available updates. This will update the database. It should reply with Your Moodle Code is up to date.

Configure the Online Confirmation Plugin
Go to Site Administration, Plugins, Authentication, Manage Authentication. This brings up a list of available authentication plugins. Scroll down to Online Confirm and enable it by clicking on the eye to the right of the plugin. Then click on the Up Arrow to make it higher on the list than Email based self registration.

09

Then scroll down to Common settings and change it to Online Confirm. Then scroll to the bottom of the screen and click Save Changes.

Then go to your website Home page and create a new test account with a fake email address such as This email address is being protected from spambots. You need JavaScript enabled to view it.. This immediately logged the new user into their student page without any confirmation code. This is probably not what you want. To add a confirmation code to the process, we need to install a second plugin.

Install the Signup Code Plugin
Go to the following web page to download the plugin:

https://github.com/charbusch/moodle-local_signupcode

Click on the green Code button. Then click Download Zip. Then move the plugin to your Moodle Plugins folder on your Home computer.

To install the plugin, go to Site Administration, Plugins, Install Plugins. Then drag the plugin zip file from your File Manager into the box. Then click Install plugin from the Zip file. The installer will validate the plugin with OK. Click Continue. This brings up the Moodle Server Check screen. Scroll to the bottom and click Continue. This brings up the Plugins Check screen. Click Upgrade Moodle Database now. It should reply with Success. Click Continue. This brings up the Signup Code New Settings screen. For Pre Signup Code, enter a short phrase such as Learn now. For Pre Signup Info, enter some instructions such as:

Welcome to College in the Clouds! To register, type the words Learn Now into the Signup code verification box. This will bring up a Registration form where you need to enter a username and password and email address. Please use a simple username and password that you can remember. You will also need to enter an email address. You can use either your real email address or a fake email address such as This email address is being protected from spambots. You need JavaScript enabled to view it.. You also need to enter your first name and last name to use in our course sessions. Entering a City and Country are optional.

For Pre Signup Error, enter some instructions such as:

If you have trouble signing up, please email us and we will help you get signed up. Our email address is This email address is being protected from spambots. You need JavaScript enabled to view it.

Then click Save Changes. This brings up the Moodle Notifications screen. Click Check for available updates. It should end with your Moodle Code is up to date. Then create another new Test account. Click Create a New Account to bring up this screen:

10

Enter Learn now. Then click Proceed. Fill in the boxes and register. You will then be taken to the logged in page for this new user. Log out and log in again to confirm it works. Also check your Protonmail email address to confirm that you received a Notification email. If you do not get notification, there is another Moodle Local Plugin that may serve the same purpose.

Download and Install the Local Welcome Plugin
The local welcome plugin can be downloaded from this link:

https://moodle.org/plugins/local_welcome/versions

Then transfer the plugin to your Home computer Moodle Plugins folder. To install the plugin, go to Site Administration, Plugins, Install Plugins. Then drag the plugin zip file from your File Manager into the box. Then click Install plugin from the Zip file. The installer will validate the plugin with OK. Click Continue. This brings up the Moodle Server Check screen. Scroll to the bottom and click Continue. This brings up the Plugins Check screen. Click Upgrade Moodle Database now. It should reply with Success. Click Continue. This brings up the Moodle Welcome New Settings screen. Uncheck Enable user messages. Then check the online confirm Auth plugin. Leave Enable moderator messages set to Yes. Add the name of your Moodle site to the Moderator subject box. Then click Save Changes. Then in Moodle Notifications, click Check for available updates. Then create another test user and see if you get an email notification. Now that we have a more reliable user registration system, its time to use Fordson to customize our Log in page.

Use Fordson to Customize your Log in page
Fordson allows you to create a custom login page. Here is an example of a custom log in page:

11

The above custom log in page has a login page background image and four feature boxes. To create your own custom log in page, go to Site Administration, Appearance, Themes, Fordson and click Custom image settings. Scroll down to Default Login image. Add a background image that has a blank area on the left side to display the log in form. Then click Save Changes.

Then click Fordson Custom Log in page. Then check Turn on Custom Log in. Then scroll down to Icon One and fill in the Icon, Title and Text. Repeat for Icons 2, 3 and 4. To see the complete list of icon options, visit this page: https://fontawesome.com/v4.7/icons/

We will add four of the following icons: paper-plane-o, cc-stripe, linux, joomla, heart, book, star

You can also add up to four Feature boxes.
A feature consists of an image and text which will appear on the custom login page in a row. You must add both an image and text in order for the feature to appear. The text will appear next to the featured image in a row. Use a Heading4 to generate a special title within the text box. In the Atto Editor H4 is Heading Medium. Then click Save Changes.

Add ReCAPTCHA
Spam protection may be added to the email-based self-registration new account form with a CAPTCHA element - a challenge-response test used to determine whether the user is human. ReCAPTCHA keys should be set in the manage authentication common settings.

Get ReCaptcha Keys
There are two keys, the Site Key and the Secret Key. The Site Key and the Secret Key can also be known as public and private keys respectively. You can obtain these keys by registering your site with Google’s reCAPTCHA service. The Site Key is used to render the reCAPTCHA within a page and the Secret Key is used for performing server-side validation. The keys are unique to the domain they are registered to. To get Recaptcha keys for your website, go to this Google page: https://www.google.com/recaptcha/about/

Then click on the Admin Console in the top menu. Enter your Gmail Address and password. Then click on the Plus sign in the top menu to create keys for a new website.

12

Type in the name of your website. Then check ReCaptcha 2 (as it appears that Moodle does not yet support ReCaptcha 3). Then check Invisible ReCaptcha. Then click to the right of the plus sign to add the domain name again. Then check the Accept Terms box. Then click Submit at the bottom of the page. Then copy and paste the Site Key and the Secret Key to a document in your Website Administration folder on your home computer. Then click the Back to Settings button and Click Save. Then close the browser window.

To add Recaptcha to your signup form, go to Site administration > Plugins > Authentication > Manage Authentication. Copy and paste the keys and click Save Changes.

Then enable Recaptcha by going to Site administration, Plugins, Authentication, Online Confirm. Then change Enable ReCaptcha from No to Yes. Then click Save Changes. Then view your website log in page. Click New Account. Enter the Signup code verification. Then click Proceed. Here is what Invisible ReCaptcha looks like:

13

Congratulations! You now have a custom secure Log in and User Registration system.

What's Next?
In the next chapter, we will use some Moodle plugins to create a better Menu and Navigation system.

In this article, we will continue our review of the Moodle Fordson theme settings by reviewing how to use Navigational Menus added by the Fordson theme. Perhaps the most glaring drawback of Moodle is the difficulty in creating custom menus and menu items. Menus are extremely important to visitors, students and teachers in making it easy to navigate a website. Joomla offers a very easy way to create menus and menu items and assign them to different pages. In Moodle, this function is much more difficult. Hopefully, this issue will be addressed in Moodle 4. But for now, we will describe the current menu creation options for Moodle 3.11.

How to create navigational menus and Menu items in Moodle
We begin by reviewing the default way to create menus and menu items. Amazingly, this crucial function is not included in the Moodle core. Instead, navigational menus and menu items are considered to be part of the Theme Settings. Moodle administrators can create a custom menu by going to Site Administration, Appearance, Theme Settings. Scroll to the bottom of the page. Then enter text items one per line in the your custom Theme settings. Sub menu items are preceded by a number of hyphens, with the number of hyphens determining the depth of the item. Items with no hyphen appear as the top level of the menu, items with a single hyphen appear on a drop down menu, and items with two hyphens appear on a drop down menu below the previous first level item.

A line of text without a link is used for the Menu Title. To create space or blank line between Menus and Menu Items use ### for the top menu and -### for a sub-menu.

The content of each menu item is constructed in two parts, separated by a | (pipe character). The two parts are:

Label... This is the text that will be displayed as the menu item. (If you want to use a special character such as an ampersand you must use & instead of &).

URL... This is the URL that the user will be taken to it they click the menu item.

The following is an example of how to create a custom menu (copy and paste into the Custom Menu items box as a starting point):

Moodle community|https://moodle.org

-Moodle Plugins|https://moodle.org/plugins/

-Moodle Demo Sites|https://moodle.org/demo

-Moodle Docs|https://docs.moodle.org/311/en/Main_page

-Moodle World Forums|https://moodle.org/course/

English Forums|https://moodle.org/mod/forum/index.php?id=5

-Moodle Forum General Questions|https://moodle.org/mod/forum/view.php?f=32

-Moodle Forum Installation|https://moodle.org/mod/forum/view.php?f=15

-Moodle Forum Blocks|https://moodle.org/mod/forum/view.php?f=396

-Moodle Forum Course Formats|https://moodle.org/mod/forum/view.php?f=30

-Moodle Forum Enrollment|https://moodle.org/mod/forum/view.php?f=512

-Moodle Forum Repositories|https://moodle.org/mod/forum/view.php?f=352

-Moodle Forum Roles|https://moodle.org/mod/forum/view.php?f=941

-Moodle Forum Themes|https://moodle.org/mod/forum/view.php?f=29

Teaching Forum|https://moodle.org/mod/forum/view.php?f=24

-Moodle Activities Forum Assignment|https://moodle.org/mod/forum/view.php?f=117

-Moodle Activities Forum Attendance|https://moodle.org/mod/forum/view.php?f=125

-Moodle Activities Forum Glossary|https://moodle.org/mod/forum/view.php?f=126

-Moodle Activities Forum Lesson|https://moodle.org/mod/forum/view.php?f=333

-Moodle Activities Forum Quiz|https://moodle.org/mod/forum/view.php?f=121

-Moodle Activities Forum Resources|https://moodle.org/mod/forum/view.php?f=122

-Moodle Activities Forum Scheduler|https://moodle.org/mod/forum/view.php?f=1000

Click Save Changes. Then view the Home page as a non-logged in visitor:

01

Tips on Adding Menu Items to the Top Menu
When not logged in, the top menu items are placed between the Home link and the Languages selector. There is very little space here and as the web browser screen narrows, the top menu is soon moved to the bottom of the Home page in a single column. It is therefore Important to limit the number of Top Level Menu Items to no more than three menu items and to limit the text in each menu item to no more than two words.

You can create as many Second Level Menu Items as you want. Here is an example of how they will look:

02

Also note that when someone logs in, an additional menu item called My Courses will be added to the Top Menu. This will tend to displace and hide the Settings area in the upper right corner. This is another reason to limit the number of custom top menu items.

Add a Moodle Main Menu Block
You can also create a separate menu that is not part of the Moodle Top Menu by adding a Main Menu Block to the front page.

Resources and activities can then be added to the front page,( for example to create a side menu for your Moodle site.)

You can also use the main menu block with Moodle pages to create a side menu for your Moodle site, instead of or in addition to the custom menu items at the top of your site. Thus you could create Moodle Pages pages called "About" or "Contact" and use a Moodle Main Menu block to display these pages.

To add a Moodle Main Menu Block, first log in as an administrator and go to the Home page. Then turn on the editing on the front page. This will display a couple of blank spaces and the Add a Block box just above your main content area:

03

From the "Add block" link, click Main Menu.

04

Click on the Settings wheel to edit the Main Menu Block.

05

Change Page Context from Front Page only to Display throughout entire site. Then scroll down and change the display region from Column C to Column A. Sadly, we do not seem to be able to change the name of the main menu. Click Save Changes.

Then click "Add an activity or resource" and choose Page.

06

Copy this description to the Content Section. Then click Save and Display. Then repeat the process to create a FAQ page and a Contact Us page. Then turn off editing. Then visit your website home page as a non-logged in user:

07

This is not a very efficient usage of space on the Home page. The problem is that we are limited in terms of where we can put the Main Menu Block. We do not want the block in a right side menu as that will limit the width of the main content area. Sadly, there was not an option to put the block in the left side menu. We can and eventually will copy the links to these pages and place them in our top menu or bottom menu and then delete this Main Menu Block. Next, we will look at additional menu creation options provided by the Fordson theme.

Fordson Icon Navigation Menu
Fordson provides an additional top menu, called the Icon Navigation Menu, which is only visible for logged in users and is only displayed on the Home and Dashboard pages. Here is what it looks like:

08

There are currently 5 links. But you can have up to 8 links shown in this menu. Each of the 8 buttons can be customized with an icon, text, and link. By default there are 4 buttons created automatically.

To add or remove menu items from this menu, go to Site administration, Appearance, Themes, Fordson. Then click Icon Navigation. The Dashboard icon is Homepage Icon one and the Calendar Icon is Homepage Icon two. Badges are Homepage Icon Three. All Courses are Homepage Icon Four. Homepage Icons Five, Six, Seven and Eight are all blank. Each link can open in the current page or in a new page. Create a Course is in a special area called Special Course Creator Button. The Create a Course button is only displayed for those who have Course Creator permissions.

Not shown by default is the Special Slide button. The Slide button toggles the display of a textbox. This is great for instructions, news, or other information that doesn’t need to be seen all the time.

You can remove icon menu items by deleting the text in the icon field. You can add icon menu items by adding text and a link and an icon code in the boxes provided. If you have more than six icons, reduce the width of each icon from 100 px to 85 px using the setting provided. As an exercise, we will replace the Badges icon with a new icon called College Courses with a link to our Joomla College in the Clouds Courses.

https://collegeintheclouds.org/

For the icon, click on this link to see your 675 options:

https://fontawesome.com/v4.7/icons/

We will use the heart icon. Also set the link target to open in a new page. Click Save Changes and visit your logged in Home page. Here is the result.

09

Click on the Icon to make sure the link works.

Fordson Theme Menu Settings Panel
This panel allows you to turn the Fordson Course Management icon on or off. This icon only displays when you are on a Course page. We will leave this Settings panel at its default settings.

Content Areas Panel
Fordson provides a homepage text box that can display a different message for logged-in users and logged-out users. It can be used to welcome users when they log in and provide them with additional instructions on what to do next.

Footer
The Footer panel is where you can apply organizational branding and links. The footer is be displayed at the bottom of every page.

10

Go to Site Administration, Appearance, Themes, Fordson, Footer. Then fill in the Organization Name, website, email address and type in a footnote with or without an image. Then click Save Changes.

To delete the Moodle footer logo, copy and paste the following into the bottom of the Fordson Themes Colors panel.

.sitelink {visibility: hidden;}

To delete the retention summary link in the Moodle footer, go to Site administration, Users, Privacy, Privacy settings. Uncheck the 'Show data retention summary' checkbox and save the changes.

To delete the Get the Mobile App link in the Moodle footer, go to Site Administration, Mobile App, Mobile Appearance and delete the App download page link. Then click Save Changes.

To clear the theme cache, go to Site administration > Appearance > Themes > Theme selector.

Then click Clear theme caches.

The go to your Home page and view the footer:

11

Colors

We have already used the Fordson Colors panel to insert custom CSS. The Colors panel can also be used to change the background color on several areas of our website pages. To see the effect of changing background colors, use the following table to directly enter CSS colors in these boxes:

Area

Color Name

CSS Color

Brand Primary

Medium Blue

#9999FF

Body Background

Light Blue

#EEEEFF

Top Navigation Navbar

Sky Blue

#CCCCFF

Breadcrumb Background

Light Green

#EEFFEE

Content Background

Light Gray

#EEEEEE

Side Drawer Background

Medium Green

#99FF99

Footer Background

Light Red

#FFEEEE

Marketing Tile Text Background

Light Purple

#FFEEFF

Then click Save Changes. Then view your Home page as a logged in user.

12

it hard to read the light colored text in the Icon Menu. You can either not use the Gray content area background or you can use CSS to darken the color of the text in the Icon Menu. The text color is also the Brand primary color. So change the Brand primary color to Dark Blue #222277. Click Save Changes and view the Home Page:

13

Fordson Theme Marketing Tiles
Fordson Theme Marketing tiles are also known as Module Menu Items. Tiles or modules are boxes of content that include a link to a special page. Fordson supports up to six marketing tiles which can appear at the bottom of the page or at the top just below the Icon Navigation Bar. Add text, images, and links to help draw attention to special pages.

To create Theme Marketing Tiles, go to Site Administration, Appearance, Themes, Fordson and click on Marketing Tiles. Leave the Display position at the bottom of the page. Then enter a short title, small image (or if no image, add a short description). Then enter link text such as CLICK HERE and link URL. Then change the Link Target to open in a new page. Repeat to add a second Marketing Tile. Then click Save Changes. Then view your Home page:

14

Skip the Fordson Theme Slideshow
There are two problems with the Fordson slideshow. First, the images are not responsive for smaller screens. Second, slides do not advance automatically and there is no forward arrow. Hopefully, we can find a better slideshow when we look at Moodle Plugins.

What's Next?
In our next article, we will use the Fordson theme to create a custom log in page.

Moodle themes are used to control the appearance of your Moodle Site. Moodle themes are similar to Joomla templates. They control the layout of content and the color of content as well as the appearance of titles and text. In this article, we will explain why and how to replace the default Moodle theme with a better theme.

Drawbacks of Using the Default Moodle Theme
The default Moodle theme, called Boost, is limited to a three column layout. A three column layout creates problems for reading material in the main content area as each side column takes 20% of the width leaving only 60% of the width for the main content area. Ideally, we want a two column layout which will leave 80% of the screen width for the main content area.

The default Moodle theme also suffers from a limited number of positions to place Moodle Blocks. This means that Moodle web pages that use the default theme often have blank spaces in the main content area while having too many blocks in the right side column.

The default Moodle theme also has very limited menu options. Often important menu items are hidden behind icons - making it hard for teachers and students to fund the Moodle functions the are looking for. Using a better theme will make your Moodle website easier to navigate as well as better looking and easier to read.

Drawbacks of Using a Custom Moodle Theme
Despite the drawbacks of the default Moodle theme, many teachers elect to use it anyway because using a custom theme adds even more complexity to running your Moodle website. Not only do you need to learn how to run Moodle, but you also need to learn how to configure your custom Moodle Theme. This can be a challenge because, with the exception of the Fordson theme, most custom Moodle themes come with almost no instructions on how to configure them.

A second drawback of custom Moodle themes is that you are entirely dependent on the person who made the custom theme to keep the theme up to data. This can be a very daunting task because each time Moodle issues an update, the person who created the custom theme needs to review all of the changes to the Moodle code and then update their custom theme so it works with the new version of Moodle. New versions of Moodle are released every six months.

To make matters worse, Moodle is made with a program called PHP which is also rapidly evolving. PHP runs 82% of all websites on the Internet including all Moodle sites, all Wordpress sites and all Joomla sites. PHP 7 has been releasing a new version every 12 months for the past five years. Each time PHP releases a new version, many PHP functions are replaced with newer more secure functions. This forces Moodle to issue an update - which forces Moodle custom theme creators to issue an update. PHP 8 was released in November 2020 and will require even more work in terms of updating Moodle and Moodle themes (and Moodle Plugins).

Moodle Theme Selection Factor #1 - has the Theme been updated for the latest version of Moodle?
Go to the Moodle Plugins page: https://moodle.org/plugins/index.php Then change the plugin type to Themes. This will display all themes in the order that they were updated. For each theme at the top of the list, click on the theme to go to the Theme page. Then click on Versions to see if the theme has been updated to the latest version (which in my case is version 3.11). Despite looking two months after the Moodle 3.11 release, I found only 7 themes updated to version 3.11. In the Comments section, an eighth theme (Fordson) was claimed to work well on Moodle 3.11 even though it had not been updated.

Moodle Theme Selection Factor #2 Do the recent Theme Comments indicate problems in using the custom theme?
Even the 7 themes updated to Moodle 3.11 had numerous problems in actually working on Moodle 3.11. To see these problems, click on the Theme to go to the Theme page. Then scroll down to the Comments section and read the first two pages of comments. For example, while the Moove theme is very popular, it has 54 pages of comments including some very serious unresolved issues. Snap has 14 pages of Comments. Eguru also has 14 pages of Comments. Fordson has 33 pages of Comments.

Moodle Theme Selection Factor #3 Does the Moodle Theme Forum indicate problems in using the custom theme?
The Moodle Themes forum is at the following link: https://moodle.org/mod/forum/view.php?id=46

The Moodle Themes forum has nearly 100 pages of questions and problems with 50 questions per page. This is 5000 questions just about Moodle themes. Read the two most recent pages and you will see that the theme with the most problems is a theme called Adaptable. It is always a good idea to read forum comments before choosing any Moodle theme or plugin.

Moodle Theme Selection Factor #4 Is there documentation on how to use the custom theme?
While some themes claim to have documentation, when you go to the Theme page and click on the documentation link, it only has a couple of sentences on how to install the theme - and nothing at all on how to use the theme. In fact, the only Moodle custom theme I have found that has complete written and video documentation is the Fordson theme. Here is a link to a Fordson theme 2 minute Features video: https://www.youtube.com/watch?v=CUqcePDcqxk

Here is a link to a Fordson How to video. There is a whole channel of videos: https://www.youtube.com/watch?v=8ueT7LYmRAs

Here is a link to a Fordson 28 page How to PDF: https://docs.google.com/document/d/1Qw7zte0uRy-LPHooJ7LfpgFRMeBH6Lo7L8mKYCWtUAI/edit#heading=h.5ivo39mdqxs5

Click File Download to download the Fordson manual.

Here is a link to the Fordson theme website with more user tips: https://michiganmoodle.dearbornschools.org/fordson-theme-for-moodle/

Moodle Theme Selection Factor #5 How easy is it to set up and use the theme?
This is a little harder to determine. You need to download and install the themes you want to test. I tested all of themes that had been updated to Moodle 3.11. Many of them required knowledge of HTML and CSS that most teachers do not have. Others offered little in the way of improvement over the default Boost theme. The easiest theme to configure was the Fordson theme. Fordson has presets that can be selected with the click of a button.

Why we will review how to install and use the Fordson theme
Fordson also offered a number of features not available on any other theme. We will cover some of these features in the coming pages. The only major drawback to Fordson is that there are a few minor appearance problems that require placing some custom CSS in the Fordson Theme CSS box. We will provide you with the CSS as the need arises so all you need to do is copy and paste to get your website looking correctly. Additionally, some times solutions to problems are posted on the Fordson Project Issues page which is at this link: https://github.com/dbnschools/moodle-theme_fordson

How to install the Moodle Fordson Custom Theme
The official Moodle documentation states that there are two ways to install a Moodle theme. Both ways require downloading the latest version of the theme from the Version tab of the Theme page. Here is the link to the Fordson theme download page:

https://moodle.org/plugins/theme_fordson/versions

Click Download to download the zipped file. Once you have the zipped file, one option is to use the Hestia File Manager to install it directly in the Moodle themes folder and then unzip the file. This might lead to some problems. I therefore recommend using the second official way which is to log into your Moodle Administrator page, click on Site Administration, Plugins, Install Plugins.

01

Then drag the zipped theme file into the box and watch it load. Then click Install plugin from the zipped file. Moodle should reply that the validation was successful.

02

Click Continue. Then scroll down the Server check page and click Continue again. This opens the Plugins Check screen. Click Upgrade Moodle database now. Moodle should reply with Success. Click Continue again.

This opens the Fordson New Settings screen. There are many settings with this theme which we will review in the next article. For now, just choose the Boost Presets.

Here is a Table of these initial Boost settings:

Setting Category

Setting Name

Boost Value

Presets

Theme Preset

Boost

Layout Chooser

Default Boost Layout

Section Style Chooser

Boost Default

Course Tile Display

Default Moodle Course Display

Marketing Tile Style

Boxed Shadow

Block Display Location

Single Column Boost Default

Preset Adjustments

Show Login Form

Uncheck

Enhanced My Dashboard

Check

Learning Content Space

0

Header Image Height

0

Content Padding

0

Block Column Width

0

Activity Icon Size

32px

Trim Course Title

256

Course Title Tool Tip

No

Trim Course Summary

600

Course Tile Height

0

Custom Image Settings

No changes

Colors

Body Background Color

#EEEEFF

Content Areas

No changes

Menu Settings

Show Panels

Yes

Icon Navigation

No changes

Marketing Tiles

No changes

Footer

No changes

Slideshow

No changes

Custom Login Page

No changes

Note that the reason we set the Learning Content Space and Header Image heights to 0 is because the Fordson header image does not appear to be Responsive to the device screen width. We will therefore place the header image in the main content area where we can set it to be responsive.

Then scroll to the bottom of the page and click Save Changes. Now you’ve successfully installed your new theme.

Assign Fordson to be the new Default Theme
To use the new theme for your Moodle site you have to activate the theme in Moodle first. Go to Site Administration, Appearance, Themes, Theme selector. Then click Clear theme cache. Then for Default, click Change theme. Then scroll down to the Fordson theme and select Use theme. This will display the new theme. Click Continue.

03

Then click on the Home page to view the result. Here is what it looks like to a logged in Administrator:

04

Here is what the Home page looks like to a non-logged in visitor:

05

The Fordson Moodle Site looks very similar to the Boost Moodle Site But as we will see in the coming pages, there are lots of differences. For example, go to the logged in Administrator Home page and click on Courses. The Course Management and Turn on Editing buttons have been made visible and moved to the upper left corner between the word Home and My Courses:

06

Click on Course Management (the Settings wheel) to see a full page of Course Management links:

07

Click the green icon, Turn on Editing. Note that it will turn into a Red icon as a visual clue that you need to turn off editing when you are done making your changes.

What's Next?
In our next article, we will look at how we can now change the appearance of several areas of our Moodle site with just the click of a few buttons in the Fordson theme.

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.