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

Posted on 22 December, 2015 by Admin

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 “Impression” for 2016. In this tutorial we will share the HTML code used in our demo site’s footer content blocks. If you are using Impression, 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

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

HTML code for footer content block 2

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

HTML code for footer content block 3

<h3 class="title">Get in touch</h3>
<div class="row">
    
    <p class="tel col-md-12 col-sm-12"><i class="fa fa-phone"></i>0800 123 4567</p>
    <p class="email col-md-12 col-sm-12"><i class="fa fa-envelope"></i><a href="mailto:support@website.com">support@website.com</a></p>
    <p class="adr clearfix col-md-12 col-sm-12">
        <i class="fa fa-map-marker pull-left"></i>        
        <span class="adr-group pull-left">       
            <span class="street-address">College Green</span><br>
            <span class="region">56 College Green Road</span><br>
            <span class="postal-code">BS16 AP18</span><br>
            <span class="country-name">UK</span>
        </span>
    </p>  
</div>

Advanced Bootstrap Components for Moodle Theme Impression/Labland/Herald/Gourmet/Element

Posted on 20 December, 2015 by Admin

The products listed in this blog post are deprecated and no longer available.
Looking for a Boost-based Moodle theme? Checkout our new products.

In our latest Bootstrap-based Moodle theme “Impression”, there are more advanced components you can use to design your courses. In this tutorial we will list all of the relevant HTML code snippets used in the theme demo.

Demo: Link
Level: Intermediate
Pre-requirement: Basic HTML/CSS knowledge
Related tutorial: Useful Bootstrap Components for Moodle themes

Jumbotron

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Tabs

<div class="overflow-hidden">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" style="margin-bottom: 0;">
    <li role="presentation" class=""><a href="#tab-1" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false">Tab 1</a></li>
    <li role="presentation"><a href="#tab-2" aria-controls="profile" role="tab" data-toggle="tab">Tab 2</a></li>
    <li role="presentation"><a href="#tab-3" aria-controls="messages" role="tab" data-toggle="tab">Tab 3</a></li>
    <li role="presentation" class="active"><a href="#tab-4" aria-controls="settings" role="tab" data-toggle="tab" aria-expanded="true">Tab 4</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="tab-1">Tab 1 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
    <div role="tabpanel" class="tab-pane" id="tab-2">Tab 2 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
    <div role="tabpanel" class="tab-pane" id="tab-3">Tab 3 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
    <div role="tabpanel" class="tab-pane active" id="tab-4">Tab 4 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
  </div>

</div>

Thumbnails

<div class="row overflow-hidden">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://dummyimage.com/171x180/5cb85c/fff.png&amp;text=thumbnail" alt="image" style="width:100%;">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://dummyimage.com/171x180/5bc0de/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://dummyimage.com/171x180/f0ad4e/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://dummyimage.com/171x180/d9534f/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
    </a>
  </div>
</div>

<div class="row overflow-hidden">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://dummyimage.com/242x200/5cb85c/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://dummyimage.com/242x200/5bc0de/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://dummyimage.com/242x200/f0ad4e/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://dummyimage.com/242x200/d9534f/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Media object

<h3>Default Example</h3>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/5cb85c/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    
  </div>
</div>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/5cb85c/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    
  </div>
</div>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/5cb85c/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="http://dummyimage.com/64x64/5bc0de/fff.png" alt="image">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        
      </div>
    </div>
    
  </div>
</div>

<h3>Alignment Example</h3>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/5cb85c/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Top aligned media</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/5bc0de/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

<div class="media">
  <div class="media-left media-bottom">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/f0ad4e/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Bottom aligned media</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

Panels

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-theme">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>

List Group

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

<ul class="list-group"> 
    <li class="list-group-item"> <span class="badge">8</span> Porta ac consectetur ac</li> 
    <li class="list-group-item"> <span class="badge badge-success">14</span> Cras justo odio </li> 
    <li class="list-group-item"> <span class="badge badge-info">2</span> Dapibus ac facilisis in </li> 
    <li class="list-group-item"> <span class="badge badge-warning">1</span> Morbi leo risus </li> 
    <li class="list-group-item"> <span class="badge badge-danger">5</span> Lorem Ipsum</li> 
