How To Remove The Get The Mobile App Link From Your Moodle Site

Posted on 21 September, 2022 by Admin

By default, Moodle shows a “Get the mobile app” link to site visitors and it points to Moodle’s official app downloading page. Our premium Moodle themes place the link in the site footer area. Moodle’s default theme Boost places the link in the information popover (from Moodle 4.x).

Moodle 4.x theme Edutor

The “Get the mobile app” link is displayed in the footer area.

Moodle 4.x theme Boost

The “Get the mobile app” link is displayed in the information popover.

Remove Link

Don’t want to display the link on your Moodle site? You can remove the link via Moodle’s settings page.

Go to: Site administration > General > Mobile app > Mobile appearance

Find the “App download page” text input field at the end of the page. Remove the link in the field and save changes.

How To Remove The Data Retention Summary Link From Your Moodle Site

Posted on 20 September, 2022 by Admin

By default, Moodle 4.x will show a “Data Retention Summary” link to site visitors. Different themes may show the link in different places. All of our premium Moodle 4.x themes show the link in the footer area. If you don’t want to display the link to your site visitors you can easily remove it via Moodle’s privacy settings page.

Moodle 4.x theme Edutor

The Data Retention Summary link is displayed in the footer area.

Moodle 4.x theme Boost

The Data Retention Summary link is displayed in the popover.

To remove the link you need to go to the Privacy settings page and untick the “Show data retention summary” checkbox and save changes.

Path to the settings page: Site administration > Users > Privacy and Policies > Privacy settings

Moodle Theme Edutor – How To Reorder The Frontpage Theme Sections

Posted on 13 September, 2022 by Admin

Our latest Moodle theme Edutor comes with ten professionally designed sections you can add to your site’s front page. All of the sections can be easily configured and customised to meet the marketing and branding needs of any corporate training and higher education LMS sites.

The sections are as shown in the list below (from top of the page to bottom of the page). The order of the sections are predetermined by the theme. If you want to change the order of the sections you will need to be comfortable making code changes to one of the theme template files. Also it’s important to keep note of the changes and re-apply them after upgrading the theme.

Below are the steps you need to take to make code changes to reorder the sections.

Step 1 – Find the template file

Go to the theme folder and find the template file controlling the layout of the front page: edutor > templates > frontpage.mustache

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.

Hero Section

{{!-- fp_hero (theme class function) -- }}
{{{ output.fp_hero }}}

Logos Section

{{!-- fp_logos (theme class function) --}}
{{{ output.fp_logos }}}

Search Section

{{!-- fp_search (theme class function) --}}
{{{ output.fp_search }}}

Featured Section

{{!-- fp_featuredblocks (theme class function) --}}
{{{ output.fp_featured }}}

Categories Section

{{!-- fp_categories (theme class function) --}}
{{{ output.fp_categories }}}

Call-To-Action Section

{{!-- fp_ctasection (theme class function) --}}
{{{ output.fp_ctasection }}}

FAQ Section

{{!-- fp_faq (theme class function) --}}
{{{ output.fp_faq }}}

{{!-- fp_promo (theme class function) --}}
{{{ output.fp_promo }}}

Teachers Section

{{!-- fp_teachers (theme class function) --}}
{{{ output.fp_teachers }}}

Testimonials Section

{{!-- fp_testimonials (theme class function) --}}
{{{ output.fp_testimonials }}}

For example, say you want to display the Featured Section below the Hero Section and above the Logos Section, you can edit the file frontpage.mustache and move the Featured section snippet in the template file as shown in the screencast below:

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

Advanced

By default, all of the theme sections are positioned above Moodle’s main content area (eg. Available Courses, News, Forum etc). Want to move some of the theme sections below the main content area? You can move the relevant theme section code snippets below code
{{{ output.standard_after_main_region_html }}}

The screencast below shows you how to move the Teachers Section and the Testimonials Section below Moodle’s main content area.

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 Theme Edutor – How To Configure And Customise The Frontpage Categories Section

Posted on 9 September, 2022 by Admin

