Custom Theme Gradebook CSS Slightly Broken After 2.6 to 2.8 upgrade

Custom Theme Gradebook CSS Slightly Broken After 2.6 to 2.8 upgrade

by Dustin Hein -
Number of replies: 7

Hey There,


TLDR: Custom theme (child theme of 'Clean') showing unwanted elements in gradebook full view. Does not occur when clean theme is applied. Clean theme has CSS setting these elements to display:none. Child theme does not seem to inherit these CSS properties.

---

Just testing my theme in preparation to move to a more recent version of Moodle. Most things seem to work fine as my theme is a child of 'clean', but there is one issue that so far has me stumped. 

When I go into the gradebook, there is what appears to be almost a duplicate of the grader report table as some kind of absolutely positioned overlay on the page. The source code for these elements looks like this:

<div aria-hidden="true" role="presentation" class="floater heading" style="height: 30px; left: 15px; position: absolute; top: 30px; width: 503px;">


In our current version of Moodle (2.6), these element do not appear to exist and likely have been introduced in a newer version. There are a few other elements but for the most part they share similar qualities: The "floater" class, and the fact that all of these are hidden using CSS display:none; in the clean theme. Now, I would be tempted to just do the same CSS styling in my own theme, but it is a child of Clean. Should it not inherit these properties already so that I do not need to manually dig for display problems with each upgrade?

Has anyone experienced a similar issue with the gradebook? Mostly I'd just like to know if I should manually add these styles to my theme, or if there is something I can do to allow my custom theme to inherit these style properties.

Thank you!

Average of ratings: -
In reply to Dustin Hein

Re: Custom Theme Gradebook CSS Slightly Broken After 2.6 to 2.8 upgrade

by Mary Evans -


Hi,

Was the Child theme derived from  the Clean theme within your Moodle 2.6?

If it was not then that is possibly where you have gone wrong.

However a 'child-theme' in the true sense of the word should only need:

/lang/en/theme_childthemename.php
/pix
/style/custom.css
config.php
settings.php
version.php

All the rest should come from the parent.

So which EXACT version of Moodle 2.6 are you using as this theme is now obsolete and truly out of date!

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Custom Theme Gradebook CSS Slightly Broken After 2.6 to 2.8 upgrade

by Dustin Hein -

Hey.. Thanks for the response smile 

I believe it was.. I set up the theme initially to be based off the clean theme in 2.5... We moved to 2.6 and there were no problems.. Now I see this happening before our 2.8 upgrade.

As a test, I removed all additional files from my theme except for the directories you specified. I uploaded and applied the theme, which, after being stripped down, looked just like the Clean theme. All my layout files and CSS files omitted from the install package. Perhaps my problem lies within these core files of my theme...

Navigating to the gradebook, I still see this problem occurring and it does not happen with the clean theme applied..

The mystery continues.. Thank you for your input.

Edit: For the sake of laziness, I tried adding a display:none to my theme's css for these elements. Initially, they were hidden when the page loaded, but then reappeared as soon as I started scrolling the page.. Hmm...

Average of ratings: -
In reply to Dustin Hein

Re: Custom Theme Gradebook CSS Slightly Broken After 2.6 to 2.8 upgrade

by Mary Evans -

My advice to you is check that the Child theme config.php is NOT excluding the 'grader' stylesheet, which was the case in Clean theme in Moodle 2.5.

https://github.com/moodle/moodle/blob/MOODLE_25_STABLE/theme/clean/config.php#L47-L51

Some changes occurred in the grader between 2.6 and 2.7, I know this because I did them and it took weeks to get put through. And then I spent a further week fixing 2.6.

Reference only: https://github.com/moodle/moodle/commit/edb7d5ad84bc127f0138ab084e911845eac69816

The bigger change came in 2.8 which totally transformed the 'grade book' to make it virtually unrecognisable. It looked similar but worked differently.

So you are perhaps causing your own problems with using your old child theme.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Custom Theme Gradebook CSS Slightly Broken After 2.6 to 2.8 upgrade

by Dustin Hein -

That did it! Thank you very much!

I could have sworn I tried this yesterday, but maybe it was because I was working on these files directly off our development server... I worked with local copies and then installed the theme and VOILA!

Thanks Mary, and everyone else for the helpful suggestions.

Cheers!

Average of ratings: -
In reply to Dustin Hein

Re: Custom Theme Gradebook CSS Slightly Broken After 2.6 to 2.8 upgrade

by Mary Evans -

Great!

thanks for letting me know!

Mary

Average of ratings: -
In reply to Dustin Hein

Re: Custom Theme Gradebook CSS Slightly Broken After 2.6 to 2.8 upgrade

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ok....

  • Child theme must be doing something to overwrite these selectors if in fact it is a true child theme.  Use browser development tools to find out where.  Or are you excluding things?  The child theme needs to inherit these styles to a) make it work and b) make update easier.
  • Gradebook using 'floater' class is a M2.8+ thing.
  • It is meant to be hidden.
  • Some uncustomisable in-a-theme YUI JS controls the visibility when the horizontal browser scroll bar is used.
  • In terms of 'pain' this functionality is a nightmare to style as there are not enough specific selectors to pin down things, so even with 'first-of-type' and 'odd' pseudo-selectors etc. can be tricky.

Average of ratings: -
In reply to Gareth J Barnard

Re: Custom Theme Gradebook CSS Slightly Broken After 2.6 to 2.8 upgrade

by Dustin Hein -

Thanks for the suggestions. I'll take these into account when I get back to work tomorrow.. 

The same problem is happening with a different theme created by another department in our organization... And I believe this is nothing but a renamed child theme of clean as well. My first plan of attack tomorrow is to throw together an extreeeeeemely minimal child theme and see if the same problem happens there.

By no means do I want to style this functionality.. I just want it to behave as it should be.. I'll let you know if I have any luck tomorrow.

Average of ratings: -