Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Creating a theme settings page: Difference between revisions

From MoodleDocs
Line 498: Line 498:
$default = '#DDD';
$default = '#DDD';
$setting = new admin_setting_configtext($name, $title, $description, $default, PARAM_CLEAN, 12);
$setting = new admin_setting_configtext($name, $title, $description, $default, PARAM_CLEAN, 12);
$temp->add($setting);
// Logo file setting
$name = 'theme_demystified/logo';
$title = get_string('logo','theme_demystified');
$description = get_string('logodesc', 'theme_demystified');
$setting = new admin_setting_configtext($name, $title, $description, '', PARAM_URL);
$temp->add($setting);
$temp->add($setting);


Line 543: Line 536:


===Creating a language file and adding our strings===
===Creating a language file and adding our strings===
As I'm sure none of your have forgotten throughout the creation of the our settings.php page we used alot of strings that I mentioned we would set later on. Well not it is time to set those strings.
First up create the following directory and file for our language strings:
* Directory '''theme/demystified/lang'''
* Directory '''theme/demystified/lang/en'''
* File '''theme/demystified/lang/theme_demystified.php'''
What we have created here is the required structure for Moodle to start looking for language strings.
First up Moodle searches locates the lang directory, once found it looks within a that directory for a directory that makes the character code for the language the user has selected, by default this is '''en''' for English, once that is found it looks for the appropriate language file in this case theme_demystified from which it will load all language strings for our theme.
If English isn't your first language simply replace the en directory with one that uses your chosen languages character code (two letters).
We can now add our language strings to '''theme/demystified/lang/theme_demystified.php'''. Copy and paste the following lines of PHP into this file.
<code php>
<?php
/**
* This file contains the strings used by the demystified theme
*/
$string['backgroundcolor'] = 'Background colour';
$string['backgroundcolordesc'] = 'This sets the background colour for the theme.';
$string['configtitle'] = 'Demystified theme';
$string['customcss'] = 'Custom CSS';
$string['customcssdesc'] = 'Any CSS you enter here will be added to every page allowing your to easily customise this theme.';
$string['footnote'] = 'Footnote';
$string['footnotedesc'] = 'The content from this textarea will be displayed in the footer of every page.';
$string['logo'] = 'Logo';
$string['logodesc'] = 'Enter the URL to an image to use as the logo for this site. Should be http://www.yoursite.com/path/to/logo.png';
$string['regionwidth'] = 'Column width';
$string['regionwidthdesc'] = 'This sets the width of the two block regions that form the left and right columns.';
</code>


==Using the settings in CSS==
==Using the settings in CSS==

Revision as of 06:53, 9 June 2010

Under construction. Please don't make any changes at this point I will remove this notice when I am done --Sam Hemelryk

This document looks at how to create and settings page for your theme and how to make use of those settings both within your CSS and within your layout files.

This is a pretty advanced topic and will require that you have at least an intermediate knowledge of PHP, CSS, and development in general.

Before we begin

There is a huge body of knowledge that we must cover in following through this document and as such I think the best way to write this is as a tutorial for which my intentions are to replicate the standard theme but with a settings page that allows the admin to set background and font colours, set a logo to use with the page, and probably several other minor settings to change the way in which the theme is displayed.

As part of this process I will of course have to create the base of my new theme which will be largely a copy/paste of the current standard theme. I expect that anyone working through this tutorial has previously read the tutorial I wrote on creating your first theme. If you haven't go read it now because I'm not going to go into much detail until we get to the actual process of customising the theme and introducing the settings page.

So before we finally get this started please work check that you can tick of the everything on the following requirements check-list.

  • Have a Moodle installation that has already been installed and configured and is ready to use
  • Have full read/write access to that installation.
  • Be prepared to delete that installation at the end of this... we will destroy it!
  • Have a development environment prepared and ready to use. This includes:
    • Your favourite editor installed, running, and pointed at the themes directory of your installation.
    • You browser open and your site visible.
    • A bottomless coffee pot... decaf won't help you with this one.
  • Have turned on theme designer mode, if you don't know what this is please read the creating your first theme tutorial.
  • Have turned on allowthemechangeonurl. This setting allows you to change themes on the URL and is very handy when developing themes.
  • And finally an insane ambition to create a customisable theme.

