Multitopic format

Multitopic format

by James Calder -
Number of replies: 53
Picture of Plugin developers

The Multitopic format shows multiple topics per page, with tabbed navigation between pages. Topics are collapsible, and can optionally be timed.

Multitopic format web page: https://moodle.org/plugins/format_multitopic

This thread is for discussion relating to the Multitopic format.

Average of ratings: -
In reply to James Calder

Re: Multitopic format

by Alexei Barantsev -

Is it ever possible to convert all courses that use Periods format to Multitopic format?

Periods format does not support Moodle versions > 3.4 and makes it impossible to upgrade... It would be very handly to use Multitopic as a drop-in replacement for Periods format.

In reply to Alexei Barantsev

Re: Multitopic format

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
You could run an mysql query to do this...if you have access to the database and are familiar with editing and running queries.
In reply to Emma Richardson

Re: Multitopic format

by Alexei Barantsev -
Yes, I can. I thought maybe there is a ready to use query that converts the courses...
In reply to Alexei Barantsev

Re: Multitopic format

by James Calder -
Picture of Plugin developers

Hello Alexei and Emma,

I've started looking at expanding the options for timing sections in Multitopic format.  I'd rather not implement the full options from Periods format, because (aside from being more work) it looks like the Moodle forms components the Periods format rely on would fail the Moodle code checks.  I was thinking about maybe having options for a course's default topic duration being a week or a day, and individual topic durations being 0-6 days or 1-4 weeks.

Alexei:  If this is still relevant to you, could you check if this would cover most of the cases that teachers use?  I think this should check courses' default topic durations?:

SELECT value, count(id) FROM mdl_course_format_options
WHERE format='periods' AND sectionid=0 AND name='periodduration'
GROUP BY value
ORDER BY count(id) DESC

(And sectionid>0 for individual topic durations?)

Emma:  I don't suppose you know, or know how to find out, whether it's possible to have a course format import section options from another course format?  From the looks of /moodle/course/format/lib.php functions update_course_format_options and update_section_format_options, it looks to me like it should be possible to import course options, but unfortunately not section options?

Thanks,
James

In reply to Alexei Barantsev

Re: Multitopic format

by James Calder -
Picture of Plugin developers
Hi Alexei,

AFAIK, if you uninstall a course format plugin, I believe existing courses in that format will be converted to the default course format (set under Site administration > Courses > Course default settings > Format), but will lose course format options. I don't know how to import course format options, unfortunately, and the Multitopic format only supports weekly topics anyway. Re looking at the database, it looks like the course format options are stored in the table mdl_course_format_options (which makes sense). I'm not sure what could be done with this, though.

If you can get some money from your organisation, I wonder if it would be worth posting on the Periods format page, to see if the author would be willing to continue updating it, and if any other organisations would be willing to share the cost?
In reply to James Calder

Re: Multitopic format

by James Calder -
Picture of Plugin developers
Re converting courses, I forgot about Periods format being only supported up to Moodle 3.4, and Multitopic from 3.5. I don't know anything about updating Moodle, but it does seem possible to manually install Periods format on Moodle 3.5, by unzipping it into the moodle/course/format directory, so I'm surprised that it blocks updating. I guess it would be possible to install a third course format, make it the default, uninstall Periods format (converting everything to the third format), update Moodle, make Multitopic the default, and uninstall the third format (converting everything to Multitopic), It might even be possible to manually install Multitopic format in Moodle 3.4 for the purpose of converting courses, with a hack, by editing the file moodle/course/format/multitopic/version.php, and changing $plugin->requires = 2018051700 to $plugin->requires = 2017111300. Of course, whatever you do, you'll want backups.
In reply to James Calder

Re: Multitopic format

by Gary Newport -
In the header is a thin strip of the course image we use on the dashboard. It also has textual reference to the image, who posted it and copyright information.

I'd like to know how to...

1. remove this entirely
2. use a different image that fills the whole banner (this one repeats when set to 50%, and just this thin strip on any other percentile)

Thanks for any help you might be able to provide.
In reply to Gary Newport

Re: Multitopic format

by James Calder -
Picture of Plugin developers

Hello Gary,

Sorry for the late reply, I think I unenrolled because I was getting a lot of messages from other forums, and I forgot to check this forum.

