Moodle Course Tip: How to add full-width responsive videos in Moodle Boost or Boost-based themes

Posted on 5 June, 2018 by Admin

Moodle’s core theme Boost is built on the latest Bootstrap 4 framework. If you are using Boost or a Boost-based theme (eg. Moove, Fordson) you can take advantage of the Bootstrap 4 “embed” utility to add responsive Youtube/Vimeo videos in your Moodle course.

In this tutorial we will show you how to do that.

Live Demo

(Our demo uses Maker theme which is our latest Boost-based Moodle theme.)

Step 1 – Get the Youtube/Vimeo video embed code

For Youtube video, you can follow the guide here

For Vimeo video, you can follow the guide here

Step 2 – Prepare the video code snippet for your Moodle course

Okay, so you’ve got your video embed code ready. To add the responsiveness to the video in your Moodle course, you need to wrap the embed code in Bootstrap’s utility code as shown below:

<div class="embed-responsive embed-responsive-16by9">

  <!-- Replace the iframe below with your video embed code -->
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>

</div>

Tip: You can change the video aspect ratio by replacing embed-responsive-16by9 with other modifier classes. You can find the list of classes on the Bootstrap 4 official docs here.

Step 3 – Add the video code snippet to your Moodle course

Log into your desired Moodle course as a teacher or admin. Turn editing on and add a “Label” using the “+ Add an activity or resource” link.

Copy and paste your prepared video code snippet from Step 2 into Label’s HTML code editor (as shown in the figure below).

Save your changes and you’ve successfully added a responsive video to your Moodle course.

Moodle Theme Maker – How to reorder the frontpage theme sections

Posted on 4 June, 2018 by Admin

Our premium Moodle theme Maker is a Boost-based Moodle theme so it’s very easy to change the order of the frontpage sections by editing the related theme template file(s). In this tutorial we will show you how to make the changes so you can customise the frontpage section order to best suit your site’s landing UX needs.

Step 1 – Find the template files

There are two files related to the Maker theme’s frontpage layout. Both of them are located under the theme templates folder: maker > templates

File 1 – frontpage.mustache

This template is used to control the layout for logged-in users. If your Moodle course allows guest login then this template applies to logged-in guest users as well.

*File 2 – frontpage_guest.mustache

*Note: This file only applies to Maker theme for Moodle 3.x. Maker theme for Moodle 4.x doesn’t have this file.

This template is used to control the layout for visitors (not logged-in users)

Step 2 – Edit the template

Open your desired template file in a text editor and change the order of the relevant code snippets.

Below is a list of the code snippets for displaying the frontpage sections.

Header Alert
```
{{{ output.header_alert}}}
```
Slideshow Section
```
{{{ output.fp_slideshow }}}
```
Search Courses Section
```
{{{ output.fp_searchcourses }}}
```
Benefits Section
```
{{{ output.fp_benefits }}}
```
Featured Section
```
{{{ output.fp_features }}}
```
Promo Carousel Section
```
{{{ output.fp_promo }}}
```
Logos Section
```
{{{ output.fp_logos }}}
```
Teachers Section
```
{{{ output.fp_teachers }}}
```
Testimonials Section
```
{{{ output.fp_testimonials }}}
```

Moodle Frontpage Content

moodle-theme-maker-frontpage-moodle-content

<div id="page" class="container-fluid">
...
</div>

FAQ Section
```
{{{ output.fp_faq }}}
```
CTA Section
```
{{{ output.fp_ctasection }}}
```

For example, say you want to display the Promo Carousel section above the Featured section for visitors, you can edit the file frontpage_guest.mustache and move the Promo snippet {{{ output.fp_promo }}} above the Featured snippet {{{ output.fp_features }}}. If you want to do the same for the logged-in users (Moodle 3.x only) then you need to make the same changes to the file frontpage.mustache as well.

Below is a figure showing you the frontpage before and after the changes:

moodle-theme-maker-frontpage-change-section-order-before-after

After the section order change, the promo section looks too close to the section below. To fix this you can add some spacing after the promo section via your custom CSS:

Go to: Site administration > Appearance > Themes > Maker Settings > Advanced Settings and enter the following CSS into the “Raw SCSS/CSS” input field:

.promo-section {margin-bottom: 60px;}

Important note:

Any changes you made to the theme files will need to be re-applied when you upgrade your theme later. So make sure you keep a note of what you’ve changed so you can re-apply the changes quickly when it’s time to upgrade.

Moodle Course Tip: How to Quickly Enrol Users in Boost Theme