Moodle 4.0 allows site admin to group courses into categories. A typical Moodle course category’s URL uses the following format:

https://yourmoodlesite.com/course/index.php?categoryid=1 (the number at the end of the URL corresponds to the course category’s id)

In our latest premium Moodle theme Edutor, there is a frontpage categories section where the site admin can add and configure up to 20 category blocks and link them to the existing course categories. It’s the perfect section to showcase and provide quick links to your top course categories.

To configure the section you need to go to: Site administration > Appearance > Themes > Edutor > Frontpage Categories

Basic Settings

You can add a section title and a call-to-action button at the end of the section.

Category Blocks

You have the option to add up to 20 blocks. Each block contains a name, description, an image and a link.

By default, Edutor theme displays up to five category blocks per row on large screen devices (eg. desktop/laptop) but you have the option to display 3, 4, or 6 blocks per row via the theme settings below:

Six blocks per row

Five blocks per row

Four blocks per row (with descriptions)

Three blocks per row (with descriptions)

Free Icon Images

Below are some useful sites where you can download free icon images:

https://fontawesome.com/icons

https://icons.getbootstrap.com/

https://thenounproject.com/icons/

https://www.streamlinehq.com/freebies

Moodle 4.0.x Theme Edutor – New Settings To Make The Featured Section Slider Respond To Different Screen Sizes

Posted on 8 September, 2022 by Admin

Edutor is our latest premium Moodle theme developed and designed for corporate training and university learning sites. In release v1.3 we added new theme settings for site admin to fine tune the display of the Front Page Featured Section slider. Prior to Edutor v1.3, the number of visible pane blocks in the sliders were dictated by the theme. From Edutor v1.3, site admin will be able to configure how many pane blocks are visible based on different screen sizes.

You can find the new settings here: Site administration > Appearance > Themes > Edutor > Frontpage Featured Section General

Site admin will be able to make the display of the visible pane blocks respond to different user devices. Also the maximum number of blocks visible to users on large devices (screen size 1200px and up) can be set to 6 instead of 5 (default).

Below are some visual examples to show the display options on a mobile phone (portrait view) and a larger desktop/laptop.

X-Small devices (portrait phones, less than 576px)

XX-Large devices (larger desktops, 1400px and up)

Moodle Theme Edutor – How To Configure And Customise The Frontpage Call-To-Action Section

Posted on 30 June, 2022 by Admin

In our latest Moodle 4.x theme Edutor you have the option to add a CTA (Call-To-Action) section to the frontpage. You can use this section to promote your courses by backing them up with stats and benefits to the learners. In this tutorial we will show you how to configure and customise the section to look like our demo site.

To configure the section you need to go to: Site administration > Appearance > Themes > Edutor > Frontpage CTA Section

General Settings

You can add a section heading, content and imagery.

Data Boxes Settings

You can add up to 4 data boxes (optional) to show some stats to your site visitors.

Benefit Boxes

You can list up to 6 benefits to explain how your courses can benefit learners and why they should choose learning with your organisation.

You can create and upload your own icon images instead of using the default Google Material Design icons.

Design Customisations

You can change the default section background colour using the colour picker or entering a colour hex code.

Want to use an image with a transparent background similar to our demo? Just find a free stock image on PixaBay and Unsplash and use PhotoRoom to remove the background. Make sure you select the “transparent” background option before downloading.

Want to add some design element to the image? We have created a Photoshop template (included in the theme zip file) you can use to create eye-catching imagery. Just drop your desired stock image to the PSD template and you’re good to go.

Moodle Theme Edutor – How To Configure And Customise The Frontpage FAQ Section

Posted on 29 June, 2022 by Admin

Adding a FAQ (Frequently Asked Questions) section to your Moodle site’s landing page is a great way to provide useful information to visitors about your organisation and courses. A well-written FAQ section can also bring new traffic to your training site and build trust. Our latest Moodle 4.x theme Edutor is perfect for building your corporate training site and you have the option to add a customisable FAQ section on the frontpage.

