How to sell bundled courses in Moodle

We’ve discussed how to sell individual courses in Moodle in our previous post. You can easily set up your paid courses in Moodle and get paid via PayPal or Stripe. But what if you’d like to offer your students bundled courses at a discounted price? Is it possible in Moodle? Although Moodle doesn’t have the out-of-the-box functionality for selling bundled courses, there is an easy method you can use to do that. In this tutorial we’d like to share the method you can use to sell bundled courses in Moodle.

Instead of selling bundled courses directly, what you could do is to sell an access code (known as course enrolment key in Moodle) for the bundled courses to your students. You can go into each course in your bundle and set up a universal enrolment key for them. Once your students paid for the course access and obtained the enrolment key for the bundle they can just enrol themselves into the individual courses in the bundle with the key (see the screencast below).

moodle-sell-bundled-courses-screencast

You can sell your bundle’s enrolment key outside of Moodle (eg. offline in a class, using a separate e-commerce platform) or inside of Moodle. To sell the enrolment key inside of Moodle, you can simply set up a paid course in Moodle which contains only the universal enrolment key for the courses and links to the individual courses in your bundle.

You can follow the steps below to set up the universal enrolment key for each paid course in your bundle. To learn how to set up a paid course in Moodle you can check out our post here.

Step 1 – Add Self Enrolment Method

Go to the desired course as an administrator. Clicking the “more” link under the course settings dropdown menu will take you to the Course administration page. You can then access the enrolment methods page by clicking the “Enrolment methods” link under the “Users” tab.

moodle-course-settings-dropdown-menu

moodle-course-settings-enrolment-methods

Add self enrolment method by clicking the “Self enrolment” link.

moodle-course-settings-add-self-enrolment-method

Step 3 – Add Course Enrolment Key

You can add a course enrolment key for the course and configure the related options according to your needs. Save your changes.

Step 4 – Repeat

Repeat the above two steps for each paid course in your bundle. Once an enrolment key is set up for the paid course a key icon will be displayed next to the payment method icon.

moodle-course-with-enrolment-key-view

Tip: If your Moodle theme allows you to add marketing blocks on the frontpage you can use one of the marketing blocks to promote and link to your bundle. Below is an example of how to promote your bundled courses using our premium Moodle theme Maker:

moodle-bundled-courses-promo-example-maker-theme

The best way to customise a Boost-based Moodle theme’s default styling

If you’re using a Boost-based Moodle theme and are wondering what is the best way to customise your theme this post is for you. Although lots of Moodle themes allow you to change the theme colour scheme via the theme settings page, there are times you’d like to fine tune the theme design to meet your organisation or client’s specific design requirements. Some of you who’re code-savvy may dive into the theme SCSS files and make changes directly to the original theme files. However, that is NOT recommended. Why? You may ask. That’s because you’ll lose all your customizations should you decide to update your Moodle theme in the future. Unless you’re 100% sure you won’t be updating your Moodle theme in the future or you don’t mind applying your customizations all over again to the new theme version, it’s best to leave all the original theme files untouched.

The best practice is to override your Moodle theme’s default styling via the theme settings page. This is because the customisation will be saved to the Moodle database, and won’t be overwritten when you update the theme files. For all Boost-based themes, you can enter your custom CSS/SCSS code into an input field called “Raw SCSS”. If you’re using one of our premium Moodle themes you can find the input field under the “Advanced Settings” section.

Edutor Theme

moodle-theme-edutor-advanced-settings-raw-scss

Maker Theme

moodle-theme-boost-raw-scss-settings

For example, say you want to change your theme’s base font size and link colour, you can use the CSS code as shown in the figure below. However, the code in the example can only change your theme’s body font size to 18px and the base link colour to red. You’ll probably need to write more targeted CSS code to change some specific elements’ font size or link colour. You can use Chrome DevTools to help you find the right element selector.

moodle theme customise css scss

Did you know you can use custom css/scss code to target specific Moodle courses?
Learn more here

How to add an external blog feed to your Moodle site