Posted on 7 May, 2018 by Admin

If you are using Boost or a Boost-based theme for your Moodle site, enrolling users to your course has become really straightforward.

Instead of navigating to the “Enrolled Users” option via the course administration page, the course teacher can quickly enrol users to the course by clicking the “Participants” link in the navigation drawer as shown in the screen capture below:

Looking for a Boost-based Moodle theme? Check out our latest Moodle theme Maker

How to show your Moodle course’s progress on the dashboard

Posted on 6 May, 2018 by Admin

In the latest Moodle you can show progress bars on the dashboard page as a visual way to let your students keep track of their course progress. However, by default this feature is not enabled in Moodle. In this tutorial we will show you how to enable this feature so your students can track their course progress.

Below is a screenshot taken from our Moodle theme demo site. You need to log in here as a student to see the student dashboard page demo.

Step 1 – Enable the feature at the site level

Log in as an admin and go to: Site administration > Advanced features
Find an option called “Enable completion tracking” and tick the checkbox.

Step – 2 – Enable the feature at the course level

Go to your desired course’s settings page as a teacher and find a section called “Completion tracking”. Make sure you select “Yes” from the dropdown menu as shown in the figure below.

Step – 3 – Enable the feature at the course activity level

A course teacher can configure the course activities/resource settings to enable the activity completion according to his/her criteria.

Activity/Resource setting

A checkbox will be displayed next to the activity/resource if its completion tracking is enabled

Now you’ve successfully enabled the course progress feature and a progress donut chart should be displayed next to the course name on the dashboard.

How to make useful Moodle course layout/component templates available to your teachers in Moodle’s text editor

Posted on 23 April, 2018 by Admin

Want to provide predefined and preformatted course layout/component templates such as tables, cards, badges and buttons for your teachers to easily drop into courses they are creating? We’ve found the perfect solution for you – you can install a Moodle plugin called “Templates” to achieve that. This could be a great way to empower your teachers to create engaging courses with beautiful layouts and useful components. You can even use this to make fully-fledged course templates for teachers to choose from.

In this tutorial we will walk you through the whole process of making a template available for your teachers to use in Moodle’s text editor.

Step 1 – Install Plugin

Download the “Templates” plugin from Moodle’s plugins directory and upload the downloaded zip file to your Moodle’s plugins page: Site administration > Plugins > Install plugins

Step 2 – Create Templates

Go to the plugins’ settings page to add your templates: Site administration > Plugins > Text editors > Atto HTML editor > Template settings

By default, you can add 3 templates but you can add as many templates as you want by increasing the number in the “Template count” field.

To define a template, you need to enter the template name (plain text) and content (raw HTML code). For this tutorial, we created three templates called “tables”, “cards” and “buttons”. The HTML code used in the templates was taken from the built-in Bootstrap components in our Moodle theme Maker (Maker is the theme used for the demo site)

If you are using our premium Moodle themes, there are lots of built-in Bootstrap components you can utilise to create your templates. You might find the tutorials below useful:

Maker Theme: Tutorial
Labland/Impression/Herald/Gourmet/Element Theme: Tutorial 1 | Tutorial 2

Step 3 – Add “Templates” to the Moodle text editor’s toolbar

After creating your templates, you also need to add the “templates” utility to the Moodle text editor’s toolbar so your users can access the templates.

Go to the text editor’s settings page to configure: Site administration>Plugins>Text editors>Atto HTML editor

Now your teachers should be able to access all of the available templates in the text editor by clicking the “templates” icon in the text editor:

Tip: When working with templates it’s very helpful to make the text editor go fullscreen so there is plenty of screen space for previewing and editing the inserted templates.

Learn more

Below are some screen captures to show you how to insert the templates to your desired course:

Add a label to a course so you can add content to the course:

Insert “Tables”:

Insert “Cards:

Insert “Buttons”

How to make your Moodle’s text editor go fullscreen

Posted on 21 April, 2018 by Admin

When creating course content in Moodle, it’s nice to have the option to make Moodle’s text editor go fullscreen so you have more screen space to work with the content. This is particularly useful when your content is long or needs to be presented in advanced layout format which contains tables/tabbed content/cards.

By default Moodle’s text editor Atto doesn’t come with the fullscreen functionality, however, there is a third-party plugin you can install to add this handy utility to your Moodle text editor so your teachers can use it to help with their course creation process.

In this tutorial we will show you how to install and add the utility to your Moodle text editor.

Step 1

Download the plugin zip file from Moodle’s plugins directory and upload the zip file to Moodle’s plugins page.