</ul>

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>

Dropdown Buttons

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>


<div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

<div class="btn-group"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

<div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

<div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

FontAwesome Icons

There are 600+ fontAwesome icons you can use in the theme.

Icon colour related classnames:
Theme colour: color-theme
Blue: color-info
Green: color-success
Orange: color-warning
Red: color-danger

Icon size related classnames:
size 1: fa-1
size 2: fa-2
size 3: fa-3
size 4: fa-4
size 5: fa-5

<div>
    <i class="fa fa-hand-o-right fa-1 color-success">&nbsp;</i>
    <i class="fa fa-hand-o-right fa-2 color-danger">&nbsp;</i>
    <i class="fa fa-hand-o-right fa-3 color-warning">&nbsp;</i>
    <i class="fa fa-hand-o-right fa-4 color-theme">&nbsp;</i>
    <i class="fa fa-hand-o-right fa-5 color-info">&nbsp;</i>
</div>

Tooltips


    <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

    <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

Popovers


    <button type="button" class="btn btn-warning" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
      Popover on top
    </button>

    <button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
      Popover on bottom
    </button>

How to Enable User Signup in Moodle

Posted on 16 December, 2015 by Admin

By default, Moodle’s email-based self-registration is disabled. If you’d like to allow your users to sign up to your site via email, you need to enable the option manually. In this tutorial, we will show you how to achieve this in 3 simple steps.

Users can sign up to your site via the login page after the option has been enabled:

Step 1

Log in to your Moodle site as an admin user, and navigate to the “Manage authentication” option under the Administration block: Administration > Site administration > Plugins > Authentication > Manage authentication

Step 2

Under the “Available authentication plugins” section, find the “Email-based self-registration” and enable the plugin by activating the eye icon.

Step 3

Under the “Common settings” section, find the “self-registration” dropdown and change the option from “disabled” to “email-based self-registration”

That’s it. Now your users can signup to your site.

If you’d like to customise the signup form, you can go to the “Email-based self-registration” page to do that: Administration > Site administration > Plugins > Authentication > Email-based self-registration

How to Enable Course Guest Access in Moodle 3.6/3.7

Posted on 15 December, 2015 by Admin

In Moodle 3.6/3.7, you can no longer enable guest access via the course settings page. If you want to enable that feature, follow the steps below.

The screenshots used in this post are taken from our Boost-based Moodle theme Maker

Step 1

Log in to your Moodle site as an admin user, and navigate to the desired course. Click the “Participants” link as shown in the figure below.

Step 2

Click the participants settings icon (cog icon) and select the “Guest access” option from the dropdown menu.

Step 3

Allow guest access. Select “Yes” from the dropdown menu.

Moodle Theme Tip: How to make the testimonial carousel cycle automatically in the Gourmet theme

Posted on 23 May, 2015 by Admin

The product listed in this blog post is deprecated and no longer available.
Looking for a Boost-based Moodle theme? Checkout our new products.

In our responsive Moodle theme Gourmet, there is a testimonial carousel section and the testimonials can be played manually. If you want to have the testimonials cycle automatically as shown in the figure below, you can make a small change in the theme JavaScript.

Step 1

Open the theme JavaScript file in your text editor.

Gourmet > JavaScript > main.js

Step 2

Find the line: $('#testimonials-carousel').carousel({interval: false, pause: "hover"}); and change the value of “interval” from “false” to a number.

The number is the time (milliseconds) to delay between automatically cycling a testimonial item. For example, if you want the cycling interval to be 5 seconds, the number you enter should be 5000.

Moodle Theme Tip: Disable the YouTube’s video suggestions so visitors stay on your site

Posted on 17 May, 2015 by Admin

Our Moodle theme Herald’s landing page has a video section where you can add a YouTube video to promote your site. You can add your video via the theme settings page by entering the YouTube video ID. By default YouTube will display suggested videos after the video finishes (as shown in the figure below).

