Themes: Decaf

theme_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.
768 sites
170 downloads
15 fans
Moodle 2.4, 2.5, 2.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.

Screenshots

Screenshot #0
Screenshot #1
Screenshot #2

Contributors

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

    -Derek
  • Just wondering . . .
    Sun, 27 Dec 2015, 4:28 AM
    Awesome Bar and responsiveness.
    I have just re-read Richards post from last year here: https://moodle.org/mod/forum/discuss.php?d=252385#p1094468
    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.
    -Derek
  • 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/navbar.inc.php: 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
    Hello,

    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 {
    overflow-x:auto;

    to

    body.pagelayout-report #page-content #region-main {
    overflow-x:visible;

    this should fix the floating user colum issue.

    regards
    Mario
  • Just wondering . . .
    Sat, 19 Nov 2016, 12:16 PM
    For those interested in the Decaf theme, see this Fan Post on Moodle News: http://www.moodlenews.com/2016/moodle-theme-decaf-has-one-soul-alleviating-feature/

    -Derek
  • 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?

    -Derek
  • 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 {
    background-color:#faf9cb;
    }

    Hope this helps.
    Clarence
  • Picture of Ron Coller
    Fri, 24 Aug 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?

    Ron
  • Picture of Clarence Prudhoe
    Fri, 24 Aug 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.
    Clarence
  • Picture of Vincent MARECHAL
    Fri, 7 Sep 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,
    Vincent
  • Picture of Clarence Prudhoe
    Fri, 7 Sep 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.

    Clarence
  • Picture of Vincent MARECHAL
    Mon, 10 Sep 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,

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