Go to the plugins page: Site administration > Plugins > Install plugins

Step 2

Once installed, you need to add the fullscreen utility to the Moodle text editor’s toolbar so it can be accessed by your users.

Go to the editor config page: Site administration > Plugins > Text editors > Atto HTML editor > Atto toolbar settings

Add “fullscreen” to the editor toolbar:

That’s it. Now you will see the fullscreen icon is available in your Moodle’s text editor and your users can click the icon to activate the editor fullscreen mode whenever they want to.

Moodle Theme Maker – How to customise the theme to use your brand’s colour scheme

Posted on 17 April, 2018 by Admin

In our latest Boost-based Moodle theme Maker, changing the default colour scheme to meet your own branding needs has never been easier. You just need to pick your brand colours in the theme settings page. It only takes seconds to bring the theme in line with your branding.

Theme Live Demo

Once you have installed the theme, log in as an admin and go to the “General Settings” section under the theme settings page: Site administration > Appearance > Themes > Maker

Enter your site’s main colour (hex code) in the “Brand primary colour” input field. If you have a secondary colour for your brand you can enter the colour code in the “Brand secondary colour” input field. If you don’t have a secondary colour then you just need to copy and paste your main colour’s hex code into the “Brand secondary colour” field to override the theme’s default.

Example 1