If the banner is a thin strip, and the image repeating, I suspect you haven't copied the CSS from the README_styles.css source file into an HTML style tag in Site administration > Appearance > Additional HTML > Within HEAD.  (I don't know why the image would only repeat when set to 50% though.)

There aren't any options for removing attribution or removing or replacing the image on a per-course page basis, but you could hide the attribution, image, or banner site wide by modifying the CSS.  The relevant sections to change would be

 body.format-multitopic div#course-header > div#course-header-banner

and

 body.format-multitopic div#course-header > p#course-header-banner_attribution


I hope this helps.  (Although I guess it's probably to late to be much use.)

In reply to James Calder

Re: Multitopic format

by Roberto Vallejo -

Hello James.

Is it posible to duplicate a topic with all the subtopics in?

I need to create a structure of  template and it has several topics in a main topic, I need to duplicate the main topic several times too with the content.

Thanks for your help.

In reply to James Calder

Re: Multitopic format

by James Hamilton -
Hi James, cool concept! Thanks for the contribution. Could you point me in the direction of how to implement the "grid format" mentioned on the plugin description?  Nm, I watched the video.
In reply to James Calder

Re: Multitopic format

by Aula Virtual TEG -

Collapsible topics

Hi, I'm having trouble with this course format. My topics doesn't collapse! 

I'm running Moodle 3.5, with the Klass theme. It didn't allow me to copy and paste the README.css in the HEADER section. Instead, I pasted it into a special section of the Klass theme, named "theme_klass | customcss". Everything works fine, except for the topics, which aren't collapsable. 

The code I pasted:

/* Page */
body.format-multitopic div#page {
    max-width: 1680px;
}

/* Course Header */
body.format-multitopic div#course-header > div#course-header-banner {
    max-width: none;  /* Needed on LTD server? */
    background-size: cover;
}
body.format-multitopic div#course-header > div#course-header-banner > div#course-header-banner-text {
    padding: 40px;
    font-size: xx-large;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
}
body.format-multitopic div#course-header > p#course-header-banner_attribution {
    text-align: right;
    margin: 0;
    font-size: xx-small;
}

/* Tabs */
/* INCLUDED moodle/course/format/onetopic CHANGED. */
body.format-multitopic .course-content ul.nav-tabs li a .tab_content {
    border-top: transparent 2px solid;
}
body.format-multitopic .course-content ul.nav-tabs li a .tab_content.marker {
    border-top: #06c 2px solid;
}
body.format-multitopic .course-content ul.nav-tabs li a .tab_content.dimmed {
    color: #999;
    background-color: transparent;
}
/* END INCLUDED */

/* Generic Section */
body.format-multitopic ul.sections li.section {
    width: 100%;
    height: auto;
    position: initial !important; /* stylelint-disable-line declaration-no-important */
    visibility: inherit;
    margin-bottom: 1rem;
}
body.format-multitopic ul.sections li.section .content {
    display: block;
}
body.format-multitopic ul.sections li.section .content .sectionname {
    background: #eee;
    padding: 10px;
    margin-bottom: 0;
    font-size: large;
}
body.format-multitopic ul.sections li.section:not(.hidden) .content .sectionname {
    color: #000;
}
body.format-multitopic ul.sections li.section:not(.hidden) .content .sectionname a {
    color: #000;
}
body.format-multitopic ul.sections li.section .content .sectionname .section_subtitle {
    font-size: small;
}
body.format-multitopic ul.sections li.section .summary {
    padding: 1rem;
}
body.format-multitopic ul.sections li.section .summary .section_image_holder {
    text-align: right;
}
body.format-multitopic ul.sections li.section .section_image_holder {
    float: right;
    width: 240px;
    font-size: xx-small;
}
body.format-multitopic ul.sections li.section .section_image_holder img {
    width: 240px;
    height: 180px;
    object-fit: cover;
}

/* Section Anchor Jump Fix */
body.format-multitopic ul.sections li.section::before {
    display: block;
    content: " ";
    margin-top: -100px;
    height: 100px;
    visibility: hidden;
    pointer-events: none;
    position: initial;
}
body.format-multitopic ul.sections li.section {
    background: none;
}

