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

Add Useful Bootstrap Components to Moodle Theme Gourmet/Herald/Impression/Labland/Element

Posted on 15 June, 2014 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.

This tutorial was originally written for the Gourmet theme but it also applies to the themes Herald, Impression, Labland and Element.

Want to improve your Moodle course’s content design? We have updated our responsive Moodle theme Gourmet to support the useful Bootstrap 3 components so you can easily drop the relevant HTML code snippets into your Moodle courses to enhance design and user experience.

In this tutorial we will list all the code for the components you can use in our Gourmet theme.

Demo: Link
Level: Intermediate
Pre-requirement: Basic HTML/CSS knowledge

1) Slideshow

<div id="carousel-1" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-1" data-slide-to="1"></li>
        <li data-target="#carousel-1" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active"><img src="http://3rdwavemedia.com/demo-images/slides/slide-3.jpg" alt="" /></div>
        <div class="item"><img src="http://3rdwavemedia.com/demo-images/slides/slide-2.jpg" alt="" /></div>
        <div class="item"><img src="http://3rdwavemedia.com/demo-images/slides/slide-1.jpg" alt="" /></div>
    </div>
    <a class="left carousel-control" href="#carousel-1" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#carousel-1" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>

<div id="carousel-2" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-2" data-slide-to="1"></li>
        <li data-target="#carousel-2" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://3rdwavemedia.com/demo-images/slides/slide-1.jpg" alt="" />
            <div class="carousel-caption">
                <h3>Caption One</h3>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
        <div class="item">
            <img src="http://3rdwavemedia.com/demo-images/slides/slide-2.jpg" alt="" />
            <div class="carousel-caption">
                <h3>Caption Two</h3>
                <p>Aenean vulputate eleifend tellus</p>
            </div>
        </div>
        <div class="item">
            <img src="http://3rdwavemedia.com/demo-images/slides/slide-3.jpg" alt="" />
            <div class="carousel-caption">
                <h3>Caption Three</h3>
                <p>Maecenas nec odio et ante tincidunt</p>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-2" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span></a> 
    <a class="right carousel-control" href="#carousel-2" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

2) Accordion

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a></h4>
        </div>

        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a></h4>
        </div>

        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a></h4>
        </div>

        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

3) Tables

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
    
                <th>First Name</th>
    
                <th>Last Name</th>
    
                <th>Username</th>
            </tr>
        </thead>
    
        <tbody>
            <tr>
                <td>1</td>
    
                <td>Mark</td>
    
                <td>Otto</td>
    
                <td>@mdo</td>
            </tr>
    
            <tr>
                <td>2</td>
    
                <td>Jacob</td>
    
                <td>Thornton</td>
    
                <td>@fat</td>
            </tr>
    
            <tr>
                <td>3</td>
    
                <td>Larry</td>
    
                <td>the Bird</td>
    
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
    
                <th>First Name</th>
    
                <th>Last Name</th>
    
                <th>Username</th>
            </tr>
        </thead>
    
        <tbody>
            <tr>
                <td>1</td>
    
                <td>Mark</td>
    
                <td>Otto</td>
    
                <td>@mdo</td>
            </tr>
    
            <tr>
                <td>2</td>
    
                <td>Jacob</td>
    
                <td>Thornton</td>
    
                <td>@fat</td>
            </tr>
    
            <tr>
                <td>3</td>
    
                <td>Larry</td>
    
                <td>the Bird</td>
    
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="table-responsive">
    <table class="table table-boxed">
        <thead>
            <tr>
                <th>#</th>
    
                <th>First Name</th>
    
                <th>Last Name</th>
    
                <th>Username</th>
            </tr>
        </thead>
    
        <tbody>
            <tr>
                <td>1</td>
    
                <td>Mark</td>
    
                <td>Otto</td>
    
                <td>@mdo</td>
            </tr>
    
            <tr>
                <td>2</td>
    
                <td>Jacob</td>
    
                <td>Thornton</td>
    
                <td>@fat</td>
            </tr>
    
            <tr>
                <td>3</td>
    
                <td>Larry</td>
    
                <td>the Bird</td>
    
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