In this tutorial we will walk you through the section settings and teach you how to create professional imagery to make your Moodle site stand out.

Section Settings

To configure the FAQ section, go to: Site administration > Appearance > Themes > Edutor > Frontpage FAQ

Add Q&As

You can add up to 10 Q&As. If you have a dedicated FAQ page you can use this section to list your top Q&As and then link the section to a dedicated FAQ page.

Design Customisations

You can change the section background colour and upload an image to the section.

You can find free high-quality stock images on PixaBay and Unsplash to use in the section. We have included a Photoshop design template in the Edutor theme zip file you can use to create well-designed images as shown below.

FAQ Section Photoshop Design Template

Design Example One

Similar to the figure used on our theme demo this example uses an image with a transparent background.

PhotoRoom is a free online image editing tool you can use to create PNG images with transparent backgrounds.

Design Example Two

Using our Photoshop design template you can create a visually impactful FAQ section.

Design Example Three

Moodle Theme Edutor – How To Use The Hero Section To Captivate Learners

Posted on 17 May, 2022 by Admin

Our brand new Moodle Theme Edutor is specifically designed for corporate training and university online learning. It has a modern design and the overall look and feel is highly customisable. It can quickly transform a functional Moodle 4.x site into a professionally designed training and learning platform.

First impressions matter and a great first impression is vital to an online training/learning site. Configuring Edutor theme’s hero section with the right hero images and copy can empower your site to make a visual impact to captivate your target audience.

In this tutorial we will show you how to configure Edutor’s hero section for a corporate training site. The hero images we used here are different from the ones we used on our theme demo site. You can see that it’s very easy to customise the section to reflect your organisations’ branding and identity.

Hero Image Previews

Slide One Example

Slide Two Example

To configure the section you need to log in as a site admin and go to the theme settings page: Site administration > Appearance > Themes > Edutor > Frontpage Hero Section

General Settings

You can configure the general settings of the section in the first part of the page. You have the option to display your organisation’s logo above the hero slideshow content area to emphasise your branding identity. You can also add a video play button to play a promo video (YouTube or Vimeo) in a modal window.

Hero Slideshow Settings

You can add up to 6 hero slides and each slide can hold a hero image, content, and a Call-To-Action button.

We highly recommend you resize your hero image’s width to be around 1600px for optimised display. To reduce site loading time it’s also a good idea to compress your hero images before uploading to the section. There’re free online sites you can use to compress images for web (eg. iloveimg.com and tinypng.com).

Add Slide 1

As you can see in the screencast below, the colour of the CTA button is customisable. You can change its default colour to work with your hero image.

In our example, we set the slide 1 CTA button’s background colour to be #e51470 which echos with the uploaded hero image’s accent colour.

Tip: you can add HTML code in the slide heading field to create desired line break as shown in the screencast below.

Add Slide 2

Comparing slide 2 with slide 1 you can see that different hero images can give your site different looks.

Photoshop Template

Want to create impactful hero images similar to the ones we used in our live demo and this tutorial? You can get the original Photoshop design template in the theme zip file.

You can change the colours and replace the stock images to suit your branding and make your site truly bespoke!

To get FREE stock images for using on your site you can try unsplash.com and picjumbo.com

We will be adding more hero image designs to the Edutor theme so keep your eyes peeled!

How To Generate Course Certificates In Moodle 4.x

Posted on 15 May, 2022 by Admin

Are you running a training course on Moodle? Do you want to issue digital course certificates to students for completing your course or for simply participating? In this tutorial we will show you how to dynamically generate a PDF certificate right inside of a Moodle course.

All the screenshots and screencasts in this tutorial were taken from our Moodle 4.x demo site and you can view the example certificates by logging into the demo site as a student.

Live Demo

Certificate Images Download:

You can download the certificate background images we used in the example below:

Free Download (12751 downloads)

Step 1

Download Moodle’s free plugin “Custom Certificate”. To install the plugin from the downloaded zip file, you need to log in to your Moodle site as a site admin and go to the “Install Plugin” page: Site administration > Plugins > Install Plugins.

