Help needed - best way to load stylesheet based on theme setting

Help needed - best way to load stylesheet based on theme setting

by Julian Ridden -
Number of replies: 11

OK, so here is my conundrum.

Im looking for a way to load (or not load) a stylesheet based on a setting.

So the setting is made (simple checkbox) and working. The simplest answer I had was to stick a simple "if" statement on the layout to load the css or not. But then I ran into an issue.

the optional stylesheet contains various theme settings elements. these were not being passed when pulled directly into the layout. Instead just showing up rendered as setting:themecolor

So, all you bright sparks, what is a better way to do this?

Julian

Average of ratings: -
In reply to Julian Ridden

Re: Help needed - best way to load stylesheet based on theme setting

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

Hi Julian,

Look at how Mutant Banjo employs style sheet switching (swatches) in the config.php file based on a setting.  It gets over the CSS cache issue by rebuilding the theme cache every time the setting is changed.

Specifically:

https://github.com/gjb2048/moodle-theme_mutant_banjo/blob/master/config.php#L32

https://github.com/gjb2048/moodle-theme_mutant_banjo/blob/master/settings.php#L50

You can do the logic in the config.php file such that when the style sheet is loaded on a given value of the setting then the pre-processing can happen to transpose the other settings.

Gareth

Average of ratings:Useful (2)
In reply to Gareth J Barnard

Re: Help needed - best way to load stylesheet based on theme setting

by Danny Wahl -

Gareth,

that's awesome!  It's been said here before that config files can't read settings - but I guess you proved that incorrect.  That opens up so many options, like allowing the user to choose the layout file for each page, whether or not to include javascripts, etc... etc....

awesome!

Average of ratings: -
In reply to Danny Wahl

Re: Help needed - best way to load stylesheet based on theme setting

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

Thanks Danny smile - but it will only work with the theme settings that can have the cache rebuild event attached when they change.  So, whole site level only.  With per user you bump into the cache issue, which is currently unsolveable.  Tried a few months ago in a previous thread - cannot remember which one - and could not get it to work.

Average of ratings: -
In reply to Gareth J Barnard

Re: Help needed - best way to load stylesheet based on theme setting

by Danny Wahl -

yes, I think we're on the same page - I'm talking site-wide not per-user.  In the past it used to be "edit blah blah blah in config.php" to make a change - but now it can be a setting Yes

Average of ratings: -
In reply to Gareth J Barnard

Re: Help needed - best way to load stylesheet based on theme setting

by Julian Ridden -

Excited about that methodology Gareth.

Working like a charm. Well except for my admin user. All config settings are failing for that user for some reason. Another bug to fix :P

JR

Average of ratings: -
In reply to Julian Ridden

Re: Help needed - best way to load stylesheet based on theme setting

by Danny Wahl -

here's my approach in some pseudo-code:

 

settings.php:

checkbox "include widget.css?"

 

lib.php:

function includewidget() {

  if(includewidget === true) {

  find setting:widget and replace with fread(widget.css);

} else { find setting:widget and replace with NULL; }

 

style.css

/* all your other styles */

/* this will get changed by the function in the library */

setting:widget

widget.css

/* cool styles for the widget go here */

 

BUT it may be that the code in widget.css doesn't get processed and you'd end up in the same spot.  The benefit of this approach is that if that happens you should be able to recurse whatever that css is (fread(widget.css)) through the processor functions again and then pass that.

I've actually written this code somewhere before if I can find it I'll post a link...

Average of ratings:Useful (2)
In reply to Julian Ridden

Re: Help needed - best way to load stylesheet based on theme setting

by Mary Evans -

can it not be added to the Custom CSS box as a setting if and when the need arises. If you can add footnotes and color codes as a default setting then you should be able to add styles into the css box in the same way.

Average of ratings: -
In reply to Julian Ridden

Re: Help needed - best way to load stylesheet based on theme setting

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I would suggest a completely different approach. Don't change the CSS when the swatch changes. Include all the CSS for all colours all the time.

Then to select which swatch is in use, add a class to body. $PAGE->add_body_class('theme_mythmeme-' . $swatch) or something.

Mind you, I don't know how you are generating the CSS. I don't know whether this suggestion is compatilble with whatever LESS magic you are doing.

Average of ratings: -
In reply to Tim Hunt

Re: Help needed - best way to load stylesheet based on theme setting

by Danny Wahl -

I'm curious why you would suggest loading 6 styles sheets and then using one instead of using PHP to load the correct one only?

Average of ratings: -
In reply to Danny Wahl

Re: Help needed - best way to load stylesheet based on theme setting

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I'm not. I am suggesting loading one stylesheet that contains all the style rules for all the variants merged. Whether this is a sensible suggestion or not depends on what fraction of the style rules are shared between the variants, and also whether the different variants might all be used simultaneously on the site (e.g. letting each course choose a variant.)

Average of ratings: -
In reply to Julian Ridden

Re: Help needed - best way to load stylesheet based on theme setting

by David Scotson -
Wouldn't the same process for custom_css work? Except instead of replacing the placeholder_text with css entered from the user interface, you pull in one of the 6 files based on a setting?

edit: I see Danny has already suggested this in more detail above.
Average of ratings: -