Theme 2.0: Adding a settings page to your theme

Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Number of replies: 63
Hi all,

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.
Average of ratings: Useful (9)
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Sam, this document is just what I need! I'm halfway through designing a new Moodle 2 theme and stuck on various parts of my Moodle site where I can't seem to get it to do what I want. So I shall read your new Moodle Doc and download the .zip file and spend the rest of the day poring over it.

Many thanks for all your hard work with Moodle Docs.

Mary
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
I spent the afternoon reading through and following the tutorial. It's a long, and mind blowing Moodle Doc, which had me needing to refer to the zip file you so kindly uploaded here. However, my finished theme, although it displayed OK, but because I forgot to upload my logo I ended up with a space in the header which was filled with what looked like css mark-up or some other code, php generated? I don't know, as it had the character @ in various places, so I think I must have missed something out on the way!

Mary

In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
I fixed it! I had left of the <php? bit of code at the top of the lib.php file!

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
In reply to Mary Evans

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
That's awesome thanks Mary, I'm glad someone got something good out of it.
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
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Sam, This little (well not so little) tutorial will come in very handy. I'm going to see if I can build myself a settings page to populate a menu, and also add language options for it too.

If I get stuck (and that's a certainty!) I'll be back! smile

Mary
In reply to Mary Evans

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Hi Dietmar,

I think it would make perfect sense, I like asymmetrical symmetry. smile


In reply to Mary Evans

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi Dietmar,

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 smile post any questions you have if you get stuck and I'll be more than happy to help.

Cheers
Sam


In reply to Sam Hemelryk

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

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

Thank you for adding such a mind blowing (in a good way wink ) 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
In reply to Gareth J Barnard

Re: Theme 2.0: Adding a settings page to your theme

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Yes. That would be an admin_setting_configselect.
Average of ratings: Useful (1)
In reply to Tim Hunt

Re: Theme 2.0: Adding a settings page to your theme

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

Sorry for the long reply wait. Thanks smile - I think I have enough info to tackle the issue.

Cheers,

Gareth
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by John St -
Great tutorial. I was banging my head against the wall though because the language strings would not update... Then I checked the language settings and had to turn off language cache... Might want to add that in to the tutorial because I think language cache is turned on by default. And, it might save someone else my headache!
In reply to John St

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi John,

Thank you for reminding me of that, I will add it to the tutorial right now smile

Cheers
Sam
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Thanks for that Sam, like John I've been banging my head against the wall too!

As for your latest proposal to add a new tutorial or build on this existing tutorial:

"...If there are several requests for it I will happily write a short tutorial that builds upon this tutorial using an admin_externalpage instead.

(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...

cheerleader.gif

Mary
In reply to Mary Evans

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi Dietmar,

Congratulations on getting it all up and running!

I've just had a look at the back end code and it all looks good smile

Cheers
Sam
In reply to Sam Hemelryk

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Mary Evans

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi Mary,

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
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Not to worry Sam, I understand. Better you found out sooner than later!

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


In reply to Mary Evans

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi 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:
  1. stringtoget is the string you want to print, this is what ever you put into your language file. e.g. $string['stringname'] = 'blah'
  2. themename is what ever you used for your theme. e.g. theme_demystified
From all this you should end up with the following:
/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 smile

Hope this all helps
Cheers
Sam


Average of ratings: Useful (1)
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Sam you are indeed a fountain of knowledge!

Thanks for this I'll go try it out.

Mary
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi all,

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 smile

I'm updating the tutorial presently with instructions on how to use it so keep your eyes out smile.

http://docs.moodle.org/en/Development:Themes_2.0_adding_a_settings_page#Colour_picker

Keep up the great effort everyone!

Cheers
Sam

Attachment colourpicker.jpg
Average of ratings: Useful (3)
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
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...

One small step for Sam, one giant leap for MOODLE!

Thank you! Thank you! Thank you!

Mary

In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Aylwin Cal -
Wow, having a color picker is VERY cool! Nice work!
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme - with tiny colour picker

by Mauno Korpelainen -

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 wink

Attachment colourpi.jpg
Average of ratings: Useful (1)
In reply to Mauno Korpelainen

Re: Theme 2.0: Adding a settings page to your theme - with tiny colour picker

by Mauno Korpelainen -

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)

In reply to Mauno Korpelainen

Re: Theme 2.0: Adding a settings page to your theme - with tiny colour picker

by Sam Hemelryk -
Hi Mauno,

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

In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme - with tiny colour picker

by Mauno Korpelainen -

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?

In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Daniele Cordella -
Picture of Core developers Picture of Plugin developers
Thanks Sam.
I had a bad week so I didn't find the time to read your post before.
But now... W O W sorpreso
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?
In reply to Daniele Cordella

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Ahhh very good question Daniele,

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
In reply to Sam Hemelryk

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi Dietmar,

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:
  1. Browse to Site Administration > Development > Debugging
  2. Set Debug message to Developer: ....
  3. On the same page turn on Display debug messages
  4. Browse to your theme setting page
If it is an error (which it really sounds like) then you should now see some orange box with a ***hopefully*** clear message about what is wrong.

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

In reply to Sam Hemelryk

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi Dietmar,

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
Average of ratings: Useful (1)
In reply to Sam Hemelryk

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Ahh yes quite right sorry Dietmar, there would be a bit more that you would need, JavaScript and strings being them. Perhaps it is easiest to wait for PR4.

Cheers
Sam
Average of ratings: Useful (1)
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Daniele Cordella -
Picture of Core developers Picture of Plugin developers
Help Sam, help!!!
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.
In reply to Daniele Cordella

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi Daniele,

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 smile


$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
Average of ratings: Useful (1)
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Daniele Cordella -
Picture of Core developers Picture of Plugin developers
One more question Sam.
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.
In reply to Daniele Cordella

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi Daniele,

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
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by John St -
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?
In reply to John St

Re: Theme 2.0: Adding a settings page to your theme

by Mauno Korpelainen -
In reply to Mauno Korpelainen

Re: Theme 2.0: Adding a settings page to your theme

by John St -
Thanks. I am aware of how to add images into a theme, but your link is still a good refresher.

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;
In reply to John St

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi John,

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
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Mat Cannings -
I have just followed the guide and managed to create my first Moodle 2.0 theme that contains features that were not available for 1.9

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 wink) for a particular course e.g Unit One has a red heading background, Unit Two is blue.