If you don’t want your visitors to get distracted by those suggested external videos you might want to disable the suggestions. To do that you can simply add ?rel=0 right after your YouTube video ID as shown in the figure below.

How to add responsive videos in Moodle themes Gourmet and Herald

Posted on 14 February, 2015 by Admin

We have added responsive video support in our Moodle themes Gourmet and Herald so you can embed fully-responsive Youtube/Vimeo videos to your courses with ease.

In this tutorial we will show you how to make your videos responsive in Moodle.

You can check the final results in our demos:

Step 1

Find your desired video in Youtube or Vimeo and get the embed code.

Get the Youtube video code:

Click the “Share” link under the Youtube video then select the “Embed” tab.

Get the Vimeo video code:

Click the “Share” icon on top of the video to open the share popup. The code you need is in the “Embed” box.

Step 2

Go to your Moodle course and turn editing on. Add a “Label” via the “Add an activity or resource” popup.

Step 3

Turn on the HTML Source Editor for the “Label text” input field by clicking the HTML icon in the editor menu.

Paste in your Youtube/Vimeo code and wrap them inside of a DIV with CSS class name “video-container” like shown in the screenshots below.

Youtube video

<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/WvCIv5KCbeE" frameborder="0" allowfullscreen=""></iframe>
</div>

Vimeo video

<div class="video-container">
    <iframe src="http://player.vimeo.com/video/3867499?color=ffffff&amp;portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    <p><a href="http://vimeo.com/3867499">Moodle Presentation</a> from <a href="http://vimeo.com/user1416376">Alja Isaković</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>

Save your changes and that’s it – you just added responsive video to your Moodle course!

Moodle themes “Gourmet” and “Herald” – How to translate default theme language strings

Posted on 5 January, 2015 by Admin

If your Moodle site’s default language is not English and you are using our Moodle theme Gourmet or Herald you might want to translate some of the theme specific text strings to your site’s default language.

In this tutorial, we will show you how to translate the default theme words and phrases.

Assumptions in this tutorial example:

Moodle site’s default language: German
Translation task: translate the theme menu text “My Dashboard” to German

Step 1

Log in to your Moodle site as an admin user, and navigate to the language customisation option: Settings > Site administration > Language > Language customisation

Step 2

Select Deutsch (de) from the language pack dropdown menu

Step 3

Click the “Open language pack for editing” button and continue as instructed.

Step 4

If you are using the Gourmet theme, you need to select theme_gourmet.php in the selection box. If you are using the Herald theme, you need to select theme_herald.php instead.

Go to the “Only strings containing” filter box and enter “My Dashboard” (or any other text you want to replace it with, without the quotation marks).

Step 5

In the Local customization box, enter the text in the language you want to translate to. For German, this would be “Meine Übersicht”. Save the changes to the language pack.

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

Posted on 9 October, 2014 by Admin

We have made another responsive Moodle theme “Herald” and we are going to share the HTML code used in our demo site’s footer content blocks. If you are using Herald 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

<h3 class="title">About us</h3>
<ul class="list-unstyled">
    <li><a href="http://elearning.3rdwavemedia.com/" target="_blank"><i class="fa fa-caret-right"></i>Who we are</a></li>
    <li><a href="http://elearning.3rdwavemedia.com/blog/" target="_blank"><i class="fa fa-caret-right"></i>Blog</a></li>
    <li><a href="http://elearning.3rdwavemedia.com/themes/" target="_blank"><i class="fa fa-caret-right"></i>Moodle Themes</a></li>
    <li><a href="http://elearning.3rdwavemedia.com/contact/" target="_blank"><i class="fa fa-caret-right"></i>Contact</a></li>
</ul>

HTML code for footer content block 2

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

HTML code for footer content block 3

You can generate your own twitter button code here

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

<!--//Below is the twitter follow button -->   
         
<a href="https://twitter.com/3rdwave_moodle" class="twitter-follow-button" data-show-count="false">Follow @3rdwave_moodle</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