4) Buttons

<p><a class="btn btn-theme" href="http://elearning.3rdwavemedia.com/themes/gourmet/">Theme Button</a></p>
<p><a class="btn btn-default" href="#link">Default Button</a></p>
<p><a class="btn btn-primary" href="#link">Primary Button</a></p>
<p><a class="btn btn-success" href="#link">Success Button</a></p>
<p><a class="btn btn-info" href="#link">Info Button</a></p>
<p><a class="btn btn-warning" href="#link">Warning Button</a></p>
<p><a class="btn btn-danger" href="#link">Danger Button</a></p>

<p><a href="#link" class="btn btn-primary"><i class="fa fa-heart"></i>Primary Button</a></p>
<p><a href="#link" class="btn btn-success"><i class="fa fa-check-circle"></i>Success Button</a></p>
<p><a href="#link" class="btn btn-info"><i class="fa fa-info-circle"></i>Info Button</a></p>
<p><a href="#link" class="btn btn-warning"><i class="fa fa-warning"></i>Warning Button</a></p>
<p><a href="#link" class="btn btn-danger"><i class="fa fa-exclamation-circle"></i>Danger Button</a></p>

You can change the icons in the buttons to any of the 300+ FontAwsome icons available

<p><a href="#link" class="btn btn-cta"><i class="fa fa-play-circle"></i>Apply Now</a></p>
<p><a href="#link" class="btn btn-cta"><i class="fa fa-play-circle"></i>Purchase Now</a></p>
<p><a href="#link" class="btn btn-cta"><i class="fa fa-play-circle"></i>Join Now</a></p>

5) Alerts

<div class="alert alert-success"><strong>Well done!</strong> You successfully read this important alert message.</div>
<div class="alert alert-info"><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div>
<div class="alert alert-warning"><strong>Warning!</strong> Best check yo self, you're not looking too good.</div>
<div class="alert alert-danger"><strong>Oh snap!</strong> Change a few things up and try submitting again.</div>

6) Quote

<blockquote class="custom-quote">
    <p><i class="fa fa-quote-left"></i>Viverra magna pellentesque in magnis gravida sit augue felis vehicula vestibulum semper penatibus justo ornare semper Gravida felis platea arcu mus non. Montes at posuere. Natoque.</p>
    <p class="people"><span class="name">Someone famous</span><br /><span class="title">Source Title</span></p>
</blockquote>

7) Boxes

<div class="box box-default">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 30 days of buying, we promise you a full refund – no questions asked!</div>

<div class="box box-border">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 30 days of buying, we promise you a full refund – no questions asked!</div>

<div class="box box-dark">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 30 days of buying, we promise you a full refund – no questions asked!</div>

<div class="box box-theme">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 30 days of buying, we promise you a full refund – no questions asked!</div>

8) Modal Window

<!-- Button trigger modal -->
<p><button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Launch demo modal </button></p>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: auto">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">100% Money-Back Guarantee</h4>
            </div>
            <div class="modal-body">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 30 days of buying, we promise you a full refund – no questions asked!</div>
            <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <a href="http://elearning.3rdwavemedia.com/themes/gourmet/" class="btn btn-primary">Buy Now</a>
            </div>
        </div>
    </div>
</div>

9) Promo Badges

<p class="promo-badge"><a class="RedDamask" href="#"> <span class="percentage">20% <span class="off">OFF</span></span> <br /> <span class="desc">Online application</span> </a></p>
</div>
<div>
<p class="promo-badge"><a class="OliveDrab" href="#"> <span class="percentage">10% <span class="off">OFF</span></span> <br /> <span class="desc">Join today</span> </a></p>
</div>
<div>
<p class="promo-badge"><a class="FireBush" href="#"> <span class="percentage">$99 <span class="off">only</span></span> <br /> <span class="desc">Buy Now</span> </a></p>
</div>
<div>
<p class="promo-badge"><a class="Mojo" href="#"> <span class="percentage">SALE</span><br /> <span class="desc">Online now</span> </a></p>

10) Labels

