Maker – a Boost based Moodle Theme (Main Features)

We are excited to announce the release of a new Moodle theme “Maker“. Maker is built based on Moodle’s latest core theme “Boost” which means it utilises all of the latest features available to Moodle and provides the best overall user experience for your Moodle site. It’s packed with awesome configurable features to work with your branding and will make your Moodle site truly outstanding.

Live Demo Theme Details

Below are some of the main features Maker offers:

1. Branding

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

moodle-theme-maker-branding-settings

moodle-theme-maker-custom-css-settings

2. Frontpage

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

Slideshow Section

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

moodle-theme-maker-slideshow

moodle-theme-maker-slideshow

Benefits Section

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

moodle-theme-maker-benefits

moodle-theme-maker-benefits-settings

Featured Section

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

moodle-theme-maker-featured-blocks

moodle-theme-maker-featured-blocks-settings

Promo Carousel Section

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

moodle-theme-maker-promo-carousel

moodle-theme-maker-promo-carousel-settings

Logos Section

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

moodle-theme-maker-logos-section

moodle-theme-maker-logos-section-settings

Categories Section

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

moodle-theme-maker-categories-section-without-desc-text

moodle-maker-theme-categories-with-desc-text

Teachers Section

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

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

moodle-theme-maker-teachers-section-preview

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

Testimonial Section

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

img-responsive moodle-theme-maker-testimonials

moodle-theme-maker-testimonials-settings

FAQ Section

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

moodle-theme-maker-frontpage-faq-section

moodle-theme-maker-faq-settings

Call-To-Action Section

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

moodle-theme-maker-cta-section

moodle-theme-maker-cta-settings

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

moodle-theme-maker-frontpage-data-box-view

Course List

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

moodle-theme-maker-course-list-layout-styles-banner

3. Site Alert

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

moodle-theme-maker-alert

moodle-theme-maker-alert-settings

4. Header Dropdown Menu (Moodle 3.8+)

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

moodle-maker-theme-header-dropdown-menu-gif

5. Login Page

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

moodle-theme-maker-login-page

moodle-theme-maker-login-page-settings

6. Social Media Links

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

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

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

moodle-theme-maker-socialmedia-settings

7. Footer Area

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

moodle-theme-maker-footer

moodle-theme-maker-footer-settings-1

moodle-theme-maker-footer-settings-2

8. Course Page

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

moodle-theme-maker-course-header-image

moodle-theme-maker-course-header-image-settings

9. Course Design

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

10. Google Analytics

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

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

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

What the footer content blocks will look like:

moodle-theme-maker-footer-blocks

How to add the code:

Step 1

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

moodle-theme-maker-theme-settings

Step 2

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

moodle-theme-maker-html-code-editor

HTML Code

Footer content block 1

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

Footer content block 2

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

Footer content block 3

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

Footer content block 4

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

Custom CSS for Changing Moodle Theme Labland’s Colour Scheme

This product is deprecated and no longer available.
Looking for a Boost-based Moodle theme? Checkout our new products.

Responsive Moodle theme Labland is designed for corporations/businesses. It comes with 4 default colour schemes. If the default colour scheme doesn’t fit your branding needs, you can write your custom CSS to override the default colour. In this tutorial we are showing you an example CSS code snippet to change the default colour scheme. You can easily use the example as a template to do your own colour customisations.

Where to enter the custom CSS?

Under the Labland theme settings there is an input field called “Custom CSS” where you can enter the CSS. By doing so you won’t lose any CSS customisations if the theme is updated as the data is stored in your database.

Example custom CSS

In the example we use three colours: 1) primary colour #9A58BA 2) secondary colour #FF6780 3) accent colour #59AFFE

/* Links */
a,
a:hover,
a:active, 
a:focus {
  color: #9A58BA;
}
/* Buttons */
a.btn-primary,
.btn-primary {
  background: #9A58BA;
  border: 2px solid #9A58BA;
}
a.btn-primary:hover,
.btn-primary:hover,
a.btn-primary:active,
.btn-primary:active,
a.btn-primary:focus,
.btn-primary:focus {
  background: #834CA4; /* slightly darker than #9A58BA */
  border: 2px solid #9A58BA;
}

