Creating a custom theme - Revision history

Andrewnicols: Note about plan not to migrate this page to the new developer resources. See template for more info.

2022-12-31T14:05:17Z

Note about plan not to migrate this page to the new developer resources. See template for more info.

← Older revision		Revision as of 14:05, 31 December 2022
Line 1:		Line 1:
			{{Template:WillNotMigrate}}
	{{Themes}}		{{Themes}}

Worraps: /* Get your new Theme setup */

2022-12-18T23:33:41Z

Get your new Theme setup

← Older revision		Revision as of 23:33, 18 December 2022
Line 19:		Line 19:
	==Get your new Theme setup==		==Get your new Theme setup==

	First, login to your Moodle server, and navigate to the "/theme" directory inside the main Moodle directory. Copy the folder named "/~~standard~~" to an appropriate name for your new theme (avoid spaces or capital letters, e.g. "schoolname"). This will appear as the name of your theme inside the Moodle configuration.		First, login to your Moodle server, and navigate to the "/theme" directory inside the main Moodle directory. Copy the folder named "/classic" to an appropriate name for your new theme (avoid spaces or capital letters, e.g. "schoolname"). This will appear as the name of your theme inside the Moodle configuration.

	If you do not have direct access to the server (e.g. you are working from your own computer) use your file transfer program to download a copy of this folder to your desktop and rename it there.		If you do not have direct access to the server (e.g. you are working from your own computer) use your file transfer program to download a copy of this folder to your desktop and rename it there.

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


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

				
				
				
				
				
				← Older revision
				Revision as of 13:33, 14 July 2021
				
Line 29:
Line 29:
Use code like this in '''/theme/yourtheme/config.php''' Use code like this in '''/theme/yourtheme/config.php'''



<code php> <syntaxhighlight lang="php">
$THEME->sheets = array('user_styles'); $THEME->sheets = array('user_styles');
$THEME->standardsheets = array('styles_layout'); $THEME->standardsheets = array('styles_layout');

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

2021-07-14T13:02:44Z

Text replacement - "</code>" to "</syntaxhighlight>"

← Older revision		Revision as of 13:02, 14 July 2021
Line 34:		Line 34:
	$THEME->parent = 'custom_corners'; // put the name of the theme folder you want to use as parent here.		$THEME->parent = 'custom_corners'; // put the name of the theme folder you want to use as parent here.
	$THEME->parentsheets = array('user_styles');		$THEME->parentsheets = array('user_styles');
	</~~code~~>		</syntaxhighlight>

	you then lose all .css files except '''user_styles.css''', which should be empty, where you start to add CSS as described below.		you then lose all .css files except '''user_styles.css''', which should be empty, where you start to add CSS as described below.

Stronk7: Updating links, credit goes to Tom Keller, from teamdgtl.org

2018-08-10T10:46:38Z

Updating links, credit goes to Tom Keller, from teamdgtl.org

← Older revision		Revision as of 10:46, 10 August 2018
Line 39:		Line 39:

	==Get your colors==		==Get your colors==
	In order to configure your theme, you'll need to know what colors you want to use. You should make a note of which colors you want to use, a full list of universally supported colors is available at [~~http~~://www.w3schools.com/~~css~~/~~css_colornames~~.asp]. Keep in mind that CSS is an exact language - ''DarkGrey'' will work while ''Dark Grey'' will not.		In order to configure your theme, you'll need to know what colors you want to use. You should make a note of which colors you want to use, a full list of universally supported colors is available at [https://www.w3schools.com/colors/colors_names.asp]. Keep in mind that CSS is an exact language - ''DarkGrey'' will work while ''Dark Grey'' will not.

	Here's a diagram what you'll need to choose colors for:		Here's a diagram what you'll need to choose colors for:
Line 103:		Line 103:
	[[Image:Cusomized_Theme.gif\|frame\|center\|Your new theme!]]		[[Image:Cusomized_Theme.gif\|frame\|center\|Your new theme!]]

	Because of the thousands of HTML elements in Moodle it's impossible to account for every possible change you may want to make to your theme. If you are interested in making more advanced changes, it's recommended you download the [http://www.getfirefox.com Firefox] web browser and install the [http://www.getfirebug.com/ Firebug] addon to see the HTML structure of Moodle pages. If you do not know CSS, the [~~http~~://www.w3schools.com/css/default.asp CSS Page] on W3Schools may be a good starting point.		Because of the thousands of HTML elements in Moodle it's impossible to account for every possible change you may want to make to your theme. If you are interested in making more advanced changes, it's recommended you download the [http://www.getfirefox.com Firefox] web browser and install the [http://www.getfirebug.com/ Firebug] addon to see the HTML structure of Moodle pages. If you do not know CSS, the [https://www.w3schools.com/css/default.asp CSS Page] on W3Schools may be a good starting point.

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

Deraadt: Fixing links to dev pages

2011-07-06T01:12:30Z

Fixing links to dev pages

← Older revision		Revision as of 01:12, 6 July 2011
Line 75:		Line 75:
	Install [http://www.mozilla-europe.org/en/products/firefox/ Firefox], with the [https://addons.mozilla.org/en-US/firefox/addon/60 Web Developer Toolbar]. You can now press Shift + CTRL-Y and click something on the page to see what CSS rules apply to it. By putting the same rules into you user_styles.css file with new values, you can change the appearance of that element. CTRL-F will give you information about an elements other properties like ancestors and children.		Install [http://www.mozilla-europe.org/en/products/firefox/ Firefox], with the [https://addons.mozilla.org/en-US/firefox/addon/60 Web Developer Toolbar]. You can now press Shift + CTRL-Y and click something on the page to see what CSS rules apply to it. By putting the same rules into you user_styles.css file with new values, you can change the appearance of that element. CTRL-F will give you information about an elements other properties like ancestors and children.

	An even more powerful Firefox add-on is [http://getfirebug.com/ Firebug]. Please see [[~~Development:~~Firebug]] for more information.		An even more powerful Firefox add-on is [http://getfirebug.com/ Firebug]. Please see [[Firebug]] for more information.

	==Adding a Logo==		==Adding a Logo==
Line 113:		Line 113:
	* [[Custom corners theme]]		* [[Custom corners theme]]
	* [[Chameleon theme]]		* [[Chameleon theme]]
	* [[~~Development:~~Firebug]]		* [[Firebug]]
	* [https://docs.moodle.org/en/Category:Firefox_extensions Category:Firefox_extensions]		* [https://docs.moodle.org/en/Category:Firefox_extensions Category:Firefox_extensions]

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

Deraadt at 08:10, 5 July 2011

2011-07-05T08:10:57Z

Show changes

TimHunt: Redirected page to Themes 2.0

2011-06-24T19:02:53Z

Redirected page to Themes 2.0

← Older revision		Revision as of 19:02, 24 June 2011
Line 1:		Line 1:
	~~This Article needs updating~~		#REDIRECT [[Themes_2.0]]

Tqr: Created page with "This Article needs updating"

2011-06-24T11:12:41Z

Created page with "This Article needs updating"

New page

This Article needs updating

← Older revision		Revision as of 13:33, 14 July 2021
Line 29:		Line 29:
	Use code like this in '''/theme/yourtheme/config.php'''		Use code like this in '''/theme/yourtheme/config.php'''

	<~~code~~ php>		<syntaxhighlight lang="php">
	$THEME->sheets = array('user_styles');		$THEME->sheets = array('user_styles');
	$THEME->standardsheets = array('styles_layout');		$THEME->standardsheets = array('styles_layout');