If you are looking for other useful HTML code widgets you can use in the Herald theme, please check out our previous blog post – Add Useful Bootstrap Components to Moodle Theme Gourmet

Herald – A responsive Moodle theme designed for eLearning

Posted on 9 October, 2014 by Admin

We have launched a new responsive Moodle theme “Herald” for Moodle 2.6/2.7/2.8. It is designed to help you promote your online courses effectively. The landing page UX design is focused on engaging and influencing your site visitors to take your courses.

If you are looking for a conversion-oriented Moodle theme, you need to check out “Herald”!

Theme parents: Moodle Bootstrap Theme (Bootstrap Base)

Theme details: http://elearning.3rdwavemedia.com/themes/herald/

Demo: Default | Blue | Green | Purple

100% Money-Back Guarantee

We confidently offer a 100% money-back guarantee with all of our Moodle/Mahara themes. If you decide you don’t want to use it and email us why within 14 days of buying, we promise you a full refund.

How to make your Moodle course public without asking user to log in as a guest

Posted on 7 July, 2014 by Admin

By default, users need to log in to see a Moodle course. However, sometimes you might want to make a course public so the users can click the course title and go straight into the course in the way we have in our Moodle theme Maker demo site

Some of you may already know that you can enable the course guest access so the course is accessible publicly, but you will soon discover that after the users click the course title your Moodle site will still ask them to log in (please see the screenshot below). For users who don’t know Moodle well they are very likely to be deterred at that point as they think they will need login credentials to be able to see the course. What they don’t realize is that to unlock the course all they need to do is to click the “log in as a guest” button.

In this tutorial we will show you how to turn off the login page and make your Moodle course truly public.

Step 1

Log in to your Moodle site as an admin user, and navigate to the course you’d like to make public and enable the guest access (tutorial here). Save the changes.

Step 2

Navigate to the user policies page: Administration > Users > Permissions > User policies. Tick the checkbox next to “Auto-login guests” and save the changes.

That’s it. Now anyone clicks your course title will be taken directly into the course itself without being asked to login.

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

Posted on 6 July, 2014 by Admin

The product listed in this blog post is deprecated and no longer available.
Looking for a Boost-based Moodle theme? Checkout our new products.

Some of our customers who bought our responsive Moodle theme “Gourmet” wanted to configure the three theme footer content blocks the same way we did on our Moodle theme demo site. So we’ve decided to share the HTML code used in our demo site’s footer content blocks for you to use. If you are using Gourmet or any Bootstrap based Moodle theme with footer content input fields 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

<h3>About Us</h3>
<ul>
    <li><a href="http://elearning.3rdwavemedia.com/themes/gourmet" target="_blank"><i class="fa fa-caret-right"></i>About Gourmet</a></li>
    <li><a href="http://elearning.3rdwavemedia.com/themes/" target="_blank"><i class="fa fa-caret-right"></i>Premium Moodle Themes</a></li>
    <li><a href="http://elearning.3rdwavemedia.com/blog/" target="_blank"><i class="fa fa-caret-right"></i>E-learning Blog</a></li>
    <li><a href="http://elearning.3rdwavemedia.com/contact/" target="_blank"><i class="fa fa-caret-right"></i>Contact us</a></li>
</ul>

HTML code for footer content block 2

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

HTML code for footer content block 3

<h3>Contact us</h3>
<div class="row">
    <p class="adr clearfix col-md-12 col-sm-4"><i class="fa fa-map-marker pull-left"></i><span class="adr-group pull-left"><span class="street-address">College Green</span><br><span class="region">56 College Green Road</span><br><span class="postal-code">BS16 AP18</span><br><span class="country-name">UK</span></span></p>
    <p class="tel col-md-12 col-sm-4"><i class="fa fa-phone"></i>0800 123 4567</p>
    <p class="email col-md-12 col-sm-4"><i class="fa fa-envelope"></i><a href="#">enquires@website.com</a></p>
</div>

If you are looking for other useful HTML code widgets you can use in our Gourmet theme, please check out our previous blog post – Add Useful Bootstrap Components to Moodle Theme Gourmet