Creating a theme settings page - Revision history

Mudrd8mz: Text replacement - "`" to ""`


2021-07-15T08:17:33Z
Text replacement - "<code (.*)>" to "<syntaxhighlight lang="$1">"

				
				
				
				
				
				← Older revision
				Revision as of 08:17, 15 July 2021
				
Line 167:
Line 167:



This is a good way to create SCSS variables for use in your theme. Variables work well in SCSS because they can be defined as   This is a good way to create SCSS variables for use in your theme. Variables work well in SCSS because they can be defined as  
<code scss> <syntaxhighlight lang="scss">
$myvariable: #FF0 !default; $myvariable: #FF0 !default;
</syntaxhighlight> </syntaxhighlight>
Line 197:
Line 197:



So this is replacing all instances of   So this is replacing all instances of  
<code css> <syntaxhighlight lang="css">
[[setting:customcss]] [[setting:customcss]]
</syntaxhighlight> </syntaxhighlight>
Line 203:
Line 203:



''theme/more/style/custom.css'' ''theme/more/style/custom.css''
<code css> <syntaxhighlight lang="css">
/* Custom CSS Settings                                                                                                                /* Custom CSS Settings                                                                                                               
-------------------------*/                                                                                                           -------------------------*/



Mudrd8mz: Text replacement - "" to ""

2021-07-14T13:33:12Z
Text replacement - "<code php>" to "<syntaxhighlight lang="php">"

				
				
				
				
				
				← Older revision
				Revision as of 13:33, 14 July 2021
				
Line 15:
Line 15:
In the example theme we can see a settings.php file created already - lets see what it's doing. In the example theme we can see a settings.php file created already - lets see what it's doing.



<code php> <syntaxhighlight lang="php">
// This line protects the file from being accessed by a URL directly.                                                                 // This line protects the file from being accessed by a URL directly.                                                                
defined('MOODLE_INTERNAL') || die();              defined('MOODLE_INTERNAL') || die();             
Line 22:
Line 22:
We put this in all php files that are not meant to be accessed directly. It prevents someone from typing the url to one of these files and accidentally running some code or seeing a strange error. We put this in all php files that are not meant to be accessed directly. It prevents someone from typing the url to one of these files and accidentally running some code or seeing a strange error.



<code php> <syntaxhighlight lang="php">
// This is used for performance, we don't need to know about these settings on every page in Moodle, only when                        // This is used for performance, we don't need to know about these settings on every page in Moodle, only when                       
// we are looking at the admin settings pages.                                                                                        // we are looking at the admin settings pages.                                                                                       
Line 114:
Line 114:



''theme/photo/lang/en/theme_photo.php'' ''theme/photo/lang/en/theme_photo.php''
<code php> <syntaxhighlight lang="php">
$string['cardbg'] = 'Content background';                                                                                             $string['cardbg'] = 'Content background';                                                                                            
$string['cardbg_desc'] = 'A setting to control the background colour for content.';   $string['cardbg_desc'] = 'A setting to control the background colour for content.';  
Line 130:
Line 130:



''theme/photo/config.php'' ''theme/photo/config.php''
<code php> <syntaxhighlight lang="php">
$THEME->prescsscallback = 'theme_photo_get_pre_scss'; $THEME->prescsscallback = 'theme_photo_get_pre_scss';
</syntaxhighlight> </syntaxhighlight>



''theme/photo/lib.php'' ''theme/photo/lib.php''
<code php> <syntaxhighlight lang="php">
function theme_photo_get_pre_scss($theme) {                                                                                           function theme_photo_get_pre_scss($theme) {                                                                                          
     global $CFG;                                                                                                                           global $CFG;                                                                                                                     
Line 175:
Line 175:



''theme/more/config.php'' ''theme/more/config.php''
<code php> <syntaxhighlight lang="php">
$THEME->csspostprocess = 'theme_more_process_css';   $THEME->csspostprocess = 'theme_more_process_css';  
</syntaxhighlight> </syntaxhighlight>



''theme/more/lib.php'' ''theme/more/lib.php''
<code php> <syntaxhighlight lang="php">
function theme_more_process_css($css, $theme) { function theme_more_process_css($css, $theme) {
     // This is not the exact code from theme_more - it has been simplified.      // This is not the exact code from theme_more - it has been simplified.



Mudrd8mz: Text replacement - "

" to ""

2021-07-14T13:05:03Z
Text replacement - "<code php>  " to "<syntaxhighlight lang="php">"

				
				
				
				
				
				← Older revision
				Revision as of 13:05, 14 July 2021
				
Line 30:
Line 30:
As the comment says, we don't need to build the whole list of settings on every single page in Moodle - only when we are actually browsing through the admin settings pages. So we don't create these settings unless they are needed on this page. As the comment says, we don't need to build the whole list of settings on every single page in Moodle - only when we are actually browsing through the admin settings pages. So we don't create these settings unless they are needed on this page.



<code php> <syntaxhighlight lang="php">    // Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.                          
  
    // Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.                           
     $settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));      $settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));
</syntaxhighlight> </syntaxhighlight>
Line 44:
Line 42:
So $settings is our settings page that we can add things to.   So $settings is our settings page that we can add things to.  



<code php> <syntaxhighlight lang="php">    // Each page is a tab - the first is the "General" tab.                                                                          
  
    // Each page is a tab - the first is the "General" tab.                                                                           
     $page = new admin_settingpage('theme_photo_general', get_string('generalsettings', 'theme_photo'));             $page = new admin_settingpage('theme_photo_general', get_string('generalsettings', 'theme_photo'));       
     ...      ...
Line 64:
Line 60:



Example: Example:
<code php> <syntaxhighlight lang="php">    $setting = new admin_setting_configtext('theme_photo/textsetting', get_string('textsetting','theme_photo'), get_string('textsetting_desc', 'theme_photo'), 'defaultvalue', PARAM_NOTAGS, 50);                                                                
  
    $setting = new admin_setting_configtext('theme_photo/textsetting', get_string('textsetting','theme_photo'), get_string('textsetting_desc', 'theme_photo'), 'defaultvalue', PARAM_NOTAGS, 50);                                                                 
     // Any setting that should cause the CSS to be recompiled should have this callback.      // Any setting that should cause the CSS to be recompiled should have this callback.
     $setting->set_updatedcallback('theme_reset_all_caches');                                                           $setting->set_updatedcallback('theme_reset_all_caches');                                                     
Line 84:
Line 78:



How does my setting get saved? It is stored in the mdl_config_plugins table as text and can be retrieved in any php code with: How does my setting get saved? It is stored in the mdl_config_plugins table as text and can be retrieved in any php code with:
<code php> <syntaxhighlight lang="php">   $value = get_config('theme_photo', 'textsetting');
  
   $value = get_config('theme_photo', 'textsetting'); 
</syntaxhighlight> </syntaxhighlight>



Line 111:
Line 103:



''theme/photo/settings.php'' ''theme/photo/settings.php''
<code php> <syntaxhighlight lang="php">    $name = 'theme_photo/cardbg';                                                                                                    
  
    $name = 'theme_photo/cardbg';                                                                                                     
     $title = get_string('cardbg', 'theme_photo');                                                                                          $title = get_string('cardbg', 'theme_photo');                                                                                    
     $desc = get_string('cardbg_desc', 'theme_photo');                                                                                      $desc = get_string('cardbg_desc', 'theme_photo');                                                                                



Mudrd8mz: Text replacement - "" to ""
2021-07-14T13:03:39Z
Text replacement - "</code>" to "</syntaxhighlight>"

				
				
				
				
				
				← Older revision
				Revision as of 13:03, 14 July 2021
				
Line 18:
Line 18:
// This line protects the file from being accessed by a URL directly.                                                                 // This line protects the file from being accessed by a URL directly.                                                                
defined('MOODLE_INTERNAL') || die();              defined('MOODLE_INTERNAL') || die();             
</code> </syntaxhighlight>



We put this in all php files that are not meant to be accessed directly. It prevents someone from typing the url to one of these files and accidentally running some code or seeing a strange error. We put this in all php files that are not meant to be accessed directly. It prevents someone from typing the url to one of these files and accidentally running some code or seeing a strange error.
Line 26:
Line 26:
// we are looking at the admin settings pages.                                                                                        // we are looking at the admin settings pages.                                                                                       
if ($ADMIN->fulltree) {   if ($ADMIN->fulltree) {  
</code> </syntaxhighlight>



As the comment says, we don't need to build the whole list of settings on every single page in Moodle - only when we are actually browsing through the admin settings pages. So we don't create these settings unless they are needed on this page. As the comment says, we don't need to build the whole list of settings on every single page in Moodle - only when we are actually browsing through the admin settings pages. So we don't create these settings unless they are needed on this page.
Line 34:
Line 34:
     // Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.                                // Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.                          
     $settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));      $settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));
</code> </syntaxhighlight>



In order to create any settings in our theme, we need to create the setting, and we need to add it to a settings page. In order to create any settings in our theme, we need to create the setting, and we need to add it to a settings page.
Line 53:
Line 53:
     // Must add the page after defining all the settings!                                                                                  // Must add the page after defining all the settings!                                                                            
     $settings->add($page);         $settings->add($page);   
</code> </syntaxhighlight>



To create each tab in this theme_boost_admin_settingspage_tabs class - we create a new settings pages, add all the settings to them and then add each one with $settings->add(). Each page will display as a separate tab. To create each tab in this theme_boost_admin_settingspage_tabs class - we create a new settings pages, add all the settings to them and then add each one with $settings->add(). Each page will display as a separate tab.
Line 71:
Line 71:
     // We are using tabs, so add this to page. If we were not using tabs this would be $settings->add($setting);      // We are using tabs, so add this to page. If we were not using tabs this would be $settings->add($setting);
     $page->add($setting);      $page->add($setting);
</code> </syntaxhighlight>



The first 4 arguments for all these settings are always the same - the last ones are specific to the type of setting. Explaining each one in order. The first 4 arguments for all these settings are always the same - the last ones are specific to the type of setting. Explaining each one in order.
Line 87:
Line 87:



    $value = get_config('theme_photo', 'textsetting');     $value = get_config('theme_photo', 'textsetting');
</code> </syntaxhighlight>



What kinds of settings exist? What kinds of settings exist?
Line 119:
Line 119:
     $setting->set_updatedcallback('theme_reset_all_caches');                                                           $setting->set_updatedcallback('theme_reset_all_caches');                                                     
     $page->add($setting);      $page->add($setting);
</code> </syntaxhighlight>



Copy this new setting into the settings.php for theme_photo. Copy this new setting into the settings.php for theme_photo.
Line 127:
Line 127:
$string['cardbg'] = 'Content background';                                                                                             $string['cardbg'] = 'Content background';                                                                                            
$string['cardbg_desc'] = 'A setting to control the background colour for content.';   $string['cardbg_desc'] = 'A setting to control the background colour for content.';  
</code> </syntaxhighlight>



Add the lang strings to the language file for the theme. Add the lang strings to the language file for the theme.
Line 142:
Line 142:
<code php> <code php>
$THEME->prescsscallback = 'theme_photo_get_pre_scss'; $THEME->prescsscallback = 'theme_photo_get_pre_scss';
</code> </syntaxhighlight>



''theme/photo/lib.php'' ''theme/photo/lib.php''
Line 174:
Line 174:
     return $scss;                                                                                                                          return $scss;                                                                                                                    
}             }            
</code> </syntaxhighlight>



This is a good way to create SCSS variables for use in your theme. Variables work well in SCSS because they can be defined as   This is a good way to create SCSS variables for use in your theme. Variables work well in SCSS because they can be defined as  
<code scss> <code scss>
$myvariable: #FF0 !default; $myvariable: #FF0 !default;
</code> </syntaxhighlight>
which means initialise this variable to #FF0 only if it has not been defined already. So because our callback defines variables in the pre SCSS callback - they are available for use anywhere else in our SCSS files. which means initialise this variable to #FF0 only if it has not been defined already. So because our callback defines variables in the pre SCSS callback - they are available for use anywhere else in our SCSS files.



Line 187:
Line 187:
<code php> <code php>
$THEME->csspostprocess = 'theme_more_process_css';   $THEME->csspostprocess = 'theme_more_process_css';  
</code> </syntaxhighlight>



''theme/more/lib.php'' ''theme/more/lib.php''
Line 204:
Line 204:
     return $css;                                                return $css;                                          
} }
</code> </syntaxhighlight>



So this is replacing all instances of   So this is replacing all instances of  
<code css> <code css>
[[setting:customcss]] [[setting:customcss]]
</code> </syntaxhighlight>
  with the value of the admin setting in all CSS from the theme.     with the value of the admin setting in all CSS from the theme.  



Line 217:
Line 217:
-------------------------*/                                                                                                           -------------------------*/                                                                                                          
[[setting:customcss]] [[setting:customcss]]
</code> </syntaxhighlight>



This setting is included in one of the style sheets for the theme. This setting is included in one of the style sheets for the theme.



Damyon at 05:00, 1 December 2016
2016-12-01T05:00:14Z


				
				
				
				
				
				← Older revision
				Revision as of 05:00, 1 December 2016
				
Line 1:
Line 1:
{{Template:Themes}}This document looks at how to create a settings page for your Moodle theme and how to make use of those settings within the CSS and layout files for your theme. {{Template:Themes}}
This document looks at how to create a settings page for your Moodle theme and how to make use of those settings within the CSS and layout files for your theme.



==Before we begin== ==Before we begin==



Damyon: /* What about an image upload setting? */
2016-12-01T04:55:14Z
What about an image upload setting?

				
				
				
				
				
				← Older revision
				Revision as of 04:55, 1 December 2016
				
Line 222:
Line 222:
== What about an image upload setting? == == What about an image upload setting? ==



Theme photo includes examples of image upload settings. Read [Creating a theme based on boost] for a detailed explanation of how this theme was created including how to add image upload settings and apply them in SCSS. Theme photo includes examples of image upload settings. Read [[Creating a theme based on boost]] for a detailed explanation of how this theme was created including how to add image upload settings and apply them in SCSS.



==See also== ==See also==



* [[Adding theme upgrade code]] * [[Adding theme upgrade code]]



Damyon: /* What about an image upload setting? */
2016-12-01T04:55:02Z
What about an image upload setting?

				
				
				
				
				
				← Older revision
				Revision as of 04:55, 1 December 2016
				
Line 222:
Line 222:
== What about an image upload setting? == == What about an image upload setting? ==



Image... Theme photo includes examples of image upload settings. Read [Creating a theme based on boost] for a detailed explanation of how this theme was created including how to add image upload settings and apply them in SCSS.



==See also== ==See also==



* [[Adding theme upgrade code]] * [[Adding theme upgrade code]]



Damyon: /* See also */
2016-12-01T04:52:19Z
See also

				
				
				
				
				
				← Older revision
				Revision as of 04:52, 1 December 2016
				
Line 219:
Line 219:



This setting is included in one of the style sheets for the theme. This setting is included in one of the style sheets for the theme.

== What about an image upload setting? ==

Image...



==See also== ==See also==



* [[Adding theme upgrade code]] * [[Adding theme upgrade code]]



Damyon: /* See also */
2016-12-01T04:50:43Z
See also

				
				
				
				
				
				← Older revision
				Revision as of 04:50, 1 December 2016
				
Line 223:
Line 223:



* [[Adding theme upgrade code]] * [[Adding theme upgrade code]]
* [[Styling and customising the dock]] 
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=152053 Theme 2.0: Adding a settings page to your theme] forum discussion 



Damyon: /* Add a setting and use it in SCSS (or less or css) */
2016-12-01T04:45:22Z
Add a setting and use it in SCSS (or less or css)

				
				
				
				
				
				← Older revision
				Revision as of 04:45, 1 December 2016
				
Line 205:
Line 205:
</code> </code>



So this is replacing all instances of "[[setting:customcss]]" with the value of the admin setting in all CSS from the theme.   So this is replacing all instances of  
<code css>
[[setting:customcss]]
</code>
 with the value of the admin setting in all CSS from the theme.  



''theme/more/style/custom.css'' ''theme/more/style/custom.css''

← Older revision		Revision as of 08:17, 15 July 2021
Line 167:		Line 167:

	This is a good way to create SCSS variables for use in your theme. Variables work well in SCSS because they can be defined as		This is a good way to create SCSS variables for use in your theme. Variables work well in SCSS because they can be defined as
	<~~code~~ scss>		<syntaxhighlight lang="scss">
	$myvariable: #FF0 !default;		$myvariable: #FF0 !default;
	</syntaxhighlight>		</syntaxhighlight>
Line 197:		Line 197:

	So this is replacing all instances of		So this is replacing all instances of
	<~~code~~ css>		<syntaxhighlight lang="css">
	[[setting:customcss]]		[[setting:customcss]]
	</syntaxhighlight>		</syntaxhighlight>
Line 203:		Line 203:

	''theme/more/style/custom.css''		''theme/more/style/custom.css''
	<~~code~~ css>		<syntaxhighlight lang="css">
	/* Custom CSS Settings		/* Custom CSS Settings
	-------------------------*/		-------------------------*/

← Older revision		Revision as of 13:33, 14 July 2021
Line 15:		Line 15:
	In the example theme we can see a settings.php file created already - lets see what it's doing.		In the example theme we can see a settings.php file created already - lets see what it's doing.

	<~~code~~ php>		<syntaxhighlight lang="php">
	// This line protects the file from being accessed by a URL directly.		// This line protects the file from being accessed by a URL directly.
	defined('MOODLE_INTERNAL') \|\| die();		defined('MOODLE_INTERNAL') \|\| die();
Line 22:		Line 22:
	We put this in all php files that are not meant to be accessed directly. It prevents someone from typing the url to one of these files and accidentally running some code or seeing a strange error.		We put this in all php files that are not meant to be accessed directly. It prevents someone from typing the url to one of these files and accidentally running some code or seeing a strange error.

	<~~code~~ php>		<syntaxhighlight lang="php">
	// This is used for performance, we don't need to know about these settings on every page in Moodle, only when		// This is used for performance, we don't need to know about these settings on every page in Moodle, only when
	// we are looking at the admin settings pages.		// we are looking at the admin settings pages.
Line 114:		Line 114:

	''theme/photo/lang/en/theme_photo.php''		''theme/photo/lang/en/theme_photo.php''
	<~~code~~ php>		<syntaxhighlight lang="php">
	$string['cardbg'] = 'Content background';		$string['cardbg'] = 'Content background';
	$string['cardbg_desc'] = 'A setting to control the background colour for content.';		$string['cardbg_desc'] = 'A setting to control the background colour for content.';
Line 130:		Line 130:

	''theme/photo/config.php''		''theme/photo/config.php''
	<~~code~~ php>		<syntaxhighlight lang="php">
	$THEME->prescsscallback = 'theme_photo_get_pre_scss';		$THEME->prescsscallback = 'theme_photo_get_pre_scss';
	</syntaxhighlight>		</syntaxhighlight>

	''theme/photo/lib.php''		''theme/photo/lib.php''
	<~~code~~ php>		<syntaxhighlight lang="php">
	function theme_photo_get_pre_scss($theme) {		function theme_photo_get_pre_scss($theme) {
	global $CFG;		global $CFG;
Line 175:		Line 175:

	''theme/more/config.php''		''theme/more/config.php''
	<~~code~~ php>		<syntaxhighlight lang="php">
	$THEME->csspostprocess = 'theme_more_process_css';		$THEME->csspostprocess = 'theme_more_process_css';
	</syntaxhighlight>		</syntaxhighlight>

	''theme/more/lib.php''		''theme/more/lib.php''
	<~~code~~ php>		<syntaxhighlight lang="php">
	function theme_more_process_css($css, $theme) {		function theme_more_process_css($css, $theme) {
	// This is not the exact code from theme_more - it has been simplified.		// This is not the exact code from theme_more - it has been simplified.

← Older revision		Revision as of 13:05, 14 July 2021
Line 30:		Line 30:
	As the comment says, we don't need to build the whole list of settings on every single page in Moodle - only when we are actually browsing through the admin settings pages. So we don't create these settings unless they are needed on this page.		As the comment says, we don't need to build the whole list of settings on every single page in Moodle - only when we are actually browsing through the admin settings pages. So we don't create these settings unless they are needed on this page.

	<~~code~~ php>		<syntaxhighlight lang="php"> // Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.

	// Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.
	$settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));		$settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));
	</syntaxhighlight>		</syntaxhighlight>
Line 44:		Line 42:
	So $settings is our settings page that we can add things to.		So $settings is our settings page that we can add things to.

	<~~code~~ php>		<syntaxhighlight lang="php"> // Each page is a tab - the first is the "General" tab.

	// Each page is a tab - the first is the "General" tab.
	$page = new admin_settingpage('theme_photo_general', get_string('generalsettings', 'theme_photo'));		$page = new admin_settingpage('theme_photo_general', get_string('generalsettings', 'theme_photo'));
	...		...
Line 64:		Line 60:

	Example:		Example:
	<~~code~~ php>		<syntaxhighlight lang="php"> $setting = new admin_setting_configtext('theme_photo/textsetting', get_string('textsetting','theme_photo'), get_string('textsetting_desc', 'theme_photo'), 'defaultvalue', PARAM_NOTAGS, 50);

	$setting = new admin_setting_configtext('theme_photo/textsetting', get_string('textsetting','theme_photo'), get_string('textsetting_desc', 'theme_photo'), 'defaultvalue', PARAM_NOTAGS, 50);
	// Any setting that should cause the CSS to be recompiled should have this callback.		// Any setting that should cause the CSS to be recompiled should have this callback.
	$setting->set_updatedcallback('theme_reset_all_caches');		$setting->set_updatedcallback('theme_reset_all_caches');
Line 84:		Line 78:

	How does my setting get saved? It is stored in the mdl_config_plugins table as text and can be retrieved in any php code with:		How does my setting get saved? It is stored in the mdl_config_plugins table as text and can be retrieved in any php code with:
	<~~code~~ php>		<syntaxhighlight lang="php"> $value = get_config('theme_photo', 'textsetting');

	$value = get_config('theme_photo', 'textsetting');
	</syntaxhighlight>		</syntaxhighlight>

Line 111:		Line 103:

	''theme/photo/settings.php''		''theme/photo/settings.php''
	<~~code~~ php>		<syntaxhighlight lang="php"> $name = 'theme_photo/cardbg';

	$name = 'theme_photo/cardbg';
	$title = get_string('cardbg', 'theme_photo');		$title = get_string('cardbg', 'theme_photo');
	$desc = get_string('cardbg_desc', 'theme_photo');		$desc = get_string('cardbg_desc', 'theme_photo');

← Older revision		Revision as of 13:03, 14 July 2021
Line 18:		Line 18:
	// This line protects the file from being accessed by a URL directly.		// This line protects the file from being accessed by a URL directly.
	defined('MOODLE_INTERNAL') \|\| die();		defined('MOODLE_INTERNAL') \|\| die();
	</~~code~~>		</syntaxhighlight>

	We put this in all php files that are not meant to be accessed directly. It prevents someone from typing the url to one of these files and accidentally running some code or seeing a strange error.		We put this in all php files that are not meant to be accessed directly. It prevents someone from typing the url to one of these files and accidentally running some code or seeing a strange error.
Line 26:		Line 26:
	// we are looking at the admin settings pages.		// we are looking at the admin settings pages.
	if ($ADMIN->fulltree) {		if ($ADMIN->fulltree) {
	</~~code~~>		</syntaxhighlight>

	As the comment says, we don't need to build the whole list of settings on every single page in Moodle - only when we are actually browsing through the admin settings pages. So we don't create these settings unless they are needed on this page.		As the comment says, we don't need to build the whole list of settings on every single page in Moodle - only when we are actually browsing through the admin settings pages. So we don't create these settings unless they are needed on this page.
Line 34:		Line 34:
	// Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.		// Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.
	$settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));		$settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));
	</~~code~~>		</syntaxhighlight>

	In order to create any settings in our theme, we need to create the setting, and we need to add it to a settings page.		In order to create any settings in our theme, we need to create the setting, and we need to add it to a settings page.
Line 53:		Line 53:
	// Must add the page after defining all the settings!		// Must add the page after defining all the settings!
	$settings->add($page);		$settings->add($page);
	</~~code~~>		</syntaxhighlight>

	To create each tab in this theme_boost_admin_settingspage_tabs class - we create a new settings pages, add all the settings to them and then add each one with $settings->add(). Each page will display as a separate tab.		To create each tab in this theme_boost_admin_settingspage_tabs class - we create a new settings pages, add all the settings to them and then add each one with $settings->add(). Each page will display as a separate tab.
Line 71:		Line 71:
	// We are using tabs, so add this to page. If we were not using tabs this would be $settings->add($setting);		// We are using tabs, so add this to page. If we were not using tabs this would be $settings->add($setting);
	$page->add($setting);		$page->add($setting);
	</~~code~~>		</syntaxhighlight>

	The first 4 arguments for all these settings are always the same - the last ones are specific to the type of setting. Explaining each one in order.		The first 4 arguments for all these settings are always the same - the last ones are specific to the type of setting. Explaining each one in order.
Line 87:		Line 87:

	$value = get_config('theme_photo', 'textsetting');		$value = get_config('theme_photo', 'textsetting');
	</~~code~~>		</syntaxhighlight>

	What kinds of settings exist?		What kinds of settings exist?
Line 119:		Line 119:
	$setting->set_updatedcallback('theme_reset_all_caches');		$setting->set_updatedcallback('theme_reset_all_caches');
	$page->add($setting);		$page->add($setting);
	</~~code~~>		</syntaxhighlight>

	Copy this new setting into the settings.php for theme_photo.		Copy this new setting into the settings.php for theme_photo.
Line 127:		Line 127:
	$string['cardbg'] = 'Content background';		$string['cardbg'] = 'Content background';
	$string['cardbg_desc'] = 'A setting to control the background colour for content.';		$string['cardbg_desc'] = 'A setting to control the background colour for content.';
	</~~code~~>		</syntaxhighlight>

	Add the lang strings to the language file for the theme.		Add the lang strings to the language file for the theme.
Line 142:		Line 142:
	<code php>		<code php>
	$THEME->prescsscallback = 'theme_photo_get_pre_scss';		$THEME->prescsscallback = 'theme_photo_get_pre_scss';
	</~~code~~>		</syntaxhighlight>

	''theme/photo/lib.php''		''theme/photo/lib.php''
Line 174:		Line 174:
	return $scss;		return $scss;
	}		}
	</~~code~~>		</syntaxhighlight>

	This is a good way to create SCSS variables for use in your theme. Variables work well in SCSS because they can be defined as		This is a good way to create SCSS variables for use in your theme. Variables work well in SCSS because they can be defined as
	<code scss>		<code scss>
	$myvariable: #FF0 !default;		$myvariable: #FF0 !default;
	</~~code~~>		</syntaxhighlight>
	which means initialise this variable to #FF0 only if it has not been defined already. So because our callback defines variables in the pre SCSS callback - they are available for use anywhere else in our SCSS files.		which means initialise this variable to #FF0 only if it has not been defined already. So because our callback defines variables in the pre SCSS callback - they are available for use anywhere else in our SCSS files.

Line 187:		Line 187:
	<code php>		<code php>
	$THEME->csspostprocess = 'theme_more_process_css';		$THEME->csspostprocess = 'theme_more_process_css';
	</~~code~~>		</syntaxhighlight>

	''theme/more/lib.php''		''theme/more/lib.php''
Line 204:		Line 204:
	return $css;		return $css;
	}		}
	</~~code~~>		</syntaxhighlight>

	So this is replacing all instances of		So this is replacing all instances of
	<code css>		<code css>
	[[setting:customcss]]		[[setting:customcss]]
	</~~code~~>		</syntaxhighlight>
	with the value of the admin setting in all CSS from the theme.		with the value of the admin setting in all CSS from the theme.

Line 217:		Line 217:
	-------------------------*/		-------------------------*/
	[[setting:customcss]]		[[setting:customcss]]
	</~~code~~>		</syntaxhighlight>

	This setting is included in one of the style sheets for the theme.		This setting is included in one of the style sheets for the theme.

← Older revision		Revision as of 05:00, 1 December 2016
Line 1:		Line 1:
	{{Template:Themes}}This document looks at how to create a settings page for your Moodle theme and how to make use of those settings within the CSS and layout files for your theme.		{{Template:Themes}}
			This document looks at how to create a settings page for your Moodle theme and how to make use of those settings within the CSS and layout files for your theme.

	==Before we begin==		==Before we begin==

← Older revision		Revision as of 04:55, 1 December 2016
Line 222:		Line 222:
	== What about an image upload setting? ==		== What about an image upload setting? ==

	Theme photo includes examples of image upload settings. Read [Creating a theme based on boost] for a detailed explanation of how this theme was created including how to add image upload settings and apply them in SCSS.		Theme photo includes examples of image upload settings. Read [[Creating a theme based on boost]] for a detailed explanation of how this theme was created including how to add image upload settings and apply them in SCSS.

	==See also==		==See also==

	* [[Adding theme upgrade code]]		* [[Adding theme upgrade code]]

← Older revision		Revision as of 04:52, 1 December 2016
Line 219:		Line 219:

	This setting is included in one of the style sheets for the theme.		This setting is included in one of the style sheets for the theme.

			== What about an image upload setting? ==

			Image...

	==See also==		==See also==

	* [[Adding theme upgrade code]]		* [[Adding theme upgrade code]]

← Older revision		Revision as of 04:50, 1 December 2016
Line 223:		Line 223:

	* [[Adding theme upgrade code]]		* [[Adding theme upgrade code]]
	* [[Styling and customising the dock]]
	* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=152053 Theme 2.0: Adding a settings page to your theme] forum discussion

← Older revision		Revision as of 04:45, 1 December 2016
Line 205:		Line 205:
	</code>		</code>

	So this is replacing all instances of "[[setting:customcss]]" with the value of the admin setting in all CSS from the theme.		So this is replacing all instances of
			<code css>
			[[setting:customcss]]
			</code>
			with the value of the admin setting in all CSS from the theme.

	''theme/more/style/custom.css''		''theme/more/style/custom.css''

Creating a theme settings page - Revision history

Mudrd8mz: Text replacement - "" to ""

Mudrd8mz: Text replacement - "" to ""

Mudrd8mz: Text replacement - " " to ""

Mudrd8mz: Text replacement - "" to ""

Damyon at 05:00, 1 December 2016

Damyon: /* What about an image upload setting? */

Damyon: /* What about an image upload setting? */

Damyon: /* See also */

Damyon: /* See also */

Damyon: /* Add a setting and use it in SCSS (or less or css) */

Mudrd8mz: Text replacement - "`" to ""`

Mudrd8mz: Text replacement - "`" to ""`

Mudrd8mz: Text replacement - "`" to ""`

`Mudrd8mz: Text replacement - "`" to ""