Our goals for this tutorial

The following is just a list goals that I hope to achieve during this tutorial. They are laid out here so that I can easily refer back to them and so that you can easily find them.

  1. Create a new theme called demystified based on the standard theme within Moodle 2.0 but defines it own layout files.
  2. Make some minor changes to that theme to allow us to more easily see what is going on.
  3. Create a settings page for the demystified theme
  4. Add several settings to our settings page
  5. Use some of those settings to alter our CSS
  6. Use the rest of those settings within our layout file.
  7. Discuss the good, the bad, and limits of what we have just created.

So I can see you are all very excited about this point and that you would love to know what settings we are going to create; So here they are:

A setting to ...

  • change the background colour (CSS).
  • set the path to an image that we will use as a logo on all pages (Layout files).
  • override the width of the block regions (CSS).
  • allow a note to be added to the footer of all pages (Layout files).
  • allow custom CSS to be written to do anything the user wants.

Creating the demystified theme

Before we start here I want to remind you that I am going to look at this only briefly as I am making the assumption that you have read the creating your first theme tutorial.

Well lets get into it....

The first thing we need to do is create a directory for our theme which we will call demystified.

So within your Moodle directory create the following folder moodle/theme/demystified. At the same time you can also create the following files and folders which we will get to soon.

  • The file moodle/theme/demystified/config.php for our config information.
  • The directory moodle/theme/demystified/layout for our layout files.
  • The directory moodle/theme/demystified/style for our css files.
  • The file moodle/theme/demystified/style/core.css which will contain our special CSS.

Next we will copy the layout files from the base theme to our new theme demystified. We are basing our theme on the base theme however because we want to make changes to our layout files we will need to create out own. In this case coping them from the base them is fine... so copy all of the layout files from moodle/theme/base/layout to moodle/theme/demystified/layout.

There should be three files that you just copied:

  1. embedded.php
  2. frontpage.php
  3. general.php

Now we need to populate demystified/config.php with the settings for our new theme. They are as follows: $THEME->name = 'demystified'; Simply sets the name of our theme.

$THEME->parents = array('standard','base'); This theme is extending both the standard theme and the base theme. Remember when extending a theme you also need to extend its parents or things might not work correctly.

$THEME->sheets = array('core'); This tells our theme that we want to use the file demystified/style/core.css with this theme.

$THEME->layouts = array(

   // Most backwards compatible layout without the blocks - this is the layout used by default
   'base' => array(
       'file' => 'general.php',
       'regions' => array(),
   ),
   // Standard layout with blocks, this is recommended for most pages with general information
   'standard' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   ),
   // Main course page
   'course' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
       'options' => array('langmenu'=>true),
   ),
   'coursecategory' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   ),
   // part of course, typical for modules - default page layout if $cm specified in require_login()
   'incourse' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   ),
   // The site home page.
   'frontpage' => array(
       'file' => 'frontpage.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   ),
   // Server administration scripts.
   'admin' => array(
       'file' => 'general.php',
       'regions' => array('side-pre'),
       'defaultregion' => 'side-pre',
   ),
   // My dashboard page
   'mydashboard' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
       'options' => array('langmenu'=>true),
   ),
   // My public page
   'mypublic' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   ),
   'login' => array(
       'file' => 'general.php',
       'regions' => array(),
       'options' => array('langmenu'=>true),
   ),
   // Pages that appear in pop-up windows - no navigation, no blocks, no header.
   'popup' => array(
       'file' => 'general.php',
       'regions' => array(),
       'options' => array('nofooter'=>true, 'nonavbar'=>true, 'nocustommenu'=>true),
   ),
   // No blocks and minimal footer - used for legacy frame layouts only!
   'frametop' => array(
       'file' => 'general.php',
       'regions' => array(),
       'options' => array('nofooter'=>true),
   ),
   // Embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible
   'embedded' => array(
       'file' => 'embedded.php',
       'regions' => array(),
       'options' => array('nofooter'=>true, 'nonavbar'=>true, 'nocustommenu'=>true),
   ),
   // Used during upgrade and install, and for the 'This site is undergoing maintenance' message.
   // This must not have any blocks, and it is good idea if it does not have links to
   // other places - for example there should not be a home link in the footer...
   'maintenance' => array(
       'file' => 'general.php',
       'regions' => array(),
       'options' => array('noblocks'=>true, 'nofooter'=>true, 'nonavbar'=>true, 'nocustommenu'=>true),
   ),

);

