Hi I'm hoping Mary or someone else can enlighten me after 20 years of being an admin on an easier way than what I've been doing. I just updated to moodle 3.7. In 3.4 I used boost and made about 10 child themes of boost each in a different color and now in 3.7 none of them work of course so I have to repeat the process in notepad searching for all occurrences of the theme name Etc and making those changes again which I can easily do but I'm thinking there must be an easier way for my teachers to be able to have a different color background to their course without me having to make these child themes every single time Moodle updates. please enlighten me as there must be an easier way to have consistency in all courses (ie same theme) but different colors. Ive tried uploading different themes in the past which is quick but then they are not consistent for users and its easier to work with one theme for me as if there is an issue I know it will affect all my child color themes in the same way. Thank you
The reason they are not working is the significant changes in Boost between Moodle3.4 and 3.7 - but you probably already realised that
There is another way to do this:
in the body classes (certainly if you enable use course themes, I can't remember if its there anyway), you will see a class for the course id, eg (from one of my development sites).
<body id="page-course-view-topcoll" class="format-topcoll path-course path-course-view gecko dir-ltr
lang-en yui-skin-sam yui3-skin-sam moodle-dev-glos-ac-uk--moodledev pagelayout-course course-24639 context-644294
category-6352 category-6295 category-6266 category-6265 Jul24 showforsemester drawer-open-left">You can use that course id class to target specific css in either a custom scss file, or in one of the Boost CSS/SCSS settings.
Thanks Richard. I wondered if css could do it. Ive only pasted other peoples css like Marys but never been able to understand how to write it.
Can you show me an example of how I could do blue green pink tan Etc four different courses and let the teacher choose from a drop-down thank you
I'm thinking there must be an easier way for my teachers to just change only the background color of boost by Moodle 3.7 than either using css or me cteating child themes.
I am hoping ive been missing somethig simple in administration I can select to allow teachers to say have blue boost for one course but geen boost for another course and tan for another etc. Ive read the cdocumentation and searched forums for years but I dont yet srr an easier way. Thanks for anyone's insight
One way to do this would be to make use of the new custom course settings in 3.7 https://docs.moodle.org/37/en/Course_settings#Course_custom_fields
Create a custom course setting that teachers can use to select a colour scheme, then in your layout file use a conditional statement to detect that custom field and apply a body class based on it.
Below is an example from when I was first experimenting on this approach when I first saw these custom course fields - there may be better ways to access the setting and more than happy for someone to point that out if there are!
$extraclasses = [];
// Experimental course field settings.
// -----------------------------------
if ($DB->record_exists('customfield_field', array('shortname' => 'darkheading'))) {
$cff = $DB->get_record('customfield_field', array('shortname' => 'darkheading'));
if ($DB->record_exists('customfield_data', array('fieldid' => $cff->id, 'instanceid' => $COURSE->id))) {
$drkhd = $DB->get_record('customfield_data', array('fieldid' => $cff->id, 'instanceid' => $COURSE->id));
if ($drkhd->value ==1) {
$extraclasses[] = 'darkheading';
}
}
}
$bodyattributes = $OUTPUT->body_attributes($extraclasses);
Then your scss can target that new body class to set the details of your look and feel for that option.
Richard
Thanks Richard that's acool new feature. I read the documentation 2x and am confused where to paste your code. See screenshot. I tried course custom field then added a droodown box but where do I post your code and then how can I make some basic background color choices?Thank you SO much for helping show this great solution.
OK, firstly as this goes beyond simply adding css to a setting block this
should really be done in either a clone or child theme of Boost as anything you do in Boost itself will get overwritten on any future upgrade.
In your theme, copy the layout file column2.php and rename as courses.php, then adjust the theme config.php
to point to that layout file for course and incourse page types and add code as in Waxed example https://gitlab.com/ro-mdl-themes/moodle-theme_waxed/blob/master/layout/courses.php#L40-48
You then need to add whatever styles you want to your scss preset, something like
body.colsch_2{background-color:rgba(0,0,33,0.8);}
.colsch_2 #region-main{font-weight:700;color:rgb(0,0,33);}
body.colsch_3{background-color:rgba(0,33,0,0.8);}
.colsch_3 #region-main{font-weight:700;color:rgb(0,33,0);}
//These are not intended to be genuine colours/design choices, just examples of the selectors!
Alternatively, you could download and use Waxed (from git - I haven't yet pushed this addition to the themes database). Waxed is a fairly basic child of Boost that I created with the intention of adding simple additional features like this, rather than adding multiple big features the way some of the more powerful themes do
Or you could just take a look at how I've added it there to add to your own theme
https://gitlab.com/ro-mdl-themes/moodle-theme_waxed/commit/428fce37839d620f62e168197adbd791eb936c61
Note: Waxed does not yet have any styles added to its presets, it only has this layout code added to add the relevant body class and associated changes to config.php.
Hope that helps.
Edit - correction to css: the code outputs the value as the number of the option in the dropdown, not the text, so either you can use the value as I have above, or you can adapt the code to grab something more readable along the lines of
(pseudo code)
if value=1 then class='colsch_blue'
if value=2 then class='colsch_green'
May I ask if you have a child theme of Boost or in fact Adaptable given the screen shot?
G
Hi Gareth you are correct this is adaptable because this is my new install moodle 3.7 my previous install of 3.4 had child themes of boost and also used your main theme of essential which sadly is not continuing and I understand why I appreciate your past service to that theme which I used for many years. I can create child themes again and Richard is giving me a way to do it easier than the way I did in the past but it's going to take me a while to wrap my head around all this css code. I'm surprised after so many years there's not an easier way in Moodle to just have some basic color schemes without having to install new themes or create child athemes or use CSS code. Thanks
You could, if you prefer, ask someone to create the preset for you (providing a pdf/screenshot and description) if you're not comfortable with the css.
Hmmm - having put the layout code in, going to have a think about the preset side of it. But this may take a few weeks Jamie as I'm on the final countdown to annual updates of my work Moodle and Mahara sites over the next couple of weeks.
The primary issue with different colour schemes for different courses, or users/etc within a single theme has always been the fact that the css generated in Moodle is cached, so you have to have it all there in the css and then use classes to apply it. You can't apply, say preset1 to courseA and preset2 to courseB.
Thanks Richard I will try it with waxed then if I fail 3 weeks is nothing compared to the last 15 years of struggling to best serve my users. Thanks
The layout code should be there (github only at the moment)
So add a dropdown course setting - Personally I'd go None, blue, green, tan, pink - following your earlier examples of what you want - and make the default setting 'none'.
Then in the RawSCSS setting box at the bottom of the page, try something like:
.colsch_2 #page, .colsch_2 #region-main {background-color: #78CBFC;}
.colsch_3 #page, .colsch_3 #region-main {background-color: #AAFDBC;}
.colsch_4 #page, .colsch_4 #region-main {background-color: #FFCD7F;}
.colsch_4 #page, .colsch_4 #region-main {background-color: #FF8E9E;}Once you can see that working, it really is just a case of the design and the colours you want. Use Firefox or Chrome Inspect Element tools to find the appropriate selector to apply your css to - You can even test it in FF/Chrome developer tools then copy to Waxed>RawSCSS.
Only when you have everything set as you want it, copy it to a preset - or leave it in the RawSCSSS setting if you prefer. It's easier to edit in the setting
.greyscale {filter: grayscale(90%);}
.invertedgreyscale {filter: grayscale(100%) invert(100%);}
.bonw {filter: grayscale(100%) brightness(80%) contrast(200%);}
.invertedbonw {filter: grayscale(100%) brightness(80%) contrast(200%) invert(100%);}R
Hi Richard,My understanding at this point is there are 3 steps.
1. layout code - already provided by you from your github repo which is what I used so I assume that step is done
2. custom drop down course setting. I created this with 3 colors so far but HOW does it connect blue or green to the scss code. I am missing where this if - then statement goes.
3. add in the Raw SCSS code ( in Colours tab at bottom. what's the Raw Initial SCSS code for?)
I included screenshots of what I did and I see the teacher can click other and see my color choices I just don't get how it connects to your SCSS code.
Thanks!
The conditional is already in the courses.php layout file - I need to adjust the comment in it as it doesn't add colsch_blue, colsch_green, but the colsch_1, colsch_2 etc.
https://gitlab.com/ro-mdl-themes/moodle-theme_waxed/blob/master/layout/courses.php#L41-49
They come from the dropdown and are recorded as numeric values rather than the text value of the dropdown, so in your example Blue would be colsch_1, Green would be colsch_2 and Tan would be colsch_3.
I added a None as the default option in my original example, as although you could leave it unset, I wanted to have a way of removing any previously set colour option too, so selecting None in my example would give a body class that has no additional styles associated with it.
The only reason to adjust the conditional I've included in courses.php would be if you wanted to make those classes more readable
If value=1 add class colsch_blue, if value=2 add colsch_green, etc.
Oh - and there should only have been one colsch_4 line in my example scss! Oops
if ($DB->record_exists('customfield_data', array('fieldid' => $cff->id, 'instanceid' => $COURSE->id))) {
$colsch = $DB->get_record('customfield_data', array('fieldid' => $cff->id, 'instanceid' => $COURSE->id));
and added up to .colsch_9 : is there any limit to the number I can add or does the code assume 3 choices?
None -> colsch_1
Blue -> colsch_2
Green -> colsch_3
Tan -> colsch_4
Pink -> colsch_5
If you're happy using those numbers instead of colsch_blue, colsch_green, etc, then you don't need to add any additional code to what is already in waxed. Personally, I would stick with the numbers - it leaves the code more flexible if you want to add more options later on (or remove them). You could always add a comment line in your css identifying number->colour, for readablity.
You don't need to add any css for colsch_1 (None), it is literally there to allow a reset to normal, with no additional css being applied, because none of the other colour classes will then be present.
You can use whatever colour values suit your design - the ones I used are no more than examples and essentially chosen at random for that purpose
I put None Blue Green Tan Pink into my Course Custom Field list and selected that teachers can see this. I purged theme cache, then selected each color in turn blue green tan and in each case even after clearing theme cache I still see the same white background. I chose waxed as the appearance and in "other" I chose the various colors I added in the drop down list. What am I missing here? Thanks
https://gitlab.com/ro-mdl-themes/moodle-theme_waxed/-/branches
Should I download the courses.php file from the link below and put it into that path location?
https://gitlab.com/ro-mdl-themes/moodle-theme_waxed/blob/master/layout/courses.php#L41-49
then I added the case statements you suggested. here is a screenshot. It's not working yet but how would it know what colsch_blue is? where is that located. The RAw SCSS code iin my waxed theme location RAw SCSS online is Colsch_2 so should I rename it to colsch_blue?
.colsch_2 #page, .colsch_2 #region-main {background-color: #78CBFC;}
In your theme, copy the layout file column2.php and rename as courses.php, then adjust the theme config.php to point to that layout file for course and incourse page types and add code as in Waxed
which line of code at config.php do I edit and how do I make it "point" to the layout files (courses.php)
where in courses pages do I type and add code (did you mean online in the theme waxed in the RAW SCSS, if so I did that step arlready)
Thanks!
I'm sorry, I'm now lost as to what you are doing.
Waxed is complete as it is, other than the css you want to apply and the course setting dropdown.
1. Download Waxed from github as it is and install it - no changes. Make sure Waxed is your selected theme.
2. Create a custom field in your course settings, as a dropdown, with the values None, Blue, Green, Tan, Pink
3. Add the scss to the Raw scss setting in Waxed
.colsch_2 #page, .colsch_2 #region-main {background-color: #78CBFC;}
.colsch_3 #page, .colsch_3 #region-main {background-color: #AAFDBC;}
.colsch_4 #page, .colsch_4 #region-main {background-color: #FFCD7F;}
.colsch_5 #page, .colsch_5 #region-main {background-color: [ADD A COLOUR HERE];}Make sure that is working, before you consider whether you want to add the additional code to change the numeric values to text in the css (eg colsch_blue). The additional code (the switch/case) is not necessary, it only makes the css a bit more readable, but if you are fine with the 1,2,3 then don't bother with it. It is entirely optional.
Thanks Richard,I had adaptable as my main theme for Moodle and Waxed as the chosen theme for the course. I now removed the course.php I had added to layout. But still when I choose a color from the dropdown it does not change. Am I creating the list of colors in the dropdown in the right place?
Thanks
No, they're separate.
The only other thing I can think of is what have you called the dropdown in the course settings? It needs to match what is in the Waxed code ie must have a shortname 'colourscheme' - and I just had a thought that maybe you may not have spotted my UK spelling of 'colour'.
if ($DB->record_exists('customfield_field', array('shortname' => 'colourscheme'))) {I uninstalled waxed and re-installed it from the git repository here. I added colourscheme as the shortname of the custom course drop down field. Still I'm failing somehow.
if ($DB->record_exists('customfield_field', array('shortname' => 'colourscheme')))
3. could adaptable still be interfering or perhaps some old themes I uninstalled - references may still be there in my database. Could those affect it?
Thanks Richard, I'm sure I'm doing something stupid on my end I just can't figure out what it is yet.
Course custom field: *important settings
Name - Colour Scheme
Shortname - colourscheme *
Description - Select optional tweaks to the theme scheme for this specific course.
Required - No *
Unique - No * (From what you've said above, you may have this set to Yes ?)
Menu options (one per line) * -
none
blue
green
pink
tan
Default value - None *
Locked - No *
Visible to - Everyone
No, this code would not be affected by any other theme
AH! - You're using the stable branch! Please use the Master branch for this. As its development for you, its not in the STABLE branch as yet. That's the problem, you don't actually have the code I've been assuming you've got
Thank you so much, I'm so very very very sorry to ask you SO many questions - I wish I saw that earlier - such an easy fix!
For anyone following this thread, use the master branch of waxed
, not 3.7 stable.Thanks Richard I will try it with waxed then if I fail 3 weeks is nothing compared to the last 15 years of struggling to best serve my users. Thanks
Jamie
Validating theme_waxed ... Error
[Error] Extracted file not found [{"file":"waxed\/classes\/output\/core\/"}]
Installation aborted due to validation failure
I don't have adaptable installed on my dev laptop, and its strange that from what you've put, both Boost and Waxed appear as Adaptable...
There's no Adaptable code in Waxed, and definitely no language strings to suggest this issue.