<p><span class="label label-theme">Theme Label</span></p>
<p><span class="label label-default">Default Label</span></p>
<p><span class="label label-primary">Primary Label</span></p>
<p><span class="label label-success">Success Label</span></p>
<p><span class="label label-info">Info Label</span></p>
<p><span class="label label-warning">Warning Label</span></p>
<p><span class="label label-danger">Danger Label</span></p>

<p><span class="label label-theme"><i class="fa fa-star"></i>Theme Label</span></p>
<p><span class="label label-default"><i class="fa fa-heart"></i>Default Label</span></p>
<p><span class="label label-primary"><i class="fa fa-leaf"></i>Primary Label</span></p>
<p><span class="label label-success"><i class="fa fa-check-circle"></i>Success Label</span></p>
<p><span class="label label-info"><i class="fa fa-info-circle"></i>Info Label</span></p>
<p><span class="label label-warning"><i class="fa fa-check-circle"></i>Warning Label</span></p>
<p><span class="label label-danger"><i class="fa fa-wrench"></i>Danger Label</span></p>

You can change the icons in the labels to any of the 300+ FontAwsome icons available

How to enable the “docking” feature in Moodle theme Gourmet

Posted on 25 May, 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.

After launching our responsive Moodle theme Gourmet, several customers got in touch and asked if we could add Moodle’s docking feature to the theme. “Gourmet” is a child theme of Moodle’s native Bootstrapbase theme and it inherits all the layouts and stylings from this parent theme. Since Bootstrapbase left out the docking feature in early versions of Moodle 2.5.x/2.6.x, docking is also not available in Gourmet. However, based on high demand Moodle developers have now added the docking option into the Bootstrapbase theme (related Moodle ticket: MDL-38923).

Therefore we have updated our Gourmet theme so docking can be enabled for sites using Moodle versions 2.5.6+, 2.6.3+ and 2.7. For anyone who is interested in enabling the docking feature in our Gourmet theme, you need to follow the three simple steps below:

Important: Do NOT enable the docking feature if you are using Moodle versions lower than 2.5.6, 2.6.3 and 2.7 as it will break the site navigation script! You can either upgrade your Moodle or leave the docking feature disabled.

You can find out your Moodle version following our tutorial here

Example: Moodle Version 2.6.1 and 2.6.2 is lower than Moodle version 2.6.3

Step 1

Go to the Gourmet theme folder and find a file called “config.php”. Open the file using a text editor and change line 38 from “$THEME->enable_dock = false;” to “$THEME->enable_dock = true;”

Disable Moodle dock (default in Gourmet theme):

$THEME->enable_dock = false;

Enable Moodle dock:

$THEME->enable_dock = true;

Step 2

Log in to your Moodle site as an administrator and navigate to the theme settings page: Site administration > Appearance > Themes > Theme settings

Step 3

On the theme settings page, make sure that the option “Allow blocks to use the dock” is checked. Click the “Save changes” button to save the settings.

That’s it, now you can enjoy the Moodle dock in our Gourmet theme.

Troubleshooting

You followed the steps above but still can’t get the docking feature working on your site?

You need to check your Moodle version. If you are using early versions of Moodle 2.5/2.6 (eg. Moodle 2.6.1) the docking feature is not going to work for you. You can either upgrade your Moodle or disable the dock feature by setting “$THEME->enable_dock = false;”

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.

Moodle Theme Gourmet – A new responsive Moodle theme

Posted on 9 March, 2014 by Admin

We have launched another responsive Moodle theme “Gourmet” for Moodle 2.5/2.6/2.7 which is based on our fast selling HTML5 website template “College Green”.

If you are looking for a professional and responsive Moodle theme for your organisation this year you don’t want to miss this one. The theme comes with 4 colour schemes and is packed with features!

Theme parents: Moodle Bootstrap Theme (Bootstrap Base)

Demo: Blue | Green | Purple | Red

Details: http://elearning.3rdwavemedia.com/themes/gourmet/

100% Money-Back Guarantee

College Green – A responsive education website template

Posted on 11 February, 2014 by Admin

We are happy to announce our first responsive education website template based on the Bootstrap framework. If you are using Bootstrap 3 as your website’s framework, this Bootstrap theme can be seamlessly integrated to take advantage of it’s unique simplicity and style, with four hand-picked interchangeable colour schemes ready to use straight away.

