Select Moodle version:

Themes: Essential

Essential is a clean, highly customisable responsive theme with a dynamic slideshow on it's frontpage.
Maintained by: Julian Ridden Julian Ridden

The "Essential" Moodle Theme

With 2.5 now release I thought it time to take the opportunity to build a new theme that would push the new theme engine to it's limits a bit. With that in mind I am happy to introduce the new "Essential" theme.

The idea of this theme, as usual with my themes, is to make the site look as little like Moodle as possible. In this specific instance, it would be used on sites where Moodle would potentially serve as a company homepage rather than just a course list.

Cool things to know about the theme.

  • It only uses 4 images.
  • Most of what you think are "graphics" are actually the Awesome font
  • The theme has three pages of settings that allow you to cinfigure nearly every element.
  • The slider on the frontpage of the demo site is completely customisable through theme settings
  • I am really trying to push what Bootstrap Grids can do. As such the theme is fully responsive.
  • The footer is all custom Moodle regions. This means blocks can be added. The footer of the demo site is full of HTML blocks in this instance
  • The Theme uses Google webfonts to give it that extra bit of shazam!
  • Social Network and Mobile App icons appear at the top of the page dynamically based on theme settings
  • The entire color scheme can be modified with theme settings (like on Rocket)
  • Marketing blocks on the frontpage are all customisable through theme settings.

Video Overview

New in 2.7

  • FIX: Numerous CSS fixes
  • FIX: Due to popular request reports are now 2 column again
  • FIX: Significantly improved RTL support
  • FIX: Back To Top link now moved to the right side so does not overlap on content
  • FIX: Fixed layout of top icons.
  • NEW: Can create alternative color schemes for users to select.
  • NEW: Can select icons for categories
  • NEW: Add support for the max-layout-width feature when empty regions are used.

New in 2.6.2

  • FIX: Numerous CSS fixes
  • FIX: Third level dropdown in custom menu now works
  • FIX: iOS7 custom menu now works when changed to a sing dropdown in portrait view
  • FIX: Social networking icons now line up properly
  • FIX: GoogleFonts will now load in HTTPS setups
  • NEW: Frontpage content now goes full width if all blocks removed.