/* Page Section */
body.format-multitopic ul.sections li.section.section-page .content .sectionname {
    background: url("[page_heading_background]");
    padding: 30px;
    font-size: x-large;
}

/* Topic Section */
body.format-multitopic ul.sections li.section.section-topic {
    margin-left: 1rem;
    margin-right: 1rem;
}

/* Current Section */
body.format-multitopic ul.sections li.section.current .content h3 {
    border-left: #06c 2px solid;
}

/* Timed Topic Section */
body.format-multitopic ul.sections li.section.section-topic-timed .content .sectionname {
    background: linear-gradient(to right, #7ce, #7bb);
}
body.format-multitopic ul.sections li.section.section-topic-timed:not(.hidden) .content .sectionname {
    color: #fff;
}
body.format-multitopic ul.sections li.section.section-topic-timed:not(.hidden) .content .sectionname a {
    color: #fff;
}
body.format-multitopic ul.sections li.section.section-topic-timed .content .section_availability {
    background: #eee;
}
body.format-multitopic ul.sections li.section.section-topic-timed .content .summary {
    background: #eee;
}

/* Hidden Section */
body.format-multitopic ul.sections li.section.hidden .content .sectionname {
    color: #868e96;
}
body.format-multitopic ul.sections li.section.hidden .content .sectionname a {
    color: #868e96;
}


I'm I missing something? Should I add some extra code somewhere? I would really appretiated your help.


Thanks in advance.

Juan Carlos García Melgar

In reply to Aula Virtual TEG

Re: Multitopic format

by James Calder -
Picture of Plugin developers
Hi Juan,

Sorry, I can't reproduce this on my test server. I've got Moodle 3.5, installed the Klass theme, and pasted the CSS into theme_klass | customcss, but topics are collapsing for me. Would it be possible to set me up a sandpit on your server, and e-mail me login details?

Thanks,
James
In reply to James Calder

Re: Multitopic format

by Nika E -

Hi, James! I find this course formst very convenient, but i have noticed interesting thing. 

1. I create a section as a topic, then make it second-level page.

2. Then i click "edit" and "move page left", "move page right".

3. After this actions i make the section as topic again.

Now i see i cannot collapse this section (example on picture) and section has icon 'fa-list'. How can i make it collapsible again?

My moodle version is 3.6.9+ (Build: 20200312), module version is v1.1.2 (2020062404).


In reply to Nika E

Re: Multitopic format

by James Calder -
Picture of Plugin developers
Hello Nika,

Sorry about this. This is pretty unintuitive, but the section setting "Topic duration override" will have been changed to "No time", and you will need to revert it to "Default".

The reason for this (such as it is): Topics can be timed weekly (if this course setting is enabled), and individual topics can be set to "No time" for if they are relevant to multiple weeks (e.g. for assignments that students are expected to work on throughout multiple topics). These topics are always shown expanded, since they are expected to be relevant to multiple other topics. The Topic duration override setting is ignored for pages, which are always treated as No time regardless of the actual setting, but when sections are moved, this setting is set to No time for pages, to tidy things up. The setting will persist when a page is converted to a topic.

Cheers,
James
Average of ratings: Useful (1)
In reply to James Calder

Re: Multitopic format

by Nika E -
Thank you for detailed response, now i see it clearly! It solves my problem. Maybe, we will add hints in module interface so that our teachers see this feature too.
In reply to James Calder

Re: Multitopic format

by Stephen Wallace -
I am testing Multitopic on Moodle 3.8.4 and would like to use this plugin. However, it is not displaying the course name in the header. It does display the course breadcrumbs and some other content. The additional I was able to remove by modifying the courseheader.php file. However, it appears that the coursename is not working properly in the header. I am using the theme Maker but I have also tested with the default Boost theme with the same results. I am also using version 2.0.

Thanks for any suggestions or help you can offer.

Best regards,
Stephen
In reply to James Calder

Re: Multitopic format

by Stephen Wallace -

Hello!

Is there a way to have all of the sections to expand or collapse? I can do this one by one but it would be good to have an option to do so for all items on the page.

Thanks!

Stephen

In reply to James Calder

Re: Multitopic format

by Tanja Böhnke -
Hello, is it somehow possible to not show the course banner at all? maybe there is a CSS code?

I tried this one:
body.format-multitopic #course-header-banner {
display: none;
}
bit still the written image data are displayed.

