How to Hide The Tabbed Secondary Menu From Students In A Specific Moodle 4.x Course

Moodle 4.x introduced a new secondary navigation system which is located in the course header area right under the course name. The navigation menu items are presented in a tabbed horizontal menu bar and Moodle shows different menu items to different users.

In a typical Moodle course, students see four tabbed menu items: “Course”, “Participants”, “Grade” and “Competencies” as shown in the figure below.

How to Hide The Tabbed Secondary Menu From Students In A Specific Moodle 4.x Course-1

In the same course, the course teacher or admin sees many more tabbed menu items in the menu bar. For example “Settings” which links to the page for the teacher to configure the course general settings.

How to Hide The Tabbed Secondary Menu From Students In A Specific Moodle 4.x Course-2

Why hide the course’s secondary menu from students?

The secondary navigation system is a new feature in Moodle 4.x and it provides an intuitive way for users to quickly access course related sub pages. However, if you are using your Moodle course page in an unconventional way you might consider hiding the menu from your students to avoid confusion and distraction. In the example below we will show you a real-world use case and our solution to hide the menu.

Use Case Background:

A customer who is using our Moodle 4.x theme Edutor contacted us about hiding the course secondary menu from their students on specific Moodle courses. The customer sent us their course screenshot (see below) and explained the reasoning behind it.

Use Case Reasoning:

“The reason for this is that we have a few static courses that act as information hubs, so this menu bar is unnecessary and might confuse students. However, we’d like to keep the bar for all of our usual courses.”

How to Hide The Tabbed Secondary Menu From Students In A Specific Moodle 4.x Course-4

Want to borrow this customer’s idea and create similar-looking Moodle courses? Check out Moodle’s course format “Tiles”.

Solution:

Since the course’s secondary menu can not be “turned off” via Moodle’s settings, the only workaround is to hide the menu via targeted custom css/scss code. If you’re using Boost or one of our Boost-based Moodle themes you can follow the steps below to create your custom code to hide the menu in targeted courses.

Step 1 – Get Course ID

First of all, you need to get the ID for the targeted course. The easiest way to find out the course ID is to visit the course page and check the page URL in your browser’s address bar.

A typical course URL should look like this: https://yourmoodlesite.com/course/view.php?id=1 and the course ID is the number following id=

Here is a course on our theme demo site and the course ID is 9 https://elearning.3rdwavemedia.com/moodle/edutor/1/course/view.php?id=9

Step 2 – Add Custom CSS Code

If you’re using one of our Moodle themes you can go to: Site administrator > Appearance > Themes > Edutor (replace with your theme name) > Advanced Settings

Enter your custom css/scss code in the Raw SCSS input field as shown in the figure below. The code example in the screenshot assumes the target course’s ID is 9. If your target course ID is 1 or 5 you need to replace .course-9 to .course-1 or .course-5 in the css code.

How to Hide The Tabbed Secondary Menu From Students In A Specific Moodle 4.x Course-3

The code below hides the course secondary menu in the target course (course ID:9) for students:

.course-9 .secondarynavigation {
    display: none; 
}

The code below shows the course secondary menu in the target course (course ID:9) for the course teacher or admin when editing is turned on.

.course-9.editing .secondarynavigation {
    display: block; 
}

Outcome

Now your students won’t see the secondary menu in the targeted course but the course teacher or admin can still see and access the secondary menu when Editing is on.

Top 3 Free Course Format Plugins For Your Moodle 4.x Site

Looking for an alternative course layout to enhance your course design? You can download free Moodle course formats from Moodle’s official plugin directory. In this post we have handpicked the best plugins you can use to make your course look more structured and student-friendly. All of our premium Moodle themes are compatible with the plugins and the screenshots from this tutorial were taken from our Moodle theme Edutor’s demo here.

1) Tiles Format

Tiles format lets you organise each Moodle course section into a tile-like card. This format is great for courses with a “modular” structure. When your students land on the course page they can clearly see an overview of the course modules at a glance. Students can easily find the module they’d like to take by clicking the relevant tile.

Course Demo (Tiles Format)

Top 3 Free Course Format Plugins For Your Moodle 4.x Site tiles format-1

You have the option to add an icon or a background image to each tile to make them more visual to the students.

Top 3 Free Course Format Plugins For Your Moodle 4.x Site tiles format-1

You can easily fine tune the tile’s design via the course settings page.

Top 3 Free Course Format Plugins For Your Moodle 4.x Site tiles format-settings

2) Grid Format

Grid format is similar to the tiles format and it displays the Moodle course sections in a card view. Prior to Moodle 4.0, clicking the section card will open the section content in a modal window. However, from Moodle 4x the section content will be opened in a separate page.

