How to set a different theme for a Moodle course

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

moodle-enable-course-theme

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.

moodle-force-course-theme

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

moodle-theme-ergo-course-view

Ace

moodle-theme-ace-course-screenshot

Brizzle

moodle-theme-brizzle-course-view

Cantata

moodle-theme-cantata-course-view

Dishy

moodle-theme-dishy-course-view

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 Moodle grader report easy to read

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.

moodle-course-grades
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.

moodle-grader-report-settings

moodle-enable-static-student-column

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.

moodle-static-student-column-comparison
(The theme used in the screenshots is “Ergo”)

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 add a Twitter timeline widget to Moodle after June 2013

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

Log in to your Twitter account and navigate to the settings page.

twitter-settings

Step 2

Click the “Widgets” option in the left nav.

Step 3

Click the “Create new” button.

twitter-widget-create

Step 4

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

twitter-generate-widget-code

Step 5

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

twitter-widget-code

Step 6

Log in to your Moodle site as an administrator. Turn editing on and add an HTML block.

moodle-add-block

Step 7

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

moodle-paste-twitter-widget-code

Step 8

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

moodle-twitter-widget-embeded

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

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.

moodle-2.6-new-config-menu

2) Brand new look for the TinyMCE text editor

See the comparison figure below.

moodle-compare-text-editors

3) New category and course management interface

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

moodle-2.6-cat-course-management

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.

moodle-2.6-course-format-new

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

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.

create-css-file

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.

add-css-in-config

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

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 clear Moodle theme caches

“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.

How to add a Facebook Comments Box to your Moodle site

Adding a Facebook Comments Box enables users to easily make comments, which is a nice way to enhance the social media aspects of your site. In this tutorial, I’m going to show you how to add the Comments Box to your Moodle site’s side column, which, in my opinion, is the best place to hold it.

To see an example, you can visit the live demo for our premium Moodle themes here.

Below is a preview of the end result on our theme demo site (themes used from left to right: Ace, Brizzle and Cantata).

screenshot

Before we do anything in Moodle, we need to get the Comments Box from Facebook first.

Get Facebook Comments Box

1) Go to the Facebook developers plugin page:
https://developers.facebook.com/docs/reference/plugins/comments/

2) Configure the Comments Box settings depending on your specific needs.

screenshot

3) Once you are happy with the settings, you can click the “Get Code” button to generate the code. Keep the page open because you’ll need it later on.

screenshot

Ok, now it’s time to do something in Moodle – log into Moodle as an administrator. (Here I’m using our premium theme Cantata as an example in the tutorial).

Step 1

Turn editing on and add a HTML block to your Moodle site by selecting the “HTML” option from the “Add a block” drop down menu as shown in the figure below.

screenshot

Step 2

Now you should see that a new HTML block has been added. Click the configuration icon, which is the second icon, as shown in the figure below (your Moodle site’s configuration icon will look different).

screenshot

Step 3

On the “Configuring a (new HTML block) block” page, turn on the HTML Source Editor for the “Content” text field by clicking the HTML icon in the editor menu as shown below.

screenshot

Step 4

Copy and paste the code from the previous Facebook page into the HTML Source Editor.

screenshot

Step 5

Since Moodle’s source editor will try to automatically strip out the required empty markup we are adding, we need to apply a little trick here. Otherwise, the Comments Box will not show up on your Moodle site but luckily the trick is very simple. All you need to do is to add an HTML space “ ” (without the quotation marks) inside of the empty div to trick Moodle to keep the empty div – see the figure below.

screenshot

Step 6

Enter a block title and configure the other options before saving, and you are done.

screenshot

Moodle Themes – “Ace” and “Brizzle”

We have launched our first two premium Moodle Themes “Ace” and “Brizzle” and they have proved to be very popular. I thought I’d write a quick guide to illustrate options available in their theme settings page for our old and future customers alike.

The two themes all have their own Theme Settings page (located under: Settings > Site administration > Appearances > Themes) where you can make the following theme-related customisatons.

1)Customisable logo

Upload your logo to your web server and then enter the logo URL into the logo form field as shown in the figure below.

