Themes ::: theme_decaf
Maintained by Paul Nicholls
A clean, simple theme which adds an "Awesomebar" at the top of the page to provide quick, easy navigation.
Latest release:
348 sites
16 fans
Moodle 3.1, 3.2, 3.3, 3.4, 3.5, 3.6

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


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
  • Thu, Jan 7, 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()
  • Tue, Apr 26, 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?
  • Wed, Jun 22, 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, Nov 19, 2016, 12:16 PM
    For those interested in the Decaf theme, see this Fan Post on Moodle News:

  • Just wondering . . .
    Fri, Dec 23, 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?

  • Fri, Aug 17, 2018, 8:16 PM
    In the navbar breadcrumbs how to change the color of the text, currently the text is a light gray.
  • Fri, Aug 17, 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.
  • Fri, Aug 24, 2018, 1:56 AM
    Thanks Clarence, but I am not able to find that folder or location? Do you have an idea on what I am missing?

  • Fri, Aug 24, 2018, 3:11 AM
    Hi Ron,
    You must login as the Administrator. In the Navigation menu, click on "Site administration" then click on "appearance" in the drop menu at the top. Scroll to the bottom to click on the Theme "Waxed". Click on "colours" in the drop menu and scroll to the bottom to find the "Raw SCSS" field. Copy my code and paste it into the SCSS box. Save the changes and see if you like the results. You can use one of the color fields on that page to find a color you like and then paste the code number after the colon in the code (ie background-color:#faf9cb;) Just delete any of the SCSS codes you don't want to use.

    Hope this helps.
  • Fri, Sep 7, 2018, 9:12 PM
    Hello Clarence, hello all Decaf users

    I use Decaf since years, but since I've updated Moodle from 3.1 to 3.5.1+, the main central contant doesn't expand anymore to the right when there is no block.
    The right block column of my courses remain empty, and then the main contant (the course) has very little placE.
    Before updating Moodle, when I removed all block from the right column, the main contant expanded to the right.
    It doesn't do it anymore.
    Please can you help ?

    Thanks a lot in advance.
    Kind regards,
  • Fri, Sep 7, 2018, 11:10 PM
    Hi Vincent,
    If you use Chrome browser, you can press function key F12 to open the development console. In the top left corner of the console, click the arrow labeled "Select an element..." then click on the frame you want to inspect. The code is displayed in the top section and you can float your mouse over the code to see what it controls. When you find the area you want to inspect, double click the code. Look in the bottom half of the console to see the CSS settings that apply to that section under the STYLE tab. Find "width" and confirm it is set to 100%.

    I don't seem to have the problem you are describing so I can't be more help, but you can explore the Chrome development console and even find a tutorial on how to use it and hopefully find the correct setting to fix your problem.

  • Mon, Sep 10, 2018, 2:25 AM
    Hello Clarence,

    Thanks a lot. I can't find the problem. Well, since I updated to 3.5.1+, it affected all the course this way.
    I didn't find any "width" in the column code of the main content.

    The courses that have no block in the right column doesn't expand anymore to the right, and I've an empty column...
    Before updating, I didn't had this problem, and the courses expanded to use the right empty block column.

    Maybe there is something wrong with Moodle 3.5.1+ and Decaf, I don't know.
    But if I empty the left block column, the courses expand well to the left and I've no empty column.
    I note too that the navigation block make the left column very thick, it's a problem too, since 3.5.1+ update...

    Thanks anyway.
    Kind regards,

  • Tue, Jan 8, 2019, 12:54 AM
    Since Messages were updated in 3.6.1, the messages area does not work in decaf. Any chance on getting this resolved quickly?

  • Fri, Mar 8, 2019, 2:39 AM
    With the announcement that Moodle ver 3.7 will be deprecating bootstrapbase ( ), I would like to know what impact this will have on the Decaf theme. Will there be an update of Decaf? Will it be necessary to update Decaf before installing Moodle 3.7?
1 2 3 4 5 6 7 8 9 10
Please login to post comments