Now that all looks very complicated however its really not too bad as it is just copied from the base theme's config.php file. We can do this because we copied the layout files from the base theme to begin with and for the time being there are no changes that we wish to make. Simply open up theme/base/config.php and copy the layouts from there.

And that is it. The config.php file for our demystified theme is complete. The full source is shown below:

<?php

// This file is part of Moodle - http://moodle.org/ // // Moodle is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // Moodle is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with Moodle. If not, see <http://www.gnu.org/licenses/>.

/**

* The demystified theme config file
*
* This theme was created to document the process of adding a settings page to a theme
*
* @copyright 2010 Sam Hemelryk
* @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

// The name of our theme $THEME->name = 'demystified';

// The other themes this theme extends $THEME->parents = array('standard','base');

// The CSS files this theme uses (located in the style directory) $THEME->sheets = array('core');

// The layout definitions for this theme $THEME->layouts = array(

   // Most backwards compatible layout without the blocks - this is the layout used by default
   'base' => array(
       'file' => 'general.php',
       'regions' => array(),
   ),
   // Standard layout with blocks, this is recommended for most pages with general information
   'standard' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   ),
   // Main course page
   'course' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
       'options' => array('langmenu'=>true),
   ),
   'coursecategory' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   ),
   // part of course, typical for modules - default page layout if $cm specified in require_login()
   'incourse' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   ),
   // The site home page.
   'frontpage' => array(
       'file' => 'frontpage.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   ),
   // Server administration scripts.
   'admin' => array(
       'file' => 'general.php',
       'regions' => array('side-pre'),
       'defaultregion' => 'side-pre',
   ),
   // My dashboard page
   'mydashboard' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
       'options' => array('langmenu'=>true),
   ),
   // My public page
   'mypublic' => array(
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   ),
   'login' => array(
       'file' => 'general.php',
       'regions' => array(),
       'options' => array('langmenu'=>true),
   ),
   // Pages that appear in pop-up windows - no navigation, no blocks, no header.
   'popup' => array(
       'file' => 'general.php',
       'regions' => array(),
       'options' => array('nofooter'=>true, 'nonavbar'=>true, 'nocustommenu'=>true),
   ),
   // No blocks and minimal footer - used for legacy frame layouts only!
   'frametop' => array(
       'file' => 'general.php',
       'regions' => array(),
       'options' => array('nofooter'=>true),
   ),
   // Embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible
   'embedded' => array(
       'file' => 'embedded.php',
       'regions' => array(),
       'options' => array('nofooter'=>true, 'nonavbar'=>true, 'nocustommenu'=>true),
   ),
   // Used during upgrade and install, and for the 'This site is undergoing maintenance' message.
   // This must not have any blocks, and it is good idea if it does not have links to
   // other places - for example there should not be a home link in the footer...
   'maintenance' => array(
       'file' => 'general.php',
       'regions' => array(),
       'options' => array('noblocks'=>true, 'nofooter'=>true, 'nonavbar'=>true, 'nocustommenu'=>true),
   ),

);

The screenshot below shows the both the directory structure we have now created and a screenshot of the theme presently.

File:theme.settings.page.01.jpg

To view the theme so far open you browser and enter the URL of your site followed by '?theme=demystified'. You should see the theme that we just created which will look exactly like the base standard theme.

The final thing that we want to do is add a little bit of CSS to the demystified theme that will both visually set this theme apart from the standard theme and second build a the base on which our settings can later build.

I added the following snippet of CSS to the file demystified/style/core.css. html {background-color:#DDD;} body {margin:30px;padding:0;border:1px solid #333;border-width:0 10px 0 10px;background-color:#333;} body #page {background-color:#FFF;position:relative;top:-10px;} .block .header {background-image:none;background-color:#0C5CAC;border:1px solid #0C5CAC;color:#FFF;} .block {border-color:#4BA7FF;background-color:#DDEEFF;} .block .content {background-color:#F1F8FF;} a:link, a:visited {color:#0C5CAC;} a:hover {color:#C77500;}

  1. page #page-header {background-color:#0C5CAC;margin:0;padding:0;width:100%;color:#fff;}
  2. page #page-header a:link, #page #page-header a:visited {color:#FFAC02}

The CSS that we have just added to our theme sets a couple of colours on the front page. Presently this is the only CSS I will add, I know it isn't complete by any means but it achieves it's purpose as the screenshot below illustrates.

File:theme.settings.page.02.jpg

And with that I will move on to the real purpose of this tutorial, creating the settings page

Setting up the settings page

With the demystified theme set up in its early stage it is time to create the settings page. This is where the real PHP fun begins.

For those of you who happen to be familiar with development of modules, blocks or other plugin types you have probably encountered settings pages before and this is not going to be any different.

However for those who haven't which I imagine is most of you this is going to be quite a challenge. I will try to walk through this step by step however if at any point you get stuck don't hesitate to ask in the forums as I imagine you will get a speedy response.

How settings pages work in Moodle

Settings pages can be used by nearly every plugin type of which themes is of course one. The way in which it all works isn't too tricky to understand.

All of the settings for Moodle can be configured through the admin interfaces when logged in. I am sure that everyone here has seen those admin pages and has changed a setting or two before so you will all know what I am talking about. Well the settings page for theme is no different. It will be shown in the admin pages tree under Appearance > Themes and all we have to do is tell Moodle what settings there are.

This is done by creating a settings.php file within out theme into which we will add code that tells Moodle about the settings we want to add/use.

When telling Moodle about each setting we are simply creating a new admin_setting instance of the type we want and the properties we want and then adding it to our settings page.

There is really not much more too it at this level. Things can get very complex very fast so the best thing we can do now is start creating our settings.php file for the demystified theme and see where it leads us.

Creating the settings page

So as mentioned before we need a settings.php file which we will create now. To begin with create the file theme/demystified/settings.php and open it in your favourite editor so its ready to go.

Before we start adding code lets just remember the settings that we want to create:

  • change the background colour (CSS).
  • set the path to an image that we will use as a logo on all pages (Layout files).
  • override the width of the block regions (CSS).
  • allow a note to be added to the footer of all pages (Layout files).
  • allow custom CSS to be written to do anything the user wants.

Alright.

Now thinking about this the first setting is as basic as it gets, all we need is a text box that the user can type an image into.

The second is to allow a logo to be used in the header of each page. What we want here is a path but should it be a physical path e.g. C:/path/to/image.png or should it be a web path e.g. http://mysite.com/path/to/image.png? For the purpose of this tutorial I am going to go with a web path because it is going to be easier to code and will hopefully be a little easier to understand to begin with.

The third settings is very straight forward, we will just have a plain text box into which a width can be typed that will be used to determine the width of the block regions.

The forth and the fifth settings are also pretty straight forward, they we use a textarea into which the user can enter what ever they want and we will do something useful with it.

Now that we have an understanding about the settings we wish to define pull up your editor and lets start coding....

<?php

/**

* Settings for the demystified theme
*/

