[CONTRIB-4106] Section Name Styles should be controlled by Theme Created: 15/Jan/13  Updated: 22/Jan/13  Resolved: 22/Jan/13

Status: Resolved
Project: Plugins
Component/s: Course format: Topcoll
Affects Version/s: 2.3.1, 2.3.3
Fix Version/s: 2.4.1

Type: Improvement Priority: Minor
Reporter: Michele Turre Assignee: Gareth J Barnard
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: Zip Archive CT23_CONTRIB_4106.zip     PNG File ct_big.png     PNG File ct_big_possible_solution.png    
Affected Branches: MOODLE_23_STABLE
Fixed Branches: MOODLE_24_STABLE
Fix Release Date: 14/Jan/13
Component watchers:
Gareth J Barnard


When using the Collapsed Topics format with "All sections on one page" layout, Section names, regardless of theme, are always centered and sized at .9 em.

Section names should pick up the styling from the Theme in use.

Is this happening because Section Names in Collapsed Topics lose the H3 tag? (In other course formats, the text for section names is H3. In Collapsed topics the Section name looses the heading tag.)

Note: If using "Show one section per page" layout, this is not an issue; Collapsed Topics behaves the same as other formats. On the Main course page, Section names do pick up Theme styles and are H3s, and on Single section pages, Section names are centered (as needs be) and again, pick up theme styling.

Comment by Gareth J Barnard [ 15/Jan/13 ]

Dear Michele,

The original intent of removing the H3 tag and imposing a 0.9em style was to reduce the chance of odd things happening with the composition of the toggle from a visual element point of view. When it was first developed for Moodle 1.9 I encountered issues - an example with the topic number can be seen on http://docs.moodle.org/19/en/Collapsed_Topics_course_format#Fine_tuning_the_look

I've just tried a quick change to the code, removing the 0.9em and using the heading output as shown by this code snippet in 'renderer.php':

$title = get_section_name($course, $section);
if ((!($section->toggle === NULL)) && ($section->toggle == '1')) {
    $toggleclass = 'toggle_open';
    $sectionstyle = 'display: block;';
    if ($this->mymobiletheme == true) {
        $toggleclass .= ' opencps';
} else {
    $toggleclass = 'toggle_closed';
    $sectionstyle = '';
$toggleclass .= ' the_toggle';
$o .= html_writer::start_tag('a', array('class' => $toggleclass, 'href' => '#'));
$p = $title;
if ((string) $section->name !== '') {
    if (($section->section != 0) && (($tcsetting->layoutstructure == 2) || ($tcsetting->layoutstructure == 3) || ($tcsetting->layoutstructure == 5))) {
        $p .= ' <br />';
        $p .= tc_get_section_dates($section, $course, $tcsetting);  // In lib.php
switch ($tcsetting->layoutelement) {
    case 1:
    case 2:
    case 3:
    case 4:
        $p .= ' - ' . $toggletext;
$o .= $this->output->heading($p, 3, 'sectionname');
$o .= html_writer::end_tag('a');

And the result is a very large toggle, screen shot to follow.



Comment by Gareth J Barnard [ 15/Jan/13 ]

Screen shot 'ct_big.png' showing the effect of putting back the 'H3' tag and removing 0.9em font size on the standard theme.

Comment by Gareth J Barnard [ 15/Jan/13 ]

So, you are welcome to remove the 0.9em from styles.css, but I doubt I will by default or put the 'H3' tag code in without finding time to sort out any possible padding / margin issues.

If you would like to have the text on the left / right instead of the centre, then the latest version for Moodle 2.4 supports that as a setting - https://moodle.org/plugins/pluginversion.php?id=1989 - I do not intend to backport the functionality to 2.3- as it is a lot more work unless funding was given.

But, I will not close this issue just yet and have a think about the implications of what it raises.



Comment by Gareth J Barnard [ 15/Jan/13 ]

Image 'ct_big_possible_solution.png' demonstrates how it might be possible to implement a no 0.9em and 'h3' back again solution but with a styles tweak of a margin of 0em on the specific h3.sectionname selector postfixed to be CT only. Also demonstrates the developer's persistence when code does not do as it's told.

Comment by Gareth J Barnard [ 15/Jan/13 ]

If Michele you wish to try out on a test server the effects of the soluion presented in 'ct_big_possible_solution.png', please install the attached topcoll folder in 'CT23_CONTRIB_4106.zip' which is one version or so beyond what I fixed for you the other day.

Comment by Michele Turre [ 17/Jan/13 ]

Hi. We are rushing to get in our last changes before courses open on Friday. I just finished a rough styling of the Section names with CSS for our various themes. I'm interested in your new solution, but do have not time to try it out right now.

As soon as our spring semester is underway I'd be happy to test your new approach. We do monthly minor updates, but try to keep things as stable as possible during each semester. We expect to upgrade from 2.3 to 2.4 in June. So from here on out, I'll probably be looking ahead and trying out new things first on 2.4.

In the meantime, a little off topic, I've been following MDL-33115. I am wondering if you (or when you will) have a version of Collapsed Topics that is working with the MyMobile theme? We are under pressure from users to turn on the mobile theme, but since so many of our courses use CT, we need it working there first.

  • Michele
Comment by Gareth J Barnard [ 17/Jan/13 ]

Dear Michele,

Thanks .

Regarding MDL-33115 - since raising the issue last may I was able to make a reasonable workaround 27th June 2012 and the last workaround tweak was on the 9th November 2012. So since June 2012 the format has worked with the MyMobile theme just it does not incorporate the jQueryMobile styling for the toggles. This needs to be resolved within the MyMobile theme and not Collapsed Topics, hence a MDL and not a CONTRIB issue. Therefore, this is beyond my control even though I can code using jQueryMobile.

So what you will see is illustrated by image 'mymobile_25_content_and_toggle.png' on MDL-33115 which shows a course with content and a toggle opened on Moodle 2.5dev - in effect 2.3 and 2.4 too.

You should find that it already works.



Comment by Gareth J Barnard [ 18/Jan/13 ]

In thinking about MDL-33115 it is entirely possible to render the html for the MyMobile theme such that jQueryMobile 'data-role' type attributes are appended to the appropriate tags. However after performing a quick trial they actually in this case make the layout appear worse.

Comment by Gareth J Barnard [ 22/Jan/13 ]

Implemented in https://moodle.org/plugins/pluginversion.php?id=2044

Generated at Fri Nov 16 08:39:18 UTC 2018 using Jira 7.12.0#712001-sha1:ad166f5f9410495f8c71bd6c53abc939fb5afea7.