Fordson
A theme for Moodle 3.x
Documentation and Setup Instructions
Introduction & Background
Fordson is focused on students going from login to learning, with features that help teachers build better courses and students engage with content. Your school is unique and Fordson provides impressive customizations for a professional and modern learning platform.
About Fordson
Moodle 3.5 introduces a new core Boost theme. Fordson is built as a child theme of Boost and the new Boost theme made it very difficult to keep the existing Style Presets of Fordson. This provided us with an opportunity and we are taking Fordson in a new direction that greatly enhances how you can style and customize your Moodle site. Previously, you were limited to 7 or so Style Presets and they were an all or nothing option. Fordson 3.5 now provides over 60 unique style and layout options with plans to exponentially add more!
Table of Contents
Layouts and Style Screenshots 14
Section Styles with the default Boost Layout 14
Course Listing Display Options 18
Recommended Theme Settings for Presets 22
SCSS Variables for Style Adjustments 24
Get the Most Out of Fordson - Style Preset Videos and Tips 26
Top Features
- Over 160 unique layout and style combinations for the ultimate in customization
- Fordson includes a variety of Site Preset Styles, Page Layouts, Sections Styles, and Course Listing Styles. All of which can be changed instantly from a menu.
- All major navigation and functionality accessible from one spot on the page for users
- A re-imagined course management panel for teachers that makes sense of all the links in course administration. It’s accessible from anywhere in the course at any time.
- New Block Display Panel moves blocks into a 3-column collapsible drawer giving a teacher more room for blocks and keeps them hidden until a student wants to see them.
- Turn Editing On button is “location aware” and accessible at all times on the course homepage. When clicked the page will return to the exact location you where viewing when you pressed the button.
- Feature the most effective course modules and activities first with Fordson’s innovative course activity customizations. Take control of what modules are displayed, module ordering, and the ability to feature modules. Limit what modules a teacher can use and allow Managers to see and use all modules.
- Keep students informed with progress reports, grades, teacher contacts and more with the Fordson Student Dashboard panel. This panel provides course information at a glance for students.
- When a course is set to show one topic per page the Fordson theme will show individual topic completion progress on the course homepage. Students can quickly see what topics still have unfinished assignments.
- Enroll students directly from the site homepage when using the Easy Enrollment Add-on.
Presets
This panel allows you to set the style, layout of pages, topics/weeks styling, and course listing layout. There are over 60 unique combinations that allow you to keep the default Boost layout and style and customize the layout and style from there.
Theme Presets allow you to change the color and overall styling of your site.
Layout Settings is very powerful in allowing you to choose and customize: Page Layout, Section Styles, and Course Listings. The Layout Chooser formats the page and positions custom course images in various ways. Section Style Chooser allows you to customize how each week/topic is displayed on the page. Finally, Course Tile Display handles course listings and allows you to choose between a variety of tile and horizontal options.
Preset Adjustments
The Preset Adjustments Panel allows you to fine tune your display settings once you set the overall layout and style. There are three items to pay attention to on this page:
- Learning Content Spacing (space between top of page and course content)
- Header Image Height
- Content Padding (padding space on left and right of content)
Depending on which Page Layout you choose you might need to adjust one or all of these settings to get best results. Later in the documentation you will notice that some layouts might recommend certain settings. Most likely these settings will be found on this page.
Menu Settings
This panel helps you setup additional menu options such as Teacher and Student Dashboard panels, My Course drop-down, This Course drop-down, and other optional setups you can achieve with Fordson. We recommend using the defaults with the exception of changing the My Courses terminology and adding a message for the student and teacher dashboards.
PRO TIP: Use the Course Management Message textbox to provide links to documentation on course setup and management to teachers.
Content Areas
Fordson provides a homepage textbox that can display a different message for logged-in users and logged-out users. You will also find the homepage alert on this page.
Icon Navigation
Unique to Fordson is a special homepage navigation feature built using large buttons with icons. Each of the 8 buttons can be customized with an icon, text, and link. By default there are 4 buttons created automatically. You can remove them by simply deleting the text in the icon field. There also two special buttons: Create a course and a Special Slide button. Create a Course button is only displayed for those who have Course Creator permissions. 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.
Footer
The Footer panel is where you can apply organizational branding and social icons. This will be displayed at the bottom of every page.
Custom Image Settings
This page allows you to upload images for various purposes used in the theme. These include: Favicon, Header Logo (In addition to the default Moodle Logo options), Default Header Image, Default Page Background, and Default Login Image.
Colours
Tweak the preset styles by targeting Bootstrap elements and a few page areas. There is also the option to change SCSS variables.
Marketing Tiles
Fordson supports up to six marketing tiles which can appear at the bottom of the page or up at the top just below the Icon Navigation Bar. Add text, images, and links to help draw attention to certain things.
Slideshow
Add up to three slides. At a minimum you must add two. Supports a title, description, and image.
Full Width Slideshow on Custom Login Page
Utilizing the slideshow on the custom login page will allow for a fullwidth slideshow that appears beneath the login form. This feature can be activated in the latest version of Fordson soon to be released.
Activities/Resources
This panel allows you to take control of what activities and resources teachers can access on your site. You can highlight most used activities or even control the ordering of what appears. Managers can see all tools. Site Admins always see all tools.
WARNING: All activities will disappear if you click the “Show Only Custom Menu” and you have not added any modules in the text box above. Clicking this option eliminates all modules except those named in the text box. This is great if you only want teachers to use certain modules but want Admins and Managers to have full access.
Custom Login Page
This allows you to create a custom login page. Other settings in the theme that will display on the login page include the following:
- Site Administration > Security > Site Policies > Force Users To Login = Make sure this is checked so that users will be taken to your custom login page.
- Site Administration > Appearance > Logos > Logo = Upload an image here and it will appear above the login form.
- Fordson > Custom Image Settings > Default Login Image can be used to change the background image for the login page.
- Fordson > Content Areas > Homepage Alert can be used to provide a notice on the top of the page.
Layouts and Style Screenshots
Theme Preset: Modern Moodle
Various Layout, Sections, and Course choosers. These are some of the customizations you can achieve with this.
Section Styles with the default Boost Layout
eLearning Preset with Centered Content/Full Screen Header Image Layout and Simple Box Section Style.
Course Listing Display Options
Recommended Theme Settings for Presets
Perception Preset
The Perception Preset is introduced in Fordson v1.3 and is the new default. Perception provides a clean and modern style to Moodle without sacrificing features and improvements to help learners and teachers alike.
Preset Settings
Layout Chooser => Default Boost Layout
Section Style Chooser => Boost Default
Course Tile Display => Default Moodle Course Display
Marketing Tile Style => Simplicity
Block Display => Three Column Fordson Default
Preset Adjustment Settings
Show Login Form => unchecked. We like to force users to login.
Content Padding => 3rem
Header Image Height => 400px to 700px is ideal.
Enhanced MyDashboard => Yes, checked
Activity Icon Size => 36 or 40px. Default is 32px but the larger icons help learners.
Menu Settings
Navbar Color Switch => Do not change navbar color based on role
Slideshow
Activate Slideshow => Unchecked. We prefer no slideshow on the homepage.
Spectrum Achromatic Preset
The Spectrum Preset is focused on maximizing screen space while still providing amazing visuals that utilize teacher uploaded photos in the header area of the course. Spectrum is sleek and modern with a bold title and breadcrumb area and a full-width presentation of course materials.
Preset Settings
Layout Chooser => Default Boost Layout / Header Image in Course Title Box
Section Style Chooser => Highlighted Section Title
Course Tile Display => Tile Style One
Marketing Tile Style => Top Bar Highlight
Block Display => Three Column Fordson Default
Preset Adjustment Settings
Show Login Form => unchecked. We like to force users to login.
Content Padding => 0rem
Enhanced MyDashboard => Yes, checked
Slideshow
Activate Slideshow => Checked. Spectrum looks great with a full width slideshow if needed.
SCSS Variables for Style Adjustments
SCSS Variables are used throughout a theme to create consistency and an easy method to change the look of a page very easily. Knowing what variables you can change and where to find them is a valuable skill if you want to style a theme beyond what front-end user controls a theme developer might provide. I’d like to share some of the more important SCSS variables we use in the Fordson Preset and show you how to find additional variables and with a simple cut/paste you can instantly tweak the style of the theme.
To see and find the main variables used in Fordson we put them in 2 places: the actual preset files ( /moodle/theme/fordson/scss/preset folder) and a file fordson_variables.scss
( /moodle/theme/fordson/scss/fordson_variables.scss file).
If you download the Fordson theme to your desktop and open up the zip file you will see the preset folder and fordson_variables file. Open the files and you will see at the top of the Presets variables that look like this:
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
…
$body-color: $gray-800 !default;
$body-bg: $gray-200 !default;
$drawer-bg: rgba($body-bg, .6) !default;
$card-bg: $white !default;
$footer-bg: #1e2429 !default;
$perception-base: #14a9fe !default;
Some of these might be pretty obvious what they do like $drawer-bg = drawer background color.
To change the drawer background color you would go to the Fordson theme Admin page and go to the Colours tab. At the top of the page you will see a text box for RAW Initial SCSS. You can define new colors for each of the variables you want to change by using something like: $drawer-bg: #000000; if you wanted to change the color of the nav drawer to black. With this new skill, you can customize Fordson and Boost-based themes beyond color pickers that are provided for quick changes.
Get the Most Out of Fordson - Style Preset Videos and Tips
Boost Style Preset
In this video we cover how to make the Fordson theme look and feel like Boost. It’s clean, modern, and simple. We also show you what the Section Style Display and Course Style Display dropdowns do. It’s quite amazing how quickly you can manipulate the settings of Fordson and have a completely different look to your elearning platform!
Watch the video: https://youtu.be/8ueT7LYmRAs
Read the blog post: https://michiganmoodle.dearbornschools.org/plugins/fordson-boost-style-preset-advanced-moodle-theme-controls/