.btn-secondary, a.btn-secondary {
  background: #59AFFE;
  border: 2px solid #59AFFE;
}
.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover, a.btn-secondary:active, a.btn-secondary:focus, a.btn-secondary:hover {
  background: #478FD6; /* slightly darker than #59AFFE */
  border: 2px solid #59AFFE;
}

.btn-cta, a.btn-cta {
  background: #9A58BA;
  border: 2px solid #9A58BA;
}


.btn-cta:active, .btn-cta:focus, .btn-cta:hover, a.btn-cta:active, a.btn-cta:focus, a.btn-cta:hover {
  background: #834CA4; /* slightly darker than #9A58BA */
  border: 2px solid #9A58BA;
}

button,
input.form-submit,
input[type="button"],
input[type="submit"],
input[type="reset"],
input#id_submitbutton,
input#id_submitbutton2,
.path-admin .buttons input[type="submit"],
td.submit input {
  background: #9A58BA;
  border: 2px solid #9A58BA;
}
button:hover,
input.form-submit:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input#id_submitbutton:hover,
input#id_submitbutton2:hover,
.path-admin .buttons input[type="submit"]:hover,
td.submit input:hover,
button:active,
input.form-submit:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
input#id_submitbutton:active,
input#id_submitbutton2:active,
.path-admin .buttons input[type="submit"]:active,
td.submit input:active,
button:focus,
input.form-submit:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input#id_submitbutton:focus,
input#id_submitbutton2:focus,
.path-admin .buttons input[type="submit"]:focus,
td.submit input:focus {
  background: #834CA4; /* slightly darker than #9A58BA */
  border: 2px solid #9A58BA;
}
/* Tabs */
.nav-tabs > li.active a,
.nav-tabs > li.active a:hover,
.nav-tabs > li.active a:active,
.nav-tabs > li.active a:focus {
  border-top: 2px solid #9A58BA;
}

/* Tables */
#page #region-main .table>thead>tr>th {
    border-bottom-color: #9A58BA;
}

#page #region-main .table.table-boxed>thead>tr>th {
    background: #9A58BA;
}

/* Forms */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: #9A58BA;
}

/* Topbar */
.branding {
  background: #9A58BA;
}

/* Notifications dropdown */
.site-header .top-bar .popover-region .popover-region-header-text {
  color: #9A58BA;
}
/* Messages dropdown */
.site-header .top-bar .popover-region a {
  color: #9A58BA;
}

/* Hero slideshow overlays */
.hero-overlay .overlay-upper {
  background: rgba(89, 175, 254, 0.8);
  /* #59AFFE = rgba(89, 175, 254, 1) */
  /* You can use online tool here http://www.hexcolortool.com/ to convert hext colour to rgba colour */
}
.hero-overlay .overlay-lower {
  background: rgba(255, 103, 128, 0.9);
  /* #FF6780 = rgba(255, 103, 128, 1) */
}
/* Hero slideshow promo badge */
.hero-badge {
  background: #FF6780;
}
/* Hero slideshow active slide indicator */
.hero-slider-wrapper .flexslider .flex-control-nav li a.flex-active {
  background: #FF6780;
}
/* News section */
.news-section .item-icon {
  background: #59AFFE;
}
/* review section */
.reviews-section {
  background: #FF6780;
}
/* CTA section */
.cta-section {
  background: #9A58BA;
}
/* Home course category section */
.course_category_tree .category > .info > .categoryname {
  background-color: #9A58BA;
}
/* Course blocks */
#page .block-region .block .header {
  background: #9A58BA;
}
#page .block-region .block .header {
  background: #9A58BA;
}

/* Bootstrap components */
.panel-group .panel .panel-heading .panel-title a {
  color: #9A58BA;
}
.panel-group .panel .panel-heading .panel-title a:hover,
.panel-group .panel .panel-heading .panel-title a:focus {
  color: #9A58BA;
}
.custom-quote {
  border-color: #9A58BA;
}
.custom-quote .fa {
  color: #9A58BA;
}
.custom-quote .people .name {
  color: #9A58BA;
}
.box.box-border {
  border-color: #9A58BA;
}
.box.box-theme {
  background: #9A58BA;
}
.label.label-theme {
  background: #9A58BA;
}
.panel-theme > .panel-heading,
.panel-theme > .panel-footer {
  border-color: #9A58BA;
  background: #9A58BA;
}
.panel-theme {
  border-color: #9A58BA;
}
.color-theme {
  color: #9A58BA;
}

