Themes: Decaf

Maintained by Picture of Paul Nicholls Paul Nicholls
A clean, simple theme which adds an "Awesomebar" at the top of the page to provide quick, easy navigation.
818 sites
15 fans
Moodle 2.6, 2.7, 2.8, 2.9, 3.0, 3.1

Decaf is a three-column, fluid-width theme for Moodle that was created by Lei Zhang and Paul Nicholls. It improves usability by fixing an "Awesomebar" at the top of the screen, which provides dropdown menus containing everything in the Navigation and Settings blocks.

For developers, it also transforms the performance info into a colorful bar which floats at the bottom of the screen, which increases awareness of the performance statistics.


Screenshot #0
Screenshot #1
Screenshot #2


Picture of Paul Nicholls
Paul Nicholls (Lead maintainer): Developer
Lei Zhang
Lei Zhang: Developer
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Just wondering . . .
    Wed, 6 May 2015, 9:48 AM
    Following up on my post about Videoeasy and Decaf.
    Still faulting.

    I've updated the Issue report on GIT.

  • Picture of Ron Coller
    Fri, 8 May 2015, 8:16 PM

    Thank you so much, that worked.

  • Just wondering . . .
    Mon, 25 May 2015, 8:05 AM
    In the decaf GIT, does anyone now the difference between the master and responsive branches?

  • Just wondering . . .
    Wed, 27 May 2015, 7:55 AM
    Sorry about the dumb questions guys. Of course someone knows the difference.

    A little more of a considered post.
    The other day Gareth posted this: “adding Awesome Bar into Essential for Desktops only (as it looks bad on mobiles)” -
    I assumed the new Decaf was responsive, including the Awesome Bar. I have never used our main Moodle on mobile. When I looked on Sunday we have no AB when I use a mobile. Is this a problem of our setup?
    Our Decaf version: 2014010 - 2.0.5613 How can I tell if this has responsive elements in it or not for AB?
    Should we be using the download from the responsive branch on Git?

  • Picture of Alan Whittamore
    Wed, 27 May 2015, 4:32 PM

    At the top of this page are screenshots of decaf including one for a mobile device.
    You access the awesomebar using the 'burger button' as Paul calls it (top right).
    I've already found that if you want custom menus, these are best attached to the awesome bar for display on mobiles.
    You can simulate a mobile by reducing your browser window on your PC (at least that works for me) smile
    BTW I have the same release of decaf (2.05 - the latest) which says it's for 2.8 but it works for me on 2.9 and even the 3.0 dev branch.

  • Picture of Jason Brisson
    Thu, 18 Jun 2015, 9:10 PM
    First things first, thx for this Awesome theme!! :P

    I'd like to know if it's possible to disable the mouse-over events on the Awesome bar so the user would have to click to open the menu and submenu. Do you think it's relatively easy to achieve? I have some basic PHP knowledge but none in javascript and i suspect this would be the place to make the change.

    Your help would be greatly appreciated!

    Thx again!
  • Just wondering . . .
    Sat, 19 Dec 2015, 12:18 PM
    Jason, maybe you have moved on since you posted in June, or did you find an answer.

    I'm not sure if you need to use Javascript for this. I presume you have checked the CSS with something like the developers tools in Chrome.

    I can see why you want this. In one of the Moodles I work with there is a strong feeling that many of the users do NOT want the rollover since they move their cursor to the top so often and get it then they don't want it. We did I think try to adjust the rollover time so it did not kick in so fast.

  • Just wondering . . .
    Sun, 27 Dec 2015, 4:28 AM
    Awesome Bar and responsiveness.
    I have just re-read Richards post from last year here:
    Where is the AB at regarding responsiveness?
    How are people working with this aspect?
    Is it best to have a Mobile theme as well as Decaf?

    Just curious.
  • Picture of Sakshi Goel
    Thu, 7 Jan 2016, 1:34 PM
    Hello ,
    I am using Decaf theme with Moodle 3.0 version. When we create new user in Moodle and tick force password change option during setting and user is logged in Moodle it shows below error :

    Error detectat. cal que l'arregli un programador: session_is_loggedinas() is removed, use \core\session\manager::is_loggedinas() instead

    Vés al contingut principal
    Error detectat. cal que l'arregli un programador: session_is_loggedinas() is removed, use \core\session\manager::is_loggedinas() instead
    Debug info:
    Error code: codingerror
    Stack trace:
    line 422 of /lib/deprecatedlib.php: coding_exception thrown
    line 18 of /theme/decaf/layout/ call to session_is_loggedinas()
    line 44 of /theme/decaf/layout/columns2.php: call to include()
    line 1016 of /lib/outputrenderers.php: call to include()
    line 946 of /lib/outputrenderers.php: call to core_renderer->render_page_layout()
    line 155 of /login/change_password.php: call to core_renderer->header()
  • Picture of JJ Combs
    Tue, 26 Apr 2016, 2:34 AM

    We just upgraded our Moodle environment from 2.7 to 2.8. We have upgraded the Decaf theme to 2.1.0. In Moodle 2.7, the freeze user column in the grader report worked normally. However, the user column no longer freezes in Moodle 2.8 using the decaf theme (with or without Ajax enabled). However, it freezes normally when switching to the Clean theme. Is there a workaround for this, since we would really like to continue to use the Decaf theme?
  • Picture of Mario Wehr
    Wed, 22 Jun 2016, 10:40 PM
    Hi Combs,

    If you are talking about the floating user colum in the grader report.
    In core.css -> report section change:

    body.pagelayout-report #page-content #region-main {


    body.pagelayout-report #page-content #region-main {

    this should fix the floating user colum issue.

  • Just wondering . . .
    Sat, 19 Nov 2016, 12:16 PM
    For those interested in the Decaf theme, see this Fan Post on Moodle News:

  • Just wondering . . .
    Fri, 23 Dec 2016, 2:51 PM
    I've just spent some time playing with Boost. I wonder if Awesome Bar has any future with this? I've wondered if the AB could be included just for use with desktops?

  • Picture of Ron Coller
    Fri, 17 Aug 2018, 8:16 PM
    In the navbar breadcrumbs how to change the color of the text, currently the text is a light gray.
  • Picture of Clarence Prudhoe
    Fri, 17 Aug 2018, 10:56 PM
    Ron, I added these changes to the /waxed/colours/Raw SCSS field and it made the changed I needed.
    // black header background
    .bg-white {
    background-color: var(--primary)!important;
    // red header text
    .navbar-light .navbar-brand {
    color: var(--red);
    // header notification & message icons
    .navbar-light .navbar-nav .nav-link {
    color: var(--green);

    // navbar username color red
    a { color: var(--red);
    text-decoration: underline;
    // background-color: #FFFCF4;
    -webkit-text-decoration-skip: objects;

    // green menu links
    .nav-link, .page-link, .list-group-item, .dropdown-item {
    text-decoration: none;
    color: var(--green);

    // footer text color
    #page-footer a {
    color: var(--red);
    text-decoration: none;

    // Visited color
    a:visited {
    COLOR: #FF606D;

    // Hover background highlight
    a:hover {

    Hope this helps.
1 2 3 4 5 6 7 8 9
Please login to post comments