Multitopic format

Course formats ::: format_multitopic
Maintained by James Calder
Shows multiple topics per page, with tabbed navigation between pages. Topics are collapsible, and can optionally be timed.
Latest release:
1547 sites
56 fans
Current versions available: 1

Shows multiple topics per page, with tabbed navigation between pages. Topics are collapsible, and can optionally be timed.

Developed at Otago Polytechnic


  • Tabbed pages (like Onetopic format)
  • Multiple topics per page (a bit like Flexible Sections format)
  • Collapsible topics (like Collapsed Topics format)
  • Optionally timed topics (like Weekly format)
  • Course banner image (like Snap theme)
  • Section images (a bit like Grid format)


  1. Copy files to moodle/course/format/multitopic
  2. Log in as an admin, and visit moodle/admin/index.php, to update plugin data
  3. Site administration > Appearance > Additional HTML > Within HEAD (or other location appropriate for CSS): Copy and paste styles from README_styles.css (customising appropriately)
  4. Site administration > Appearance > Themes > Theme settings > Allow category themes: Yes (if you want categories to have custom CSS)

Video walkthrough

(You will probably need to open the video full screen to see it properly.)


Screenshot #0
Screenshot #1
Screenshot #2


James Calder (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS


  • Wed, Jun 24, 2020, 2:50 PM
    Hi Gary,
    I hope I've fixed this issue now, could you check? (I installed a Moodle 3.9 sandbox for testing, and I got an error with the modchooser, but not the same error you did, so I'm not completely sure.)
  • Tue, Jun 30, 2020, 2:32 AM
    Hi James,

    is it possible to change the order of breadcrumb and header-image.

    So it looks like:

    1. Header image of the course
    2. Breadcrumb
    3. Sections

    Kindly Regards
  • Tue, Jun 30, 2020, 4:00 PM
    Hello Jochen,

    There's no proper way to do this, but you might be able to do a hack with CSS grid layout, depending on your theme. For Boost on Moodle 3.5, adding the following CSS into Site administration / Appearance / Additional HTML / Within HEAD, in a style tag, seemed to work for me:

    body.format-multitopic header#page-header div div.card div.card-body div.d-flex.flex-wrap {
    display: grid !important;
    grid-template-columns: max-content 1fr;

    body.format-multitopic header#page-header div div.card div.card-body div.d-flex.flex-wrap #course-header {
    grid-row: 1;
    grid-column: 1 / 3;

    body.format-multitopic header#page-header div div.card div.card-body div.d-flex.flex-wrap #page-navbar {
    grid-row: 2;
    grid-column: 1;

    body.format-multitopic header#page-header div div.card div.card-body div.d-flex.flex-wrap .ml-auto.d-flex {
    grid-row: 2;
    grid-column: 2;
  • Wed, Jul 1, 2020, 4:24 AM
    I am not sure how this will look like in Moodle Mobile App. Has anyone tried it ? Will it show them tabbed or all topics on one pages?
  • Wed, Jul 1, 2020, 8:56 AM
    Hello Ammar,
    The tabs don't show in the Moodle Mobile App. The course just shows as the app normally shows it, all topics in a list, or one selected topic. I don't know of a way to change that.
  • Fri, Aug 14, 2020, 8:49 PM
    Hi James,

    great work. Will the plugin be compatible with Moodle 3.9 and future Versions?

    Kind regards
  • Sat, Aug 15, 2020, 7:51 AM
    Hello Jens,
    Thanks. smile There should be a release for Moodle 3.9 within the next couple of months. Longer term, it depends on it continuing to be a priority for my employer. I think signs are positive, although there's restructuring under way in the tertiary sector in New Zealand, and financial pressure from loss of international students due to Covid-19, so it's not guaranteed.
  • Fri, Oct 9, 2020, 4:22 PM
    Thank you! this is exactly what I am after.
  • Fri, May 28, 2021, 8:22 PM
    Hi, tnks for amazing plugin! exact what I need. The only problem I got is the course title now is so small.. I didnt like the plugin to change my course title =[
  • Sat, May 29, 2021, 1:00 PM
    Hi Felipe,

    If the course title is small, I suspect the CSS has not been copied from the file README_styles.css. See here:

    Alternatively, you could use CSS to revert banner changes, as described here:
  • Thu, Jun 3, 2021, 5:18 AM
    Tnks a lot James, now its ok! Only one more question: all topics are collapsed by default, even in topics that are not empty. Can I change it anywhere?
  • Wed, Jun 16, 2021, 9:12 AM
    Hi Filipe,

    Sorry, I read this message, then got side tracked, and forgot to come back to it.

    There isn't really a feature for not collapsing topics by default. The thought was that usually students will only need to expand the topic they are working on, and making topics collapsed by default will let students scroll to that one faster.

    If a topic is set to Topic duration "No time", then it will not collapse at all. This is intended for "topics" containing assignments that do not have time set aside for them specifically, but rather students are expected to work on them during other topics. It is a bit of a hack to use this just to prevent topics collapsing, though, and it means the topic duration feature can't be used.
  • Wed, Jun 23, 2021, 7:38 PM
    Great course format. Thanks for sharing!!!
  • Wed, Jul 21, 2021, 5:23 AM
    Hi James. Love your course format! Just asking.. Id like to insert some css in each section to create a scroll of "blocks" with diferent colors and images as background. Do your know how to do it? or what I have to search for to do it? tnks!
  • Fri, Jul 23, 2021, 11:33 AM
    Hi Felipe,

    If I understand you right, you want to add CSS styles to sections? Sorry, I don't think there's really a good way to do this. I think CSS has to be specified either inline or in the HTML HEAD block, so it can't be entered elsewhere, like a section summary, and be made to apply to the section. And the Multitopic format doesn't have a feature for specifying CSS for sections.

    I guess it would probably be possible to do this with JavaScript, although it's a messy hack. Entering something like the following in a section summary (replacing curly braces with angled brackets, and xxx with the section id) should put a pastel-blue background behind the section.

    document.querySelector("ul.sections li.sectionid-xxx .content").style.backgroundColor = '#ccf';
Please login to post comments