Course formats: Masonry Topics format

Maintained by Picture of Renaat Debleu Renaat Debleu
This course format displays all sections like a masonry build brick wall. Every section can have a different background and is dynamically placed into a fluent style page.
293 sites
13 fans
Moodle 2.4, 2.5

This course format displays all sections like a masonry build brick wall. Using YUI (, every section is dynamically placed into a fluent style page.  Each section can have a different background color.

Warning: The order of the topics shown depends on the screensize and can vary from screen to screen.


Screenshot #0
Screenshot #1
Screenshot #2
Screenshot #3


Picture of Renaat Debleu
Renaat Debleu (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Picture of Daniel Klein
    Mon, 13 Jul 2015, 6:56 PM
    Does this plugin enable YUI's Tablet Magazine format?
  • Picture of Zabelle Motte
    Mon, 5 Oct 2015, 10:44 PM
    I like very much this course format but note there is a problem with labels presented on homepage.
    The labels are not rendered and an big white space appears at the place they shoud be.
    Tested on Moodle 2.9.1.
  • Picture of Renaat Debleu
    Thu, 8 Oct 2015, 4:50 PM
    What is the theme you use?
    In some themes it is necessary to add or remove some css code to have desired effects.
  • Picture of Andrew Lian
    Mon, 22 Feb 2016, 6:18 PM

    Using 3.0.2+ I have installed this using the Pioneer theme and also the Clean Theme - but absolutely nothing happens. I must be doing something wrong. I would appreciate some advice.

  • Picture of Renaat Debleu
    Tue, 23 Feb 2016, 12:39 AM
    Hello Andrew,

    It is a bold statement that absolutely nothing happens. I'm sure a lot of things happen in the background, and most important a javascript error. Can you post the output of the console tab (press F12 in your browser and choose console [Chrome: Ctrl+Shift+J Firefox: Ctrl+Shift+K, Internet Explorer: Ctrl+2]), so I have some more information?

  • Carlos Andrés Martínez Anguiano
    Thu, 16 Jun 2016, 1:42 AM
    This seems like a great format to test. Do you have plans for updating for Moodle 3.1, or this plugin works with that version too?
  • Picture of Renaat Debleu
    Thu, 16 Jun 2016, 3:52 PM
    Let's say it is 95% compatible with Moodle 3.1. I have seen some small issues in different Moodle installations, (yes before a new release there is extensive testing). so I cannot release a stable version yet. One of these days I plan to post a new development version on Github to collect additional feedback.

    Moreover, the upgrade involves also a move from YUI into AMD and this takes more time than I thought.
  • Picture of sebastian seitz
    Sat, 8 Oct 2016, 11:55 PM
    Is there a solution for the textfield problem? Textfields are not showing in this course format.
  • Picture of Renaat Debleu
    Mon, 10 Oct 2016, 3:58 PM
    Hello Sebastian,

    I only find textfields as part of the feedback module (mod/feedback/item/textfield/textfield_form.php). Are you having problems with the feedback module text fields in this course format? Can you send me a screenshot as I can not reproduce this error?
  • Picture of sebastian seitz
    Fri, 14 Oct 2016, 6:34 AM
    Hi Renaat,

    i am sorry, i mean the label ressource. I dont know why i wrote textfield.
  • Picture of Renaat Debleu
    Fri, 14 Oct 2016, 7:33 PM
    Indeed, the label got some update so it is displayed as a block. I will update the plugin soon to fix this issue.
    THX for the report.
  • Picture of Lydia Lymps
    Sat, 22 Oct 2016, 12:32 AM
    Error on 3.0 Moodle version:

    Undefined property: stdClass::$format_masonry_defaultbackgroundcolor in moodle/course/format/masonry/lib.php on line 51
  • Picture of Lydia Lymps
    Sat, 22 Oct 2016, 12:32 AM
    Not really working for me.
  • Picture of sebastian seitz
    Tue, 15 Nov 2016, 3:31 PM
    Hi Renaat,

    css for the label is working! Great Job smile

    But there is another problem in conjunction with Eduhub Theme.
    I made a screenshot () to show you the problem. The settings menu is flickering when there are links behind.
    When i comment out the following line in masonry style.css flickering stops.

    #page-course-view-masonry .sitetopic .section li.activity:hover,
    #page-course-view-masonry .course-content .section li.activity:hover {
    /* opacity:0.6;
    filter:alpha(opacity=60); */

    On every update, my changes are lost, so can you please solve this in the next version?
  • Picture of Renaat Debleu
    Thu, 17 Nov 2016, 12:06 AM
    Hi Sebastian

    Thanks for the info. I will have a look at it for the next version.

    Perhaps a solution would be to add some lines to your theme css file, after an update your changes would not be lost...
    #page-course-view-masonry .sitetopic .section li.activity:hover,
    #page-course-view-masonry .course-content .section li.activity:hover { opacity:1 !important;}
1 2
Please login to post comments