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:
2209 sites
75 fans
Current versions available: 2

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. Also it is a bit outdated, because topic collapsibility now has its own setting, and is no longer tied to the topic duration setting.)


Screenshot #0
Screenshot #1
Screenshot #2


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

Comments RSS

Show comments
  • Thu, Jan 27, 2022, 9:43 PM
    Dear all, James,

    First of all, thanks for this great format ! I am trying to build my own moodle. So far I was not doing so bad, but now I have en issue I don't know how to deal with... Maybe you can help ?

    I want my course to have one layer of tabs. Kind of the main menu of the course. And then, in each tab, a set of collapsable sections.
    So just two levels... I succeed in doing that with the pluggin but the name of the main tab section is repeated 3 times : one in the first tab level, one in a second tab level (don't know why this one appears) and one for a collapse section. But I just want it to be display in the main level.
    To make it more clear, you can see a screencast here...

    Is it possible ? Maybe the issu comes with the theme (Lambda) ?
    If I can maybe just get read of the second level of tabs which is useless...

    Thank you so much if you can tell me how to fix it, or at least tell me it can't be done so I stop insisting on finding a solution smile


  • Fri, Jan 28, 2022, 3:52 PM
    Hi Leslie,

    A second level of tabs shows when editing is on--this is so there is a place to put the + button for adding second level tabs. If you don't add any second level tabs, then this should disappear when editing is turned off, and it shouldn't show for students.

    There isn't an option for hiding the section heading for pages, although if it is OK to hide these in *all* Multitopic courses on your server, you could probably do it with CSS like:
    body.format-multitopic ul.sections li.section.section-page .content .sectionname { display: none; }
    A Moodle administrator would need to add this, and it could go in Site admin > Appearance > Additional HTML > Within HEAD, inside a style tag.

    I hope this helps.

  • Fri, Jan 28, 2022, 6:13 PM
    Thank you so much for your prompt and relevant answer. You were right (and I feel a little bit silly ;) ) that the second level desapear once the editing mode is turned off.
    And the style you give me works like magic. I have exactly what I need. Again, thanks a lot !!!

  • Tue, Apr 5, 2022, 6:02 PM
    I was just wondering if we can expect an update for 4.0?

  • Wed, Apr 6, 2022, 9:59 AM
    Hi Alexa,

    There probably won't be a version specifically for Moodle 4.x for some time, but I've been testing the current version with Moodle 4.0, and the only issue for now, besides some of the presentation being in the old style, seems to be that the left-side navigation bar doesn't appear.

    A lot has changed with course formats for 4.x, but there's still support for current course formats, so hopefully most will continue to work as is. I've been working on a new version, but still have to figure out the new left-side navigation bar (now called the "course index"), and the new expand/collapse all sections option. I'm not sure there'd be much benefit in releasing a version for 4.0 without these features while the old version still works, but if the old version stops working with 4.0, I could release a 4.0 version without these features. So one way or another, there will be a version of the Multitopic format that works with 4.0.
  • Sat, May 21, 2022, 7:15 PM
    Hi James,
    I'm trying to use this Multitopic format with Lambda on 3.11 build. I managed to use the 1st level format for main topics as section and use the second level topics as Topics so they are inside the 1st level topics. We want to simplify the course layout by having one single level menu and navigation between activities button at the bottom of each topic page. Is this possible to turn on the code for this navigation between activities? And I read also your preview comment regarding the missing course index on the left sidebar navigation. I hope there is resolution to turn on that on the left sidebar.
  • Mon, May 23, 2022, 2:56 PM
    Hi Randy,

    Sorry, I'm not sure what you mean. If you're talking about the activity navigation that appears on activity pages, then with Moodle v3.6-3.11 and the Multitopic format v3.0 or later, it should be possible to re-enable this by editing Site admin > Appearance > Additional HTML > Within HEAD, and adding, within a style tag:
    body.format-multitopic.path-mod.pagelayout-incourse #page #page-content .activity-navigation {
    display: block !important;

    If you're talking about the section navigation, though, this has been removed from the Multitopic format, not just disabled.

    Looking at the issue with the missing side bar in Moodle 4.0, I think it might be possible to add this back in (although without the drag-and-drop Moodle 4.0 supports) with a change to the Multitopic format for Moodle 3.x, as an interim measure. I'll look into this further. It looks adding the side bar would completely remove activity navigation, though. Apparently in Moodle 4.0 you can't have both.
  • Thu, May 26, 2022, 8:53 AM
    Hi James,
    The code you provided here works! I see the the activity navigation buttons now. This made my day. I want to customize the color of the buttons. Thank you so much.
    I'm using Lambda. The navigation side bar(drawer) is shown along with the section index using Multitopic format. I was referring to the activity index which is not shown on the navigation drawer.
  • Thu, May 26, 2022, 5:56 PM
    Hi Randy,
    I think you should be able to style the previous/next activity buttons with something like:
    body.format-multitopic.path-mod.pagelayout-incourse #page #page-content .activity-navigation #prev-activity-link {
    color: #fff;
    background-color: #000;
    body.format-multitopic.path-mod.pagelayout-incourse #page #page-content .activity-navigation #next-activity-link {
    color: #fff;
    background-color: #000;
    This is for white text on a black background. You could use an art program, or something link to find the HTML hex codes for the colours you want. I don't think the drop-down can be styled. Also, be aware that activity navigation is removed in Moodle 4.0.
    I'm not sure about an activity index. There's an Activities block that can be added to courses, perhaps this is what you mean. But if it's related to the Lambda theme, I won't be able to help, because I don't have access to this.
  • Mon, May 30, 2022, 11:01 AM
    Hi James,
    Thank you so much for this code. Appreciate it.
    I wonder why Moodle 4.0 removed the activity navigation.
    I will look for that Activities block and going to try it.
    Looking at the navigation drawer, using Topic format, when the section is opened, the activities are also shown. Some course format don't have this feature?
  • Mon, May 30, 2022, 3:41 PM
    Hi Randy,

    When you said "activity index" earlier, you meant activities listed under sections? Sorry I misunderstood. I thought you meant a separate list of activities. The activities block probably isn't what you want, it lists activities by type, not section.

    Whether the activities are shown under the sections is mainly a theme thing, I think. Classic shows activities under sections, Boost pre Moodle 4.0 doesn't. I guess that the Lambda theme doesn't either. Boost in Moodle 4.0 shows activities under sections, although the navigation drawer is only shown at all if the course format enables it.

    In Moodle 4.0 Boost theme, activity navigation is removed if the navigation drawer is enabled, apparently because the developers considered activity navigation no longer necessary with activities shown in the navigation drawer. It looks like Moodle 4.0 Classic theme doesn't remove activity navigation though (I didn't notice this before). So I guess removing the activity navigation must be a theme thing too.

    In any case, I don't think there's anything I can do in my course format to ensure that both the navigation drawer and the activity navigation are shown.
  • Wed, Jun 1, 2022, 4:32 PM
    Hi James Calder, How to set the background for main sections?
  • Wed, Jun 1, 2022, 8:04 PM
    Hi Santosh,

    I have kind of answered this before, but looking back at my answer, it could probably be improved.

    The Multitopic format doesn't have an option for setting background colour on sections, however you could do this with a JavaScript hack.

    First you need to find the HTML hex code for the colour you want. You could use an art program or something like .

    Then you need to find the ID for the section you want to set a colour on. If you edit the section, the section ID should be shown at the end of the web page URL.

    Then, in the summary, click on the "Show more buttons" or "Toolbar toggle" icon at the top left, then the "HTML" or "Edit HTML source" button, and add the following HTML code at the top or bottom, replacing curly braces with angled brackets (I don't think the comments allow me to type angled brackets), and the xxxs with the section ID and HTML hex colour code:

    document.querySelector("ul.sections li.sectionid-xxx .content").style.backgroundColor = '#xxx';
  • Fri, Jun 3, 2022, 11:45 PM
    Hi James,

    Thank you again for providing this code. First I tried to put this on the Additional HTML page within Head. It did not change the color of the activity nav button. Next I tried to put in the Within Body section. Same result, color change on the nav button. Last, I put this in the Lambda CSS custom field. Still does not work.
    body.format-multitopic.path-mod.pagelayout-incourse #page #page-content .activity-navigation #prev-activity-link {
    color: #fff;
    background-color: #964e76;
    body.format-multitopic.path-mod.pagelayout-incourse #page #page-content .activity-navigation #next-activity-link {
    color: #fff;
    background-color: #964e76;

    On the browser Inspect, I have these code:
    .activity-navigation #next-activity-link, .activity-navigation #prev-activity-link {
    background: #f2f2f2!important;
    color: #555!important;
    box-shadow: 0 -1px 0 rgb(0 0 0 / 10%) inset;

    This code " .activity-navigation #prev-activity-link", is grayed. Noticed that this seem to be duplicate in the Inspect code.
  • Sat, Jun 4, 2022, 10:12 AM
    Hi Randy,
    Good spotting, I guess that other CSS is overriding the new CSS. The best way to fix it would be to find where the other CSS is and remove it, but you could probably just add !important in the new CSS.
1 2 3
Please login to post comments