This is an example of using just one colour for the theme (#F88706)

Example 2

This is an example of using two colours for the theme (Primary colour: #0A23B7 | Secondary colour: #A123B7)

Don’t have a brand colour? We’ve got you covered. You can still choose from one of the six default colour schemes on Maker’s theme settings page. We hand-picked the colour combinations so they all look beautiful.

Selling online courses? – Learn how to set up paid Moodle courses with Stripe and PayPal payment gateways

Posted on 12 April, 2018 by Admin

Do you want to sell your courses online and take payment via Stripe or PayPal? Moodle could be the perfect learning platform for you to set up and manage your paid courses.

In this tutorial we will show you how to set up a paid Moodle course. You have the option to configure your course’s payment gateway using Stripe or PayPal.

Option 1: Set up a course with Stripe
Option 2: Set up a course with PayPal

Set up a course with Stripe enrolment

Step 1 – Install the Moodle Stripe Plugin

Download the Stripe plugin here and upload the downloaded zip file to your Moodle site via the Install plugins page: Site Administration > Plugins > Install plugins. You need to be a site admin to install and use the plugin.

Step 2 – Enable and configure the plugin

Once installed, go to the plugin management page to enable and set up the plugin: Site Administration > Plugins > Enrolments > Manage enrol plugins

You need to create an account with Stripe and get the required secret key and publishers key. Please note: you’ll need to verify and activate your Stripe account before you can get the live API keys.

For more information about setting up your Stripe account please see the plugin documentation.

Step 3 – Enable Stripe as the course enrolment method

Go to your desired course as an admin and add “Stripe Payment” as the enrolment method for that course and enable it by clicking the eye icon.

You can set the course price etc via the Stripe Payment settings page in that course.

Now you’ve successfully set up Stripe as the course payment gateway. When a new student visits the course he/she will be asked to make the payment before entering the course as shown in the screenshots below:

Set up a course with PayPal enrolment

Step 1 – Create and Configure PayPal Account

You need to create a PayPal account first. As a course seller it’s recommended to upgrade your account to “Premier” status and get your account “Verified”.

In your PayPal account please make sure the PayPal button language encoding is set to UTF-8.

You can optionally turn on IPN in PayPal to interact with your Moodle site:

For more info you can reference Moodle’s official documentation.

Step 2 – Enable the PayPal plugin in Moodle

The PayPal plugin comes with Moodle so there is no need to install it. You can just go to the enrolment plugin management page to enable it and configure its settings accordingly.

Please note: For PayPal to work you must make sure the Manual enrolment is enabled too.

Step 3 – Enable PayPal as the course enrolment method

Go to your desired course as an admin and add “PayPal” as the enrolment method for that course.

You can set the course price etc via the PayPal Payment settings page in that course.

Now you’ve successfully set up PayPal as the course payment gateway. When a new student visits the course he/she will be asked to make the payment before entering the course as shown in the screenshots below:

Want to promote your courses and sign up paid users?

Check out our latest responsive Moodle theme Maker (all of the screenshots in this tutorial were taken from Maker), it has everything you need to set up a beautiful and user friendly Moodle site to start selling your courses.

Moodle Theme Maker – How to add course thumbnail/header image and excerpt

Posted on 10 April, 2018 by Admin

In our latest Moodle theme Maker, it’s possible to display your course thumbnail image and course excerpt on the frontpage course list as shown in the figure below. You can also check out our theme demo here for an example. In this tutorial we will show you how to achieve this.

Update: Now you have the option to display the course thumbnail image as the course header image as well.

Step 1

Log into your Moodle site as a teacher and open your desired course. Go to the course settings page by clicking the “Editing settings” link in the dropdown menu as shown in the figure below:

Step 2 – Add Course Excerpt

On the settings page, enter your course description in the “Course Summary” input field. The content you enter there will be used as the course excerpt on the frontpage.

If the content you entered is more than 200 characters, Maker theme will automatically truncate the rest of the content and replace it with “….”

Step 3 – Add Course Thumbnail

Upload your course image to the “Course summary files” input field. For the best result in theme Maker, please make sure your thumbnail image size is: 880px x 560px.

Save your changes and go back to your site’s frontpage. You should see the course excerpt and thumbnail displayed for that course.

Maker – a Boost based Moodle Theme (Main Features)

Posted on 6 April, 2018 by Admin

We’re excited to introduce our premium Moodle theme, Maker. Built on Moodle’s core Boost theme, Maker takes full advantage of Moodle’s modern features to deliver a clean, responsive, and user-friendly experience. It’s fully compatible with Moodle 4.x and the latest Moodle 5.x, and comes packed with flexible configuration options to match your branding and will help make your Moodle site truly stand out.

Live Demo Theme Details

Below are some of the main features Maker offers:

1. Branding

You can upload your own logo image, select your branding colours and Google fonts. For advanced users, you can also add your custom CSS/SCSS to override the default theme styling.

2. Frontpage

There are 8 configurable theme sections you can use to design your Moodle’s frontpage. All of the sections can be turned on or off based on your needs.

Slideshow Section

In this section, you can add up to 10 slide images and a course search box. You can also add your site headline, summary, call-to-action button and a video link. If you want to make the slideshow section occupy less or more screen space you can adjust the height accordingly.

Benefits Section

In this section, you can add up to 6 blocks. This section is designed for you to list benefits/features you offer to your users to convince them why they should take your courses. There are 900+ Google material icons available for you to use.

Featured Section

This section is designed for you to promote your top courses/pages. You can add up to 12 blocks and customise the thumbnail image, title, content and link for each block. If you’d like to draw visitors’ attention to a particular course/page item you can add a label on top of the thumbnail image.

Promo Carousel Section

You can add up to 6 items in this section. It’s designed as a content marketing tool. If you have some promotional Youtube/Vimeo videos, this is the perfect place to add them.

Logos Section

You can use this section to display your users/awards/press mentions/partnerships etc. You can add up to 6 logo images. If you don’t want to use this section, you can simply turn it off.

Categories Section

You can enable this section to list up to 20 course categories. This section is a new feature in Maker theme for Moodle 3.8+. Learn more

Teachers Section

You can add up to 20 teachers or course instructors in this section. Although this section is designed for displaying teachers but you can also use it for other content.

Please note: this feature is only available in Maker theme for Moodle 3.6+.

Testimonial Section

You can use this section to add up to 6 testimonials. It’s a great way to add social proof to your site.

FAQ Section

You can use this section to address frequently asked questions about your courses, business or organisation. It’s a great way to earn users’ trust by providing extra info about your learning platform or business model. You can add up to 10 Q&A in this section. If you have more Q&A you can add them in a Moodle Static Page and provide a link from the frontpage FAQ section as shown on our demo.

Call-To-Action Section

This section is just above the site footer. You can use this section to further promote your site and persuade users to take actions.

You can also add a data box widget in Maker theme for Moodle 3.8+. Learn more

Course List

From Maker v2.1 (for Moodle 3.5) you can configure the frontpage course list layout. Learn more

3. Site Alert

You have an option to add a site alert to the frontpage. It’s located just above the slideshow section. This can be very useful when you need to announce something new to your visitors for a short period of time. You can change the alert background colour to suit your brand colour.

4. Header Dropdown Menu

You can add a mobile-friendly dropdown menu to the header top bar area. This feature is new in Maker theme for Moodle 3.8+. Learn more.

5. Login Page

You have the option to add a background image to the login page.

6. Social Media Links

You can choose to display your social media links on the site header and footer area. Maker has all of the major social media options built-in.

Available options:
Website, Twitter, Facebook, Google+, Linkedin, YouTube, Vimeo, Instagram, Pinterest, Flickr, Tumblr, SlideShare, Skype, Weibo, RSS Feed.

Want to display something not in the list above? You can add your custom links too:

7. Footer Area

In the footer area, you have the option to add 4 content blocks (read the tutorial), 1 footer widget area and your site copyright info.

8. Course Page

You have the option to display a course header image on the course page. Learn more

9. Course Design

You can easily add Bootstrap 4 UI components to enhance your Moodle course design. Read the tutorial

10. Google Analytics

You can monitor your site traffic by adding your Google Analytics ID.

Moodle Theme Maker – Useful HTML code for the footer content blocks

Posted on 4 April, 2018 by Admin

We have released a Boost based Moodle theme “Maker”. In this tutorial we will share the HTML code we used in our demo’s footer content blocks. If you are using Maker, you can easily take the code and edit the text and links for your site.

What the footer content blocks will look like:

How to add the code:

Step 1

Log into your Moodle site as an administrator and navigate to the theme settings page: Site administration > Appearances > Themes > Maker > Footer

Step 2

Activate the HTML code editor in the Moodle text editor as shown in the screenshot below:

HTML Code

Footer content block 1

<h4 class="footer-block-title">About Us</h4>
<ul class="footer-links list-unstyled">
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">Company</a></li>
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">Blog</a></li>
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">Teachers</a></li>
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">Press</a></li>
</ul>

Footer content block 2

<h4 class="footer-block-title">Learning</h4>
<ul class="footer-links list-unstyled">
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">e-Portal</a></li>
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">Reports</a></li>
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">Policies</a></li>
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">Terms</a></li>
</ul>

Footer content block 3

<h4 class="footer-block-title">Useful Links</h4>
<ul class="footer-links list-unstyled">
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">Contact</a></li>
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">FAQs</a></li>
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">Privacy Policy</a></li>
	<li class="link-item"><i class="fa fa-caret-right"></i><a href="#">Terms and Conditions</a></li>
</ul>

Footer content block 4

<h4 class="footer-block-title">Get in Touch</h4>
<div class="footer-contact-info">                  
    <p class="tel has-icon"><i class="fa fa-phone icon"></i>0800 123 4567</p>
    <p class="email has-icon"><i class="fa fa-envelope icon"></i><a href="mailto:support@website.com">support@website.com</a></p>
    <p class="adr has-icon">
        <i class="fa fa-map-marker icon"></i>        
        <span class="adr-group">       
            <span>College Green</span><br>
            <span>56 College Green Road</span><br>
            <span>BS16 AP18</span><br>
            <span>UK</span>
        </span>
    </p>  
</div>

Step 1 – Get the Youtube/Vimeo video embed code

Step 2 – Prepare the video code snippet for your Moodle course

Step 3 – Add the video code snippet to your Moodle course

Step 1 – Find the template files

Step 2 – Edit the template

Step 1 – Enable the feature at the site level

Step – 2 – Enable the feature at the course level

Step – 3 – Enable the feature at the course activity level

Step 1 – Install Plugin

Step 2 – Create Templates

Step 3 – Add “Templates” to the Moodle text editor’s toolbar

Add a label to a course so you can add content to the course:

Insert “Tables”:

Insert “Cards:

Insert “Buttons”

Step 1

Step 2

Example 1

Example 2

Set up a course with Stripe enrolment

Step 1 – Install the Moodle Stripe Plugin

Step 2 – Enable and configure the plugin

Step 3 – Enable Stripe as the course enrolment method

Set up a course with PayPal enrolment

Step 1 – Create and Configure PayPal Account

Step 2 – Enable the PayPal plugin in Moodle

Step 3 – Enable PayPal as the course enrolment method

Want to promote your courses and sign up paid users?

Step 1

Step 2 – Add Course Excerpt

Step 3 – Add Course Thumbnail

Step 1

Step 2

1. Add Facebook Login

2. Add Linkedin Login

3. Add Google Login

4. Add Microsoft Login

1. Branding

2. Frontpage

Slideshow Section

Benefits Section

Featured Section

Promo Carousel Section

Logos Section

Categories Section

Teachers Section

Testimonial Section

FAQ Section

Call-To-Action Section

Course List

3. Site Alert

4. Header Dropdown Menu

5. Login Page

6. Social Media Links

7. Footer Area

8. Course Page

9. Course Design

10. Google Analytics

What the footer content blocks will look like:

How to add the code:

Step 1

Step 2

HTML Code

Footer content block 1

Footer content block 2

Footer content block 3

Footer content block 4