Did you know it’s possible to display an external blog feed on your Moodle site? Say your organisation already have a learning related WordPress blog wouldn’t it be great if you could promote your latest blog posts in your Moodle site? In this tutorial we’ll show you how to display your external blog feed on your Moodle site’s frontpage via Moodle’s Remote RSS Feed Block.

moodle-frontpage-blog-rss-feed-with-description

Step 1 – Enable RSS feeds on your Moodle site sitewide

Log into your Moodle site as an administrator and go to:
Site administration > Advanced features

moodle-site-admin-advanced-features

Enable RSS feeds

moodle-site-enable-rss-feed

Step 1 – Add your blog feed

Log into your Moodle site as an administrator and go to:
Site administration > Plugins > Blocks > Remote RSS feeds

moodle-site-admin-blocks-remote-rss-feeds

Add a new feed

moodle-site-add-a-new-feed

moodle-site-add-a-new-feed-settings

moodle-site-new-rss-feed-added

Step 3 – Add and configure your blog feed block

Add a “Remote RSS feeds” block to your Moodle’s frontpage. Don’t know how to add a block to your frontpage? Read our post here.

moodle-frontpage-add-rss-feeds-block

Configure the RSS block based on your needs. Remember to select your blog feed as highlighted in the figure below and save changes.

moodle-frontpage-rss-feeds-block-config-dropdown

moodle-configure-remote-rss-feed-select-feed

Below are screenshots showing you what your blog feed will look like with or without descriptions.

moodle-blog-feed-description-comparison

Moodle Theme Maker – New Frontpage Teachers Section

In the latest Maker theme, we’ve added a new Teachers section on the frontpage. You can use this section to showcase your course teachers or instructors. Maker theme allows you to add up to 10 teachers/instructors with their profile images, names and bio. Although this section is initially designed for showcasing people, there’s no reason why you can’t use this section for other promo content for your Moodle site. If you like the two cards layout, you can also use this section to promote your courses instead.

Frontpage view

moodle-theme-maker-teachers-section-preview

Maker theme settings view

moodle-maker-theme-teachers-section-admin-settings

Moodle Theme Maker – New Intranet Support Feature

In the latest version of our Moodle theme Maker, we’ve added an “intranet support” feature.

Who this feature is for:

By default Maker theme assumes that your Moodle site runs on the internet and requests resources like Google fonts and Google Material Design icons that are stored elsewhere on the internet. However, if your organisation needs to have your Moodle site running on an internal intranet network without any access to the outside internet, the new “intranet support” feature can be enabled to stop Moodle from requesting any resources from outside. If you enable the new feature, Maker theme will degrade gracefully to load the best available fonts on the user’s computer instead of from the online Google locations. Google material design icons will either be hidden or replaced by appropriate FontAwesome icons.

How to enable the feature:

To enable the intranet support feature, just go to Maker theme settings page: Site administration > Appearance > Themes > Maker Settings > Advanced Settings

On the bottom of the page, find the “Has Internet Connection” option and uncheck the checkbox. Save your changes.

moodle-theme-maker-no-internet-support

Now you can use our Maker theme safely on your intranet.

Please note: when this feature is enabled it disables Google fonts and Material Design icons so you won’t be able to use them inside the theme.

How to add/remove Moodle blocks on your frontpage

Using a Boost-based Moodle theme, you can add/remove Moodle blocks on your frontpage as well. In this tutorial we’ll show you how to do that.

The screenshots used in this tutorial are taken from Boost-based Moodle theme Maker.

Add a Block

Log into your Moodle site as an administrator and go to your site’s frontpage (site home). Turn editing on as shown in the screenshot below.

moodle-theme-maker-frontpage-turn-editing-on

Open Moodle’s navigation drawer and you should see the “Add a block” option listed as the last menu item.

moodle-theme-maker-frontpage-add-block-menu

Click “Add a block” and you can select your desired block from the popup window.

moodle-theme-maker-frontpage-add-blocks-popup

Remove a Block

To remove a block, you need to turn editing on first. Click the cog icon next to the block title and select the delete option.

moodle-theme-maker-remove-frontpage-block-1