2)Header widget area

There is a block space in the page header for customised HTML content – see the figure below.

This widget area is best for social media elements such as Twitter and Facebook. You can follow another tutorial here to learn how to do so.

3) Footer widget area

There is  a block space in the page footer for customised HTML content – see the figures below.

This widget area is ideal for putting in your site copyright note – you can customise the HTML code below to have a similar copyright notices to the ones shown in the figures below. Remember you need to use the HTML source editor for entering any HTML code.

<p style="text-align: center;">&copy; Company Name.</a></p>

If you are interested in our premium Moodle Themes and would like to find out more, you can visit the themes page for more information and live demos.

We are planning to make more premium Moodle Themes in the near future, so watch this space or follow us on Twitter to get notified of any theme related news or updates. All our premium Moodle themes (current and in the future) will include the following as standard:

  • Customisable logo
  • Header widget area – ideal for social media (tutorial)
  • Footer widget area – ideal for copyright notice
  • Moodle custom menu (tutorial)
  • Compatible with all modern web browsers.
  • Free future updates for the theme’s major Moodle release (we’ll always provide 2.x updates for Moodle v2 themes)

6 User Experience related new features in Moodle v2.3 – A quick visual guide

Moodle v2.3 was released on 25th June 2012. Below is a quick visual guide I put together to illustrate the 6 new features in this release which, in my opinion, greatly improve Moodle’s user experience.

The screenshots used in this visual guide were taken from our premiere Moodle theme Ace, which is fully compatible with the Moodle 2.3 release.

1) Drag and drop files


Please Note:

This feature only works in browsers which support the HTML5 “Drag and Drop” and “File” APIs (this means it will not work in Internet Explorer versions 9 and below).

From your computer directly into Moodle’s course.

screenshot

From your computer directly into Moodle’s file picker

screenshot

2) Drag and drop to re-arrange Moodle course sections or Moodle side blocks

Rearrange course sections.

screenshot

Rearrange side blocks.

screenshot

3) Quick and easy re-naming

You can edit the course activity/resource names without leaving the course page.

screenshot

4) New way to add an activity/resource

A nice popup window is used to present all the available Moodle activities/resources in a much more user friendly way.

screenshot

5) New course layout – defeat Moodle’s “scroll of death”

Now in the course settings, you can tell Moodle to “show one section per page” to avoid the “scroll of death” issue.

screenshot

6) New file picker


The new file picker can display not only the file names but also the relevant file thumbnails as well. This new feature provides users with better visual clues when they need to identify certain uploaded files.

screenshot

How to generate and issue a course certificate to learners using the Moodle certificate module

Not long ago I was asked if it is possible for Moodle to generate and email a certificate to learners who have passed a particular exam (Moodle Quiz). After looking into the matter, I’ve found a way to do just that by using a great Moodle module called “Certificate

Scenario:

You’ve set up a Moodle training course where you have added an exam using a Moodle quiz. The pass mark for the quiz is 60%. A course certificate will be generated and emailed to learners who get a score equal to or greater than 60%.

Solution:

Step 1

Download and install the Certificate module to your Moodle site.

Step 2

Go to the desired course as a course teacher/manager, and click “Editing settings” under “Course administration” as shown in the figure below.

screenshot

Step 3

On the “Editing course settings” page, enable completion tracking. Save the changes.

screenshot

Step 4

Turn editing on and update the existing exam (Moodle quiz). Make sure the “Activity completion” section is configured as shown in the figure below. Save the changes.

screenshot

Step 5

Go back to the course page and add “Certificate” as a Moodle activity.

screenshot

Step 6

Configure the certificate. There are lots of settings available for you to customise based on your needs, but I’m not going to cover everything here. For comprehensive information, you can check out Moodle’s official documentation here

In the figures below you can see some of the settings I used for making this tutorial.

screenshot
screenshot
screenshot

Step 6

Based on the scenario, we need to make sure the “Grade condition” and “Activity completion condition” are configured correctly as shown in the figure below.

screenshot

Step 7