Course Demo (Grid Format)

Top 3 Free Course Format Plugins For Your Moodle 4.x Site grid format-1

You have the option to upload a background image for each card and adjust the card width and aspect ratio via the course settings.

Top 3 Free Course Format Plugins For Your Moodle 4.x Site grid format-1

Top 3 Free Course Format Plugins For Your Moodle 4.x Site grid format-settings

3) Collapsed Topics

Collapsed topics format displays the Moodle course sections in a collapsible accordion. Students can click the section title to expand/collapse the section content.

Course Demo (Collapsed Topics Format)

Top 3 Free Course Format Plugins For Your Moodle 4.x Site collapsed topics format-1

This plugin comes with many options for you to customise the look and feel of the accordion to work with your site’s colour scheme.

Top 3 Free Course Format Plugins For Your Moodle 4.x Site collapsed topics format-settings

How To Upgrade Premium Moodle Themes

Moodle LMS is evolving constantly with improvements and new features. We update our premium Moodle themes on a regular basis to add new features, design improvements and bug fixes. If you’re using one of our premium Moodle themes, you can follow the steps in this post to upgrade your theme without encountering any issues caused by Moodle’s caching.

“Do I need to reconfigure my Moodle theme from scratch after upgrading? Will I lose my theme configurations after upgrading?” These are the most asked questions by our theme customers. The good news is the answer is NO. All of the settings you configured via the theme settings are saved safely in your site’s database and upgrading the theme won’t affect the theme settings and you won’t need to reconfigure anything.

Please Note: if you ever made changes to the actual theme files, the changes will be lost after upgrading the theme and you will need to re-apply them. It’s recommended that you keep a note of all the file changes before upgrading so you can re-apply them after upgrading. Learn the best way to customise a Moodle theme.

Step 1

Turn on Maintenance mode and switch your Moodle site’s theme to the default theme Boost.

How To Upgrade Premium Moodle Themes-1

Step 2

Delete the old theme folder from your server completely.

Step 3

Check your Moodle site’s version and make sure the theme you’re about to upload to your server is compatible with your Moodle. If not, you need to upgrade your Moodle site correctly first.

Purge Moodle cache: Administration > Site administration > Development > Purge all caches

Step 4

Download the theme zip file. Unzip locally and find the actual theme folder – this is the folder you need to upload to your server later.

Moodle Premium Theme Edutor

moodle-theme-edutor-folder-structure

Moodle Premium Theme Maker

moodle-theme-maker-folder-structure

Upload the theme folder to your server under moodle/theme. Make sure you upload all of the files.

Step 5

Your Moodle site should prompt you to upgrade your theme – follow the onscreen instructions to upgrade.

Tip: if you don’t see the upgrade prompt you can head to the notification page to manually trigger the upgrade process – https://yourmoodlesite.com/admin/index.php

Step 6

Switch your site’s theme from Boost to the upgraded theme. Check everything is okay before turning off Maintenance mode.

How To Hide Course Teacher(s) From Moodle Course Description

By default, Moodle shows course teacher(s) in the course description area right under the course summary. If you don’t want to display the teacher(s) in the course description area you can easily hide the information via Moodle’s settings page.

Moodle Theme Edutor

how-to-hide-teachers-from-moodle-course-description-edutor-theme-example

Moodle Theme Boost

how-to-hide-teachers-from-moodle-course-description-boost-theme-example

Hide Teacher(s) From Course Description

Go to: Site administration > Appearance > Courses

Find the Course contacts option and untick the “Teacher” checkbox as shown in the screencast below.

how-to-hide-teachers-from-moodle-course-description-edutor-theme-screencast

Save your changes and go back to view the course description area and you won’t see the teacher(s) below the course summary.

On the other hand, the “Course contacts” option allows you to display many other roles (eg. Course creator, students) in the course description area should you wish to do so. Below is an example of what your course description area will look like if you decided to show other roles alongside the teacher(s).

Moodle Theme Edutor

how-to-hide-teachers-from-moodle-course-description-edutor-theme-2

Moodle Theme Boost

how-to-hide-teachers-from-moodle-course-description-Boost-theme-2

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

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.

how-to-remove-get-the-mobile-app-link-in-moodle-4.0-edutor-theme

Moodle 4.x theme Boost

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

how-to-remove-get-the-mobile-app-link-in-moodle-4.0-boost-theme

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-get-the-mobile-app-link-in-moodle-4.0-edutor-theme-settings

how-to-remove-get-the-mobile-app-link-in-moodle-4.0

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

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.

how-to-remove-data-retention-summary-link-in-moodle-4.0-edutor-theme

Moodle 4.x theme Boost

The Data Retention Summary link is displayed in the popover.