Is this currently possible?




In reply to Mat Cannings

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Anything is possible...if you are a PHP Guru! smile But as of the Moodle developers are really busy working on getting Moodle 2.0 ready for launch next month, and stretched for time, these kind of customisation ideas tend to be put on a back burner, until someone can look at the possibilities of each idea being viable or not.

If I had more coding skills I'd have a go at doing it, but I don't - so I can't! sad


In reply to Mat Cannings

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi Mat,

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
Average of ratings: Useful (1)
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Mat Cannings -
Hi 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 big grin 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





In reply to Mat Cannings

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Hi Mat,

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 ... smile

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
Average of ratings: Useful (1)
In reply to Mat Cannings

Re: Theme 2.0: Adding a settings page to your theme

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Two alternative methods for this sort of thing:

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.
Average of ratings: Useful (2)
In reply to Martin Dougiamas

Re: Theme 2.0: Adding a settings page to your theme

by Sam Hemelryk -
Haha thanks Martin, I totally forgot about those two settings!
In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Mat Cannings -
Thanks Martin and Sam,
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.
In reply to Mat Cannings

Re: Theme 2.0: Adding a settings page to your theme

by Dan Humpherson -
This is quite frankly awesome, so many applications for this!!

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.
In reply to Dan Humpherson

Re: Theme 2.0: Adding a settings page to your theme

by suman bogati -

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?

In reply to suman bogati

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

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.

HTH

Mary

In reply to Mary Evans

Re: Theme 2.0: Adding a settings page to your theme

by casey keppel-compton -

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

 

In reply to casey keppel-compton

Re: Theme 2.0: Adding a settings page to your theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

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

In reply to casey keppel-compton

Re: Theme 2.0: Adding a settings page to your theme

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

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

In reply to Richard Oelmann

Re: Theme 2.0: Adding a settings page to your theme

by casey keppel-compton -

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

In reply to Sam Hemelryk

Re: Theme 2.0: Adding a settings page to your theme

by Shabana Akhtar -

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

Attachment admin_settings.jpg