Now it’s testing time – you need to log out and log back in as a student. Take the exam. If you pass the exam you should be able to see the certificate link.

screenshot

Step 8

Click the certificate link and you should see the instruction as shown in the figure below.

screenshot

Step 9

Click the “Get your certificate” button and your certificate will be generated and emailed to you.

screenshot
screenshot

Conclusion

I hope you find this tutorial useful. For the certificate design, there are quite a few default options which come with the module to get you started. However, if you are feeling adventurous you can also customise the design by following the Moodle documentation here

How to add Twitter and Facebook buttons to your Moodle site

Adding Twitter and Facebook like buttons to a website is always a good idea if you’d like to spread the word about your site through social networking. In this tutorial I will walk you through how to add the commonly seen buttons to your Moodle site.

First things first. Before we do anything in Moodle, Let’s get the buttons from Twitter and Facebook’s official websites.

Get Twitter “Share a link” button

1) Go to Twitter’s official buttons page: http://twitter.com/about/resources/buttons

2) Select “Share a link” and enter the desired options as shown in the figure below.

screenshot

3) Once you are happy about the button’s preview, you can keep the page open for later use.

Get Facebook “like” button

1) Go to the Facebook developers plugin page: http://developers.facebook.com/docs/reference/plugins/like/

2) Configure the like button as shown in the figure below. For the like button to work in Moodle you can only use the IFRAME version rather than the HTML5/XFBML version.

screenshot

3) Once you are happy with the button’s preview, you can click the “Get Code” button. In the popup window you need to choose the IFRAME option as shown in the figure below. Keep the page open for later use.

screenshot

Ok, now the buttons are ready for use we can dive into Moodle to add the buttons.

Step 1

In a new window, Log into Moodle as an administrator. Select the “HTML” option from the “Add a block” drop-down menu.

screenshot

Step 2

Now you should see that a new HTML block has been added. Click the configuration icon, which is the second icon, as shown in the figure below. (Your Moodle site’s configuration icon will look different )

screenshot

Step 3

On the “Configuring a (new HTML block) block” page, turn on the HTML Source Editor for the “Content” text field by clicking the HTML icon in the editor menu as shown below.

screenshot

Step 4

Copy and paste the relevant buttons’ code from the previous Twitter and Facebook pages into the HTML Source Editor and click the “Update” button.

screenshot

Step 5

Enter a block title and configure other options before saving.

Step 6

You need to turn off editing to see the changes.

screenshot

Conclusion:

Using a Moodle HTML block to add Twitter and Facebook buttons is only one way of doing it. If your Moodle theme offers you extra block/widget areas to enter HTML code you can take advantage of those as well.

For example, in our premium Moodle Theme “Ace”, you can go to the theme settings page and add the Twitter and Facebook buttons to the page’s header as shown below.

screenshot

How to add a promotional banner to your Moodle front page

If you have seen our new premium Moodle Theme’s demo site, you will notice that there is a promotional banner placed on the Moodle’s front page. By default, Moodle’s front page is the site landing page, and landing page is always an ideal place for a promotional banner to attract immediate attention from visitors.

In this tutorial I will show you how to add a banner on your Moodle front page.

Step 1

Log into Moodle as an administrator and navigate to the “Front page settings” page.

Settings > Front page settings > Editing settings.

screenshot

Step 2

On the “Front page settings” page you will find an option called “Include a topic section”. Make sure the box for this option is ticked. Save the changes.

screenshot

Step 3

Navigate to the front page. Click the “Turn editing on” link which is located right underneath the “Front page settings”.

screenshot

Step 4

Now you should see the “Add a resource…” menu appear on the top of the front page content area. Select the “label” option from the menu as shown in the figure below.

screenshot

Step 5

In the “Label text” editor you can upload and insert your banner image by clicking the image icon in the menu bar.

screenshot

Step 6

Click the “Save and return to course” button and you should see your banner appear on the front page.

screenshot

Hopefully you find this tip useful. In fact, you can not only add a banner image but also text/video/flash to the front page using this method. So just play around with it and you might develop some creative ideas for your site’s landing page.