Below is a screenshot of what Labland theme looks like after applying the example code:

Custom CSS for Changing Moodle Theme Impression’s Colour Scheme

This product is deprecated and no longer available.
Looking for a Boost-based Moodle theme? Checkout our new products.

Our best-selling Moodle theme Impression comes with 6 hand-picked colour schemes. It’s really easy to switch between the 6 colour schemes via the theme settings page. For customers who want to have a unique colour scheme to match their existing websites, we’ve complied useful custom CSS code to help you change the theme colour scheme to meet your specific needs.

First of all, you need to pick two colours. The first colour should be your site’s primary colour and the second colour is a darker shade of the primary colour.

For demo purpose, we are using an indigo colour (#6964C1) as the primary colour and a darker shade of primary colour (#5C58AF) as the secondary colour. You can easily substitute the colours in the code with your own primary and secondary colours.

Custom CSS Code

/* Change Impression Colour Scheme */
/* Primary Colour: #6964C1 */
/* Secondary Colour: #5C58AF */
 
/* Links and buttons */
a {
    color: #6964C1;
}
a:hover, a:active, a:focus {
    color: #5C58AF;
}
 
.btn-cta, a.btn-cta {
    background: #6964C1;
}
 
.btn-cta:hover, a.btn-cta:hover, .btn-cta:active, a.btn-cta:active, .btn-cta:focus, a.btn-cta:focus {
    background: #5C58AF;
}
 
.btn-primary, a.btn-primary {
    background: #6964C1;
}
 
.btn-primary:active, .btn-primary:focus, .btn-primary:hover, a.btn-primary:active, a.btn-primary:focus, a.btn-primary:hover {
    background: #5C58AF !important;
}
 
.btn-reversed, a.btn-reversed {
    color: #6964C1 !important;
}
 
.path-admin .buttons input[type=submit], button, input#id_submitbutton, input#id_submitbutton2, input.form-submit, input[type=submit], input[type=button], input[type=reset], td.submit input {
    background: #6964C1;
}
 
.path-admin .buttons input[type=submit]:active, .path-admin .buttons input[type=submit]:focus, .path-admin .buttons input[type=submit]:hover, button:active, button:focus, button:hover, input#id_submitbutton2:active, input#id_submitbutton2:focus, input#id_submitbutton2:hover, input#id_submitbutton:active, input#id_submitbutton:focus, input#id_submitbutton:hover, input.form-submit:active, input.form-submit:focus, input.form-submit:hover, input[type=submit]:active, input[type=submit]:focus, input[type=submit]:hover, input[type=button]:active, input[type=button]:focus, input[type=button]:hover, input[type=reset]:active, input[type=reset]:focus, input[type=reset]:hover, td.submit input:active, td.submit input:focus, td.submit input:hover {
    background: #5C58AF;
}
 
/* Topbar */
.site-header .top-bar {
    background: #6964C1;
}

/* Notifications dropdown */
.site-header .top-bar .popover-region .popover-region-header-text{
  color: #6964C1;
}
/* Messages dropdown */
.site-header .top-bar .popover-region a {
  color: #6964C1;
}

/* Forms */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: #6964C1;
}
 
/* Main Menu */
.site-header .main-nav .nav li a:hover {
    color: #6964C1;
}
.site-header .main-nav .nav .dropdown-menu {
    border-top-color: #6964C1;
}
.site-header .main-nav .nav .dropdown-menu:before {
    border-bottom-color: #6964C1;
}
 
.site-header .main-nav .nav .dropdown-menu a:hover {
    color: #6964C1;
}
 
/* Frontpage carousel */
 
.promo-section .carousel-indicators li.active {
    background-color: #6964C1;
}
 
/* Frontpage why section */
.why-section .figure-holder {
    color: #6964C1;
}
 
.why-section .item-title {
    color: #6964C1;
}
 
/* Frontpage testimonials section */
.reviews-section .review-title {
    color: #6964C1;
}
 
/* Frontpage CTA section */
.cta-section-inner {
    background: #6964C1;
}
 
/* Frontpage courses */
#page #region-main #frontpage-course-list h2, #page #region-main #site-news-forum h2 {
    background: #6964C1;
}
 
.course_category_tree .category>.info>.categoryname {
    background-color: #6964C1;
}
 
/* Footer */
.site-footer .footer-content {
    background: #6964C1;
}
 