Alternatively, you can ask your IT support to upload the uncompressed plugin folder “customcert” to the site server. The correct path on the server is: Your Moodle site > mod > customcert

Step 2

Go to your desired Moodle course and add a “Custom Certificate” activity as shown in the screencast below.

Step 3

After adding the certificate click the “Save and display” button. Now you can start customising your certificate by clicking the “Edit Certificate” tab in the tabbed course nav bar.

You need to set the width and height of the certificate. If you’re going to use a background for the certificate design, you need to make sure the aspect ratio of the width and height value is the same as your background image’s ratio. Otherwise your background image will look distorted. To work with the certificate background images we want to use, we set the width as 200mm and height as 140mm in the settings page (see figure below).

Step 4

Now you can start designing and customising your certificate by adding static and dynamic elements (eg. background image, student name, course name, text etc).

List of elements you can add to the certificate:

After adding the elements:

Note: You should add a background image first so other elements are layered on top of it.

Add background image:

Note: you must upload an image first, save it then go back to select the uploaded image in the “Image” dropdown menu as shown below.

Add student name (dynamic value):

Add text (static):

Add image:

Change design:

You can change the design of the added elements in the “Reposition elements” page as shown in the screencast below.

Step 5

Click the “Save and preview” button to save your changes and preview the generated PDF certificate.

Once you’re happy about the certificate design you can then go back to the activity settings page and configure “Restrict access” so you can issue students certificates based on certain criteria.

Certificate restrictions:

If you want Moodle to email your students copies of their available certificates automatically, please make sure you only set the email settings to “Yes” after you have completed creating the certificate in Step 4. Otherwise your students might receive incomplete certificates.

Certificate email example:

Certificate Global Settings

You can find all of the global settings for the Custom Certificate module under the Plugins tab: Site administration > Plugins > Activity modules > Custom certificate settings

Site admin can create global certificate templates and upload certificate design images so course teachers can access them to speed up the certificate creation process.

Want to learn more about “Custom Certificate” and explore all the possibilities you can implement? You can find detailed plugin documentation here.

How To Add A Responsive Custom Menu In Moodle 4.x

Posted on 11 May, 2022 by Admin

Moodle 4.x is finally here. It has a brand new look and contains lots of sought-after UX features and improvements. Now you can add a responsive custom menu which stays in the header area for desktop and mobile devices. In Moodle 3.x the custom menu is not responsive and Moodle displays all the menu items in the footer area as a flat list (in mobile view).

Custom Menu In Moodle 4.x

The screencast below was taken from our Moodle 4.x demo using the Edutor theme. As the screen viewport decreases in size, the custom menu will generate a “More” dropdown menu to hold all the menu items which are not able to fit in the space. When in mobile view, Moodle 4.x uses the mobile menu to hold all the custom menu items.

Add A Custom Menu

To add a custom menu you need to go to the “Theme settings” page: Site administration > Appearance > Themes > Theme settings

On the “Theme settings” page you can enter your menu items in the “Custom menu items” field.

If you want the menu item to open in a new browser window you can add "target="_blank at the end of the URL.

Useful Moodle Links

You can also add page links inside of your Moodle site. Below is a list of useful URLs for some popular Moodle pages:

All Courses | /course
Course Category (ID:1) | /course/index.php?categoryid=1
Blog | /blog/
Contact support | /user/contactsitesupport.php

All Courses

Course Category

Blog

Contact Support

Moodle Theme Edutor – How To Configure And Customise The Frontpage Featured Section

Posted on 10 May, 2022 by Admin

Our latest Moodle Theme Edutor is a super modern and on-trend premium theme for sites running Moodle 4.0+. Packed with highly customisable theme settings, it’s the perfect design solution for transforming your plain Moodle LMS into a top-notch professional learning portal. Designed with higher education and corporate training sites in mind, it offers many theme options for site administrators to create front page marketing sections to promote featured courses and site content.

