Creating a theme based on classic - Revision history

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


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

				
				
				
				
				
				← Older revision
				Revision as of 08:16, 15 July 2021
				
Line 361:
Line 361:



''theme/classic/scss/preset/default.scss'' ''theme/classic/scss/preset/default.scss''
<code css> <syntaxhighlight lang="css">
// Import FontAwesome. // Import FontAwesome.
@import "fontawesome"; @import "fontawesome";
Line 375:
Line 375:



''theme/picture/scss/pre.scss'' ''theme/picture/scss/pre.scss''
<code css> <syntaxhighlight lang="css">
// We need larger buttons. // We need larger buttons.
$btn-padding-y:         0.5rem !default; $btn-padding-y:         0.5rem !default;
Line 382:
Line 382:



''theme/picture/scss/post.scss'' ''theme/picture/scss/post.scss''
<code css> <syntaxhighlight lang="css">
// We like our buttons very round. // We like our buttons very round.
.btn { .btn {



Mudrd8mz: Text replacement - "" to ""

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

				
				
				
				
				
				← Older revision
				Revision as of 13:37, 14 July 2021
				
Line 29:
Line 29:
''/theme/picture/version.php'' ''/theme/picture/version.php''



<code php> <syntaxhighlight lang="php">
<?php <?php
// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real. // Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.
Line 95:
Line 95:



''lib.php'' ''lib.php''
<code php> <syntaxhighlight lang="php">
<?php <?php



Line 110:
Line 110:
''config.php'' ''config.php''



<code php> <syntaxhighlight lang="php">
<?php <?php
// This file is part of Moodle - http://moodle.org/ // This file is part of Moodle - http://moodle.org/
Line 318:
Line 318:



''theme/picture/config.php'' ''theme/picture/config.php''
<code php> <syntaxhighlight lang="php">
// This is the function that returns the SCSS source for the main file in our theme. // This is the function that returns the SCSS source for the main file in our theme.
$THEME->scss = function($theme) { $THEME->scss = function($theme) {
Line 328:
Line 328:



''theme/picture/lib.php'' ''theme/picture/lib.php''
<code php> <syntaxhighlight lang="php">
	/** 	/**
  * Returns the main SCSS content.   * Returns the main SCSS content.





Mudrd8mz: Text replacement - "" to ""

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

				
				
				
				
				
				← Older revision
				Revision as of 13:09, 14 July 2021
				
Line 21:
Line 21:
Following this guide you can start creating your own theme. First, we create the folder for the new theme under under "/theme/" folder in the Moodle root directory. Following this guide you can start creating your own theme. First, we create the folder for the new theme under under "/theme/" folder in the Moodle root directory.



<code> <syntaxhighlight lang="php">
/theme/picture/ /theme/picture/
</syntaxhighlight> </syntaxhighlight>



Mudrd8mz: Text replacement - "

" to ""

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

				
				
				
				
				
				← Older revision
				Revision as of 13:09, 14 July 2021
				
Line 62:
Line 62:
''/theme/picture/lang/en/theme_picture.php'' ''/theme/picture/lang/en/theme_picture.php''



<code php> <syntaxhighlight lang="php"><?php
  
<?php 
// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real. // Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.






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

				
				
				
				
				
				← Older revision
				Revision as of 13:05, 14 July 2021
				
Line 23:
Line 23:
<code> <code>
/theme/picture/ /theme/picture/
</code> </syntaxhighlight>



Now we need to add some standard plugin files to our theme. First is version.php Now we need to add some standard plugin files to our theme. First is version.php
Line 56:
Line 56:
// This is the named version. // This is the named version.
$plugin->release = 1.0; $plugin->release = 1.0;
</code> </syntaxhighlight>



We also need a language file so that all our strings can be translated into different languages. The name of this file is the component name of our plugin and it sits in the lang/en/ folder for our plugin. We can include translations of our plugin, but we can also provide translations via the https://lang.moodle.org/ website once our plugin has been published to the plugins database at http://www.moodle.org/plugins/. We also need a language file so that all our strings can be translated into different languages. The name of this file is the component name of our plugin and it sits in the lang/en/ folder for our plugin. We can include translations of our plugin, but we can also provide translations via the https://lang.moodle.org/ website once our plugin has been published to the plugins database at http://www.moodle.org/plugins/.
Line 77:
Line 77:
$string['region-side-pre'] = 'Left'; $string['region-side-pre'] = 'Left';
$string['region-side-post'] = 'Right'; $string['region-side-post'] = 'Right';
</code> </syntaxhighlight>



=== Theme specific files === === Theme specific files ===
Line 106:
Line 106:



// We will add callbacks here as we add features to our theme. // We will add callbacks here as we add features to our theme.
</code> </syntaxhighlight>



Theme config goes in a config.php file. This is one of the most important files in our theme. Once we add this file we will be ready to test our theme for the first time. Theme config goes in a config.php file. This is one of the most important files in our theme. Once we add this file we will be ready to test our theme for the first time.
Line 305:
Line 305:
     )      )
]; ];
</code> </syntaxhighlight>



=== Ready set go! === === Ready set go! ===
Line 325:
Line 325:
     return theme_picture_get_main_scss_content($theme);      return theme_picture_get_main_scss_content($theme);
}; };
</code> </syntaxhighlight>



The variable $THEME->scss is configured to be a callback function that when called returns all the Scss source files from our parent theme and the picture theme. Once the callback function is defined our Theme's lib.php needs to contain the callback function. The variable $THEME->scss is configured to be a callback function that when called returns all the Scss source files from our parent theme and the picture theme. Once the callback function is defined our Theme's lib.php needs to contain the callback function.
Line 358:
Line 358:
     return $pre . "\n" . $scss . "\n" . $post;      return $pre . "\n" . $scss . "\n" . $post;
} }
</code> </syntaxhighlight>



The function theme_picture_get_main_scss_content uses the scss files from classic, the default.scss file from classic contains @import statements to include the files from theme Boost so we can be sure we have all the css we need. The function theme_picture_get_main_scss_content uses the scss files from classic, the default.scss file from classic contains @import statements to include the files from theme Boost so we can be sure we have all the css we need.
Line 372:
Line 372:
// Import Core moodle CSS // Import Core moodle CSS
@import "moodle"; @import "moodle";
</code> </syntaxhighlight>



To complete the setup all we need to do is create the pre.scss and post.scss files that will contain our Sass variables and other Css. The pre.scss file is the file that needs to be loaded first before the files from theme classic are imported. It will contain the variable we configure for things like fonts, colours and spacing. The post.scss file will contain all other custom css. To complete the setup all we need to do is create the pre.scss and post.scss files that will contain our Sass variables and other Css. The pre.scss file is the file that needs to be loaded first before the files from theme classic are imported. It will contain the variable we configure for things like fonts, colours and spacing. The post.scss file will contain all other custom css.
Line 381:
Line 381:
$btn-padding-y:         0.5rem !default; $btn-padding-y:         0.5rem !default;
$btn-padding-x:         1.1rem !default; $btn-padding-x:         1.1rem !default;
</code> </syntaxhighlight>



''theme/picture/scss/post.scss'' ''theme/picture/scss/post.scss''
Line 391:
Line 391:
   font-size: 0.875em;    font-size: 0.875em;
} }
</code> </syntaxhighlight>



You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable! You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable!



Jboulen: /* Getting started */ fix broken link
2019-04-19T08:13:51Z
Getting started:  fix broken link

				
				
				
				
				
				← Older revision
				Revision as of 08:13, 19 April 2019
				
Line 9:
Line 9:
What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle. What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle.



This tutorial is based on the tutorial https://docs.moodle.org/dev/Creating_a_theme_based_on_boost. You can download it or view the source code for it here: https://github.com/bmbrands/moodle-theme_picture This tutorial is based on the tutorial https://docs.moodle.org/dev/Creating_a_theme_based_on_boost. You can download it or view the source code for it here: https://github.com/bmbrands/theme_picture



=== Choosing a name === === Choosing a name ===



Michaelh2: /* Theme specific files */
2019-03-21T07:08:36Z
Theme specific files

				
				
				
				
				
				← Older revision
				Revision as of 07:08, 21 March 2019
				
Line 265:
Line 265:
     // Embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible.      // Embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible.
     'embedded' => array(      'embedded' => array(
         'theme' => 'classic',          'theme' => 'boost',
         'file' => 'embedded.php',          'file' => 'embedded.php',
         'regions' => array()          'regions' => array()



Basbrands: /* Theme specific files */
2019-03-21T07:05:15Z
Theme specific files

				
				
				
				
				
				← Older revision
				Revision as of 07:05, 21 March 2019
				
Line 273:
Line 273:
     // Please be extremely careful if you are modifying this layout.      // Please be extremely careful if you are modifying this layout.
     'maintenance' => array(      'maintenance' => array(
         'theme' => 'classic',          'theme' => 'boost',
         'file' => 'maintenance.php',          'file' => 'maintenance.php',
         'regions' => array(),          'regions' => array(),
Line 286:
Line 286:
     // The pagelayout used when a redirection is occuring.      // The pagelayout used when a redirection is occuring.
     'redirect' => array(      'redirect' => array(
        'theme' => 'boost',
         'file' => 'embedded.php',          'file' => 'embedded.php',
         'regions' => array(),          'regions' => array(),



Fox: Docs for Moodle 3.7 and small improvments
2019-03-06T08:15:39Z
Docs for Moodle 3.7 and small improvments

				
				
				
				
				
				← Older revision
				Revision as of 08:15, 6 March 2019
				
Line 1:
Line 1:
{{Moodle 3.6}} {{Moodle 3.7}}
{{Template:Themes}} {{Template:Themes}}



Line 12:
Line 12:



=== Choosing a name === === Choosing a name ===
Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the moodle.org/plugins can save you a lot of work renaming things later. Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the [https://moodle.org/plugins moodle.org/plugins] can save you a lot of work renaming things later.



Let;s call our new example theme "picture" as we will add some settings to allow "pictures" in various places in Moodle. Let's call our new example theme "picture" as we will add some settings to allow "pictures" in various places in Moodle.



=== Starting files === === Starting files ===
Line 394:
Line 394:
You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable! You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable!



With the preset files in place we can select our theme from the avaible installed themes (If you did not do that already) and purge changes. You should be able to see the Classic 3 column layout and our round buttons. With the preset files in place we can select our theme from the available installed themes (If you did not do that already) and purge changes. You should be able to see the Classic 3 column layout and our round buttons.



=== Adding custom settings to our theme === === Adding custom settings to our theme ===



Basbrands at 18:20, 5 March 2019
2019-03-05T18:20:32Z


				
				
				
				
				
				← Older revision
				Revision as of 18:20, 5 March 2019
				
Line 9:
Line 9:
What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle. What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle.



This tutorial is based on a the tutorial https://docs.moodle.org/dev/Creating_a_theme_based_on_boost. You can download it or view the source code for it here: https://github.com/bmbrands/moodle-theme_picture This tutorial is based on the tutorial https://docs.moodle.org/dev/Creating_a_theme_based_on_boost. You can download it or view the source code for it here: https://github.com/bmbrands/moodle-theme_picture



=== Choosing a name === === Choosing a name ===
Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the moodle.org/plugins can save you a lot of work renaming things later. Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the moodle.org/plugins can save you a lot of work renaming things later.



Lets call our new example theme "brands" as we will add some settings to allow "branding" in various places in Moodle. Let;s call our new example theme "picture" as we will add some settings to allow "pictures" in various places in Moodle.



=== Starting files === === Starting files ===
As a plugin, themes must start with the basic structure of a plugin in Moodle. See https://docs.moodle.org/dev/Tutorial#The_skeleton_of_your_plugin for an overview of the files common to all plugins in Moodle. As a plugin, themes must start with the basic structure of a plugin in Moodle. See https://docs.moodle.org/dev/Tutorial#The_skeleton_of_your_plugin for an overview of the files common to all plugins in Moodle.



Following this guide we can start creating our theme. First we create the folder for the new theme under under "/theme/" folder in the Moodle root directory. Following this guide you can start creating your own theme. First, we create the folder for the new theme under under "/theme/" folder in the Moodle root directory.



<code> <code>
Line 175:
Line 175:
$THEME->prescsscallback = 'theme_picture_get_pre_scss'; $THEME->prescsscallback = 'theme_picture_get_pre_scss';



// Since we are using 2 parent themes the correct location of the layout files needs to be define. For this theme we need the multiple // Since we are using 2 parent themes the correct location of the layout files needs to be defined. For this theme we need the multiple
// column layouts. // column layouts.
$THEME->layouts = [ $THEME->layouts = [
Line 314:
Line 314:



=== Setup your Sass files === === Setup your Sass files ===
Once you have a theme that has been installed into your Moodle setup it is time to start styling it. The core Boostrap is very well suited for customization using Sass variables and overriding componentent. On [https://getbootstrap.com/docs/4.3/getting-started/theming/#variable-defaults Get bootstrap.com] there is some documentation on Sass variables and in theme/boost/scss/boostrap/_variables.scss you will see the full list of variables that can be changed. Once you have a theme that has been installed into your Moodle setup it is time to start styling it. The core Boostrap scss is very well suited for customization using Sass variables and overriding component. On [https://getbootstrap.com/docs/4.3/getting-started/theming/#variable-defaults Get bootstrap.com] there is some documentation on Sass variables and in theme/boost/scss/boostrap/_variables.scss you will see the full list of variables that can be changed.



Before we start the theme needs to be able to return the complete set of Sass files that are required for Moodle and our custom Sass. So as a start we will be editing the config again: Before we start the theme needs to be able to return the complete set of Sass files that are required for Moodle and our custom Sass. So as a start we will be editing the config again:
Line 326:
Line 326:
</code> </code>



The variable $THEME->scss is configured to be a callback function that when called returnes all the Scss source files from our parent theme and the picture theme. Once the callback function is defined our Theme's lib.php needs to contain the callback function. The variable $THEME->scss is configured to be a callback function that when called returns all the Scss source files from our parent theme and the picture theme. Once the callback function is defined our Theme's lib.php needs to contain the callback function.



''theme/picture/lib.php'' ''theme/picture/lib.php''
Line 373:
Line 373:
</code> </code>



To complete the setup all we need to do is create the pre.scss and post.scss files that will contain our Sass variables and other Css. The pre.scss file is the file that needs to be loaded first before the files from theme classic are imported. It will contain the variable we configure for things like fonts, colours and spacing. The post.scss file will contain all other custom css and overrided. To complete the setup all we need to do is create the pre.scss and post.scss files that will contain our Sass variables and other Css. The pre.scss file is the file that needs to be loaded first before the files from theme classic are imported. It will contain the variable we configure for things like fonts, colours and spacing. The post.scss file will contain all other custom css.



''theme/picture/scss/pre.scss'' ''theme/picture/scss/pre.scss''
Line 394:
Line 394:
You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable! You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable!



With the preset files in place we can select our theme from the avaible installed themes (If you did not do that already) and purge changes. You should be able to see the Classic 3 column layout and our round buttons.



Thats it for this tutorial, but there are [[:Category:Themes| more Themes docs]] to browse. === Adding custom settings to our theme ===
 
 
 
 
That's it for this tutorial, but there are [[:Category:Themes| more Themes docs]] to browse.






[[Category:Themes]] [[Category:Themes]]

← Older revision		Revision as of 08:16, 15 July 2021
Line 361:		Line 361:

	''theme/classic/scss/preset/default.scss''		''theme/classic/scss/preset/default.scss''
	<~~code~~ css>		<syntaxhighlight lang="css">
	// Import FontAwesome.		// Import FontAwesome.
	@import "fontawesome";		@import "fontawesome";
Line 375:		Line 375:

	''theme/picture/scss/pre.scss''		''theme/picture/scss/pre.scss''
	<~~code~~ css>		<syntaxhighlight lang="css">
	// We need larger buttons.		// We need larger buttons.
	$btn-padding-y: 0.5rem !default;		$btn-padding-y: 0.5rem !default;
Line 382:		Line 382:

	''theme/picture/scss/post.scss''		''theme/picture/scss/post.scss''
	<~~code~~ css>		<syntaxhighlight lang="css">
	// We like our buttons very round.		// We like our buttons very round.
	.btn {		.btn {

← Older revision		Revision as of 13:37, 14 July 2021
Line 29:		Line 29:
	''/theme/picture/version.php''		''/theme/picture/version.php''

	<~~code~~ php>		<syntaxhighlight lang="php">
	<?php		<?php
	// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.		// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.
Line 95:		Line 95:

	''lib.php''		''lib.php''
	<~~code~~ php>		<syntaxhighlight lang="php">
	<?php		<?php

Line 110:		Line 110:
	''config.php''		''config.php''

	<~~code~~ php>		<syntaxhighlight lang="php">
	<?php		<?php
	// This file is part of Moodle - http://moodle.org/		// This file is part of Moodle - http://moodle.org/
Line 318:		Line 318:

	''theme/picture/config.php''		''theme/picture/config.php''
	<~~code~~ php>		<syntaxhighlight lang="php">
	// This is the function that returns the SCSS source for the main file in our theme.		// This is the function that returns the SCSS source for the main file in our theme.
	$THEME->scss = function($theme) {		$THEME->scss = function($theme) {
Line 328:		Line 328:

	''theme/picture/lib.php''		''theme/picture/lib.php''
	<~~code~~ php>		<syntaxhighlight lang="php">
	/**		/**
	* Returns the main SCSS content.		* Returns the main SCSS content.

← Older revision		Revision as of 13:09, 14 July 2021
Line 21:		Line 21:
	Following this guide you can start creating your own theme. First, we create the folder for the new theme under under "/theme/" folder in the Moodle root directory.		Following this guide you can start creating your own theme. First, we create the folder for the new theme under under "/theme/" folder in the Moodle root directory.

	<~~code~~>		<syntaxhighlight lang="php">
	/theme/picture/		/theme/picture/
	</syntaxhighlight>		</syntaxhighlight>

← Older revision		Revision as of 13:09, 14 July 2021
Line 62:		Line 62:
	''/theme/picture/lang/en/theme_picture.php''		''/theme/picture/lang/en/theme_picture.php''

	<~~code~~ php>		<syntaxhighlight lang="php"><?php

	<?php
	// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.		// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

← Older revision		Revision as of 13:05, 14 July 2021
Line 23:		Line 23:
	<code>		<code>
	/theme/picture/		/theme/picture/
	</~~code~~>		</syntaxhighlight>

	Now we need to add some standard plugin files to our theme. First is version.php		Now we need to add some standard plugin files to our theme. First is version.php
Line 56:		Line 56:
	// This is the named version.		// This is the named version.
	$plugin->release = 1.0;		$plugin->release = 1.0;
	</~~code~~>		</syntaxhighlight>

	We also need a language file so that all our strings can be translated into different languages. The name of this file is the component name of our plugin and it sits in the lang/en/ folder for our plugin. We can include translations of our plugin, but we can also provide translations via the https://lang.moodle.org/ website once our plugin has been published to the plugins database at http://www.moodle.org/plugins/.		We also need a language file so that all our strings can be translated into different languages. The name of this file is the component name of our plugin and it sits in the lang/en/ folder for our plugin. We can include translations of our plugin, but we can also provide translations via the https://lang.moodle.org/ website once our plugin has been published to the plugins database at http://www.moodle.org/plugins/.
Line 77:		Line 77:
	$string['region-side-pre'] = 'Left';		$string['region-side-pre'] = 'Left';
	$string['region-side-post'] = 'Right';		$string['region-side-post'] = 'Right';
	</~~code~~>		</syntaxhighlight>

	=== Theme specific files ===		=== Theme specific files ===
Line 106:		Line 106:

	// We will add callbacks here as we add features to our theme.		// We will add callbacks here as we add features to our theme.
	</~~code~~>		</syntaxhighlight>

	Theme config goes in a config.php file. This is one of the most important files in our theme. Once we add this file we will be ready to test our theme for the first time.		Theme config goes in a config.php file. This is one of the most important files in our theme. Once we add this file we will be ready to test our theme for the first time.
Line 305:		Line 305:
	)		)
	];		];
	</~~code~~>		</syntaxhighlight>

	=== Ready set go! ===		=== Ready set go! ===
Line 325:		Line 325:
	return theme_picture_get_main_scss_content($theme);		return theme_picture_get_main_scss_content($theme);
	};		};
	</~~code~~>		</syntaxhighlight>

	The variable $THEME->scss is configured to be a callback function that when called returns all the Scss source files from our parent theme and the picture theme. Once the callback function is defined our Theme's lib.php needs to contain the callback function.		The variable $THEME->scss is configured to be a callback function that when called returns all the Scss source files from our parent theme and the picture theme. Once the callback function is defined our Theme's lib.php needs to contain the callback function.
Line 358:		Line 358:
	return $pre . "\n" . $scss . "\n" . $post;		return $pre . "\n" . $scss . "\n" . $post;
	}		}
	</~~code~~>		</syntaxhighlight>

	The function theme_picture_get_main_scss_content uses the scss files from classic, the default.scss file from classic contains @import statements to include the files from theme Boost so we can be sure we have all the css we need.		The function theme_picture_get_main_scss_content uses the scss files from classic, the default.scss file from classic contains @import statements to include the files from theme Boost so we can be sure we have all the css we need.
Line 372:		Line 372:
	// Import Core moodle CSS		// Import Core moodle CSS
	@import "moodle";		@import "moodle";
	</~~code~~>		</syntaxhighlight>

	To complete the setup all we need to do is create the pre.scss and post.scss files that will contain our Sass variables and other Css. The pre.scss file is the file that needs to be loaded first before the files from theme classic are imported. It will contain the variable we configure for things like fonts, colours and spacing. The post.scss file will contain all other custom css.		To complete the setup all we need to do is create the pre.scss and post.scss files that will contain our Sass variables and other Css. The pre.scss file is the file that needs to be loaded first before the files from theme classic are imported. It will contain the variable we configure for things like fonts, colours and spacing. The post.scss file will contain all other custom css.
Line 381:		Line 381:
	$btn-padding-y: 0.5rem !default;		$btn-padding-y: 0.5rem !default;
	$btn-padding-x: 1.1rem !default;		$btn-padding-x: 1.1rem !default;
	</~~code~~>		</syntaxhighlight>

	''theme/picture/scss/post.scss''		''theme/picture/scss/post.scss''
Line 391:		Line 391:
	font-size: 0.875em;		font-size: 0.875em;
	}		}
	</~~code~~>		</syntaxhighlight>

	You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable!		You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable!

← Older revision		Revision as of 08:13, 19 April 2019
Line 9:		Line 9:
	What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle.		What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle.

	This tutorial is based on the tutorial https://docs.moodle.org/dev/Creating_a_theme_based_on_boost. You can download it or view the source code for it here: https://github.com/bmbrands/~~moodle-~~theme_picture		This tutorial is based on the tutorial https://docs.moodle.org/dev/Creating_a_theme_based_on_boost. You can download it or view the source code for it here: https://github.com/bmbrands/theme_picture

	=== Choosing a name ===		=== Choosing a name ===

← Older revision		Revision as of 07:08, 21 March 2019
Line 265:		Line 265:
	// Embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible.		// Embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible.
	'embedded' => array(		'embedded' => array(
	'theme' => '~~classic~~',		'theme' => 'boost',
	'file' => 'embedded.php',		'file' => 'embedded.php',
	'regions' => array()		'regions' => array()

← Older revision		Revision as of 07:05, 21 March 2019
Line 273:		Line 273:
	// Please be extremely careful if you are modifying this layout.		// Please be extremely careful if you are modifying this layout.
	'maintenance' => array(		'maintenance' => array(
	'theme' => '~~classic~~',		'theme' => 'boost',
	'file' => 'maintenance.php',		'file' => 'maintenance.php',
	'regions' => array(),		'regions' => array(),
Line 286:		Line 286:
	// The pagelayout used when a redirection is occuring.		// The pagelayout used when a redirection is occuring.
	'redirect' => array(		'redirect' => array(
			'theme' => 'boost',
	'file' => 'embedded.php',		'file' => 'embedded.php',
	'regions' => array(),		'regions' => array(),

← Older revision		Revision as of 08:15, 6 March 2019
Line 1:		Line 1:
	{{Moodle 3.6}}		{{Moodle 3.7}}
	{{Template:Themes}}		{{Template:Themes}}

Line 12:		Line 12:

	=== Choosing a name ===		=== Choosing a name ===
	Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the moodle.org/plugins can save you a lot of work renaming things later.		Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the [https://moodle.org/plugins moodle.org/plugins] can save you a lot of work renaming things later.

	Let;s call our new example theme "picture" as we will add some settings to allow "pictures" in various places in Moodle.		Let's call our new example theme "picture" as we will add some settings to allow "pictures" in various places in Moodle.

	=== Starting files ===		=== Starting files ===
Line 394:		Line 394:
	You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable!		You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable!

	With the preset files in place we can select our theme from the ~~avaible~~ installed themes (If you did not do that already) and purge changes. You should be able to see the Classic 3 column layout and our round buttons.		With the preset files in place we can select our theme from the available installed themes (If you did not do that already) and purge changes. You should be able to see the Classic 3 column layout and our round buttons.

	=== Adding custom settings to our theme ===		=== Adding custom settings to our theme ===

← Older revision		Revision as of 18:20, 5 March 2019
Line 9:		Line 9:
	What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle.		What is a theme? A theme in Moodle is just another type of plugin that can be developed. Themes are responsible for setting up the structure of each page and have the ability to customise the output of any page in Moodle.

	This tutorial is based on a the tutorial https://docs.moodle.org/dev/Creating_a_theme_based_on_boost. You can download it or view the source code for it here: https://github.com/bmbrands/moodle-theme_picture		This tutorial is based on the tutorial https://docs.moodle.org/dev/Creating_a_theme_based_on_boost. You can download it or view the source code for it here: https://github.com/bmbrands/moodle-theme_picture

	=== Choosing a name ===		=== Choosing a name ===
	Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the moodle.org/plugins can save you a lot of work renaming things later.		Your new theme will need a name. Try and think of something short and memorable - and make sure it is not a name that has already been used by someone else. A quick search on the moodle.org/plugins can save you a lot of work renaming things later.

	~~Lets~~ call our new example theme "~~brands~~" as we will add some settings to allow "~~branding~~" in various places in Moodle.		Let;s call our new example theme "picture" as we will add some settings to allow "pictures" in various places in Moodle.

	=== Starting files ===		=== Starting files ===
	As a plugin, themes must start with the basic structure of a plugin in Moodle. See https://docs.moodle.org/dev/Tutorial#The_skeleton_of_your_plugin for an overview of the files common to all plugins in Moodle.		As a plugin, themes must start with the basic structure of a plugin in Moodle. See https://docs.moodle.org/dev/Tutorial#The_skeleton_of_your_plugin for an overview of the files common to all plugins in Moodle.

	Following this guide we can start creating ~~our~~ theme. First we create the folder for the new theme under under "/theme/" folder in the Moodle root directory.		Following this guide you can start creating your own theme. First, we create the folder for the new theme under under "/theme/" folder in the Moodle root directory.

	<code>		<code>
Line 175:		Line 175:
	$THEME->prescsscallback = 'theme_picture_get_pre_scss';		$THEME->prescsscallback = 'theme_picture_get_pre_scss';

	// Since we are using 2 parent themes the correct location of the layout files needs to be ~~define~~. For this theme we need the multiple		// Since we are using 2 parent themes the correct location of the layout files needs to be defined. For this theme we need the multiple
	// column layouts.		// column layouts.
	$THEME->layouts = [		$THEME->layouts = [
Line 314:		Line 314:

	=== Setup your Sass files ===		=== Setup your Sass files ===
	Once you have a theme that has been installed into your Moodle setup it is time to start styling it. The core Boostrap is very well suited for customization using Sass variables and overriding ~~componentent~~. On [https://getbootstrap.com/docs/4.3/getting-started/theming/#variable-defaults Get bootstrap.com] there is some documentation on Sass variables and in theme/boost/scss/boostrap/_variables.scss you will see the full list of variables that can be changed.		Once you have a theme that has been installed into your Moodle setup it is time to start styling it. The core Boostrap scss is very well suited for customization using Sass variables and overriding component. On [https://getbootstrap.com/docs/4.3/getting-started/theming/#variable-defaults Get bootstrap.com] there is some documentation on Sass variables and in theme/boost/scss/boostrap/_variables.scss you will see the full list of variables that can be changed.

	Before we start the theme needs to be able to return the complete set of Sass files that are required for Moodle and our custom Sass. So as a start we will be editing the config again:		Before we start the theme needs to be able to return the complete set of Sass files that are required for Moodle and our custom Sass. So as a start we will be editing the config again:
Line 326:		Line 326:
	</code>		</code>

	The variable $THEME->scss is configured to be a callback function that when called ~~returnes~~ all the Scss source files from our parent theme and the picture theme. Once the callback function is defined our Theme's lib.php needs to contain the callback function.		The variable $THEME->scss is configured to be a callback function that when called returns all the Scss source files from our parent theme and the picture theme. Once the callback function is defined our Theme's lib.php needs to contain the callback function.

	''theme/picture/lib.php''		''theme/picture/lib.php''
Line 373:		Line 373:
	</code>		</code>

	To complete the setup all we need to do is create the pre.scss and post.scss files that will contain our Sass variables and other Css. The pre.scss file is the file that needs to be loaded first before the files from theme classic are imported. It will contain the variable we configure for things like fonts, colours and spacing. The post.scss file will contain all other custom css ~~and overrided~~.		To complete the setup all we need to do is create the pre.scss and post.scss files that will contain our Sass variables and other Css. The pre.scss file is the file that needs to be loaded first before the files from theme classic are imported. It will contain the variable we configure for things like fonts, colours and spacing. The post.scss file will contain all other custom css.

	''theme/picture/scss/pre.scss''		''theme/picture/scss/pre.scss''
Line 394:		Line 394:
	You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable!		You might have noticed the "!default" statement after the variables in our pre.scss file. This means the variable is set if the variable has not been defined before. When inspecting the Bootstrap variables defined in theme/boost/scss/bootstrap/_variables.scss you will see all variable have a "!default" statement meaning we can change any variable!

			With the preset files in place we can select our theme from the avaible installed themes (If you did not do that already) and purge changes. You should be able to see the Classic 3 column layout and our round buttons.

	~~Thats~~ it for this tutorial, but there are [[:Category:Themes\| more Themes docs]] to browse.		=== Adding custom settings to our theme ===




			That's it for this tutorial, but there are [[:Category:Themes\| more Themes docs]] to browse.


	[[Category:Themes]]		[[Category:Themes]]

Creating a theme based on classic - Revision history

Mudrd8mz: Text replacement - "" to ""

Mudrd8mz: Text replacement - "" to ""

Mudrd8mz: Text replacement - "" to ""

Mudrd8mz: Text replacement - " " to ""

Mudrd8mz: Text replacement - "" to ""

Jboulen: /* Getting started */ fix broken link

Michaelh2: /* Theme specific files */

Basbrands: /* Theme specific files */

Fox: Docs for Moodle 3.7 and small improvments

Basbrands at 18:20, 5 March 2019

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

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

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

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

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