/* Back to top control */
#topcontrol {
    background: #6964C1;
}
 
#topcontrol:hover {
    background: #5C58AF;
}
 
/* Moodle courses */
#page #region-main .loginbox {
    border-top-color:  #6964C1;
}
 
#page #region-main .region-main-inner {
    border-top-color:  #6964C1;
}
 
#page .block-region .block .header {
    background: #6964C1;
}
 
#page #region-main h3.sectionname {
    color: #6964C1;
}
 
.uneditable-input:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=date]:focus, input[type=month]:focus, input[type=time]:focus, input[type=week]:focus, input[type=number]:focus, input[type=url]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=color]:focus, input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus {
    border-color: #6964C1;
}
 
/* Bootstrap Components */
.color-theme {
    color: #6964C1;
}
 
#page #region-main .table.table-boxed>thead>tr>th {
    background: #6964C1;
}
 
.nav-tabs>li.active a, .nav-tabs>li.active a:active, .nav-tabs>li.active a:focus, .nav-tabs>li.active a:hover {
    border-top-color: #6964C1;
}
 
.custom-quote {
    border-color: #6964C1;
}
 
.custom-quote .fa {
    color: #6964C1;
}
 
.custom-quote .people .name {
    color: #6964C1;
}
 
.box.box-border {
    border-color: #6964C1;
}
 
.box.box-theme {
    background: #6964C1;
}
 
.panel-group .panel .panel-heading .panel-title a {
    color: #6964C1;
}
.panel-group .panel .panel-heading .panel-title a:hover {
    color: #5C58AF;
}
 
#page #region-main .table>thead>tr>th {
    border-bottom-color: #6964C1;
}
 
.label.label-theme {
    background: #6964C1;
}
 
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover, a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
    border-color: #6964C1;
    background: #6964C1;
}
 
.panel-theme {
    border-color: #6964C1;
}
 
.panel-theme>.panel-footer, .panel-theme>.panel-heading {
    border-color: #6964C1;
    background: #6964C1;
}
 
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover, a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
    border-color: #6964C1;
    background: #6964C1;
}


Once you’ve substituted the colours with your own, you can copy and paste the code into the “Custom CSS” input field under the theme settings page as shown below.

moodle-theme-impression-custom-css

Save the changes and your Impression theme should have a new colour scheme now:

moodle-theme-impression-change-colour-scheme

Custom CSS for Changing Moodle Theme Herald’s Colour Scheme

This product is deprecated and no longer available.
Looking for a Boost-based Moodle theme? Checkout our new products.

Our popular responsive Moodle theme Herald is designed for businesses and universities. It has 4 default colour schemes to get you started. However, if you’d like to customise the colour to suit your own needs it’s easy to do so by writing your own CSS rules to override the theme defaults. In this tutorial we will share a custom CSS code example with you to help you with the colour customisations. You can use the code example as a template to speed things up.

Where you should enter the custom CSS

There is a “Custom CSS” input field under the Herald theme settings. You need to enter your custom CSS code there so you don’t lose any CSS changes if you update the theme in the future.

/* Herald Custom CSS */
/* Links */
a {
  color: #FF6066;
}
a:hover,
a:focus {
  color: #DF5760;
  /* Slightly darker than #FF6066 */
}
/* Buttons */
.btn-cta,
a.btn-cta {
  background: #FF6066;
  border-color: #FF6066;
}
.btn-cta:hover,
a.btn-cta:hover {
  background: #DF5760;
  /* Slightly darker than #FF6066 */
  border-color: #DF5760;
}
a.btn-cta-secondary,
.btn-cta-secondary {
  color: #FF6066;
  border: 2px solid #FF6066;
  background: none;
}
a.btn-cta-secondary:hover,
.btn-cta-secondary:hover,
a.btn-cta-secondary:focus,
.btn-cta-secondary:focus,
a.btn-cta-secondary:active,
.btn-cta-secondary:active {
  color: #fff;
  border-color: #FF6066;
  background: #FF6066;
}
button,
input.form-submit,
input[type="button"],
input[type="submit"],
input[type="reset"],
input#id_submitbutton,
input#id_submitbutton2,
.path-admin .buttons input[type="submit"],
td.submit input {
  background: #FF6066;
  border-color: #FF6066;
}
button:active,
input.form-submit:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
input#id_submitbutton:active,
input#id_submitbutton2:active,
.path-admin .buttons input[type="submit"]:active,
td.submit input:active,
button:hover,
input.form-submit:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input#id_submitbutton:hover,
input#id_submitbutton2:hover,
.path-admin .buttons input[type="submit"]:hover,
td.submit input:hover,
button:focus,
input.form-submit:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input#id_submitbutton:focus,
input#id_submitbutton2:focus,
.path-admin .buttons input[type="submit"]:focus,
td.submit input:focus {
  background: #DF5760;
  /* Slightly darker than #FF6066 */
  border-color: #DF5760;
}
/* Tables */
#page #region-main .table>thead>tr>th {
    border-bottom-color: #FF6066;
}

