Moodle Themes – How To Host Google Fonts Locally (Without Using Google Fonts API)

Do you want to use free Google fonts on your Moodle site but are concerned about EU regulation GDPR? If you’re using Moodle Boost theme or a Boost-based theme you can follow the steps in this tutorial to host your desired Google fonts locally to avoid any potential GDPR compliance issues.

Step 1 – Disable Google Fonts API

If the Moodle theme your site is using is already using Google Fonts API to load fonts from Google’s server, you need to disable the API first.

We have added the option to disable Google Fonts API in our latest Moodle theme Edutor and Maker. You just need to go to theme settings and uncheck a box under the General Settings section.

Moodle-Theme-Host-Google-Fonts-Locally-1

Step 2 – Download Google Fonts

Head to the online tool Google Web Fonts Helper and download the fonts you’d like to use on your Moodle site.

For demo purposes, we chose DM Sans as our Moodle site’s main font and Mulish as the heading font.

Moodle-Theme-Host-Google-Fonts-Locally

Moodle-Theme-Host-Google-Fonts-Locally

Step 3 – Host Google Fonts

Create a folder called fonts in your Moodle theme folder on your server and upload the downloaded fonts files to that folder.

Moodle-Theme-Host-Google-Fonts-Locally-4

Step 4 – Add Google Fonts To Your Site

Go to your theme’s settings page and find the Custom SCSS/CSS section. Boost T

In the Raw initial SCSS input field add the fonts definition code.