moodle-theme-maker-remove-frontpage-block-2

moodle-theme-maker-remove-frontpage-block-3

How to add a global search box to your Moodle site

You may have noticed that some Moodle sites have a global search box displayed in the site header area. By default the global search box is not enabled in Moodle as it’s an advanced feature which you need to enable yourself. In this tutorial we’ll show you how to do that.

You can see how the search works on our Moodle theme demo site (you need to login as a student to see the search results):

moodle-global-search

To enable the global search on your Moodle site you simply need to follow the steps below:

Step 1

Log into your Moodle site as an administrator and go to:
Site administration > Plugins > Search > Manage global search

You can select your preferred search engine and configure the search settings there:

moodle-global-search-configure-search-engine

For more information about how to configure the Solr search engine you can check Moodle’s guide here.

Step 2

Go to: Site administration > Advanced features

Enable global search option by ticking the checkbox:

moodle-advanced-features
moodle-enable-global-search

That’s it. Now you should see a global search box being added to your Moodle site’s header area.

Moodle theme Material Boost – Useful HTML code for the footer content blocks

We have released a Moodle theme Material Boost. In this tutorial we will share the HTML code used in our demo site’s footer content blocks. If you are using Material Boost, you can use the code below as a base for your own content blocks.

What the footer content blocks will look like:

material-boost-footer-blocks

HTML code for footer content block 1

<h3 class="title">Footer Links</h3>
<ul class="list-unstyled">
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>About Us</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Moodle Themes</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>eLearning Blog</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Contact Us</a></li>
</ul>

HTML code for footer content block 2

<h3 class="title">Footer Links</h3>
<ul class="list-unstyled">
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>FAQs</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Terms</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Privacy</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Support</a></li>
</ul>

HTML code for footer content block 3

<h3 class="title">About Us</h3>
<p>Maecenas ac vehicula velit, nec facilisis elit. Phasellus non porttitor justo, eu bibendum elit. Maecenas pharetra non ligula quis ultricies. Nulla varius vestibulum ligula quis hendrerit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit aenean
    commodo ligula eget dolor. </p>
<p><a class="more" href="#" target="_blank">Learn more <i class="fa fa-long-arrow-right"></i></a></p>

Moodle theme Gourmet Boost – Useful HTML code for the footer content blocks

We have released a Moodle theme Gourmet Boost. In this tutorial we will share the HTML code used in our demo site’s footer content blocks. If you are using Gourmet Boost, you can use the code below as a base for your own content blocks.

What the footer content blocks will look like:

moodle-theme-gourmet-boost-footer-blocks

HTML code for footer content block 1


<h3 class="title">About Us</h3>
<ul class="list-unstyled">
    <li class="mb-2"><a href="#" target="_blank"><i class="fa fa-caret-right"></i>About Gourmet Boost</a></li>
    <li class="mb-2"><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Premium Moodle Themes</a></li>
    <li class="mb-2"><a href="#" target="_blank"><i class="fa fa-caret-right"></i>E-learning Blog</a></li>
    <li class="mb-2"><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Contact us</a></li>
</ul>

HTML code for footer content block 2

<h3 class="title">More info</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu nisl ut tortor imperdiet feugiat ut consequat diam. Praesent id lorem ante. Sed lobortis bibendum ante, in placerat justo rhoncus vitae. In eu imperdiet mi. Aliquam erat volutpat. Morbi molestie
    augue dui, vel dignissim mi rutrum et. Fusce convallis, nisl ut faucibus aliquet, elit ligula vestibulum est, in malesuada velit sem id risus.</p>

HTML code for footer content block 3

<h3 class="title">Get in touch</h3>
<div class="footer-contact">
    <div class="footer-address mb-2 clearfix">
        <i class="fa fa-map-marker d-inline-block float-left mr-2"></i>
        <div class="adr-group d-inline-block float-left">
            <div>College Green</div>
            <div>56 College Green Road</div>
            <div>BS1 AP18</div>
            <div>UK</div>
        </div>
    </div>
    <div class="mb-2"><i class="fa fa-phone mr-2"></i>0800 123 4567</div>
    <div><i class="fa fa-envelope mr-2"></i><a href="mailto:support@website.com">support@website.com</a></div>