#page #region-main .table.table-boxed>thead>tr>th {
    background: #FF6066;
}
/* Forms */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: #FF6066;
}
/* Main nav */
.header .main-nav .nav .dropdown-menu a:hover {
  color: #FF6066;
}
.dropdown-submenu > a:hover:after {
  border-left-color: #FF6066 !important;
}
/* Notifications dropdown */
.branding .popover-region .popover-region-header-text {
  color: #FF6066;
}
/* Messages dropdown */
.branding .popover-region a {
  color: #FF6066;
}
/* Home slideshow */
#page-site-index .bg-slider-wrapper .flexslider .flex-caption .caption-box {
  background: rgba(255, 96, 102, 0.8);
  /* #FF6066 = rgba(255, 96, 102, 1) */
  /* You can use online tool here http://www.hexcolortool.com/ to convert hext colour to rgba colour */
}
#page-site-index .bg-slider-wrapper .flexslider .flex-caption .caption-box .btn-cta-primary {
  background: #B04A51;
  /* Darker than #FF6066 */
  border-color: #B04A51;
}
#page-site-index .bg-slider-wrapper .flexslider .flex-caption .caption-box .btn-cta-primary:hover {
  background: #B04A51;
  border-color: #B04A51;
}
.flexslider .flex-control-paging li a.flex-active {
  background: #B04A51;
  /* Darker than #FF6066 */
}
/* Home benefits section */
#page-site-index .benefits .item .icon .fa {
  color: #FF6066;
}
/* Home vide section */
#page-site-index .video {
  background-color: #FF6066;
}
/* courses block */
#page #region-main .coursebox {
  border-color: #FF6066;
}
/* Social media icons */
#page-site-index .social-section .social li a {
  background: #FF6066;
}
/* Bootstrap components */
.panel-group .panel .panel-heading .panel-title a {
  color: #FF6066;
}
.panel-group .panel .panel-heading .panel-title a:hover,
.panel-group .panel .panel-heading .panel-title a:focus {
  color: #FF6066;
}
.custom-quote {
  border-color: #FF6066;
}
.custom-quote .fa {
  color: #FF6066;
}
.custom-quote .people .name {
  color: #FF6066;
}
.box.box-border {
  border-color: #FF6066;
}
.box.box-theme {
  background: #FF6066;
}
.label.label-theme {
  background: #FF6066;
}
.nav-tabs > li.active a,
.nav-tabs > li.active a:hover,
.nav-tabs > li.active a:active,
.nav-tabs > li.active a:focus {
  border-top: 2px solid #FF6066;
}
.panel-theme > .panel-heading,
.panel-theme > .panel-footer {
  border-color: #FF6066;
  background: #FF6066;
}
.panel-theme {
  border-color: #FF6066;
}
.color-theme {
  color: #FF6066;
}

Below is a screenshot of what the Herald theme looks like after applying the example code:

Why is my newly installed Moodle theme not showing up in the theme selector page?

So you have just installed a new Moodle theme, but when you go to the theme selector page your theme is not showing up there and you are stuck. In this tutorial we will show you some simple steps you can take to make the Moodle theme appear in the theme selector page.

Step 1 – Check your Moodle theme is installed correctly

It’s recommended to use an FTP program to upload the unzipped theme folder to your server. For more details about installing a new theme you can check out our tutorial here.

Tip: Do NOT upload the theme zip file and unzip on your server directly as this may cause problems.

Once uploading is finished, on your server you should see the uploaded theme folder right under the Moodle theme folder as shown in the figure below: moodle > theme > [theme name].

Please also remember to check all the individual files inside of the theme folder are uploaded.

moodle-theme-folder-on-server