how-to-remove-data-retention-summary-link-in-moodle-4.0-boost-theme

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

how-to-remove-data-retention-summary-link-in-moodle-4.0-edutor-theme

Moodle Theme Edutor – How To Reorder The Frontpage Theme Sections

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.

Edutor Frontpage Sections

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

moodle-edutor-theme-frontpage-section-1

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

Logos Section

moodle-edutor-theme-frontpage-section-2

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

Search Section

moodle-edutor-theme-frontpage-section-3

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

moodle-edutor-theme-frontpage-section-4

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

Categories Section

moodle-edutor-theme-frontpage-section-5

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

Call-To-Action Section

moodle-edutor-theme-frontpage-section-6

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

FAQ Section

moodle-edutor-theme-frontpage-section-7

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

Promo Section

moodle-edutor-theme-frontpage-section-8

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

Teachers Section

moodle-edutor-theme-frontpage-section-9

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

Testimonials Section

moodle-edutor-theme-frontpage-section-10

{{!-- 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:

moodle-theme-edutor-how-to-reorder-frontpage-sections-example-gif

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

moodle-theme-edutor-how-to-reorder-frontpage-sections-example

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.

moodle-theme-edutor-how-to-reorder-frontpage-sections-example-advanced

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

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.

moodle-theme-edutor-configure-frontpage-categories-view

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.

moodle-theme-edutor-configure-frontpage-categories-settings-1

moodle-theme-edutor-configure-frontpage-categories-settings-2

Category Blocks

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

moodle-theme-edutor-configure-frontpage-categories-settings-3

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:

moodle-theme-edutor-configure-frontpage-categories-settings-5

Six blocks per row

moodle-theme-edutor-configure-frontpage-categories-display-1

Five blocks per row

moodle-theme-edutor-configure-frontpage-categories-display-2

Four blocks per row (with descriptions)

moodle-theme-edutor-configure-frontpage-categories-display-3

Three blocks per row (with descriptions)

moodle-theme-edutor-configure-frontpage-categories-section-image-icons

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

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.

moodle-theme-edutor-featured-section-slider

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

moodle-theme-edutor-featured-section-slider-settings

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)

moodle-theme-edutor-featured-section-slider-mobile-view

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

moodle-theme-edutor-featured-section-responsive-option

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

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.

moodle-theme-edutor-cta-section-demo-view

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.

moodle-theme-edutor-cta-section-settings-1

Data Boxes Settings

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

moodle-theme-edutor-cta-section-settings-2

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.

moodle-theme-edutor-cta-section-settings-3

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

moodle-theme-edutor-cta-section-benefit-use-image

Design Customisations

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

moodle-theme-edutor-cta-section-change-bg-color

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.

moodle-theme-edutor-cta-section-image-remove-background

moodle-theme-edutor-cta-section-design-1

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-cta-section-psd

moodle-theme-edutor-cta-section-design-2

moodle-theme-edutor-cta-section-design-5

moodle-theme-edutor-cta-section-design-3

moodle-theme-edutor-cta-section-design-6

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

moodle-theme-edutor-faq-section-demo-view

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

moodle-theme-faq-section-settings-screencast

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.

moodle-theme-faq-section-settings-add-questions

Design Customisations

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

moodle-theme-edutor-faq-section-settings-change-color-upload-image

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

moodle-theme-edutor-faq-section-photoshop-design-template

Design Example One

moodle-edutor-theme-faq-section-example-images

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.

photoroom-remove-bg-moodle-theme

moodle-theme-edutor-faq-section-photoshop-template-2

Design Example Two

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

moodle-theme-edutor-faq-section-photoshop-template-3

moodle-theme-edutor-faq-section-image-design-3.1

moodle-theme-edutor-faq-section-image-design-3.2

moodle-theme-edutor-faq-section-image-design-3.3

moodle-theme-edutor-faq-section-image-design-3.4

Design Example Three

moodle-theme-edutor-faq-section-photoshop-template-4

moodle-theme-edutor-faq-section-image-design-4.1

moodle-theme-edutor-faq-section-image-design-4.2

moodle-theme-edutor-faq-section-image-design-4.3

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

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

moodle-theme-edutor-hero-section-slide-design-1

Slide Two Example

moodle-theme-edutor-hero-section-slide-design-2

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.

moodle-theme-edutor-hero-section-settings-general

moodle-theme-edutor-hero-section-front-view

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.

moodle-theme-edutor-hero-section-add-slide1

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

moodle-theme-edutor-hero-section-add-slide1.1

Add Slide 2

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

moodle-theme-edutor-hero-section-add-slide2

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

moodle-theme-edutor-hero-photoshop-file

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