/* dm-sans-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url([[fonts:theme|dm-sans-v13-latin-regular.woff2]]) format('woff2');
}


/* mulish-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url([[fonts:theme|mulish-v12-latin-700.woff2]]) format('woff2');
}

Moodle-Theme-Host-Google-Fonts-Locally-5

In the Raw SCSS input field add your custom css code to assign the fonts to relevant page elements.

body {
    font-family: 'DM Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Mulish', sans-serif;
}

Moodle-Theme-Host-Google-Fonts-Locally-6

How to Add an Effective Course Landing Page in Moodle 4.x (HTML Template Included)

Want to add a dedicated course landing page to promote your Moodle course? In this post we will show you how to do so using Moodle’s Static Pages plugin. You can download the course landing page template to try on your site as well.

We have included the landing page styling in the latest version of our Moodle theme Edutor and Maker. You can view the demo landing pages below.

Edutor

edutor-moodle-course-landing-page-screenshot

Maker

maker-moodle-course-landing-page-screenshot
Note:
If you’re using a Boost-based Moodle theme you can style the landing page via Custom CSS.

Step 1

Download the landing page HTML template file. Open the file using a HTML editor to edit the template content to suit your needs.

Free Download (1451 downloads)

Our template contains all of the essential sections for a winning online course landing page. All the sections are structured in a modular way so you can easily rearrange the order of the sections or remove certain sections.

Template Section Structure:

Course Hero Section

You can use this section to give your audience a quick introduction of your course.

Note:
Any image you want to use in the HTML file needs to be uploaded to your server first so you can have the image URL.

moodle-theme-course-landing-page-hero-section

    <div class="course-hero-section section theme-dark-bg mb-5">
	    <div class="row">
		    <div class="col-12 col-lg-6">
			    <div class="course-badge badge badge-success mb-2">Popular Course</div>
			    <h1 class="section-title mb-3">Course Name Lorem Ipsum Dolor Sit Amet</h1>
			    <div class="course-summary mb-3">Are you ready to take your skills to the next level? Join our transformative course and embark on a journey of personal and professional growth like never before.</div>
			    
			    <div class="cta-holder mb-4"><a class="btn theme-btn-secondary" href="#">Start Learning Now</a></div>
			    <div class="meta">
				    <ul class="meta-list list-unstyled list-inline">
					    <li class="list-inline-item mb-3"><span class="badge">Intermediate</span></li>
					    <li class="list-inline-item mb-3"><span class="badge">8+ Hours</span></li>
					    <li class="list-inline-item mb-3"><span class="badge">50+ Videos</span></li>
					    <li class="list-inline-item mb-3"><span class="badge">2000+ Learners</span></li>
				    </ul><!--//meta-list-->
			    </div><!--//meta-->
		    </div><!--//col-->
		    
		    <div class="col-12 col-lg-6">
			    <img class="course-summary-image img-fluid rounded" src="https://3rdwavemedia.com/demo-images/courses/course-1.jpg" alt="image">
		    </div><!--//col-->
	    </div><!--//row-->
    </div><!--//course-hero-section-->	
Tip for Edutor and Maker theme:
If you want to have a white background instead of the dark-colored background for this section, you just need to remove the theme-dark-bg class from the section code.
moodle-theme-course-landing-page-hero-section-white

Course Overview Section

You can give your audience an overview of what one can expect to learn in your course. If you have a course promo video on a platform such as Youtube you can embed the video in this section too.

moodle-theme-course-landing-page-overview-section

    <div class="course-overview-section section bg-white mb-5">
	    <div class="container">
		    <h2 class="section-title text-center mb-4">What You'll Learn</h2>
		    <div class="text-center pt-2">
				<ul class="theme-column-list list-unstyled mx-auto d-inline-block">
				    <li><i class="icon fa fa-check mr-2"></i>Lorem ipsum dolor sit amet</li>
				    <li><i class="icon fa fa-check mr-2"></i>Etiam nec ligula bibendum faucibus elit sed</li>
				    <li><i class="icon fa fa-check mr-2"></i>Donec id nunc ac felis convallis vestibulum sit amet id erat</li>
				    <li><i class="icon fa fa-check mr-2"></i>Suspendisse rutrum est arcu vitae semper libero</li>
				    <li><i class="icon fa fa-check mr-2"></i>Donec id nunc ac felis convallis vestibulum sit amet id erat</li>
				    <li><i class="icon fa fa-check mr-2"></i>Curabitur feugiat scelerisque quam</li>
				    <li><i class="icon fa fa-check mr-2"></i>Cras pulvinar velit id lectus semper</li>
				    <li><i class="icon fa fa-check mr-2"></i>Etiam convallis vulputate arcu sollicitudin blandit</li>
				</ul>
            </div><!--//text-center-->
            
            <div class="cta-holder mb-4 text-center"><a class="btn btn-primary theme-btn-cta theme-btn-primary" href="#">Join Now</a></div>
            
            <div class="course-video-container text-center mx-auto my-5">
			    <div class="embed-responsive embed-responsive-16by9">
				   <iframe class="embed-responsive-item"  width="560" height="315" src="https://www.youtube.com/embed/XH3QQAV-04g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
				</div>
			</div><!--//video-container-->
	    </div><!--//container-->
    </div><!--//course-overview-section-->

Course Content Section

This section is great to give an overview of your course content structure.

moodle-theme-course-landing-page-course-content-section

    <div class="course-content-section section bg-white mb-5">
	    <div class="container">
		    <h2 class="section-title text-center mb-4">Course Content</h2>
		    <div class="section-intro mb-4">Course content intro goes here. You can give a preview of your course content using this section. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
		    <div class="accordion-wrapper">
		        <div class="accordion module-accordion" id="module-accordion">
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-1">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-1" data-toggle="collapse" data-target="#module-1" aria-expanded="false" aria-controls="module-1">
						        <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 1 - Course Introduction
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-1" class="module-content collapse" aria-labelledby="module-heading-1" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">1.1 Module Intro</div>
								    <div class="col-3 text-right extra-info">18 mins</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">1.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">5 Videos</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">1.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">7 Downloads</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">1.4 Module Suspendisse Porttitor</div>
								    <div class="col-3 text-right extra-info">3 Exercises</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">1.5 Module Related Resources</div>
								    <div class="col-3 text-right extra-info">Resources</div>
							    </div>
						    </div><!--//module-sub-item--> 
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->
				
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-2">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-2" data-toggle="collapse" data-target="#module-2" aria-expanded="false" aria-controls="module-2">
						       <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 2 - Phasellus commodo consectetur eros
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-2" class="module-content collapse" aria-labelledby="module-heading-2" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">2.1 Module Intro Video</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">2.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">2.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->								    
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->
				
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-3">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-3" data-toggle="collapse" data-target="#module-3" aria-expanded="false" aria-controls="module-3">
						        <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 3 - Nullam sed orci vel tortor 
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-3" class="module-content collapse" aria-labelledby="module-heading-3" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">3.1 Module Intro Video</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">3.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">3.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item--> 
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->
				
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-4">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-4" data-toggle="collapse" data-target="#module-4" aria-expanded="false" aria-controls="module-4">
						        <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 4 - Integer nec ullamcorper orci 
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-4" class="module-content collapse" aria-labelledby="module-heading-4" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">4.1 Module Intro Video</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">4.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">4.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->
				
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-5">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-5" data-toggle="collapse" data-target="#module-5" aria-expanded="false" aria-controls="module-5">
						        <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 5 - Pellentesque id nulla quis urna 
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-5" class="module-content collapse" aria-labelledby="module-heading-5" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">5.1 Module Intro Video</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
							    <div class="col-9">5.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">5.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->
				
				<div class="module-item card">
				    <div class="module-header card-header" id="module-heading-6">
				        <h4 class="module-title mb-0">
					        <a class="card-toggle module-toggle" href="#module-6" data-toggle="collapse" data-target="#module-6" aria-expanded="false" aria-controls="module-6">
						        <i class="icon fa fa-plus"></i>
						        <i class="icon fa fa-minus"></i>
					            Module 6 - Aliquam turpis nibh eget 
					        </a>
				        </h4>
				    </div><!--//card-header-->
				
					<div id="module-6" class="module-content collapse" aria-labelledby="module-heading-6" >
						<div class="card-body p-0">
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">6.1 Module Intro Video</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
							    <div class="col-9">6.2 Module Lorem Ipsum</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						    <div class="module-sub-item p-3">
							    <div class="row justify-content-between">
								    <div class="col-9">6.3 Module Suscipit Arcu</div>
								    <div class="col-3 text-right extra-info">Extra info</div>
							    </div>
						    </div><!--//module-sub-item-->
						</div><!--//card-body-->
					</div><!--//module-content-->
				</div><!--//module-item-->		
			</div><!--//module-accordion-->
		    </div><!--//accordion-wrapper-->		   
	    </div><!--//container-->
    </div><!--//course-content-->

Course Reviews Section

You can showcase positive course reviews to provide social proof to prospective learners.

moodle-theme-course-landing-page-review-section

<div class="course-reviews-section section">
        <div class="container p-0">
	        <h3 class="section-title mb-5 text-center">Course Learner Reviews</h3>
	        
	        <div class="row justify-content-center">
		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-1.png" alt=""></div>
								</div><!--col-->
								
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Adam Doe</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>Great course lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mi sed tortor lobortis, nec feugiat nisi venenatis.</p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->
		        
		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-2.png" alt=""></div>
								</div><!--col-->
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Emily Sanders</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>Highly recommend lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor id velit in ullamcorper nam eu elit nec nunc. </p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->
 
		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-3.png" alt=""></div>
								</div><!--col-->
								
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Luke Smith</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star-o"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>I've learnt so much lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quam magna, vulputate at sem id, gravida laoreet risus.</p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->

		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-4.png" alt=""></div>
								</div><!--col-->
								
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Luke Smith</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star-half-o"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>Great course lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mi sed tortor lobortis, nec feugiat nisi venenatis.</p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->

		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-5.png" alt=""></div>
								</div><!--col-->
								
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Lisa Evans</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>This course completely exceeded my expectations! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mi sed tortor lobortis, nec feugiat nisi venenatis.</p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->
		        
		        <div class="col-12 col-md-6 col-lg-4 mb-4">
			        <div class="review-item bg-white p-4">
						<div class="source mb-3">
							<div class="row align-items-center">
								<div class="col-3 col-lg-4">
									<div class="profile"><img class="profile-image img-fluid" src="https://3rdwavemedia.com/demo-images/users/user-6.png" alt=""></div>
								</div><!--col-->
								
								<div class="col-9 col-lg-8 pl-0">
									<div class="name">Emma Sanders</div>
									<div class="rating">
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
										<i class="icon fa fa-star"></i>
									</div>
								</div><!--//col-->
							</div><!--//row-->
						</div><!--//source-->
						<blockquote class="quote">
							<p>The instructor was knowledgeable and responsive lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mi sed tortor lobortis, nec feugiat nisi venenatis.</p>
						</blockquote><!--//quote-->
					</div><!--//item-->
		        </div><!--//col-->
	        </div><!--//row-->
        </div><!--//container-->
    </div><!--//course-reviews-section-->

Course Pricing Section

If learners need to pay for the course before joining you can use this section to list your pricing structure.

moodle-theme-course-landing-page-pricing-section

    <div class="course-pricing-section section py-5">
        <div class="container">
	        <h3 class="section-title text-center mb-5">Join This Course</h3>
            <div class="pricing-plan">
	            <div class="row justify-content-center">
		            <div class="col-lg-4 col-12  mb-4">
			            <div class="plan-item">
				            <div class="plan-header">
					            <h4 class="plan-heading p-3 theme-bg-primary text-center">FREE</h4>
				            </div><!--//plan-header-->
				            
				            <div class="plan-details p-4">
					            <div class="plan-desc text-center mb-4">
						            <div class="plan-price">$0</div>
						            <div class="plan-price-desc">Limited Access</div>
					            </div>
					            <div class="plan-content px-3">
					                <div class="plan-content-intro">You'll get:</div>
						            <ul class="plan-content-list list-unstyled">
							            <li><i class="icon fa fa-check"></i>Access to basic modules</li>
							            <li><i class="icon fa fa-check"></i>3 bonus resources</li>
						            </ul>
					            </div><!--//plan-content-->
				            </div><!--//plan-content-->
				            <div class="plan-cta text-center px-4">
					            <a class="btn btn-primary theme-btn-primary" href="#" target="_blank">Join Free</a>
					        </div>
			            </div><!--//plan-item-->
		            </div><!--//col-->
		            <div class="col-lg-4 col-12  mb-4">
			            <div class="plan-item">
				            <div class="plan-header">
					            <h4 class="plan-heading p-3 text-center theme-bg-primary">Standard</h4>
				            </div><!--//plan-header-->
				            
				            <div class="plan-details p-4">
					            <div class="plan-desc text-center mb-4">
						            <div class="plan-price">$199</div>
						            <div class="plan-price-desc">Basic Access</div>
					            </div>
					            <div class="plan-content px-3">
					                <div class="plan-content-intro">You'll get:</div>
						            <ul class="plan-content-list list-unstyled">
							            <li><i class="icon fa fa-check"></i>Access to all modules</li>
							            <li><i class="icon fa fa-check"></i>Access to 40+ resources</li>
						            </ul>
					            </div><!--//plan-content-->
				            </div><!--//plan-content-->
				            <div class="plan-cta text-center px-4">
					            <a class="btn btn-primary theme-btn-primary" href="#" target="_blank">Enrol Now</a>
					        </div>
			            </div><!--//plan-item-->
		            </div><!--//col-->
		            <div class="col-lg-4 col-12 mb-4">
			            <div class="plan-item">
				            <div class="plan-header">
					            <h4 class="plan-heading p-3 text-center theme-bg-primary">Advanced</h4>
				            </div><!--//plan-header-->
				            <div class="plan-details p-4">
					            <div class="plan-desc text-center mb-4">
						            <div class="plan-price">$299</div>
						            <div class="plan-price-desc">Unlimited Access</div>
					            </div>
					            <div class="plan-content px-3">
					                <div class="plan-content-intro">You'll get:</div>
						            <ul class="plan-content-list list-unstyled">
							            <li><i class="icon fa fa-check"></i>Access to all modules</li>
							            <li><i class="icon fa fa-check"></i>Access to all 80+ resources</li>
							            <li><i class="icon fa fa-check"></i>Course support</li>
							            <li><i class="icon fa fa-check"></i>Free updates</li>
							            <li><i class="icon fa fa-check"></i>Digital certificate</li>
						            </ul>
					            </div><!--//plan-content-->
				            </div><!--//plan-content-->
				            <div class="plan-cta text-center px-4">
					             <a class="btn btn-primary theme-btn-primary" href="#" target="_blank">Enrol Now</a>
					        </div>
			            </div><!--//plan-item-->
		            </div><!--//col-->
	            </div><!--//row-->
            </div><!--//pricing-plan-->
        </div><!--//container-->
    </div><!--//course-pricing-section-->

Course FAQ Section

You can list your course-specific FAQ in this section. If you want to create a site-wide FAQ page you can find out more here.

moodle-theme-course-landing-page-faq-section

    <div class="course-faq-section section bg-white mb-5">
        <div class="container">
		        <div class="row">
			        <div class="col-12 col-lg-3">
				        <h3 class="section-title text-start mb-4">FAQ</h3>
				        <div class="intro mb-3 pr-lg-3">Can't find the answer you're looking for? Feel free to <a class="theme-link" href="#">get in touch</a>.</div>
			        </div>
			        <div class="col-12 col-lg-9">
				        <div class="faq-items pl-lg-3">
					        <div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>What lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Sed venenatis porta ante, nec accumsan leo suscipit ac. Praesent ultricies tortor nisi, eu convallis ex lacinia ac. Praesent vel risus eu ligula ullamcorper condimentum eu ac leo. Praesent leo odio <a href="#">link example</a> interdum vitae mi vitae, maximus porta lectus. Maecenas venenatis, felis quis rutrum luctus, tortor turpis maximus lacus, at scelerisque nisl metus nec augue.  </p>
								</div>
							</div><!--//item-->
							<div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>How to lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Donec tincidunt porttitor dictum. Cras laoreet ipsum vitae massa suscipit, at pretium justo molestie. Duis gravida vitae dui vel posuere. Maecenas pharetra, odio nec interdum efficitur, eros magna bibendum tortor, at pellentesque nunc quam eu diam. </p>
								</div>
							</div><!--//item-->
							<div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>Does lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Maecenas felis mauris, pharetra at congue sed, semper et orci. Suspendisse maximus viverra tellus vel dictum. Cras lacinia lectus magna, facilisis congue lacus tristique non. </p>
								</div>
							</div><!--//item-->
							<div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>When do you lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Suspendisse gravida gravida orci ut egestas. In in libero faucibus tortor blandit iaculis a fermentum lectus. Proin dictum lacus id fringilla interdum.  </p>
								</div>
							</div><!--//item-->
							<div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>Can I lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Nam feugiat quam nec ex consectetur volutpat. Phasellus urna diam, finibus non enim id, placerat facilisis orci. Maecenas tristique orci sit amet sem suscipit, vitae auctor lectus pellentesque. </p>
								</div>
							</div><!--//item-->
							<div class="item">
								<h4 class="faq-q mb-2"><i class="icon fa fa-question-circle text-primary"></i>Does lorem ipsum dolor sit amet?</h4>
								<div class="faq-a">
									<p>Nam feugiat quam nec ex consectetur volutpat. Phasellus urna diam, finibus non enim id, placerat facilisis orci. Maecenas tristique orci sit amet sem suscipit, vitae auctor lectus pellentesque. </p>
								</div>
							</div><!--//item-->
				        </div><!--//faq-items-->
			        </div><!--//col-->
		        </div><!--//row-->
        </div><!--//container-->
    </div><!--//course-faq-section-->

Course Requirements Section

If your course has prerequisites for learners you can list them in this section.

moodle-theme-course-landing-page-requirements-section

    <div class="course-requirements-section section bg-white mb-5">
	    <div class="container">
		    <h2 class="section-title text-center mb-5">Course Requirements</h2>
		    <div class="section-intro mb-4">
			    <p>To ensure a successful learning experience, please review the following course requirements before enrolling:</p>
		    </div>
		    <ul class="section-list mx-auto text-left">
			    <li><strong>Reliable Internet Connection:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			    <li><strong>Updated Web Browser:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			    <li><strong>Audio and Video Capability:</strong>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			    <li><strong>Time Commitment:</strong>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			    <li><strong>Required Software:</strong>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			    <li><strong>Language Proficiency:</strong>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
		    </ul>
	    </div><!--//container-->
    </div><!--//course-requirements-section-->

Course Tutor Section

You can provide your course tutor or instructor’s bio information in this section.

moodle-theme-course-landing-page-tutor-section

    <div class="course-tutor-section section bg-white mb-5">
	    <div class="container">
		    <div class="row">
		        <div class="col-12 col-lg-3">
			        <div class="tutor-img-holder mb-5 mb-lg-0 text-center">
				        <img class="tutor-profile img-fluid rounded-circle" src="https://3rdwavemedia.com/demo-images/teachers/tutor-1.png" alt="">
			        </div><!--//tutor-img-holder-->
		        </div><!--//col-->
		        <div class="col-12 col-lg-9">
			        <div class="pl-lg-4">
				        <h3 class="section-title text-center text-lg-left mb-4 ">Course Tutor</h3>
				        <p>Get ready to learn from the best! Meet Sarah, your dedicated course tutor with a passion for teaching and empowering students like you.

With years of experience in [field of expertise], Sarah Doe brings a wealth of knowledge and practical insights to the table. Their expertise and real-world experience will guide you through the course material, ensuring you gain valuable skills and a deep understanding of the subject.</p>
                        
			            <p>Throughout the course, Sarah will be there to support and motivate you every step of the way.</p>	
			            <div class="text-center text-lg-left">
				            <ul class="social-list list-unstyled py-3">
								<li class="list-inline-item"><a href="#"><i class="icon fa fa-linkedin"></i></a></li> 
								<li class="list-inline-item"><a href="#"><i class="icon fa fa-twitter"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="icon fa fa-youtube"></i></a></li>
							</ul><!--//social-list-->	
			            </div>				        
                    </div>
		        </div><!--//col-->
	        </div><!--//row-->
	    </div><!--//container-->
    </div><!--//course-tutor-section-->

Step 2

Download and install Moodle’s Static Pages plugin. Make sure the plugin doesn’t clean your HTML code. You need to change this setting after installing as shown in the figure below.

moodle-static-pages-setting-1

Upload the course landing page HTML file to the plugin’s “Documents” page.

moodle-static-pages-setting-2

You can make multiple course landing pages using this template but the HTML file name must start with course (eg. course-1.html or course-a.html) to have the correct styling applied in our Edutor and Maker theme.

Step 3

After uploading the HTML page, you can get the page URL from the “List of static pages” page.

You can then add the page link to your Moodle site’s custom menu.

Want to add other types of pages to your Moodle site? You can learn more here.

Moodle Contact Form Plugin – How To Change The Default Form Success Message

Moodle’s Contact Form Plugin provides a simple way to add a contact form to a Moodle course or a Moodle page. After successfully submitting the contact form, you will see a default success message saying “Thank you for contacting us. If required, we will be in touch with you very soon.” If this default success message doesn’t suit your organisation you can follow the steps in this tutorial to change it to something different.

Moodle Contact Form Plugin - How To Change The Default Form Success Message

You can try the forms on our Moodle demo site below:

1) Moodle Page Contact Form (Live Demo)

Moodle Contact Form Plugin - How To Change The Default Form Success Message

2) Moodle Course Tutor Contact Form (Live Demo)

Moodle Contact Form Plugin - How To Change The Default Form Success Message

Step 1

Log into your Moodle site as an admin user, and navigate to the Language customisation page by going to Site administration > Language > Language customisation

Moodle Contact Form Plugin - How To Change The Default Form Success Message

Select “English(en)” from the drop down menu:

Moodle Contact Form Plugin - How To Change The Default Form Success Message

Click the “Open language pack for editing” button then click “Continue”.

Moodle Contact Form Plugin - How To Change The Default Form Success Message

Moodle Contact Form Plugin - How To Change The Default Form Success Message

Step 2

Select the php file related to the Moodle Contact Form plugin: local > local_contact.php

Enter the default form success message into the “Only string containing” input field and click the “Show strings” button to proceed.

Moodle Contact Form Plugin - How To Change The Default Form Success Message

Step 3

Enter your desired form success message in the “confirmationmessage” input field as shown in the figure below. Save your changes.

Moodle Contact Form Plugin - How To Change The Default Form Success Message

How To Uninstall A Moodle Theme Or Plugin in Moodle 4.x

If you have installed a Moodle theme or plugin which is not compatible with your Moodle version or no longer needed you can completely remove it from your server and database by following the steps below.

Step 1

Log into your Moodle site as an admin user, and navigate to the Plugins overview page by going to Site administration > Plugins > Plugins overview

How To Uninstall A Moodle Theme Or Plugin-1

Step 2

Find the theme or plugin you’d like to uninstall and click the link “uninstall”.

How To Uninstall A Moodle Theme Or Plugin-1

Uninstalling a theme or plugin will delete EVERYTHING (eg. theme configurations and plugin settings) in the database associated with the theme/plugin.

How To Uninstall A Moodle Theme Or Plugin-1

Step 3

Manually remove the Moodle theme or plugin folder from your server. This step is important because if you don’t remove the folder from your server Moodle will detect the folder again and ask you to install the theme/plugin next time you visit your Moodle site’s admin page.

How to Add PowerPoint Slides To Your Moodle Course Using The Lightbox Gallery Plugin

Want to add PowerPoint slides to your Moodle course? By default Moodle doesn’t have a built-in PowerPoint viewer but you can use Moodle’s third party plugin “Lightbox Gallery” as a workaround to achieve the same effect. In this blog post we will walk you through how to present your course content in a PowerPoint style.

You can check our Moodle demo site here to see the example we used in this post.

View Demo Course

Pre Requirements:

1) Download and install the “Lightbox Gallery” plugin.

2) Prepare a zip file containing all of your image slides in PNG or JPEG format.

You can take advantage of all of the wonderful free PPT templates on the internet and export the slides as images. In our example, we used “Minimalist Business Basic Template” from slidesgo.com

Step 1

Go to your desired course and turn editing on. Click the “+ Add an activity or resource” link and then select the “Lightbox Gallery” in the modal window.

moodle-add-lightbox-gallery-powerpoint-to-course

moodle-add-lightbox-gallery-powerpoint-alternative

Step 2

Upload the slides zip file and save the changes.

moodle-upload-powerpoint-slide-images

Tip: You can upload your slide images one by one but if you have lots of images it’s much faster and efficient to zip them up and upload in one go.

moodle-lightbox-gallery-slide-settings

Tip: Users can click the NEXT and PREV button or use the left and right arrow key on the keyboard to navigate through all the slides.

moodle-lightbox-gallery-slide-nav

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.