Based on years of experience designing for the Education sector, this template is tailored specifically for Schools, Colleges, Universities and online educational establishments who want to offer a clean and professional user experience for their users. Built with simplicity in mind, the responsive HTML5 template is ready to use on desktop, tablet and mobile with minimal customisation and is high on usability and low on gimmicks.

If you have any questions or feedback please get in touch.

Template details

Live Demo

How to set a different theme for a Moodle course

Posted on 30 November, 2013 by Admin

A lot of you know that you can set a theme for your Moodle site but some of you may not know that you can also set different themes for the courses in the same Moodle site. A theme you set for the course will always override the site theme. Below are the 2 simple steps you need to take to set a different theme for a Moodle course.

Step 1

Log in as an administrator and go to: Settings > Site administration > Themes > Theme settings and tick the “Allow course themes” checkbox

Step 2

Go to the desired course and navigate to its “Edit course settings” page. Select a theme option from the “Force theme” dropdown menu. Click the “Save changes” button and you will see the page refresh and the theme being applied immediately.

That’s it. Depending on how you use/organize your Moodle site, you might find this feature useful in the future.

Below are some examples of how the same Moodle course would look when different course themes are applied.

Ergo

Ace

Brizzle

Cantata

Dishy

100% Money-Back Guarantee

How to make Moodle grader report easy to read

Posted on 27 November, 2013 by Admin

In a Moodle course teachers can grade students’ work and view the report via the “Grades” option under the “Course administration” (see figure 1). However the default view of the report is not easy to read as there are too many available columns in the table and teachers have to scroll left and right horizontally to be able to see all the column data. Although it is not a big problem when there are only couple of students, imagine that you have more than 10 students in the course – it will get difficult to keep track of whose grade report you are looking at as you scroll the student names column out of view.

Figure 1

Luckily there is a useful “Static student column” feature which can be enabled to make the Moodle Grader report easier to read.

All you need to do is to navigate to Administration > Grades > Report settings > Grader report and tick the checkbox for the “Static students column” option. Click the “Save changes” button before you leave the page.

Go back to the course Grader report page and try to scroll the table horizontally. You can see the student names column is fixed to the left of the table and it doesn’t matter how far you scroll the table; you always know exactly which student’s data you are looking at.

Below is a figure containing a comparison of the Grader report page before and after the “Student static column” feature is enabled.

(The theme used in the screenshots is “Ergo”)

100% Money-Back Guarantee

How to add a Twitter timeline widget to Moodle after June 2013

Posted on 25 November, 2013 by Admin

Two years ago we wrote a blog post about how to add a Twitter timeline to a Moodle site via the Remote RSS Feeds block. Unfortunately Twitter fully retired its API v1 in June 2013 which means you can no longer pull in a Twitter timeline via the method described in that old blog post. However, subsequently Twitter introduced a new way for users to embed their own Twitter timelines on websites. In this blog post we are going to walk you through the steps to achieve this.

End result

You can view an example on our theme demo site here.

Step1

Step 2

Click the “Widgets” option in the left nav.

Step 3

Click the “Create new” button.

Step 4

Configure the widget depending on your needs and click the “Create widget” button.

Step 5

Copy the generated widget code. Also don’t forget to save the widget by clicking the “Save changes” button.

Step 6

Step 7

Configure the newly added HTML block and paste the widget code into the text editor’s HTML source editor.

Step 8

Save changes and turn off editing. Now you should see the Twitter timeline embedded in your Moodle site.

It is also possible to customize the appearance of the timeline.To find out more on how you can customise the widget further you can check out Twitter’s official documentation for developers.

What’s new in Moodle 2.6

Posted on 23 November, 2013 by Admin

Moodle 2.6 was released this month and you can download the stable version via the Moodle’s official website.

While updating all of our premium themes to work with this version we noticed some nice UI/UX improvements made by the Moodle development team and thought we’d take some screenshots to share with you. (The theme used in the screenshots is “Ergo”)

1) Configuration dropdown menu