$temp = new admin_settingpage('theme_demystified', get_string('configtitle','theme_demystified')); This is the first bit of code we must enter, the first line is of course just the opening php tag, secondly we have a comment that describes this file, and then we get create a new admin_settingspage object.

This admin_settingspage object that we have just created is a representation of our settings page and is the what we add our new settings to. When creating it we give it two arguments, first the name of the page which is in this case theme_themename and the title for the page which we get with the get_string method.

At the moment I'm not going to worry about adding the string, we will get to that latter once we have defined all of our settings.

Background colour

With the page now created as $temp lets add our first setting: Background colour.

// Background colour setting $name = 'theme_demystified/backgroundcolor'; $title = get_string('backgroundcolor','theme_demystified'); $description = get_string('backgroundcolordesc', 'theme_demystified'); $default = '#DDD'; $setting = new admin_setting_configtext($name, $title, $description, $default, PARAM_CLEAN, 12); $temp->add($setting); Thankfully this isn't as difficult as it probably initially looks.

The first line of code is creating a variable for the name of the background colour setting. In this case it is theme_demystified/backgroundcolor.

The name is very important, for the setting to be usable we have to follow a strict naming convention. theme_themename/settingname where themename is the name of the theme the setting is for and settingname is the name for the setting by which we will also use it.

