Grid Format

Course formats ::: format_grid
Maintained by Gareth J BarnardGareth J Barnard
A modular and visual course format. Hides all topics and creates a grid of icons (one for each topic) with short titles. Clicking on an icon brings up the content from the corresponding topic.
Latest release:
7282 sites
159 fans
Current versions available: 20

A modular and visual course format. Hides all topics and creates a grid of icons (one for each topic) with short titles. Clicking on an icon brings up the content from the corresponding topic in a "lightbox" style display.


The format comes with NO support.  Please see the 'Support' section in '' file that comes with the format.  This is because the format is complex and I regret that I don't have the time / resources to freely assist with questions pertaining to specific enhancements / changes / knowledge improvement.

I will investigate genuine bugs and issue fixes in a timescale set by myself.  When reporting issues you MUST clearly state the full version and release of both Moodle and the Grid format format as contained within their 'version.php' files - if not it takes me longer to figure out, often resulting in me asking for the details anyway and slowing the process of solving your problem down.  It really helps to upload and describe in detail the issue you are having on the 'Course formats' forum.

Screen cast:

More to follow as new icons have been added....

Privacy API support starts with V3.3.0.5 for M3.3 and V3.4.0.4 for M3.4 where the API has been implemented in the minor release of Moodle.


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


Gareth J Barnard
Gareth J Barnard (Lead maintainer): Maintainer
Please login to view contributors details and/or to contact them

Comments RSS


  • Tue, Apr 1, 2014, 11:48 AM
    Hi guys,
    I love Grid format but have had a few challenges with it since upgrading to the newest version. For students, when they click on a section icon, it doesn't display the resources in that given section- it just takes them back to the top of the course page.
    I've scoured the forum and docs but haven't been able to identify what the issue is. Any help would be much appreciated.
    Thanks in advance,
  • Gareth J Barnard
    Tue, Apr 1, 2014, 5:58 PM
    Hi Alisha,

    When you say 'latest version', what version of Moodle are you running and what version of the Grid format did you install please?

    The likely cause of the issue is a JavaScript breakage. This can happen anywhere in any code, not just the Grid format. So if something else breaks, then the Grid will to. Please could you first try a 'Purge all caches' -> 'Home -> Site administration -> Development -> Purge all caches' - as mentioned in the upgrade instructions in the readme file. If this does not solve the problem, then could you use browser developer tools (press F12 - Chrome preferred), go to the 'console' tab, reload the page and print screen all errors and post on the 'Courses and course formats forum' -> please.


  • Fri, Apr 4, 2014, 11:27 PM
    Hi Gareth. Couple of questions if I may be so bold. Is there any way of altering the font style of the titles above the grids eg colour, size, style? How difficult would it be to have animated GIFs in the picture grid? Many thanks as always for your tireless efforts, Gideon.
  • Gareth J Barnard
    Fri, Apr 4, 2014, 11:38 PM
    Hi Gideon,

    For 1, the CSS selector should be '.gridicons .icon_content' for styling the text if on M2.6.1.5.
    For 2 = very difficult if not currently almost impossible, please see:


  • Mon, May 12, 2014, 2:52 PM
    I am using Grid with the Essential theme and I have some topics that have long names. How can I get this to work so it looks neat?

    I've done the following in styles.css:
    .course-content ul.gridicons li p.icon_content {
    font-weight: bold;
    margin: 0;
    white-space: normal;
    overflow: visible;
    height: 35pt;
    text-align: center;

    However, the text is located at the top, and I want it to be aligned bottom (so that the 2nd line of next is where the first line would be if it wasnt wrapped - if that makes sense).


    Any help would be great. Thanks.
    - Will
  • Mon, May 12, 2014, 4:23 PM
    I second, Will's post- I am in the same boat and applied a similar work-around for the time being, but aligned bottom would be nice in case titles are longer still to accomodate a possible third line.
  • Gareth J Barnard
    Mon, May 12, 2014, 11:08 PM
    Hi Will and Chris,

    What version of the format are you using? And don't you mean you want:


    given your description?

    Please could you post details on:


  • Mon, May 12, 2014, 11:42 PM
    Cheers Gareth, I appreciate your time on this.
  • Thu, May 22, 2014, 2:35 PM
    I am using moodle 2.5.6+ (Build: 20140515) .and I am using plugin // Plugin version.
    $plugin->version = 2013110507;

    // Required Moodle version.
    $plugin->requires = 2013051400.00; // 2.5 (Build: 20130514).
    but its not working its giving some database error for the course
  • Gareth J Barnard
    Thu, May 22, 2014, 11:49 PM
    Hi Madhuri,

    I see that you have posted here: so will continue to help you there.


  • Sat, Jun 21, 2014, 7:44 AM
    Please can you help. I'm still a beginner at coding.
    I love this format and I'm designing Moodle for little Kiddies.
    I'd like to make the grid boxes transparent.
    I'd like to do this in order to use the .png images (with alpha layers) as buttons over a kid friendly back ground picture.

    I can code a little and as I understand it, the user settings force the boxes to be a certain #FFFFF type of color.

    Is there a way to use the CSS 'transparent' option?

    Is there a way to cut out the grid box color settings totally?
  • Gareth J Barnard
    Sat, Jun 21, 2014, 9:03 PM
    Hi Jason,

    Assuming M2.7. To remove the grid icon image container colour setting, remove this code: and set the background within: and then do a purge all caches.


  • Thu, Jun 26, 2014, 6:51 PM
    Hi Gareth and thank you for this great plugin.
    I was just wondering where I can change where the box appears when you click on section. Right now it appears at the top but I would like it to appear a little lower. Right now it is 50px from the top but i would like it to be about 250px from the top. I found out that the CSS setting is in something called but I am unable to find it anywhere to change it.

  • Gareth J Barnard
    Thu, Jun 26, 2014, 6:57 PM
    Hi Davíð,

    Change this line: - then do a 'Purge all caches'.


  • Thu, Jun 26, 2014, 7:17 PM
    Perfect, this will make some teachers very happy at my school.

    Thank you

Please login to post comments