This is for Moodle 3.0 and 3.1.
I have an activity, MooTyper, for which I want to add a color setting for the on-screen keyboard background so that an admin can make the activity blend in, contrast with, or match the theme of their Moodle. I can set the color manually by including the color setting, e.g. background-color: #DDDDDD;, in the mod/mootyper/styles.css file. However, I would prefer to do it with a variable, e.g. background-color:setting:keyboardbgc;. Besides, dull gray is so boring, and it would be nice to let users easily set the color without having to manually change the code.
I have the settings page created with a colorpicker, I can select a new color in the color picker, I can save the settings page so the color is stored in the mdl_config_plugins table, and I can retrieve the color from there. My problem is how to actually make the change so that when anyone opens the view.php page of the activity it uses the color set by admin. In other words, how can I access and change the css that is in the styles.css file before it is being applied to the page.
How can I use a color variable in the styles.css file of an activity
Re: How can I use a color variable in the styles.css file of an activity
With this...
background-color: [[setting:keyboardbcg]];
but you will need to ADD something like this in the lib.php for the activity >>>
function activity_mootyper_set_keyboardbgc($css, $keyboardbgc) {
$tag = 'setting:keyboardbgc';
$replacement = $keyboardbgc;
if (is_null($replacement)) {
$replacement = '#DDDDDD';
}
$css = str_replace($tag, $replacement, $css);
return $css;
}
Hope this helps?
Mary
Re: How can I use a color variable in the styles.css file of an activity
Hi Mary,
Thanks for the response and attempt to help. Yes, I took over responsibility for the MooTyper activity back in March, as it had not been updated in quite a while. Plus, I used it in my classes a lot as a time filler for the speedy kids and those times when you needed an alternative activity, right now!
I do have the function you mention with some small differences. I was more or less copying the demystified theme tutorial for changing background color of the theme, but adapting it for this activity. Another difference is I put it in locallib.php. Does it have to be in lib.php?
Over all the days I've played with this, I've tried a bunch of variations for this function, but I don't think I ever tried it in lib.php or used the word 'activity' as part of the function name. I'll try that now.
EDIT: Forgot to mention that whenever I call the function, I always seem to get Notice: Undefined variable: css in ....
Re: How can I use a color variable in the styles.css file of an activity
Hi,
The reason I said use activity_mootyper is because we use theme_clean in the Clean theme.
However if you look at the Glossary mod the method is to use just the NewModule name.
Also the lib.php is used in the Glossary but also called into the settings page which it isn't in themes.
I'm not that familiar with Mod Plugins when it comes to CSS variables, however there must be a way to make the setting work in the stylesheet like it does in theme. Perhaps youo also need to add the CSS post process setting into MooTyper/config.php
$THEME->csspostprocess = 'mootyper_process_css';
and add this function:
function mootyper_process_css($css, $mootyper) {
// Set the background color for keyboard.
if (!empty($mootyper->settings->keyboardbgc)) {
$keyboardbgc = $mootyper->settings->keyboardbgc;
} else {
$keyboardbgc = '#DDDDDD';
}
$css = mootyper_set_keyboardbgc($css, $mootyper);
return $css;
This is just guess work...
The best thing to do is see if another activity plugin has managed to add CSS in a setting?
Mary
Re: How can I use a color variable in the styles.css file of an activity
Further to my last comment:
Try this for the first function I added earlier...
function mootyper_set_keyboardbgc($css, $keyboardbgc) {
$tag = 'setting:keyboardbgc';
$replacement = $keyboardbgc;
if (is_null($replacement)) {
$replacement = '#DDDDDD';
}
$css = str_replace($tag, $replacement, $css);
return $css;
}
Re: How can I use a color variable in the styles.css file of an activity
Hi Mary,
Thanks again for the help. Since my last post, I've managed to hurt my hands servicing my riding mower, and aggravate the arthritis I'm getting in my right hand, so I'll work on this tomorrow.
Over the past few days I've looked through all the activities and blocks I have installed in my dev site (a bunch) and I have not found anything but themes doing what I'm trying to do with variables like this.
background-color: [[setting:keyboardbcg]];The only thing close that I've found is the Progress Bar block. I think I can do it the way it's done there, but then that will affect all the old keyboard layouts, as well as any that a user may have created on their own. I don't want to do that, so I'll keep trying some more.
I really think I have had workable code on more than one occasion, but it fails due to the debug notices I keep getting: Notice: Undefined variable: css in /var/www/moodlexx/moodle/mod/mootyper/view.php on line 106
Call Stack:
0.0024 237408 1. {main}() /var/www/moodlexx/moodle/mod/mootyper/view.php:0
Re: How can I use a color variable in the styles.css file of an activity
I am just wondering if you need to use...
function mod_mootyper
where I would write
function theme_clean
just a thought?
Mary
Re: How can I use a color variable in the styles.css file of an activity
I've tried 'function mod_mootyper' and the result was no different. Still get the notice:
Notice: Undefined variable: css in /var/www/moodlexx/moodle/mod/mootyper/view.php on line 106 Call Stack: 0.0001 235288 1. {main}() /var/www/moodlexx/moodle/mod/mootyper/view.php:0
I can use the following to get all the theme settings:
$themename = $CFG->theme;
$theme = theme_config::load($themename);
And I can use this to get the css used on the the page from the theme settings:
$css = $PAGE->theme->settings;
The problem is that the results of using $css = $PAGE->theme->settings; does not include the css picked up from processing the info in the mootyper styles.css file when I go to the activity view created by view.php.
So far as I know, one of the '$PAGE->...' lines in view.php causes the styles.css file to be used. I know this happens as I can makes manual changes in styles.css, reload the view page and see the changes. But, I don't know which '$PAGE->...' and don't know how to access the css settings that become active to make the setting change for the keyboardbgc variable.
Reading through some more of the Development documentation I see that an entry:
- requires
- Gets the page requirements manager that handles any JavaScript and special CSS requirements for the page.
$var = $PAGE->requires;I think this will probably be what I need, however, I have not been able to find any examples of how it's used. I guess I'll start playing with it and see what I get.
Re: How can I use a color variable in the styles.css file of an activity
Hi,
It is possible to create CSS using PHP and link to the php CSS file in the head of the page,
I'll find the tutorial as it may well solve this problem.
BRB
Mary
Re: How can I use a color variable in the styles.css file of an activity
https://davidwalsh.name/css-variables-php-dynamic
Its an interesting tutorial...I made a rainbow coloured page once.
Mary
Re: How can I use a color variable in the styles.css file of an activity
Thanks for the link, Mary. Looks promising. I'll let you know if I can use it to get things working.
I just hope that light I see at the end of the tunnel is a firefly and not the train.
Re: How can I use a color variable in the styles.css file of an activity
Re: How can I use a color variable in the styles.css file of an activity
I don't think plugins can tap into '$THEME->csspostprocess' where the name of the function is supplied to undertake setting CSS changes in the CSS by the theme. Therefore the only way I've managed this in the past was to make use of inline styles for the settings which pertain specifically to the plugin HTML output - see Collapsed Topics.
Re: How can I use a color variable in the styles.css file of an activity
Inline styles is also how Michael de Raadt has done it in the completion progress block plugin he released recently
Re: How can I use a color variable in the styles.css file of an activity
Well, it wasn't an express, just a long, slow freight train. Kept running into various problems.
Now on to Gareth's and Richards inline suggestion. I was already looking at the completion progress block and the progress bar block as they are the only things I have found so far that weren't themes and were setting colors.
Re: How can I use a color variable in the styles.css file of an activity
Well, I guess I cheated by using two css files, and have it working with just five lines of new code. One css file is a master template, and the other, is the actual styles.css file that gets used anytime someone views a MooTyper activity.
Don't know if the way I did it is quite kosher, though. What do ya'll think? I added code at the bottom of the settings.php file. I also had to rewrite the color picker so it includes 'theme_reset_all_caches' so everyone can see the change without admin having to purge all caches.
$old = 'setting:keyboardbgc';
$new = get_config('mod_mootyper', 'keyboardbgc');
$data = file_get_contents($CFG->dirroot.'/mod/mootyper/template.css');
$newdata = str_replace($old, $new, $data);
file_put_contents($CFG->dirroot.'/mod/mootyper/styles.css', $newdata);
I checked some page load times, with the and without the code enabled and don't see any significant time change, either way. Doesn't really matter I would think, as this is a setting that will rarely be used.
Should make it really easy to add a color picker for the non-home row keys too.