</div>

Moodle theme Herald Boost – Useful HTML code for the footer content blocks

We have released a Moodle theme Herald Boost. In this tutorial we will share the HTML code used in our demo site’s footer content blocks. If you are using Herald Boost, you can use the code below as a base for your own content blocks.

What the footer content blocks will look like:

moodle-theme-herald-boost-footer-blocks

HTML code for footer content block 1


<h3 class="title">About us</h3>
<ul class="list-unstyled">
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Who we are</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Blog</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Moodle Themes</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Contact</a></li>
</ul>

HTML code for footer content block 2


<h3 class="title">Support</h3>
<ul class="list-unstyled">
    <li><a href="#"><i class="fa fa-caret-right"></i>Help</a></li>
    <li><a href="#"><i class="fa fa-caret-right"></i>FAQs</a></li>
    <li><a href="#"><i class="fa fa-caret-right"></i>Terms of services</a></li>
    <li><a href="#"><i class="fa fa-caret-right"></i>Privacy</a></li>
</ul>

HTML code for footer content block 3


<h3 class="title">Get in touch</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p class="tel"><i class="fa fa-phone"></i><a href="tel:08001234567">0800 123 4567</a></p>
<p class="email"><i class="fa fa-envelope-o"></i><a href="#">enquires@website.com</a></p>

<a href="https://twitter.com/moodle?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @moodle</a>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Tip: You can generate your own twitter follow button via https://publish.twitter.com/

Moodle theme Impression Boost – Useful HTML code for the footer content blocks

We have released a Moodle theme Impression Boost. In this tutorial we will share the HTML code used in our demo site’s footer content blocks. If you are using Impression Boost, you can use the code below as a base for your own content blocks.

What the footer content blocks will look like:

moodle-theme-impression-boost-footer-blocks

HTML code for footer content block 1

<h3 class="title">About Us</h3>
<p>Maecenas ac vehicula velit, nec facilisis elit. Phasellus non porttitor justo, eu bibendum elit. Maecenas pharetra non ligula quis ultricies. Nulla varius vestibulum ligula quis hendrerit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit aenean commodo ligula eget dolor. </p>
<p><a class="more" href="#" target="_blank">Learn more <i class="fa fa-long-arrow-right"></i></a></p>


HTML code for footer content block 2

<h3 class="title">Links</h3>
<ul class="list-unstyled">
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>About Impression</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Responsive Moodle Themes</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>eLearning Blog</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Contact Us</a></li>
</ul>

HTML code for footer content block 3

<h3 class="title">Get in touch</h3>
<div class="footer-contact">
    <div class="mb-2"><i class="fa fa-phone mr-2"></i>0800 123 4567</div>
    <div class="mb-2"><i class="fa fa-envelope mr-2"></i><a href="mailto:support@website.com">support@website.com</a></div>
    <div class="footer-address clearfix">
        <i class="fa fa-map-marker d-inline-block float-left mr-2"></i>
        <div class="adr-group d-inline-block float-left">
            <div>College Green</div>
            <div>56 College Green Road</div>
            <div>BS1 AP18</div>
            <div>UK</div>
        </div>
    </div>
</div>

How to change your Moodle theme’s favicon

A website favicon is the icon displayed in the address bar of a browser as shown in the figure below. Most of the Moodle themes use the Moodle logo as the default favicon. Want to use your own icon instead? In this post, we’ll show you how to do so.

Moodle Theme Favicon

Step 1 – Prepare your favicon

You can use a free online favicon generator such as https://favicon.io/ to export your own favicon. Once you have your exported icon file, you should rename the file to favicon.ico.

Step 2 – Replace the favicon in your Moodle theme

Find a folder called “pix” under your Moodle theme folder:

Your Moodle Installation > theme > your moodle theme > pix > favicon.ico

Replace the favicon.ico with your new one.

That’s it. Remember to purge your Moodle theme cache, clear browser cache and hard refresh your browser to see the changes.