Configuration related actions are grouped into relevant dropdown menus. The interface looks cleaner and decluttered. See the comparison figure below.

2) Brand new look for the TinyMCE text editor

See the comparison figure below.

3) New category and course management interface

Fewer clicks are required from the admins to add/edit/move categories and courses.

4) New course format

The old “SCORM format” has been replaced by a more versatile “Single Activity format” which allows all available activities to be used as the course format.

There are other new features in this release and if you are interested you can watch the short overview video from Moodle below:

How to customise CSS in our premium Moodle themes

Posted on 12 May, 2013 by Admin

We’ve got more and more customers who have bought our premium Moodle themes deciding to apply small changes/tweaks to the theme CSS file to meet their own design needs (eg. change button colours, background images/colours etc). If you are in this situation please read on. In this tutorial I will explain how to customise CSS so you won’t lose your changes when there is an update available for the theme. (Yes, we update all our premium themes regularly to fix reported bugs and add improvements – all customers get free updates.) The key to retaining your theme CSS changes is simple: ALWAYS override the existing theme CSS rules and NEVER edit the original theme CSS in place. There are two ways of doing this.

Method One (Basic)

What you need to do initially: Open the theme css file (general.css) and go to the bottom of the file and write your CSS changes there. This will duplicate some CSS rules, but the ones lower down override the existing ones above. What you need to do when you receive a theme update from us: 1) Copy the CSS code you wrote from your current CSS file and paste the code into the bottom of the new CSS file (below all existing code) and save. 2) Replace the old CSS file with the new one which now has your code at the bottom. This method is easy to follow but it does require you to copy and paste your own code whenever there is a theme update.

Method Two (Advanced)

What you need to do initially: 1) Create a CSS file under the theme style folder and give it a name. I’m going to use custom.css as the file name for demonstration purpose.

2) Open the config.php file under the theme folder. Go to line 9 and add the new CSS file name “custom”(without the “.css” file extension) AFTER the main CSS file “general” as shown in the figure below. Save the config.php file. The theme is now reading CSS rules from this file.

3) Write your CSS code changes in the new CSS file (custom.css) and save. What you need to do when you receive a theme update from us: Replace your old CSS file (general.css) with the new one we provide. This method requires more work initially but will save you from doing any manual copying and pasting work in the future.

Conclusion

It’s completely up to you which method you pick as they all serve the same purpose – prevent you from losing your CSS customisations when there is a theme update available.

Tip: When you are doing your theme customisation you may need to clear your theme cache regularly to see the changes you’ve made.

100% Money-Back Guarantee

How to clear Moodle theme caches

Posted on 3 September, 2012 by Admin

“Why are changes not applied when I update my Moodle theme files, even when I clear my browser cache?” I was puzzled by this question when I started out designing themes for Moodle many years ago. If this is also an issue for you, read on. The answer is actually really simple – Moodle caches files at server level. Clearing the browser cache is not going to get you anywhere, You need to clear the Moodle theme caches

“So how do I clear Moodle theme caches?” you may ask. There are three options and I will go through them with you.

Note: The theme used in the screenshots is our premium Moodle theme Brizzle.

Option 1 – Quick way to clear Moodle theme caches This option is recommended if the changes only need to be applied once. For example, there is a new release of your Moodle theme and you need to update your current theme.

Log in as an administrator and go to: Settings > Site administration > Themes > Theme selector. Click the “Clear theme caches” button as shown in the figure below.

Option 2 – Quick way to clear site-wide Moodle caches Similar to option 1. The only difference is that option 1 only clears Moodle theme caches, and option 2 clears all Moodle caches.

Log in as an administrator and go to: Settings > Site administration > Development > Purge all caches Click the “Purge all caches” button as shown in the figure below

Option 3 – Suitable for Moodle theme designers while developing themes on a development site When this option is enabled, Moodle will clear the theme cache automatically every time you refresh your browser. However, it’s not recommended on a production site as leaving this option on will affect your site’s performance and significantly slow your site down.

Log in as an administrator and go to: Settings > Site administration > Themes > Theme settings Tick the “Theme designer mode” checkbox and click the “save changes” button at the bottom of the page.