I like the course format very much, but the way I am using the course images is just not suiting for a banner. I would really appreciate a hint. Thank you
In reply to Tanja Böhnke

Re: Multitopic format

by James Calder -
Picture of Plugin developers

That CSS looks about right to me. Instead of #course-header-banner it would probably be better as #course-header, to make sure image attribution is hidden too. Perhaps adding !important might make it work?:

body.format-multitopic #course-header {
display: none !important;
}

If that doesn't work, then I'd guess the CSS might be entered in the wrong Moodle setting. I put CSS under Site admin / Appearance / Additional HTML / Within HEAD. If entered there, it needs to be between an opening <style> and closing </style> tag.

Average of ratings: Useful (1)
In reply to James Calder

Re: Multitopic format

by Oliver Vogel -
Hello James,

I just started working with the multitopic format for our course and I really like it.
It gives a good structure to the topics we will present.

However, I have two issues that I hope You can give me a solution for:
  • Is there a limitation in the number of topics which can be created?
    We have catogegories of topics which I build as level one pages and for each category there are a number of topics (created as topics) as shown in the screenshot.
    The problem is, if i just add one more topic the "Add topic"-button dissapears and I cannot add anymore topics.


  • The secon question is about the size of the course image:



    As you can see, only a small slice of the image is visible.
    How can I manage to show the whole picture? Is it possible to change the size of the visible piece of the image in the header?

Looking forward to your answers.

Best regards from Germany,
Oliver

In reply to Oliver Vogel

Re: Multitopic format

by Oliver Vogel -
In addition to my first question:
I just found out that there is a general maximum number of topics in one course set to 52 in moodle's global course settings. I just asked our system administrator to change that number, so that I can use more topics.
Average of ratings: Useful (1)
In reply to Oliver Vogel

Re: Multitopic format

by James Calder -
Picture of Plugin developers
Hi Oliver,

The size of the course image can be set in CSS. There's some suggested CSS for this, and other things, here:
https://github.com/james-cnz/moodle-format_multitopic/blob/master/README_styles.css

Cheers,
James
In reply to James Calder

Re: Multitopic format

by HERNAN GIOVANNI RAMIREZ SEGURA -

Hi James,

I have not been able to make the image look complete, please tell me which line of code to add.


The original image is like this:


and a second question, what to do so that the title or name of the course is not displayed. This is because I bring it inserted in the image.

Thanks,

gioElearning

In reply to HERNAN GIOVANNI RAMIREZ SEGURA

Re: Multitopic format

by James Calder -
Picture of Plugin developers
Hi Hernan,
Sorry, there isn't a way to change these things on a per-course basis. They could be changed in the CSS, but this would apply to all Multitopic courses. The suggested CSS sets the height on the banner image with padding on the div#course-header-banner-text element. I think you could set this element to display: none to hide the text, and instead set the height on the div#course-header-banner element directly, with a height or aspect-ratio property.
Average of ratings: Useful (1)
In reply to James Calder

Re: Multitopic format

by Jacques LeCavalier -
Hi, James.
We really like the Multitopic format, but the one nagging thing is the title of the first 2nd level tab that duplicates the title of the "parent" 1st level tab. This seems not intuitive at all, or else we just do not understand the logic if this choice.
Is there any way to allow the RENAMING of this first 2nd level tab? This would make it a no-brainer for us to use this format in longer courses where scrolling is a problem.
Many thanks in advance for your help.
Jacques
In reply to Jacques LeCavalier

Re: Multitopic format

by James Calder -
Picture of Plugin developers
Hi Jacques,

Sorry, there is no way to rename the first sub-tab in Multitopic format. The tab names are taken from the Moodle section name, and both the top-level tab, and the first sub-tab are represented by the same section. Onetopic format (which the Multitopic format draws from) does allow renaming the first sub-tab, by adding an extra property to sections for this. However, with Multitopic format, I chose to display the section name as a heading on each page. This means I couldn't have copied the Onetopic format setting as is (section name used on the top-level tab, extra property for the for the first sub-tab), because the title on the page would then reflect the top-level tab, not the first sub-tab. I guess I could have instead had an additional section property for the name of the top-level tab, but I think this may have been confusing. To add to this, since the Multitopic format has section names as page titles, I expect the section names will most often be changed on the course page, so it may cause confusion to have one level of tab renamed on the course page, and the other only in the section settings page, whereas with Onetopic format, both can only be changed in the section settings page. I hope this makes sense.

