Your Moodle version

Themes: Elegance

Maintained by Picture of Bas Brands Bas Brands
Elegance is a beautiful two column Moodle theme with robust functionality and lots of custom settings.


  • Font Awesome icons
  • Google Web Fonts
  • Custom "Quick Links" and "Marketing" spots
  • Custom "Front Page Content" and "Footer" content
  • Custom colors
  • Custom "User Menu"
  • Custom log in screen


A video showing many of the core features is available for viewing at Vimeo.

If you would like to see it in action, head to the 2014 iMoot site.



  • This theme requires the theme "Bootstrap". If you're using Moodle auto-updater it will automatically install it too.
  • Please do not use the github version of this theme in a production environment. The current plugin repository version will always be the most stable.
  • Please don't ask for support in the comments section here- there's no easy way for me to discuss with you.  Use the "Discussion" thread under "Useful Links" below.


Screenshot #0
Screenshot #1
Screenshot #2
Screenshot #3
Screenshot #4
Screenshot #5


Picture of Bas Brands
Bas Brands (Lead maintainer)
Julian Ridden
Julian Ridden: Original author
Picture of Danny Wahl
Danny Wahl: Previous maintainer
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Carlos Andrés Martínez Anguiano
    Wed, Jan 6, 2016, 10:31 AM
    Hi, I've installed this theme and it's great, but I have a problem with the "cross" icon used for moving activities and resources in the course page: it falls behind the "Edit" Menu, making it unaccesible for select. I've tried with firefox and Chrome with the same results. Is there a way to fix this issue? Thanks in advance.
  • Picture of Bas Brands
    Thu, Jan 7, 2016, 6:05 PM
    @Nuel: This bug might have been fixed recently on the GitHub version of the theme. Could you try installing that version?
    @Carlos: Could you report this issue on and add a screenshot?
  • Picture of Diego Maca
    Mon, Jan 11, 2016, 10:52 PM
    Hi, I like this theme but I need to change logo's size (probably I need to change navbar height too) what file I have to modify?
    Thank you
  • Picture of Bas Brands
    Tue, Jan 12, 2016, 6:05 PM
    There is a custom css setting in the theme settings that will allow you to change / update any css.
  • Picture of Diego Maca
    Tue, Jan 12, 2016, 6:54 PM
    Thank you.
  • Picture of tore erotavlas
    Fri, Feb 12, 2016, 10:00 PM
    I'm running Moodle 2.7.2+ with Elegance plug (Build: 2014082100). I would like to upgrade to Moodle 3.0.2+ with Elegance plug 3.0.0 (2015111500). I tried to do this in a non production website and I found a problem with marketing spot. In particular, all the information on marketing spot are lost during the upgrade. How can I maintain these information? I noted that marketing spot options are changed since the previous version.
    Thank you
  • Picture of Marcio Caparica
    Sat, Feb 13, 2016, 12:45 AM
    I'm having what appears to be an old problem - the user drop-down menu on the top right corner doesn't open on clicking, only if we click on it and then press the "arrow down" key. I've seen somewhere in this forum that the most recent version of the theme had fixed this, but that's the one we've downloaded, and it doesn't work. Are we doing something wrong? How could I tinker with the javascript to try to fix it by myself? Thank you very much!
  • Picture of David Dumonde
    Fri, Mar 4, 2016, 2:21 AM
    This page indicates that one of the features of the Elegance theme is Google Web Fonts. it seems like that means that it uses the Google font Roboto, but it does not seem to mean that it includes a way to use other Google fonts with the theme.

    So, how do I add Google fonts to Moodle theme Elegance? I'm using Moodle 3.0.x and Elegance 3.0 (2015111500).
  • Picture of Brandon Jimenez
    Fri, Mar 4, 2016, 2:52 AM
    David Dummond, i guess you first need to download any Google Fonts you might want and upload them to the /fonts folder of your theme. Then, you'll need to update the less files (or probably use the custom css, I suppose both would work). Anyway, probably Bas will have a better advice. Have fun!
  • Picture of David Dumonde
    Wed, Mar 9, 2016, 6:37 AM
    Thanks for the reply, Brandon. Since I posted my previous comment about adding Google Fonts to the Elegance theme, I have dug deeper into the css and less files, and think I can probably hack my way to a solution with @font-face. But if Bas (or anyone else) has any suggestions that would point me more directly to a solution, it would be appreciated.
  • Picture of Bas Brands
    Wed, Mar 9, 2016, 3:26 PM
    Hi David,

    Newer versions of elegance use the less/elements/fonts.less file to add fonts to the CSS. Look a that file for customising your fonts. Hope that works for you. If not please use the Moodle Theme Forums to ask for help.
  • Picture of David Dumonde
    Wed, Mar 9, 2016, 9:52 PM
    That actually helps nudge me in the right direction, Bas. Thanks for responding.
  • Picture of Susmita Dhar
    Thu, Mar 10, 2016, 3:15 PM
    After install elegance theme in moodle, course page after "Turn editing on" activity not moving. Please check this issue.
  • Picture of Martijn Menting
    Fri, May 20, 2016, 2:37 PM
    I installed this Theme on Moodle 3.0.3. The problem is that the Pull Down menu on the right Top is not aviable. When i click on the pull down menu (my Name) then nothing happend. What can be the problem. It accured at Firefox and IE
  • Picture of Bas Brands
    Fri, May 20, 2016, 4:13 PM
    Hi Martijn.

    Could you please report this on : ?

    When reporting please include a screenshot showing the page with the JavaScript console opened and the page re-loaded.

1 2 3 4 5 6 7 8
Please login to post comments