The second line of code creates a variable that contains the title of the setting. This is what the user sees to the right of the setting on the settings page and should be a short description of the setting. Here we are again using the get_string method so we will need to remember to add that string later on.

The third line of code sets the description. This should describe what the setting does or how it works and again we will use the get_string method.

The fourth line creates a variable that will be used as the default value for the setting. Because this setting is a colour we want an HTML colour to be the default value.

The fifth line is where we put it all together. Here we create a new admin_setting_configtext object. This object will represent the background colour setting.

When we create it we need to give it 6 different things.

  1. The name of the setting. In this case we have a variable $name.
  2. The title for this setting. We used the variable $title.
  3. The description of the setting $description.
  4. The default value for the setting. $default is the variable this.
  5. The type of value we want the user to enter. For this we have used PARAM_CLEAN which tells Moodle to get rid of any nasties from what the user enters.
  6. The size of the field. In our case 12 characters will be plenty.

The sixth and final line of code adds our newly created setting to the admin page we created earlier.

That is it we have successfully created and added our first setting, however there are several more to settings to do, and three are a couple of important things that you need to be aware of before we move on.

First: There are several different types of settings that you can create and add to a page and each one may differ in what they need you to give them. In this case it was name, title, description, default, type, and size. However other settings will likely require different things. Smart editors like Netbeans or Eclipse can tell you what is required, otherwise you will need to research it.

Second: Normally settings are declared on one line as follows: $temp->add(new admin_setting_configtext('theme_demystified/backgroundcolor', get_string('backgroundcolor','theme_demystified'), get_string('backgroundcolordesc', 'theme_demystified'), '#DDD', PARAM_CLEAN, 12)); While this is structurally identical as all we have done is move everything onto one line and do away with the variables it is a little harder to read when you are learning all of this.

The logo file

// Logo file setting $name = 'theme_demystified/logo'; $title = get_string('logo','theme_demystified'); $description = get_string('logodesc', 'theme_demystified'); $setting = new admin_setting_configtext($name, $title, $description, , PARAM_URL); $temp->add($setting);

Block region width

// Block region width $name = 'theme_demystified/regionwidth'; $title = get_string('regionwidth','theme_demystified'); $description = get_string('regionwidthdesc', 'theme_demystified'); $default = 200; $choices = array(150, 170, 200, 240, 290, 350, 420); $setting = new admin_setting_configselect($name, $title, $description, $default, $choices); $temp->add($setting);

Footer note

// Foot note setting $name = 'theme_demystified/footnote'; $title = get_string('footnote','theme_demystified'); $description = get_string('footnotedesc', 'theme_demystified'); $setting = new admin_setting_confightmleditor($name, $title, $description, ); $temp->add($setting);

Custom CSS

// Custom CSS file $name = 'theme_demystified/customcss'; $title = get_string('customcss','theme_demystified'); $description = get_string('customcssdesc', 'theme_demystified'); $setting = new admin_setting_configtextarea($name, $title, $description, ); $temp->add($setting);