Step 2 – Check your Moodle theme file permissions

Make sure the uploaded theme folder and its files/folders have the correct permissions on your server. They should all have permission 755. If you are not sure how to change file permissions on your server please consult your server provider/support.

moodle-theme-folder-file-permission

Step 3 – Purge Moodle cache

Purge Moodle cache to make sure all the changes on your server are picked up by your Moodle site.

Step 4 – Visit the admin notifications page

Visit your Moodle site’s admin notifications page: http://www.yourmoodlesite/admin/ This step should trigger the newly installed theme if you have followed the previous three steps correctly.

moodle-theme-admin-notifications

Hopefully by now you should see your new theme appear in the theme selector page!

How to enable PayPal enrolment for your Moodle course

If you are planning to charge your users for taking your Moodle course you can enable PayPal enrolment for the course to take the payment. This feature is available to Moodle 3.1/3.2. In this tutorial we will show you how to set it up step by step.

Step 1

Log into your Moodle site as an admin user, and navigate to the “Manage enrol plugins ” option under the Administration block: Site administration > Plugins > Enrolments > Manage enrol plugins

Install the “PayPal” plugin and configure the settings on the plugin settings page as shown in the figures below. You will need to enter your business PayPal email on the settings page.

Step 2

Navigate to the course you’d like to setup PayPal enrolment for.

Once you are inside of the course, go to Course administration > Users > Enrolment methods

.

Select the “PayPal” option in the “Add method” dropdown menu as shown in the figure below.

Step 3

After selecting the “PayPal” option, you will be prompted to configure some basic settings as shown in the figure below. You can set your course price and currency there.

Step 4

Now you should see the “PayPal” option activated in the table. The open eye icon means “activated”, shut eye icon means “disabled”.

Tip: Make sure you don’t have the Self enrolment/Guest access method activated at the same time otherwise users can access your course without paying!

That’s all you need to do to set up a paid Moodle course. When a new student tries to access the course he/she will be asked to make the payment via PayPal before enrolling to the course:

How to setup a user tour in Moodle

User Tours is a new feature in Moodle 3.2. It’s typically used to onboard and engage new users by guiding them through essential parts of the site. In this tutorial we will show you how to setup a basic tour.

Step 1

Log into your Moodle site as an admin user, and navigate to the “User tours” option under the Administration block: Site administration > Appearance > Themes > User tours

Step 2

On the Tours page click the “Create a new tour” link.

You will be prompted to enter some basic settings about the tour you are creating. You can get help about each setting by clicking the question mark icon next to it.

For this tutorial, the tour we are creating is going to be displayed on the “My dashboard” page for all users.

Step 3

Now you’ve created the tour, you should see it listed in the Tours table. However, at this point the tour is empty so you still need to add some steps to it.

Click the Tour name or the magnifying glass icon and you will arrive on the tour’s settings page where you can add steps.

For the demo, we are going to add 3 steps as shown in the figures below. You can compare the step settings with the final results.

Tour Step 1 – A welcome modal displayed in the middle of the “My Dashboard” page

Tour Step 1 Settings

Tour Step 1 Modal

Tour Step 2 – A modal displayed right under the CSS selector “.usermenu”

Tour Step 2 Settings

Tour Step 2 Modal

Tour Step 3 – A modal displayed under the “Navigation” block

Tour Step 3 Settings

Tour Step 3 Modal

Hopefully this tutorial gives you some idea of how the tours feature works. By default the tour will be shown to your user only once and you need to manually force the tour to be shown again by clicking the “force the tour to be displayed” link as shown in the figure below:

Labland – A responsive Moodle theme designed for businesses and government organisations

This product is deprecated and no longer available.
Looking for a Boost-based Moodle theme? Checkout our new products.

Are you looking for a professionally designed Moodle theme? We just released a brand new Moodle theme “Labland” which is designed for businesses and government organisations. Like our other premium themes, Labland is built based on the popular Bootstrap 3.x framework so you can take advantage of all the useful components/widgets provided by Bootstrap.


Live Demo


Below are some main features of the theme:

Logo and tagline

You can upload your own logo and provide a tagline as shown in our demo.

Theme frontend: Theme settings:

Frontpage Fullscreen hero slideshow

You can add up to 4 hero images with relevant content text and links. Hero images are a great way to capture your visitor’s attention and provide a great first impression.