Among all the other configurable sections, the “Frontpage Featured Section” is specifically designed to showcase your featured courses. It combines an intuitive tabbed structure with beautiful responsive carousel sliders which enables you to promote your courses by category.

Frontpage Featured Section:

You can add up to 6 tabbed panes and each pane allows you to add an optional content area and a responsive carousel slider with up to 10 blocks.

For the tab icons, you can choose from Bootstrap Icons (1600+) or Moodle’s default Font Awesome Icons (v4).

Each carousel block can contain a title, an image, a description, a label, a text area for displaying price and a link for pointing to a course.

From Edutor v1.3 you can make the pane blocks respond to different screen sizes. Find out more here.

You can also fine tune the colours related to the carousel blocks and the nav tabs via the Featured Section General Settings.

For demonstration purposes, we will apply the colours of two well-known universities to the section to show you the customisation possibilities.

Example One

We configure the section to have the brown and orange colours taken from The University of Texas at Austin’s website.

University website screenshot:

Custom Featured Section (two design possibilities):

Example Two

We configure the section to have the dark blue and mustard yellow colours taken from Berkeley’s website.

University website screenshot:

Custom Featured Section (two design possibilities):

Moodle 4.x Theme Edutor – How To Install And Activate The Theme

Posted on 3 May, 2022 by Admin

Edutor is our latest premium Moodle 4.x theme designed for higher education and corporate training sites. You can follow the steps below to install the theme.

Before installing the theme please make sure your site is running Moodle 4.0+. If you’re still using Moodle 3.x you need to upgrade your Moodle site first.

Step 1

After purchasing you will receive an email containing a download link to the theme zip file. Download the zip file to your computer and then unzip.

You should see two folders and a readme file as shown in the figure below. The “edutor” folder is the actual theme folder. The other folder “edutor-theme-demo-psd” contains useful Photoshop design templates for creating our demo images.

Zip File Content:

Photoshop PSD files

Hero slideshow images:

Promo images:

Teacher profile image:

Step 2

Upload the “edutor” folder to your server via a FTP program. Make sure you upload the “edutor” folder under your Moodle site’s theme folder. The correct path is: Your Moodle site > theme > edutor

FileZilla is a free FTP program for PC and Mac – https://filezilla-project.org

Step 3

Log into your Moodle site and go to the “Theme Selector” page: Site administration > Appearance > Themes > Theme Selector

Click the “Change theme” button next to the default Moodle theme and select the “Edutor” theme in the next page to activate the theme.

To configure the Edutor theme you can head to the theme settings pages (figure below).

Moodle 4.x theme Edutor

Moodle 4.x theme Boost

Remove Link

Moodle 4.x theme Edutor

Moodle 4.x theme Boost

Edutor Frontpage Sections

Step 1 – Find the template file

Step 2 – Edit the template

Hero Section

Logos Section

Search Section

Featured Section

Categories Section

Call-To-Action Section

FAQ Section

Promo Section

Teachers Section

Testimonials Section

Advanced

Basic Settings

Category Blocks

Six blocks per row

Five blocks per row

Four blocks per row (with descriptions)

Three blocks per row (with descriptions)

Free Icon Images

X-Small devices (portrait phones, less than 576px)

XX-Large devices (larger desktops, 1400px and up)

General Settings

Data Boxes Settings

Benefit Boxes

Design Customisations

Section Settings

Add Q&As

Design Customisations

Design Example One

Design Example Two

Design Example Three

Hero Image Previews

Slide One Example

Slide Two Example

General Settings

Hero Slideshow Settings

Add Slide 1

Add Slide 2

Photoshop Template

Step 1

Step 2

Step 3

Step 4

List of elements you can add to the certificate:

After adding the elements:

Add background image:

Add student name (dynamic value):

Add text (static):

Add image:

Change design:

Step 5

Certificate restrictions:

Certificate email example:

Certificate Global Settings

Custom Menu In Moodle 4.x

Add A Custom Menu

Useful Moodle Links

Example One

Example Two

Step 1

Zip File Content:

Photoshop PSD files

Step 2

Step 3