Course formats: Masonry Topics format

Maintained by Renaat 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.
304 sites
22 fans

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


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

Comments RSS

Show comments
  • Renaat
    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.

  • Renaat
    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?
  • Renaat
    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.
  • Renaat
    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.
  • Renaat
    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?
  • Renaat
    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;}
  • Picture of John Carvajal
    Wed, 25 Jan 2017, 7:28 PM
    Hello, the format presents error when performing a backup in Moodle "error / setting_invalid_ui_label". How to solve the error?
  • Renaat
    Thu, 26 Jan 2017, 3:08 AM
    Hello John,

    can you give me your Moodle and plugin version?

    In an effort to reproduce the error, I added a new scenario to the acceptance testing of the plugin:
    Given the following "courses" exist:
    | fullname | shortname | format | coursedisplay | numsections |
    | Course 1 | C1 | masonry | 0 | 4 |
    And I log in as "admin"
    And I am on site homepage
    And I follow "Course 1"
    And I backup "Course 1" course using this options:
    | Confirmation | Filename | test_backup.mbz |
    Then I should see "Restore"

    But I do not see any error:

    $ moodle-plugin-ci behat
    RUN Behat features for format_masonry
    Moodle 3.3dev (Build: 20170119), 5130953c8a103c44111a3c987cf47ed3c7a5c84b
    Php: 7.0.15, mysqli: 5.5.53-0ubuntu0.12.04.1-log, OS: Linux 3.13.0-103-generic x86_64
    Server OS "Linux", Browser: "firefox"
    Started at 26-01-2017, 02:32
    ...................................................................... 70
    4 scenarios (4 passed)
    72 steps (72 passed)
    1m21.02s (68.77Mb)
    The command "moodle-plugin-ci behat" exited with 0.
1 2
Please login to post comments