On top of the hero images you also have the option to overlay useful links and information:

Promo badge:

This is an eye catcher. You can use it for announcing news or course sales Theme frontend: Theme settings:

Upper overlay:

This overlay can accommodate your site’s contact info and social media links.

Theme frontend: Theme settings:

Lower overlay:

This overlay allows you to add up to 4 quick links with icons. You can choose from 600+ FontAwesome icons. It’s a great way to provide quick access points to other parts of your site.

Theme settings:

News and updates section

You can add up to 3 items. This is a good area to list site news or announcements. Again there are 600+ FontAwesome icons available for you to use.

Theme frontend: Theme settings:

Featured Blocks

You can add up to 6 blocks with relevant images, titles, content text and URLs. It’s a good section to promote your popular courses.

Theme frontend: Theme settings:

Testimonials section

You can add up to 5 testimonials, which is a great way to add social proof to your site. You can disable the profile images if you can’t source images.

Theme frontend: Theme settings:

Logos section

You can add up to 6 logos in this section. You can use this section to show your awards, achievements, partners or press endorsements.

Theme frontend: Theme settings:

Call-To-Action and Video Section

You can use this section to persuade users to take actions (eg. signup, take courses). It also allows you to add a YouTube/Vimeo video – simply provide the relevant video ID and you are good to go.

Theme frontend: Theme settings:

Footer Content Blocks

You can add up to 3 blocks in the footer area. If you’d like to create something similar to our demo site you can check out the tutorial here.

Theme frontend: Theme settings:

Custom CSS

Want to customise the look and feel of the theme to suit your branding? For advanced users you can always use the “Custom CSS” input field to override the default theme styling.

Tip: Please do NOT change the css files in the theme folder directly as you will lose all of the changes when a new version of the theme is out. The best way to do any customisations is to use the “Custom CSS” field. That way you won’t lose your customisations after upgrading the theme in the future as all the data is stored in your database.

We have only listed some major features of the theme in this post. For a comprehensive list please check out to the theme details page.

Moodle theme Labland – Useful HTML code for the footer content blocks

This product is deprecated and no longer available.
Looking for a Boost-based Moodle theme? Checkout our new products.

We have released a new responsive Moodle theme “Labland” for 2017. In this tutorial we will share the HTML code used in our demo site’s footer content blocks. If you are using Labland, you can customise the text/links in the code and use it in your Moodle site.

What the footer content blocks will look like:

HTML code for footer content block 1

<h4 class="col-title">About Us</h4>
<ul class="footer-links list-unstyled">
    <li class="link-item"><a href="#">The School</a></li>
    <li class="link-item"><a href="#">Governors</a></li>
    <li class="link-item"><a href="#">Teachers</a></li>
    <li class="link-item"><a href="#">Admissions</a></li>
</ul>

HTML code for footer content block 2

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

HTML code for footer content block 3

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

How to make Moodle custom menu link open a new browser window

By default Moodle will open custom menu links in the current browser window, which works well if all of your custom menu links point to pages inside your Moodle site. However, if you’d like to point to an external link (eg. your organisation’s official website), it’s best to make the link open a new browser window/tab. That way your users are not being taken away from your Moodle site after clicking the link.

Below are the steps you can follow to make your custom menu links open in a new browser window.

Step 1

Log in to your Moodle site as an admin user, and navigate to the “Theme Settings” option under the Administration block: Administration > Site administration > Appearance > Themes > Theme settings

Step 2

Find the Custom menu items section and add "target="_blank after the desired link target URL.

The figure below shows how we make all of the external links in our Moodle demo open new windows.

moodle-custom-menu-links

You can try our Moodle demo to see the menu behaviour yourself.

moodle-custom-menu-links-demo

How to add Google Analytics to your Mahara site

Adding Google Analytics to your Mahara site is very easy – you can follow the 3 simple steps below to do so.

Step 1

Get your tracking code from your Google Analytics account.

mahara-google-analytics-tracking-code

Step 2

Go to your Mahara’s installation folder and open “config.php” with a text editor. Go to the end of the file and add

$cfg->additionalhtmlhead = " ". 

Step 3

Paste your tracking code into the “addionalhtmlhead” as shown in the figure below.

mahara-google-analytics

Looking for a professional Mahara theme?

Take a look at our responsive Mahara themes for Mahara 15.10. They all have their matching Moodle themes too.