Just a heads up that I have just finished off another Moodle 2.0 theme document.
Themes 2.0 adding a settings page
This document is a step by step tutorial that guides you through the process of adding a settings page to a theme and how to use the settings you create with your theme's CSS and layout files.
These settings allow you to create a completely customisable theme where the administrator of the site can easily change the settings you have created.
To this post I have also attached the demystified theme that I create throughout the tutorial.
I should warn everyone this is a pretty technical document but hopefully as you will see the pay-off for working through it is a truly customisable theme.
I would also love to know what those who follow through this tutorial think of it, and what they manage to achieve.
Let me know if you have any question, I am more than happy to help out where I can.
Cheers
Sam
p.s. My apologies about any spelling or grammar mistakes. Any help fixing them up is greatly appreciated.
Many thanks for all your hard work with Moodle Docs.
Mary
Mary
This is an Excellent Tutorial, I've learnt a lot about Moodle 2.0 as well as learn how to enhance and customise a theme.
Thank you Sam!
Mary
I was a little worried that it would be skipped over as too technical!
You'll have to let me know if you end up doing anything fantastic with it. I am really looking forward to seeing what comes from it as there is a HUGE amount of possibility.
Cheers
Sam
If I get stuck (and that's a certainty!) I'll be back!
Mary
Αυτή η ανάρτηση στο φόρουμ έχει καταργηθεί
Re: Theme 2.0: Adding a settings page to your theme
I think it would make perfect sense, I like asymmetrical symmetry.
Αυτή η ανάρτηση στο φόρουμ έχει καταργηθεί
Re: Theme 2.0: Adding a settings page to your theme
Re: Theme 2.0: Adding a settings page to your theme
Thank you for the CSS snippet, I have added it to the tutorial.
In regards to the asymmetrical layout... absolutely, go for it.
What I achieved within the demystified theme was simply the first five things that popped into my head and none of them were overly complex ideas. Essentially all I did was throw a pebble into the lake of possibility. What you are thinking about is certainly achievable really the only question will be how you decide to go about it post any questions you have if you get stuck and I'll be more than happy to help.
Cheers
Sam
Αυτή η ανάρτηση στο φόρουμ έχει καταργηθεί
Re: Theme 2.0: Adding a settings page to your theme
Thank you for adding such a mind blowing (in a good way ) and informative tutorial. A question though, can you have a combo box as a setting which allows the user to pic a predefined colour scheme - i.e. the combo box value would represent a defined css file containing the varient css definitions for the predefined scheme?
And! Can you use the settings page functionality to a course format? As you hint about 'other plugin types'?
Thanks,
Gareth
Sorry for the long reply wait. Thanks - I think I have enough info to tackle the issue.
Cheers,
Gareth
Thank you for reminding me of that, I will add it to the tutorial right now
Cheers
Sam
As for your latest proposal to add a new tutorial or build on this existing tutorial:
(Raise it in the forums if you would like it.)..."
I for one would be very interested to learn more about alternative areas which might be useful for administrators to change settings. Thanks again...especially for adding that note about language strings!
Cheers...
Mary
Αυτή η ανάρτηση στο φόρουμ έχει καταργηθεί
Re: Theme 2.0: Adding a settings page to your theme
Congratulations on getting it all up and running!
I've just had a look at the back end code and it all looks good
Cheers
Sam
Αυτή η ανάρτηση στο φόρουμ έχει καταργηθεί
Petr brought to my attention that admin_externalpages were only left in Moodle 2.0 for backwards compatability and shouldn't really be used which unfortunately bumps it way down my list of priorities. It doesnt look like I will be writing that doc any time soon sorry.
On the upside that plus the fantastic effort everyone is putting in on settings pages has prompted me towards putting in a bit of effort on developing brand new setting types such as the colour picker!
Cheer
Sam
I'm having a problem with adding customised Language files on a new Moodle 2.0. theme I've created. I managed to get them to work on my Moodle 1.9.8 site, but can't seem to get to work on Moodle 2.0.
In Moodle 1.9.8 I used <?php get_string('translateword','phpfilename'); ?> at the point in my header.html where the word occured in a menu.
I then placed a copy of the php file (declared in the get_string) where all the strings where written with appropriate translations into en_utf8_local (English) which was inside the lang folder in Moodledate directory. I then went on to add the same to other language files, with each one changed to reflect the particular language into their respective lang folders: it_utf8_local (Italian) and fr_utf8_local (French). This works really well, however, if I try to do the same in Moodle 2.0 I get the menu titles I want to translate enclosed in 2 sets of square brackets. This is how they looked in Moodle 1.9.8 until I figured out which Moodledata folder the php file went into. So I am not left wondering have I put my php file in the wrong area of Moodledata for my Moodle 2 theme's menu to work?
Currently they are sat in the same folders as described above for Moodle 1.9.8 but in the Moodledate directory of Moodle 2.0 version on my local server.
Here's hoping you might be able to advise me where I've gone wrong.
Thanks
Mary
Now in Moodle 2.0 you can put your language strings for a theme within the theme itself. Within your theme's directory create a new directory /lang/ and within that create a directory for each language you want to add strings for e.g. /lang/en/ for English, /lang/fr/ for French.
You'll notice we no longer use the _utf8 or _utf8_local when doing it like this. This is the same for all plugins within Moodle 2.0.
Once you have moved your language strings into your themes lang directory you can then use them in PHP code (layout files etc.) with the following:
<?php echo get_string('stringtoget','theme_themename'); ?>
What to note about this is:
- stringtoget is the string you want to print, this is what ever you put into your language file. e.g. $string['stringname'] = 'blah'
- themename is what ever you used for your theme. e.g. theme_demystified
/theme/marystheme/lang/en/marystheme.php
Containing
$string['authorname'] = 'Mary Evans';
Which can be used like:
<h1>Author: <?php echo get_string('authorname', 'marystheme'); ?></h1>
The following section has a bit more information if your interested: Creating_a_language_file_and_adding_our_strings
In regards to putting the languages in the moodledata/lang directory I'm not too sure what Moodle is doing presently in regards to that however I would have thought it still worked to ensure backwards compatibility. I'm at home presently and don't have access to an install to inspect. Let me know if you manage to solve it otherwise I'll check it out when I get into work tomorrow morning
Hope this all helps
Cheers
Sam
Thanks for this I'll go try it out.
Mary
Just a heads up: I've just added to Moodle a colour picker setting that can be used within a settings page... and just in time for Patrick's theme competition that I know has all of you excited
I'm updating the tutorial presently with instructions on how to use it so keep your eyes out .
http://docs.moodle.org/en/Development:Themes_2.0_adding_a_settings_page#Colour_picker
Keep up the great effort everyone!
Cheers
Sam
Seeing this screen shot of your Colour Picker brought to mind the immortal words of the astronauts who first landed on the Moon...but slightly changed to capture the moment...
Thank you! Thank you! Thank you!
Mary
Re: Theme 2.0: Adding a settings page to your theme - with tiny colour picker
Hi Sam,
colour picker is a really cool tool.
I was testing today a smaller modification of your script and did not change anything in adminlib.php but added a modified javascript colorpicker.js with your function M.util.init_colour_picker to theme javascript folder with
width : 60,
height : 20,
factor : 25,
and
this.image.setAttribute('src', M.util.image_url('i/colourpicker2', 'moodle'));
Then I created that smaller image (60x20px) colorpicker2.png for color selection and added to theme css file
.admin_colourpicker,
.admin_colourpicker_preview {display:none;}
.jsenabled .admin_colourpicker_preview {display:inline;margin-left:10px;}
.jsenabled .admin_colourpicker {display:inline;height:21px;width:82px;margin-bottom:1px;}
.admin_colourpicker .loadingicon {vertical-align:center;margin-left:auto;}
.admin_colourpicker .colourdialogue {float:left;border:1px solid #000;}
.admin_colourpicker .previewcolour {border:1px solid #000;margin-left:61px;}
.admin_colourpicker .currentcolour {border:1px solid #000;margin-left:61px;border-top-width:0;}
.admin_colourpicker{float:left}
.form-colourpicker input{float:left;height:20px;}
.form-defaultinfo{visibility:hidden;clear:both;}
And the result took about 1/4 of the space... + each theme can have customized color picker
Re: Theme 2.0: Adding a settings page to your theme - with tiny colour picker
Attached that javascript and I forgot to mention that theme config.php has of course a line
$THEME->javascripts = array('colorpicker');
(for those new themers who have not used custom javascripts)
Re: Theme 2.0: Adding a settings page to your theme - with tiny colour picker
Have to say, it is AWESOME! I'm loving it for two reasons.
First the idea, I imagine there will be alot of people who would prefer a smaller colour picker, the one I made is pretty big and whilst it makes it easier to pick more precisely it's not at all practical for a theme that makes use of more than a couple of colours, your smaller colour picker will be brilliant there!
Second that you did it in the theme! It is certainly one of the high points of writing modular JavaScript, there is a LOT of JS now within Moodle, and I am sure there will be of it that people want to change.
Congratulations and thank you for sharing it here... I am sure a lot of people will be keen to make use of it.
Cheers
Sam
Re: Theme 2.0: Adding a settings page to your theme - with tiny colour picker
Just noticed that colour picker does not support one important property - transparency.
Should you add to lib/adminlib.php (in class admin_setting_configcolourpicker)
protected function validate($data) {
if (preg_match('/^#?([a-fA-F0-9]{3}){1,2}$/', $data)) {
if (strpos($data, '#')!==0) {
$data = '#'.$data;
}
return $data;
} else if (preg_match('/^[a-zA-Z]{3, 25}$/', $data)) {
return $data;
} else if ($data=='transparent') {
return $data;
} else if (empty($data)) {
return $this->defaultsetting;
} else {
return false;
}
}
If theme designers write to settings input box
transparent
color picker will accept also transparent color then - or should there be a separate tiny button for transparent selection?
Re: Theme 2.0: Adding a settings page to your theme
I had a bad week so I didn't find the time to read your post before.
But now... W O W
Congratulation. As always, your answers are ten times deeper than the the questions they reply to!
Thanks, thanks a lot.
Sam, may I ask why didn'y you use the file picker of moodle to allow the selection of the logo?
Re: Theme 2.0: Adding a settings page to your theme
Currently there is not an admin setting that can handle file uploads or make use of the file picker.
This was in fact one reason I was originally hoping to write a bit on using admin_externalpages as file uploads could be easily handled through an externalpage however that has faded.
Presently I am hoping that in the near future I will find a quite minute to create a new admin setting to do it however until then its not easily achievable (certainly not impossible but a fair bit of PHP I would imagine.)
Cheers
Sam
Αυτή η ανάρτηση στο φόρουμ έχει καταργηθεί
Re: Theme 2.0: Adding a settings page to your theme
Probably the best bet is to turn on debugging, which should hopefully give you an error rather than just a blank page.
If you log into a site as an admin and do the following:
- Browse to Site Administration > Development > Debugging
- Set Debug message to Developer: ....
- On the same page turn on Display debug messages
- Browse to your theme setting page
If this doesn't work or if you need a hand deciphering the message let me know.
Cheers
Sam
P.S I will add this to the tips at the bottom of the tutorial when I get a minute
Αυτή η ανάρτηση στο φόρουμ έχει καταργηθεί
Re: Theme 2.0: Adding a settings page to your theme
It looks like this is because you don't have the lastest copy of HEAD. I should have pointed out that as I have only just created the colour picker it won't be available within the downloaded packages until PR4 is released now.
Alternatively if you are using CVS then cvs updating will get you the latest changes including the colour picker.
Or if thats not an option (or not how you work) but you would still like to give it a shot before PR4 is released then you can copy the colour picker code from lib/adminlib.php:
http://cvs.moodle.org/moodle/lib/adminlib.php?revision=1.470&view=markup
The link above is the version of the file when I added the colour picker, you would need to copy the admin_setting_configcolourpicker class that is at the very bottom of the file and put it in you moodle/lib/adminlib.php file right at the bottom.
All this should do is make the colour picker available, it shouldn't cause any problem however to be on the safe side make sure you take a backup before you do it.
Cheers
Sam
Αυτή η ανάρτηση στο φόρουμ έχει καταργηθεί
Re: Theme 2.0: Adding a settings page to your theme
Cheers
Sam
Re: Theme 2.0: Adding a settings page to your theme
I have a help request and a question on the same topic.
- Help request -
I used your color picker in the setting page of my trial theme. I find it really fine.
Then I went to a new installation of Moodle2 and I added my trial theme.
At the Moodle theme installation time the "new settings found" page was shown.
I just pushed the "ok" button accepting defaults but... moodle stopped me saying that a blank colour was not allowed. This happened even if the default was defined and the setting page was declaring it.
What am I missing?
The code in the setting page is:
// Block background colour setting
$name = 'theme_kordan/backgroundcolor';
$title = get_string('backgroundcolor','theme_kordan');
$description = get_string('backgroundcolordesc','theme_kordan');
$default = '#F7F6F1';
$previewconfig = array('selector'=>'.block .content', 'style'=>'backgroundColor');
$setting = new admin_setting_configcolourpicker($name, $title, $description, $default, $previewconfig);
$temp->add($setting);
- question -
How am I supposed to fill the $previewconfig array if I have to apply the background to more than one selector?
In the following way
$previewconfig = array();
$previewconfig[] = array('selector'=>'.block .content', 'style'=>'backgroundColor');
$previewconfig[] = array('selector'=>'.contentbox', 'style'=>'backgroundColor');
or in a different way?
As always, thanks in advance.
Ciao.
Re: Theme 2.0: Adding a settings page to your theme
The first thing you noticed is in fact a bug, the bug being that you can't currently leave it blank. I have just commit a fix for that bug as well as a bug that occurred if you don't set a valid colour.
As for the multiple selectors wasn't currently possible however I have just added support for multiple selectors now
$previewconfig = array(
'selector' => array('.block content', '.contentbox'),
'style' => 'backgroundColor'
)
Unfortunately you won't see these changes immediately unless your are using CVS.
The changes are VERY simple you can have a look at them here and copy them if you want:
Fixing the two bugs:
http://cvs.moodle.org/moodle/lib/adminlib.php?r1=1.475&r2=1.476
Adding multiple selector support:
http://cvs.moodle.org/moodle/lib/javascript-static.js?r1=1.157&r2=1.158
Cheers
Sam
Re: Theme 2.0: Adding a settings page to your theme
What am I supposed to do in order to remove a theme?
By simply dragging the 'kordan' theme folder out from the 'theme' one, I do not dispose of the theme kordan setting page.
What am I supposed to do?
Thanks in advance.
Re: Theme 2.0: Adding a settings page to your theme
I just tried this out by moving one of my theme's with a settings page out of the theme directory and once I refreshed the page my theme's settings page was no longer shown in the setting block.
The settings will of course still exist in the database but will not cause any harm there.
Can you double check that you have removed the theme and not just copied it, and that when you refresh it is still shown in the settings block.
Cheers
Sam
Any tips on swapping out background images? I can get colors, widths, etc., working via your excellent tutorial, but I cannot get images set via css to work. Any ideas?
I meant using the css post-process function (and settings page) to change background images (by admin users).
I got it to work, but I do not think it is the best way, the function (in the theme's lib.php) looks something like:
function themename_set_backgroundlogo($css, $backgroundlogo) {
$tag = 'setting:backgroundlogo';
$replacement = $backgroundlogo;
if (is_null($replacement)) {
$replacement = 'image.php?theme=themename&image=logo&component=theme';
}
$css = str_replace($tag, $replacement, $css);
return $css;
}
and then the CSS looks like:
background:url(setting:backgroundlogo) no-repeat;
I've really want to get a reply to you for this but only have a minute left before I shoot off so this is from memory, I'll review it when I am back in the office in a couple of hours encase I got something wrong.
function themename_set_backgroundlogo($css, $logo) { global $OUTPUT; $tag = 'setting:logo' $replacement = $logo; if (is_null($replacement)) { $replacement = $OUTPUT->pix_url('defaultlogo', 'theme'); } $css = str_replace($tag, $replacement, $css); return $css; }
In the above code I have used $OUTPUT->pix_url to get the URL for the an image defaultlogo.*** that will be located within the theme/themename/pix/ directory.
Hope this helps
Cheers
Sam
The guide is both detailed and informative and contains lots of really useful tips.
It appears that the theme settings are only available to an admin and as a result the changes affect the whole site. For me it would be useful if there were a way to change theme settings per course/category.
I would like for the lecturers to be able to change some settings (within reason ) for a particular course e.g Unit One has a red heading background, Unit Two is blue.
Is this currently possible?
If I had more coding skills I'd have a go at doing it, but I don't - so I can't!
The short answer is no, currently it is not possible to the best of my knowledge, reason being that the settings exist in one state only and what you are asking would require the setting to exist for each category/course.
The long answer is yes, as Mary pointed out anything is possible if your PHP skills are up to scratch, you'd just need to analyse the possible solutions to find that one that best meets your needs and looks like the path of least resistance and change.
At a glance I would suggest looking to create a custom course format (starting by copying topic or week depending upon what you want to use), add a settings page to custom format, and then finally write a PHP script to look for your format settings, turn them into CSS and serve with a unique URL....
As I'm not sure whether you'd be keen to go down that path I'll leave it there, however IF you do decide you'd like to pursue that and would like a hand ask in the forums here.
As Mary correctly noted again (Mary you're onto it!), we're flat tack at the moment finishing Moodle 2.0 for release later this month so you may not get a reply from me until after then :P
Cheers and hope this helps
Sam
Thanks for the response. It looks as though this would not be possible to do because of the way Moodle now merges multiple CSS to create fewer includes, as each course would have there own specific "merged" style sheets. This is not a complaint as the way the Moodle now handles themes is superb. To get a course by course CSS solution would require using the standard Moodle stuff + extra style sheets for that course.
The (simple?) work around that I am looking at (not yet attempted!) is adding a call to a style sheet in the course layout page (general.php) that would attempt to load a stylesheet with the course id as a name e.g. 3.css .
I assume this would need to go after the $OUTPUT->standard_head_html()
So for each course Moodle would load the "merged" 'site' css plus a course specific css that would overide some of those settings. Although this would not have a nice interface to manage it, it would allow the admin to override on a course by course basis.
MatC
It's awesome that you are giving a shot, in regards to the CSS coming after the standard_head_html call you are correct, if you write a style or link tag for the CSS it will need to come after that call, otherwise you will have trouble overriding styles.
However ...
In regards to the combined CSS, there is a method of including CSS that will avoid that combination.
It was left within Moodle as there are a couple of places already where we require dynamic CSS.
Adding the following block of code will include a CSS file based upon the course id from within a subdirectory of your theme's style directory.
$file = 'course_'.$PAGE->course->id.'.css';
$dir = '/theme/yourthemename/style/courses/';
if (file_exists($CFG->dirroot.$dir.$file) {
$PAGE->requires->css($dir.$file);
}
Simple add it within your layout file anywhere before the start of the HTML.
I should add however that the above method of including CSS should ONLY ever be used when the CSS is dynamic. It will always be included last, it will never be combined into a theme's style sheets (hence dynamic) and is not served with any smart caching directives.
Let me know how it all works out.
Cheers
Sam
Re: Theme 2.0: Adding a settings page to your theme
1) Every page already contains tags in the body for the course and category (among a bunch of other useful selectors), so you can just have one CSS always loaded in the theme, and set up rules for different courses/categories etc.
2) The admin can create one main theme, and then use it as the base for a number of variations implemented as individual themes. In Admin > Appearance > Themes >Theme settings, turn on allowcoursethemes and allowcategorythemes. This will let your teachers choose a variation from a list.
Re: Theme 2.0: Adding a settings page to your theme
I had managed to implement something very similar to Sams suggestion (but without the check if it was there first!).
I had also forgotten about the body tags that Martin mentioned, even though I had already used the ie6 class that now gets added to the body tag in the theme that I was working on. Also that option has been in previous versions of Moodle as I remember using it to hide topic numbers in an information area.
There are so many useful classes that now get added to the body tag that Martins suggestion would probably work for pretty much all theme related ideas/problems.
Re: Theme 2.0: Adding a settings page to your theme
I had been working on a theme that used a custom profile field to store these kinds of settings but have scrapped it in favour of waiting for 2.0.
Re: Theme 2.0: Adding a settings page to your theme
Sam,
Why the theme name is coming twice under the theme tab(home-> site administration-> appearance -> theme) for theme setting page.
like these names are coming under the theme tab
Deymistified theme
Deymistified
If i click on the "deymistified theme" then the setting page would be display, If I click on "Deymistified" then there would be display the blank page,
How can I fix that problem?
There is an error on the tutorial. Some code in the settings are written differently now. Check out Splash theme or other themes in core that have settings and copy their code.
Mary
Re: Theme 2.0: Adding a settings page to your theme
HI Mary
I am having endless problems getting this demystified theme to work - I have read a lot around on the forums and have done all the troucleshooting tips a the end of the tutoral but I keep getting this error
Invalid get_string() identifier: 'pluginname' or component 'theme_demystified'
- line 5864 of /lib/moodlelib.php: call to debugging()
- line 6419 of /lib/moodlelib.php: call to core_string_manager->get_string()
- line 28 of /admin/settings/appearance.php: call to get_string()
- line 5615 of /lib/adminlib.php: call to require()
- line 5502 of /lib/adminlib.php: call to admin_get_root()
- line 29 of /theme/index.php: call to admin_externalpage_setup()
I dont see the anything in theme selctor just a plugin name blank which I assume is part of the problem. I ended up using the zip files to see if they would work - and the same error - I see this error whenever I try and create a new theme - checked all permissions on folders etc
Please can you assist
Re: Theme 2.0: Adding a settings page to your theme
I had the same problem, and gave up on it at the time because I did not know enough about how to change it.
What you need to do is take the folder OUT of the Moodle server and work on it so that it does not spoil the rest of your Moodle site.
Once it's out of the equation make sure that Moodle is working OK. If you have other half finished themes in the themes folder take those out too.
Then just work on getting one of the themes working.
Can you upload the zip file of where you are up to with demystified theme? Then I can take a look at it?
Thanks
Mary
Re: Theme 2.0: Adding a settings page to your theme
Hi Casey,
Taking another look at the demystified tutorial, I think there is a line missing from the language file - in demystified/lang/en/theme_demystified.php you need to add the plugin name string
$string['pluginname'] = 'Demystified';
HTH
Richard
Re: Theme 2.0: Adding a settings page to your theme
HI all - fixed this issue - it was all about that line $string['pluginname'] = 'Demystified'; - if this not correct you see that pluginname error and also in the theme selector you see this listed and space where the thumbnail of theme should be - thanks - so my findings were - to carefully trawl all refs to theme in *.php and other files that are being used when moving and copying them into your server - check if you use one as a base for new theme that you have correctly renamed the refs to "yournewthemename" - regards casey - if you see this problem in your theme selector it is a really easy place to start troubleshooting - oh the wonders of hindsight
Re: Theme 2.0: Adding a settings page to your theme
Hi,
Thanks alot for your tutorial it has made me create a moodle 2 theme with a settings page. The only part I have befcoem quite stuck on is at once the theme and settigns is all complete. In the dropdown list under admin settings (see attached file) There are two links appearing Demystified theme (all the settings options displayed) and Demystified (which has an empty settign page). I have looked at the demystified/lang/en/theme_demystified.php file and there are two string which correspond to these
$string['pluginname'] = 'Demystified';
$string['configtitle'] = 'Demystified theme';
I am not sure if these are the cause or not.
I have used the Demystified theme example in another custom moodle theme and have the same result where the admin theme settings displays this in the same way.
It would be a great help if someone is able to advise on this.
Many thanks in advance
Shabana