Finishing settings.php

With all of our settings defined and added to our page that we created right at the beginning it is time to finish it all off. // Add our page to the structure of the admin tree $ADMIN->add('themes', $temp); The above line of code is the final line for the page. It is adding the page that we have created $temp to the admin tree structure. In this case it is adding it to the themes branch.

The following is the completed source for our settings.php ..... for your copy/paste pleasure.

<?php

/**

* Settings for the demystified theme
*/

// Create our admin page $temp = new admin_settingpage('theme_demystified', get_string('configtitle','theme_demystified'));

// Background colour setting $name = 'theme_demystified/backgroundcolor'; $title = get_string('backgroundcolor','theme_demystified'); $description = get_string('backgroundcolordesc', 'theme_demystified'); $default = '#DDD'; $setting = new admin_setting_configtext($name, $title, $description, $default, PARAM_CLEAN, 12); $temp->add($setting);

// Logo file setting $name = 'theme_demystified/logo'; $title = get_string('logo','theme_demystified'); $description = get_string('logodesc', 'theme_demystified'); $setting = new admin_setting_configtext($name, $title, $description, , PARAM_URL); $temp->add($setting);

// Block region width $name = 'theme_demystified/regionwidth'; $title = get_string('regionwidth','theme_demystified'); $description = get_string('regionwidthdesc', 'theme_demystified'); $default = 200; $choices = array(150, 170, 200, 240, 290, 350, 420); $setting = new admin_setting_configselect($name, $title, $description, $default, $choices); $temp->add($setting);

// Foot note setting $name = 'theme_demystified/footnote'; $title = get_string('footnote','theme_demystified'); $description = get_string('footnotedesc', 'theme_demystified'); $setting = new admin_setting_confightmleditor($name, $title, $description, ); $temp->add($setting);

// Custom CSS file $name = 'theme_demystified/customcss'; $title = get_string('customcss','theme_demystified'); $description = get_string('customcssdesc', 'theme_demystified'); $setting = new admin_setting_configtextarea($name, $title, $description, ); $temp->add($setting);

// Add our page to the structure of the admin tree $ADMIN->add('themes', $temp);

Creating a language file and adding our strings

As I'm sure none of your have forgotten throughout the creation of the our settings.php page we used alot of strings that I mentioned we would set later on. Well not it is time to set those strings.

First up create the following directory and file for our language strings:

  • Directory theme/demystified/lang
  • Directory theme/demystified/lang/en
  • File theme/demystified/lang/theme_demystified.php

What we have created here is the required structure for Moodle to start looking for language strings.

First up Moodle searches locates the lang directory, once found it looks within a that directory for a directory that makes the character code for the language the user has selected, by default this is en for English, once that is found it looks for the appropriate language file in this case theme_demystified from which it will load all language strings for our theme.

If English isn't your first language simply replace the en directory with one that uses your chosen languages character code (two letters).

We can now add our language strings to theme/demystified/lang/theme_demystified.php. Copy and paste the following lines of PHP into this file. <?php

/**

* This file contains the strings used by the demystified theme
*/

$string['backgroundcolor'] = 'Background colour'; $string['backgroundcolordesc'] = 'This sets the background colour for the theme.'; $string['configtitle'] = 'Demystified theme'; $string['customcss'] = 'Custom CSS'; $string['customcssdesc'] = 'Any CSS you enter here will be added to every page allowing your to easily customise this theme.'; $string['footnote'] = 'Footnote'; $string['footnotedesc'] = 'The content from this textarea will be displayed in the footer of every page.'; $string['logo'] = 'Logo'; $string['logodesc'] = 'Enter the URL to an image to use as the logo for this site. Should be http://www.yoursite.com/path/to/logo.png'; $string['regionwidth'] = 'Column width'; $string['regionwidthdesc'] = 'This sets the width of the two block regions that form the left and right columns.';

Using the settings in CSS

Using the settings within our layout files

The monster that we have just created

Common pitfalls and useful notes

More information