New in 2.6.1

  • NEW: MAJOR UPDATES for 2.6 compatibility.
  • NEW: Moved layouts to a more "moodle standard" 1, 2 and 3 column layout.
  • UPDATE: [Font Awesome 4.0.3]( now supported.
  • UPDATE: Using new font setting to dynamically load the fonts.
  • NEW: Can now add three columns of blocks to middle of the homepage under marketing spots.
  • NEW: Theme setting added to allow admins to align frontage blocks to the left or right.
  • NEW: Two designs for the slideshow available. One with image to the right, other with a background image.
  • FIX: Guest users no longer get "my courses" or "dashboard" dropdown menus.
  • FIX: Nav Menu generates cleanly on IE.
  • FIX: Gradebook now displays no blocks to maximise available space.
  • FIX: Numerous CSS fixes and cleanup

New in 2.6

  • Added ability to select from 21 preset Google Font combinations or disable their use completely.
  • Now includes additional Bootstrap JS plugins to allow for more dynamic formatting as shown on
  • New Frontpage Slideshow settings to allow to display; all the time, only before login, only after login or never.
  • New Marketing Spots settings to allow to display; all the time, only before login, only after login or never.
  • Course Labels are no longer in bold by default
  • Now has a companion Mahara ePorfolio theme so you can keep them looking alike -
  • Further minor bug fixes and tidy up.

New in 2.5.4

  • Display current enrolled courses in dropdown menu and choose terminology (modules, courses, classes or units).
  • New 'My Dashboard" in custommenu provides quick links to student tools. Can be disabled in theme settings.
  • In Theme settings you can now choose to load FontAwesome via CDN (requested feature)
  • iOS home screen icons now built in. Can upload your own via settings.
  • Alerts for users can be added to the frontpage. (Originally dreamed up by Shaun Daubney and re-coded by me).
  • Theme options to connect to Google Analytics.
  • Advanced Google Analytics function allowing Clean URL's for better reporting. Contributed by @basbrands and @ghenrick. More info on this feature can be found in this blog post
  • Significantly improved gradebook formatting.
  • Toggle in Theme settings determines if FontAwesome is loaded from the theme or from the source.
  • Back to top button for course pages.
  • New "Frontpage Content" box to add custom content in between the slideshow and marketing spots.

Fixes in 2.5.4

  • Fix to frontpage slideshow. First slide now loads properly.
  • Updated include method to minimse conflicts with 3rd party plugins
  • Code significanty optimised. (about 1/5 less lines!)
  • Many CSS Fixes
  • IMPORTANT: Theme requires Moodle 2.5.1 or higher

See the theme in Action

If you would like to see it in action, head to




Julian Ridden
Julian Ridden (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Picture of Ben Hutchens
    Thu, Feb 20, 2014, 5:42 PM
    Hi, I think this theme is fantastic. I am having one small issue so far. When I upload a picture to a marketing hot spot it appears really small. I have tried uploading jpg and png and resizing to the hight settings to no avail. Any help would be appreciated. Running 2.6.1
  • Picture of Kevin Hardin
    Thu, Feb 20, 2014, 9:32 PM
    I was able to correct the issue by changing the Settings. CSS file around line 440 to the size I liked for my site. I hope this helps.
  • Picture of mark soliman
    Wed, Feb 26, 2014, 1:48 AM
    the Essential theme on a few browsers i'm testing displays a blue vertical line on the right hand side. (Screenshot won't upload.) It doesn't display on all browsers and I have no clue how to get rid of it. Any thoughts?
  • Picture of Erison Nicodemos
    Thu, Feb 27, 2014, 1:56 AM
    how to change, to change the color of unread messages in the forum?
  • Just wondering . . .
    Thu, Feb 27, 2014, 10:40 AM
    Just looking at options to display posts in the centre (ie not the sides) on essential.
    I note this: says "More to come" on location of blocks

    Anything anyone can add on this? Can you stick blocks anywhere?

  • Picture of Marc Coyles
    Sun, Mar 2, 2014, 2:45 AM
    Should one be able to use Bootstrap's Grid Scaffold within labels etc? Have tried with and without wrapping in container-fluid but get odd results.
  • Picture of Marc Coyles
    Sun, Mar 2, 2014, 2:45 AM
    (using latest of both Moodle and Essential btw)
  • Picture of AM Sanat
    Wed, Mar 5, 2014, 5:42 PM
    Do you have idea, how can set role for "Manager" that can change in " Site administration> Appearance > Themes > Essential >Front page Slideshow" Slide title, Slide image, Slide caption
    Or how can create a user role, that can change "Slide title, Slide image, Slide caption" and other setting for this theme
  • Picture of roberto ayerve siguas
    Wed, Mar 12, 2014, 2:20 AM
    Hello I would like to know how to adjust the column width to allow more space to the course, because the columns are very wide administrator
  • Picture of Hind El Abdellaoui
    Wed, Mar 12, 2014, 9:15 PM
    Hi, i would like to know if is there any possibility to adapt this theme 'essential' with moodle 2.4 because i can't host moodle 2.6 on my server.
  • Picture of Forrest Doddington
    Thu, Mar 20, 2014, 6:06 AM
    The version numbers of Moodle and the Essential Theme are confusing me. We are running Moodle 2.5.4. I've noticed that Essential Theme is now version 2.7 and there is a note on the 2.6.1 release about compatibility with "2.6." Can someone please tell me if Essential 2.7 will run on Moodle 2.5. Or, will it only run on Moodle 2.6+?
  • Picture of Daniel Muller
    Sat, Mar 29, 2014, 8:52 AM
    I uploaded a new background image (png) in the [Appearance:Themes:Essential:Colour Settings]. The image seems to upload fine and shows up on the site. The preview on the settings page, however is broken. I looked in Chrome Developer Tools and see that there is "500 Internal Server Error in conjunction with "yui_combo.php?rollup/3.13.0/yui-moodlesimple-min.js:160" I'm running Moodle 2.6.2 and Essential 2.7

  • Picture of Daniel Muller
    Sat, Mar 29, 2014, 9:06 AM
    FYI (regarding the previous comment) I set up moodle using the softaculous on cpanel. I also ticked the setting that requires the site to run under https.
  • Picture of James Foster
    Mon, Apr 7, 2014, 11:41 PM
    I really like the new theme; HOWEVER, I am not able to use the Sharing Cart plugin. Any ideas HOW to get the icons to appear using this theme?
  • Picture of Ben Hutchens
    Thu, Apr 17, 2014, 8:46 PM
    Hi there, is there a way to create separate background images for different layouts i.e. I would like one bg image for front page layout and another for all other pages. I have a basic grasp of CSS but having difficulty working out the relationships here. Any help would be greatly appreciated.

    Many thanks

1 2 3 4 5 6 7 8 9 10 11 12 13 14
Please login to post comments