Cheers,
James
In reply to James Calder

Re: Multitopic format

by Jacques LeCavalier -
Thanks for your quick response, James, this is much appreciated.
I have to admit, somewhat sheepishly, that I didn't even know we could add sub-tabs to the Onetopic format! I do like the fact that we can rename the first sub-tab in that format to whatever we like. Thanks for revealing this important feature to me.
I guess that if we don't need collapsible topics, then the Onetopic format might be sufficient for our purposes.
All the best,
Jacques
In reply to James Calder

Re: Multitopic format

by Suzanne Thomas -
Kia ora James, just checking this is still the case please (now that we are 2023 smile I'm convinced I've seen the first tab of the second tier renamed to "Introduction" recently but I couldn't see who's LMS that was on!! Perhaps it was OneTopic, but using 2 tiers.
In reply to Suzanne Thomas

Re: Multitopic format

by James Calder -
Picture of Plugin developers
Yes, sorry, still the case.  Yes, I expect it must have been a Onetopic course.
In reply to James Calder

Multitopic format with different colours for each topic

by Francesc Anglada -

Hi James,
I would like to have different colors for every first level tag title (and other levels) but I don't know how to do it. I try to change the README_styles.css file but I don't get it.

I will be very thanful if you can give me some advise about it.

I use moodle version 3.11
Theme is boost
I usually use firefox 93.0

Thanks
Francesc

Attachment likeThis.png
Attachment MyMoodleCourse.png
In reply to Francesc Anglada

Re: Multitopic format with different colours for each topic

by James Calder -
Picture of Plugin developers

Hi Francesc,

Sorry, but there is no proper way to do this. The CSS is for styles that apply to all courses. However, if you don't mind a hacky way, I think you could do this with JavaScript. If you add a new HTML/text block to the course page, show more buttons on the editor, and switch to HTML code view, then I think this code should do it:

<script>
    <!--
    var tab_colours = {
        "Quarter 1": "#070",
        "Quarter 2": "#f90"
    };
    var top_tabs = document.querySelectorAll("body.format-multitopic .course-content ul.nav-tabs:first-of-type li a");
    for (var key in top_tabs)
        if (top_tabs.hasOwnProperty(key)) {
            var tab = top_tabs[key];
            var colour_1 = tab_colours[tab.getAttribute("title")];
            if (colour_1) {
                tab.setAttribute("style", "color: " + colour_1 + ";");
            }
        }
    var sel_top_tab = document.querySelector("body.format-multitopic .course-content ul.nav-tabs:first-of-type li a.active");
    var colour = tab_colours[sel_top_tab.getAttribute("title")];
    if (colour) {
        var child_tabs = document.querySelectorAll("body.format-multitopic .course-content ul.nav-tabs:nth-of-type(2) li:not(:first-of-type) a");
        for (var key in child_tabs)
            if (child_tabs.hasOwnProperty(key)) {
                var tab = child_tabs[key];
                tab.setAttribute("style", "color: " + colour + ";");
            }
    }
    -->
</script>
In reply to James Calder

Re: Multitopic format with different colours for each topic

by James Calder -
Picture of Plugin developers

I just noticed, the lines near the top and bottom that read:

<!--
-->

Should be:

// <!--
// -->
In reply to James Calder

Re: Multitopic format with different colours for each topic

by Francesc Anglada -
Hi James,
First of all, thanks a lot for your answers because If I get to have one color for each topic and its sublevels it could help to do more attractively the course page for my teenagers students.

I did what you told me in your two messages, but something is happening to and it is not working.

I understand there are two ways to do what I would like to do:

1. The hacky way is not working still. I might have done some mistake. I replaced --> to // ---> and <!--  to //<!--  as you told me. But it is not working yet. I send you shotscreens. It doesn't show me any option to choose text or background color tittle tags.

2. Modifying  CSS . It doen't mind me it is for styles that apply to all courses. Because I would like apply the same colors to each topic and its sublevels but different to the others topics and its sublevels. But as I told you at the first messatge I didn't get it modifying "README css styles".


Thanks you very much
Francesc
Attachment 1tagColor.png
Attachment 2colorTags.png
In reply to Francesc Anglada

Re: Multitopic format with different colours for each topic

by James Calder -
Picture of Plugin developers

Hi Francesc,

Sorry, I didn't say, there is no interface, you need to edit the code for your course. Change:

    var tab_colours = {
        "Quarter 1": "#070",
        "Quarter 2": "#f90"
    };

Replace Quarter 1 and Quarter 2 with your tab names, and #070 and #f90 with the hex code for the font colours you want. Add more lines if you need them. Every line except the last needs a comma at the end. If you type "colour picker" into Google, you should be able to choose a colour, and get the hex code for it.

The code as it is only changes font colours. It could be adjusted to change background colours too, but I think it may be difficult to see which tab is selected.
You could change:

    var tab_colours = {
        "Quarter 1": "#070",
        "Quarter 2": "#f90"
    };

to something like:

    var tab_colours = {
        "Quarter 1": "color: #070; background: #dfd;",
        "Quarter 2": "color: #f90; background: #fed;"
    };

change:

                tab.setAttribute("style", "color: " + colour_1 + ";");

to:

                tab.setAttribute("style", colour_1);

and change:

                tab.setAttribute("style", "color: " + colour + ";");

to:

                tab.setAttribute("style", colour);

Regarding modifying the CSS, this is something that a Moodle administrator would have to do, it's not available for teachers. Also, thinking about this more, I'm not sure how to get sub-tabs the right colours this way.

In reply to James Calder

Re: Multitopic format with different colours for each topic

by Francesc Anglada -
Hi James,

It works! Thank you very much.

On the other hand, I think that in the first post I did not explain it well because I am a teacher but I am also the administrator. I tried to do the changes following the README_styles.css

As I told you, I only achieved to change the background of the name of the courses, now it is green as I show you in the attached image.
I wouldn't mind that changing  CSS even though that means changing the colors of the tags topics for all courses in the moodle. But I don't know how to do it. So if you are so kind as to teach me I will thank you. Although it already works well enough with your trick. I'm happy.
Thanks a lot.
Francesc


Attachment courseTitle.png
Attachment ItsWorking.png
In reply to Francesc Anglada

Re: Multitopic format with different colours for each topic

by James Calder -
Picture of Plugin developers

Hi Francesc,

I don't know if there's a proper way to colour the child tabs with CSS. The top-level tabs can be coloured the proper way with CSS, if you go to Site admin > Appearance > Additional HTML and in Within HEAD add:

<style type="text/css">
/* Tab colours */
body.format-multitopic .course-content ul.nav-tabs:first-of-type li:nth-of-type(6n+2) a { color: #800; }
body.format-multitopic .course-content ul.nav-tabs:first-of-type li:nth-of-type(6n+3) a { color: #660; }
body.format-multitopic .course-content ul.nav-tabs:first-of-type li:nth-of-type(6n+4) a { color: #080; }
body.format-multitopic .course-content ul.nav-tabs:first-of-type li:nth-of-type(6n+5) a { color: #066; }
body.format-multitopic .course-content ul.nav-tabs:first-of-type li:nth-of-type(6n+6) a { color: #008; }
body.format-multitopic .course-content ul.nav-tabs:first-of-type li:nth-of-type(6n+7) a { color: #606; }
</style>

You can change the colours and add or remove lines, but (6n+_) on each line should be changed to match the number of lines, so with 4 lines it would be (4n+_)

If you don't mind a hacky way instead, you could change both top-level and child tabs with JavaScript. Go to Site admin > Appearance > Additional HTML as before, but instead in Before BODY is closed add:

<script type="text/javascript">
// <!--
function tab_colours() {
    var tab_colours = [
        "#800",
        "#660",
        "#080",
        "#066",
        "#008",
        "#606"
    ];
    var top_tabs = document.querySelectorAll("body .course-content ul.nav-tabs:first-of-type li a");
    var tab_num = 0;
    var sel_tab_colour = null;
    for (var key in top_tabs)
        if (top_tabs.hasOwnProperty(key)) {
            if (tab_num) {
                var tab = top_tabs[key];
                var colour = tab_colours[(tab_num - 1) % tab_colours.length];
                tab.setAttribute("style", "color: " + colour + ";");
                if (tab.classList.contains("active")) {
                    sel_tab_colour = colour;
                }
            }
            tab_num++;
        }
    if (sel_tab_colour) {
        var child_tabs = document.querySelectorAll("body .course-content ul.nav-tabs:nth-of-type(2) li:not(:first-of-type) a");
        for (var key in child_tabs)
            if (child_tabs.hasOwnProperty(key)) {
                var tab = child_tabs[key];
                tab.setAttribute("style", "color: " + sel_tab_colour + ";");
            }
    }
}
if (document.body.classList.contains("format-multitopic")) {
    tab_colours();
}
// -->
</script>
In reply to James Calder

Re: Multitopic format with different colours for each topic

by Francesc Anglada -
Hi James,
I'm sorry to answer you so long time after. I would like to say to you it works perfectly. I preferred to use the second way you taught me.
These days I thought in other questions. Do you know any way to do the line, that separates the top-level tabs and child tabs, stronger or thicker?
Thank you

Francesc
In reply to Francesc Anglada

Re: Multitopic format with different colours for each topic

by James Calder -
Picture of Plugin developers

Hi Francesc,

To make the tab borders darker, go to Site admin > Appearance > Additional HTML and in Within HEAD add:

<style type="text/css">
/* Tab borders */
body.format-multitopic .course-content ul.nav-tabs { border-bottom-color: #000; }
body.format-multitopic .course-content ul.nav-tabs .nav-link.active { border-color: #000 #000 #fff; }
body.format-multitopic .course-content ul.nav-tabs .nav-link:hover,
body.format-multitopic .course-content ul.nav-tabs .nav-link:focus { border-color: #000 #000 #000; }
</style>

If this is too dark, you can change the #000s to #111, #222, etc.

In reply to James Calder

Re: Multitopic format

by herve boris -

Hello everyone, I've been using the plugin for 3 months but I have a problem with the display. When I paste the image into course image, it works fine. I have the problem that the course image (banner) is no longer displayed correctly
Diversity Hand is the original picture

Attachment Diversity Hand-in-Circle - Copy (2).jpg
In reply to herve boris

Re: Multitopic format

by herve boris -
here ist the fehler
I have the problem that the course image (banner) is no longer displayed correctly

Attachment Fehler11.PNG
In reply to herve boris

Re: Multitopic format

by James Calder -
Picture of Plugin developers

Hi Herve,

It looks like the CSS hasn't been added (or was been removed):
https://github.com/james-cnz/moodle-format_multitopic/blob/MOODLE_35/README_styles.css

A Moodle administrator needs to add this in, at least the bit titled Course Header.

In reply to James Calder

Re: Multitopic format

by herve boris -

Hallo James

Thank you for your feedback. I have tried your solution but I always get a display error

Attachment fehler12.PNG
Attachment fehler13.PNG
In reply to herve boris

Re: Multitopic format

by herve boris -

IT IS working.

 But how can i Show a the complete picture.

Image size: 1039*252


In reply to herve boris

Re: Multitopic format

by James Calder -
Picture of Plugin developers
Sorry, I don't think there's really a good way to do this. (The banner height could be changed in CSS, but this is for all Multitopic courses, so unless all courses have the same banner height, it wouldn't help.)
In reply to James Calder

Re: Multitopic format

by Niko Preuße -
Hi there!

Only first level pages are displayed in the left navigation. I there a way to display/link the second level pages (or anchors) in the left navigation?

Thanks!
Niko
In reply to Niko Preuße

Re: Multitopic format

by James Calder -
Picture of Plugin developers
Sorry, no.  I assume you're using Moodle 3.x with the Boost theme, or a derived theme.  The Multitopic format will only show top level pages in the left navigation in this theme.  However this is changed in the Multitopic format for Moodle 4.x, and both levels of pages, plus topics, should be shown in the left side navigation.