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

Posted on 23 January, 2016 by Admin

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.

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

How to add Google Analytics to your Mahara site

Posted on 19 January, 2016 by Admin

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.

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.

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.

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.