MoodleDocs - User contributions [en]

Moodle app guide for admins

2017-07-30T20:48:40Z

Tqr: /* Added an example for adding a CSS stylesheet */

{{Mobile}}
==Enable mobile services on your site==
Your site needs to have mobile access enabled so users can use the mobile app.

For sites using https, mobile access is enabled by default in new installations of Moodle 3.0 onwards.

For http sites, mobile access can be enabled by an administrator as follows:

# In ''Administration > Site administration > Mobile app > Mobile settings'' tick the 'Enable web services for mobile devices' checkbox
# Click the button to save changes.

If your site uses a SSL certificate it must be a trusted certificate. For security reasons the app doesn't work with self-signed certificates.

Please, verify that your certificate is valid via: https://www.geocerts.com/ssl_checker (you shouldn't see any warning).

If your site has the /login directory protected (frequently done when using the Shibboleth authentication method), you must enable access to the login/token.php script.

If your sites uses a SSO method (CAS, Shibboleth, LDAP SSO, OAuth...) you must install and configure the [[Moodle Mobile additional features]] plugin. For Moodle 3.2 you can configure this without any additional plugins via the Mobile authentication settings.

== Customise your app theme ==

The app can also retrieve your custom styles from your Moodle site. Since the app is a HTML5 app, you can safely apply any CSS, CSS2 and CSS3 style.

Go to ''Administration > Site administration > Mobile app > Mobile appearance'' and enter in the mobilecssurl field a valid URL pointing to a CSS file containing your custom styles.

The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin).

'''For example:''' ''https://mymoodlesite.com/theme/mytheme/style/mymobileapp.css''

Once the user is logged in the app, remote CSS files for applying your custom styles are regularly retrieved.

Notice that on the first time a user opens the app, he will see the default "orange" style. Your custom styles will be applied once the user has added a site in the app.

For further information, see the dev docs [[:dev:Moodle Mobile Themes|Moodle Mobile Themes]].

If you want your own custom branding for your organization, Moodle offers the The Branded Moodle Mobile app service, please visit https://moodle.com/mobileapp/ for more information.

== Moodle Mobile additional features plugin for old Moodle sites ==

For old Moodle sites it is recommended to install the [[Moodle Mobile additional features]] plugin.

== Notifications ==

You might find them annoying but push notifications keeps you and your users informed and updated on everything about the app. Moodle only send useful and important notifications such as new features or service disruptions.

Enabling push notifications is easy! An administrator can enable it by connecting their Moodle site/s to our free Notifications server available (only) for registered Moodle sites.

An access key can be obtained via Administration > Site administration > Plugins > Message outputs > Mobile Notifications.

The full guide on enabling push notifications can be found here: [[Mobile app notifications]]

== Smart app banners ==

A smart app banner on your Moodle site/s (when viewed in iOS only) lets your users know that there is a mobile app for this site and they can download it to access their learning environments on mobile devices.

This saves you time and resources to communicate that there is Moodle Mobile App available to your users.

To enable smart banners, please complete the following within your Moodle site: Administration > Site administration > Mobile app > appearance'

== Configuring the app from your site ==

In Moodle 3.3 or with the [[Moodle Mobile additional features]] plugin you can easily:
* Disable app functionalities for your site. If there's a feature you don't want to make available via the app you can disable it here.
* Rename app text strings. In this [https://github.com/moodlehq/moodlemobile-phonegapbuild/blob/master/build/lang/en.json link] there is a list of the current app identifiers.
* Add new items in the app's main menu (the side menu).
* Replace the Change site option to "Log out" so that users must enter their credentials on their next access. This is useful for custom mobile apps, as there is no reason for users wanting to switch to a different site.

For accessing those settings:
* In Moodle 3.3 go to Site administration > Mobile features
* In sites with the Moodle Mobile additional features plugin installed, go to Site administration > Plugins > Local plugins > Mobile additional features

==See also==

* [[Moodle Mobile FAQ]] for other administration-related mobile app questions.
* [[:dev: Moodle Mobile Roadmap]]
* [[:dev:Moodle Mobile release notes]]
* [[:dev:Moodle Mobile|Moodle Mobile developer docs]]
* [[Moodle Mobile availability plugin]]
* [[Mobile web services]]

[[es:Moodle Mobile guía para administradores]]
[[de:Moodle Mobile - Anleitung für Administrator/innen]]

Moodle app guide for admins

2017-07-30T20:43:18Z

Tqr: /* Customise your app theme */

{{Mobile}}
==Enable mobile services on your site==
Your site needs to have mobile access enabled so users can use the mobile app.

For sites using https, mobile access is enabled by default in new installations of Moodle 3.0 onwards.

For http sites, mobile access can be enabled by an administrator as follows:

# In ''Administration > Site administration > Mobile app > Mobile settings'' tick the 'Enable web services for mobile devices' checkbox
# Click the button to save changes.

If your site uses a SSL certificate it must be a trusted certificate. For security reasons the app doesn't work with self-signed certificates.

Please, verify that your certificate is valid via: https://www.geocerts.com/ssl_checker (you shouldn't see any warning).

If your site has the /login directory protected (frequently done when using the Shibboleth authentication method), you must enable access to the login/token.php script.

If your sites uses a SSO method (CAS, Shibboleth, LDAP SSO, OAuth...) you must install and configure the [[Moodle Mobile additional features]] plugin. For Moodle 3.2 you can configure this without any additional plugins via the Mobile authentication settings.

== Customise your app theme ==

The app can also retrieve your custom styles from your Moodle site. Since the app is a HTML5 app, you can safely apply any CSS, CSS2 and CSS3 style.

Go to ''Administration > Site administration > Mobile app > Mobile appearance'' and enter in the mobilecssurl field a valid URL pointing to a CSS file containing your custom styles.
'''For example:''' ''https://mymoodlesite.com/theme/mytheme/style/mymobileapp.css''

The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin).

Once the user is logged in the app, remote CSS files for applying your custom styles are regularly retrieved.

Notice that on the first time a user opens the app, he will see the default "orange" style. Your custom styles will be applied once the user has added a site in the app.

For further information, see the dev docs [[:dev:Moodle Mobile Themes|Moodle Mobile Themes]].

If you want your own custom branding for your organization, Moodle offers the The Branded Moodle Mobile app service, please visit https://moodle.com/mobileapp/ for more information.

== Moodle Mobile additional features plugin for old Moodle sites ==

For old Moodle sites it is recommended to install the [[Moodle Mobile additional features]] plugin.

== Notifications ==

You might find them annoying but push notifications keeps you and your users informed and updated on everything about the app. Moodle only send useful and important notifications such as new features or service disruptions.

Enabling push notifications is easy! An administrator can enable it by connecting their Moodle site/s to our free Notifications server available (only) for registered Moodle sites.

An access key can be obtained via Administration > Site administration > Plugins > Message outputs > Mobile Notifications.

The full guide on enabling push notifications can be found here: [[Mobile app notifications]]

== Smart app banners ==

A smart app banner on your Moodle site/s (when viewed in iOS only) lets your users know that there is a mobile app for this site and they can download it to access their learning environments on mobile devices.

This saves you time and resources to communicate that there is Moodle Mobile App available to your users.

To enable smart banners, please complete the following within your Moodle site: Administration > Site administration > Mobile app > appearance'

== Configuring the app from your site ==

In Moodle 3.3 or with the [[Moodle Mobile additional features]] plugin you can easily:
* Disable app functionalities for your site. If there's a feature you don't want to make available via the app you can disable it here.
* Rename app text strings. In this [https://github.com/moodlehq/moodlemobile-phonegapbuild/blob/master/build/lang/en.json link] there is a list of the current app identifiers.
* Add new items in the app's main menu (the side menu).
* Replace the Change site option to "Log out" so that users must enter their credentials on their next access. This is useful for custom mobile apps, as there is no reason for users wanting to switch to a different site.

For accessing those settings:
* In Moodle 3.3 go to Site administration > Mobile features
* In sites with the Moodle Mobile additional features plugin installed, go to Site administration > Plugins > Local plugins > Mobile additional features

==See also==

* [[Moodle Mobile FAQ]] for other administration-related mobile app questions.
* [[:dev: Moodle Mobile Roadmap]]
* [[:dev:Moodle Mobile release notes]]
* [[:dev:Moodle Mobile|Moodle Mobile developer docs]]
* [[Moodle Mobile availability plugin]]
* [[Mobile web services]]

[[es:Moodle Mobile guía para administradores]]
[[de:Moodle Mobile - Anleitung für Administrator/innen]]

Moodle app FAQ

2017-07-30T17:43:44Z

Tqr: /* I can connect with my iPhone but not with my Android phone */

{{Mobile}}
==Students==

===How can I get the Moodle Mobile app?===

The Moodle Mobile app is available for free from Google Play and the Apple Store. See [https://download.moodle.org/mobile/ Moodle Mobile downloads] for links. You can also install the app directly from your mobile device by searching for 'Moodle Mobile' with author/owner 'Moodle Pty Ltd'.

===I can't get the app to work. What do I do?===

The Moodle Mobile app will ONLY work with Moodle sites that have been set up to allow it. Please talk to your Moodle administrator if you have any problems connecting.

===What permissions does the app require?===

The app requires the following permissions:

* Record audio - for uploading to your Moodle site
* Read and modify the contents of your SD card - for content to be downloaded to your SD Card for offline access.
* Network access - to be able to connect with your Moodle site and check if you are connected, and if not to switch to offline mode.
* Run at startup - to receive local notifications even when the app is running in the background.
* Prevent phone from sleeping - to receive push notifications anytime.

===I can't see my course on the app. What do I do?===
Check with your course tutor that you are correctly enrolled.

=== Why can't I upload my assignment on the app?===
Check with your Moodle site administrator.

===Why can't I sometimes access the app or submit anything to it?===
This could be because of interruptions in your internet connection. Wait a while and try again. If you continue to have problems, contact your Moodle site administrator.

===Is there a space limit on my files?===
Assignments will have a size limit which you can see. For other space limit questions, check with your Moodle site administrator.

===Who should I contact for help with the app?===
Your Moodle site administrator can assist you in getting the app to work correctly.

===When are activities completed offline synchronized?===

See [[Moodle Mobile synchronization]].

==Teachers==

===How can I enable videos in my course to be downloaded?===

See the section 'Media download for offline usage' in [[Creating Moodle Mobile friendly courses]].

===Video subtitles are not working===

This may happen in old Android versions (Android < 4.4), in modern Android and iOS versions they should work fine.

===Which course format is it best to use?===

Topics or weekly course format is best suited to mobile devices.

===How do I make YouTube links open automatically in the app?===

Add YouTube links as a [[URL resource]].

===Why can't my students see their courses?===
If you or an administrator have correctly enrolled them in a course, they can see it in their mobile app. If they are correctly enrolled but can still not see their course, ask them to check with your Moodle site administrator.

=== I can't mark assignments in the app?===
Grading assignments is on the [https://docs.moodle.org/dev/Moodle_Mobile_Roadmap roadmap] and will be available shortly.

===What communications tools can I use in the app to engage with my learners?===
See [[Mobile app notifications]]. Chat, forums and messaging are all supported by the app.

===My protected Vimeo videos are not playing in the app===
See this forum discussion with a workaround: https://moodle.org/mod/forum/discuss.php?d=327342

=== I use a Moodle plugin but the app says it is not supported ===
You should contact the plugin developer and point him to this documentation: https://docs.moodle.org/dev/Moodle_Mobile_Remote_addons where it is explained how to add support to plugins in the Mobile app.

There is a list of Moodle plugins supported by the app here: https://moodle.org/plugins/browse.php?list=award&id=6

=== I have problems playing SCORM packages ===
Please refer to [[Moodle Mobile SCORM player]].

=== My quizzess or lessons are not working offline ===

You need to edit the quiz or lesson activity settings and enable the "Allow lesson/quiz to be attempted offline using the mobile app" configuration option.

==Administrators==

=== I can connect with my iPhone but not with my Android phone ===

This usually happens when the site is using https and the certificate is not correctly configured or it is using an old protocol, please use these pages to check this certificate: https://www.geocerts.com/ssl_checker and https://www.ssllabs.com/ssltest/analyze.html

===I can't get the app to work. What can I do?===

Assuming you have enabled mobile services on your site, please check:

# If your site uses an SSL certificate, it must be a trusted certificate, not self-signed. Please use these tools or a similar one to check that your certificate is fine: [https://www.geocerts.com/ssl_checker SSL Checker] and [https://www.ssllabs.com/ssltest/analyze.html SSL Server Test]. All the checks must be ok, including the "Certificate Chain Complete". Otherwise the app might work on iOS but not on Android.
# [[Debugging]] is disabled (in ''Site administration > Development > Debugging'')
# The ADOdb debug option is disabled if you are using the external database auth or enrolment plugin (in ''Plugins > Authentication > External database'' and in ''Plugins > Enrolment > External database'').
# SHA-1 https certificates are not supported anymore in Chrome, this means that the Android version of the app won't work for your site. If your site doesn't work in desktop Chrome or Chromium it won't work in the Android app. See https://blog.chromium.org/2014/09/gradually-sunsetting-sha-1.html for more information
# If you are using IIS check that Anonymous access is not disabled for the /webservice directory.

If you still have a problem, please post in the [https://moodle.org/mod/forum/view.php?id=7798 Moodle for mobile forum].

=== I cannot access with old users, but I can with recently created ones! ===

Please, do a "Purge all caches" via the Moodle administration settings, this will solve the problem.

===I can't view the courses tab as an administrator===

The Moodle Mobile app only displays courses you are enrolled in. If you want to view a course as an admin, you need to enrol in it.

===My Moodle site uses a SSO auth method (Shibboleth, CAS, Google OAuth, etc) and the app is not working===

You must install the [[Moodle Mobile additional features]] plugin. Please, follow all the configuration steps one by one and double check that everything is set-up correctly.

If once installed and configure the app is still not connecting: If your site uses an SSL certificate, it must be a trusted certificate, not self-signed. Please use this tool or a similar one to check that your certificate is fine: [https://www.geocerts.com/ssl_checker SSL Checker]. All the checks must be ok, including the "Certificate Chain Complete".

===SSO is not working with my custom auth plugin===

SSO should work in any plugin if the plugin handles correctly the $SESSION->wantsurl, this is the way SSO works when it is launched via the app:

* It launchs this URL https://yourmoodle/local/mobile/launch.php?service=local_mobile&passport=abc in the device browser (Moodle 3.2 onwards the URL is /tool/mobile instead local/mobile)
* If the user is not logged in, the browser will redirect the user to the login page
* If the auth plugin used implements correctly the handling of the wantsurl session var, once the user has logged in, the browser should redirect back to the https://yourmoodle/local/mobile/launch.php?service=local_mobile&passport=abc URL that will launch the mobile app via the custom URL protocol

Custom auth plugins may be failing in the last step,not redirecting back to local/mobile, this will happen only if the plugin does not support correctly the $SESSION->wantsurl.

The SAML plugin works correctly but some modifications of that plugin may not work if important lines are changed.

===I am having problems requesting an airnotifier access key===

If you have registered your site but are still unable to request an access key, please fill in the [http://goo.gl/forms/WLwkbe8b7c Airnotifier access key manual request form]. (If your site is hosted so you can't obtain your siteidentifier, enter "cannot obtain" in the field.) Your site registration will be checked and you will be sent an access key in a few days if everything is correct.

===Error messages===

==== 'Can not find data record in database table external_functions' ====

This error usually happens due to a bad configuration or setting value in your Moodle site, please check:
# The user quota global setting should be an integer. For more details, see the discussion [https://moodle.org/mod/forum/discuss.php?d=320873 How to enable Moodle Mobile App for all accounts].
# The user "lang" field in the database is set to a correct value and existing language installed in the site. Some times the lang field is set via external systems to incorrect values. Please, note that to fix this you need direct access to the database and your 'user' table.

===='Cannot connect: Verify that you have typed correctly the URL and that your site uses Moodle 2.4 or later'====

Please check:
# Mobile services are enabled for the site.
# The user is entering the correct URL for the site (see FAQ above)
# For https sites, the certificate is valid (see FAQ above)

===='We lost connection; you need to reconnect. Your token is now invalid.' on my custom version of Moodle Mobile ====

Please check:
# You have followed all the steps listed in [[:dev:Moodle Mobile Developing a plugin tutorial|Moodle Mobile Developing a plugin tutorial]]
# You have enabled the moodle/webservice:createtoken capability for the authenticated user

===='No permission to create web service token for the service local_mobile' when attempting to log in as an admin====

You need to create a token for the admin account (only) as follows:

# Go to ''Site administration > Plugins > Web services > Manage tokens''
# Click Add
# Enter the admin username and select 'Moodle Mobile additional features service' (i.e. do NOT leave it as 'Moodle Mobile web service')
# Click the 'Save changes' button.

===='Invalid response value detected' when accessing the site ====

The user quota global setting should be an integer. For more details, see the discussion [https://moodle.org/mod/forum/discuss.php?d=320873 How to enable Moodle Mobile App for all accounts].

===='A required parameter (username) was missing'====

This may happen if your site implements HTTP redirects; the request is redirected by the browser not passing the POST parameters.

Unfortunately, this is something we cannot control in the Mobile app (it can't be handled via JavaScript). For further information, see http://stackoverflow.com/questions/228225/prevent-redirection-of-xmlhttprequest and http://stackoverflow.com/questions/4168784/ajax-redirection-handling

The solution is to change the HTTP redirect and use an HTML page with a meta tag or JavaScript redirect.

===I think I found a bug with the app. Where can I report it?===

# Log in to the [https://tracker.moodle.org/browse/MOBILE Moodle Mobile tracker] (you'll need to [http://tracker.moodle.org/secure/Signup%21default.jspa create a tracker account] if you've not done so previously)
# Check whether the issue has already been reported by doing a [https://tracker.moodle.org/issues/?jql=project%20%3D%20MOBILE search]
# If not, report the bug by clicking the 'Create Issue' link at the top right of the page, selecting 'Moodle Mobile' as the project
# Add a detailed description, then click the Create button
# Attach the following files to the issue by selecting 'Attach Files' in the 'More actions' dropdown menu:
#* 'Device information' - this can be found in the app (''Settings -> Development -> Device info'', you can send yourself this information by email using the email button at the bottom)
#* App Log (''Settings -> Development -> Show Log'', again you can send yourself this information by email)

==Any further questions?==

Please post in the [http://moodle.org/mod/forum/view.php?id=7798 Moodle for mobile forum] on moodle.org.

[[Category:FAQ]]

[[de:Moodle Mobile FAQ]]
[[ca:Moodle Mobile FAQ]]
[[es:Moodle Mobile FAQ]]
[[fr:Moodle pour les mobiles]]
[[ja:モバイルMoodle FAQ]]

Standard themes

2017-07-05T20:43:35Z

Tqr: /* Standard themes */

{{Themes}}

==Standard themes==

Moodle has three standard themes: ''[[Boost theme|Boost]]'' (in 3.2 onwards), ''Clean'', a responsive, bootstrap based theme, and ''[[More theme|More]]'', a theme customisable from within the admin interface.

[[File:CLEAN.png|center|thumb|500px|'Clean']]

Other themes, including themes which were standard in previous versions of Moodle, are available from the [https://moodle.org/plugins/browse.php?list=category&id=3 Themes section of the Moodle plugins directory].

===Example of a customised Boost theme===
[[File:SchoolDemoBoost.png|thumb|center|600px]]

The Moodle School demo site, [http://school.demo.moodle.net Mount Orange],uses standard Boost with customisations as follows:
* An image for the front page and a background image need to be uploaded and referenced in the code.
*'''Front page topic section:'''

<code php><div class="frontpage container-fluid">

<div class="jumbotron jumbotron-fluid" style="background-image: url('YOUR UPLOADED FRONT PAGE IMAGE.jpg');">
<div class="texts">
<h2>YOUR HEADING</h2>
<p class="lead">SENTENCE/TAG LINE</p>
</div>
</div>

<div class="row-fluid">
<div class="fp-block col-md-6">
<h3>SMALLER HEADING</h3>
<p>Paragraph of text</p>
<p class="button"><a class="btn btn-primary" href="BUTTON LINK URL">BUTTON TEXT »</a></p>
</div>
<div class="fp-block col-md-6">
<h3>SMALLER HEADING</h3>
<p>Paragraph of text.</p>
<p class="button"><a class="btn btn-primary" href="BUTTON LINK URL">BUTTON TEXT »</a></p>
</div>
</div>

</div> </code>

'''*Boost theme Advanced settings - Raw initial SCSS:'''
<code php>$brand-primary: #0070a8;
$body-color: #336;
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$breadcrumb-bg: #fff; </code>

'''*Boost theme Advanced settings - Raw SCSS:'''
<code php>body {
background-image: url("YOUR UPLOADED BACKGROUND IMAGE.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
letter-spacing: .3px;
}
h1, h2, h3, h4, h5, h6 {
color: #f98012;
font-weight: normal;
}
.navbar-brand {
display: none;
}
#nav-drawer {
background-color: rgba(236, 238, 239, .9);
}
#page-header.row {
margin-left: -30px;
margin-right: -30px;
}
#page-header .card {
background-color: transparent;
border: none;
margin-bottom: 0;
}
#page-header h1 {
color: #fff;
font-weight: 500;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}
#page-header .breadcrumb {
padding: .50rem 1rem;
}
.block-region .card-block .card-title {
color: #f98012;
font-size: 1.07rem;
font-weight: 400;
}
#page-footer a {
color: #f98012;
}
#page-site-index #page-header {
display:none;
}
#page-site-index #region-main .card.card-block {
padding: 0;
border: 0;
background-color: transparent;
}
#page-site-index #block-region-side-pre {
margin-top: 15px;
}
#page-site-index .label {
padding: 0;
}
#page-site-index .activity > div {
padding: 0;
}
#page-site-index .mod-indent-outer {
padding-left: 0;
}
#page-site-index .contentwithoutlink {
padding-right: 0;
}
.frontpage.container-fluid {
padding: 0;
}
.frontpage .jumbotron {
padding:0;
border-radius:0;
background: transparent no-repeat right bottom / cover;
line-height: 250px;
}
.frontpage .jumbotron .texts {
color: #fff;
letter-spacing: .5px;
background-color: rgba(255, 99, 0, 0.70);
padding: 0 20px;
margin-bottom:20px;
display: inline-block;
vertical-align: bottom;
}
.frontpage .jumbotron h2 {
color: #fff;
font-size: 32px;
font-weight: 300;
text-shadow: 1px 1px 1px #444;
margin-bottom: 0;
margin-top: 10px;
}
.frontpage .jumbotron .lead {
text-shadow: 1px 1px 1px #333;
line-height: 30px;
font-size: 21px;
}
.frontpage .row-fluid {
line-height: 24px;
background-color: #fff;
padding: 10px 20px 20px;
box-sizing: border-box;
}
.frontpage .row-fluid::after {
display: table;
content: "";
clear: both;
line-height: 0;
}
.frontpage .fp-block {
padding: 10px 20px 0;
}
.frontpage h3 {
font-size: 26px;
line-height: 30px;
font-weight: 300;
margin-top: 20px;
margin-bottom: 20px;
}
.frontpage .button {
text-align: right;
}
.empty-region-side-pre.empty-region-side-post #region-main-box,
.empty-region-side-pre.empty-region-side-post #region-main {
width: 100%;
}

#settingsnav.box.block_tree_box.p-y-1 {
padding-top: 0!important;
}</code>

==Theme selector==

An administrator can set a theme for the site in ''Administration > Site administration > Appearance > Themes > Theme selector''.

Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.

Go to ''Administration > Site administration > Appearance > Themes > Theme selector''
*Click on the "Select theme" button next to the type you wish to change
*Scroll down to see the previews of the available themes and click on the "Use theme" button to chose the theme
*The next screen will provide information about the theme. Click "Continue"

Note 1: Moodle caches themes so if you don't immediately see changed settings that you were expecting, click the "Clear theme caches" button at the top of the Theme selector page.

Note 2: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].

==See also==

* [[Boost theme]]
* [[More theme]]
* [[Theme credits]]
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=189573 What counts as a 'legacy' device type?] forum discussion

[[de:Standard-Designs]]
[[es:Temas estándar]]

More theme

2017-07-03T20:31:15Z

Tqr: /* More theme page settings */

{{Themes}}

==Customising the 'More' theme==

[[File:MORE.png|center|thumb|500px|The customisable 'More' theme.]]

The 'More' theme allows administrators to customise it from ''Site administration>Appearance>Themes>More''.

Options are:
*'''Text colour/Link colour''' - these may be selected either by typing in the code or by clicking into the colour picker.
*'''Background colour/Background image''' - a background colour may be selected as above or an image of your choice uploaded. (Note: the image will override the background colour.)
*'''Background repeat/position/fixed''' - decide here how you wish your image to be repeated; its position or if you want it to be fixed to the page.
*'''Main content background colour/Secondary background colour''' - these may be selected either by typing in the code or by clicking into the colour picker. (The secondary background colour includes blocks and the navigation bar.)
*'''Invert navbar''' - checking this will swap the text and background colour of the navigation bar between black and white.
*'''Logo''' - a custom logo may be uploaded here
*'''Custom CSS/Footnote''' - custom CSS and footer text may be added and will be reflected throughout the site.

Pro tip: When specifying colours, you can even use advanced colours with transparency values such as '''rgba(255,255,255,0.8)'''

In the color fields you can put things like this if you want to get fancy:

whitesmoke
#0404E6
rgb(0,255,244)
rgba(0,255,244,0.5)
transparent
currentColor
inherit
hsl(207,38%,47%)
hsla(207,38%,47%,0.8)

[[File:moodle27-orange.png|center|500px|'More' with an orange image backound, a logo and custom colours.]]

'More' with an orange image backound, a logo and custom colours.

===Mount Orange: example of a customised More theme===
The theme on the [http://school.demo.moodle.net School demo site] is based on settings from tracker MDLSITE-3095 and MDLSITE-3245.
{{Note|From Moodle 3.2 upwards, the Mount Orange demo site uses a [[Standard_themes#Example_of_a_customised_Boost_theme|customized Boost theme]]}}.

{|
| [[File:MountOrangeFrontPage.png|thumb|450px|Front page view]]
| [[File:SchoolDemoMore.png|thumb|450px|Course view]]
|}

====More theme page settings====
*Text colour: #595959
*Link colour: #0070a8
*Background colour: #cccccc
*Background image [https://docs.moodle.org/35/en/File:bg6.png bg6.png]
*Background repeat: No repeat
*Background position: Left bottom
*Background fixed: Yes
*Main content background colour: #cccccc
*Secondary background colour: #cccccc
*Invert navbar: No
*Logo: None
*CUSTOM CSS:

body {
background-size: cover;
}
h1, h2, h3, h4, h5, h6 {
color: #f98012;
font-weight: normal;
}
#page-header h1 {
color: #fff;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.block .header h2 {
color: #f98012;
font-weight: normal;
}
#page-footer {
color: #ccc;
}
#page-footer a {
color: #eee;
}

.jschooser .choosercontainer #chooseform .instruction,
.jschooser .choosercontainer #chooseform .typesummary {
background-color: #fff;
}
.choosercontainer #chooseform .selected {
background-color: #fff;
}

#page-site-index #page-header {
display: none;
}
#page-site-index #region-main {
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background-color: transparent;
}
#page-site-index .label {
padding: 0;
}
#page-site-index .activity > div {
padding: 0;
}
#page-site-index .mod-indent-outer {
padding-left: 0;
}
#page-site-index .contentwithoutlink {
padding-right: 0;
}

.frontpage.container-fluid {
padding: 0;
}
.frontpage .hero-unit {
padding:0;
border-radius:0;
background: transparent no-repeat right bottom / cover;
line-height: 250px;
}
.frontpage .hero-unit .texts {
color: #fff;
letter-spacing: .5px;
background-color: rgba(255, 99, 0, 0.70);
padding: 0 20px;
margin-bottom: 20px;
display: inline-block;
vertical-align: bottom;
}
.frontpage .hero-unit h2 {
color: #fff;
font-size: 32px;
font-weight: 200;
text-shadow: 1px 1px 1px #444;
margin-bottom: 0;
}
.frontpage .hero-unit .lead {
text-shadow: 1px 1px 1px #333;
}
.frontpage .row-fluid {
line-height: 24px;
background-color: #fff;
padding: 10px 20px 20px;
box-sizing: border-box;
}
.frontpage .fp-block {
padding: 10px 20px 0;
}
.frontpage h3 {
font-size: 26px;
line-height: 30px;
font-weight: 200;
}
.frontpage .button {
text-align: right;
}

====Front page topic summary settings====
(Note: these settings allow you to have a large image and two text boxes. Upload your banner image via the image icon in the text editor. Switch to code view and copy its URL.)

<nowiki> <div class="frontpage container-fluid">

<div class="hero-unit" style="background-image: url('INSERT THE FULL URL OF YOUR UPLOADED BANNER HERE.jpg');">
<div class="texts">
<h2>SITE TITLE HERE</h2>
<p class="lead">TAG LINE HERE</p>
</div>
</div>
</nowiki>

<nowiki>
<div class="row-fluid">
<div class="fp-block span6">
<h3>LEFT TEXT BOX TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="button"><a class="btn btn-primary" href="#">read more »</a></p>
</div>
</nowiki>

<nowiki>
<div class="fp-block span6">
<h3>RIGHT TEXT BOX TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="button"><a class="btn btn-primary" href="#">read more »</a></p>
</div>
</div>

</div>
</nowiki>
=====Taking it further=====
For more advanced customisations, see the post by Mary Evans: [https://moodle.org/mod/forum/discuss.php?d=267662 Adding marketing spots to the front page.]

[[es:Tema Más]]
[[de:More Design]]

Using TeX Notation

2015-10-13T09:23:27Z

Tqr: Correcting grammar. I just detest abbreviations like 'we'd' instead of 'we would' especially in documents, which are, or should be formal statements.

{{Filters}}
{{Work in progress}}
TeX (pronounced TEK) is a very widespread and popular way of representing Mathematics notation using only characters that you can type on a keyboard (see [https://en.wikipedia.org/wiki/TeX Wikipedia]). This makes it a useful format to use in Moodle, since it can be entered anywhere you can type text, from forum posts to quiz questions.

TeX expressions can be entered in multiple ways:
* typing them directly into texts.
* using the Java-based Dragmath editor in Moodle's TinyMCE editor.
* using the HTML-based equation editor in Moodle's Atto editor (since Moodle 2.7).

Afterwards, TeX expressions are rendered into Mathematics notation:
* using the TeX filter in Moodle, which uses a TeX binary installed on the server to convert expressions into .gif images (or if that is not available, it falls back to a simple built-in mimetex binary).
* using the [[MathJax_filter]] which identifies TeX expressions and uses the Mathjax JS library to render them in browsers at display time (since Moodle 2.7).
* using other third-party solutions.

As you can imagine, the whole field is not as simple as we would like, especially because there are many flavours of TeX and slight variations between tools.

This page focusses only on using TeX in core Moodle. See the links at the bottom of this page for more information on setting up TeX editors and filters, including other tools from the Moodle community that may be suitable for advanced users.

'''WARNING:''' This Wiki environment uses a DIFFERENT TeX renderer to Moodle, especially when it comes to control sequences. For this reason images are sometimes used to represent what it should look like in Moodle. YMMV.

==Language Conventions==

To identify a TeX sequence in your text, surround it with $$ markers. To invoke a particular command or control sequence, use the backslash, \. A typical control sequence looks like:

$$ x\ =\ \frac{\sqrt{144}}{2}\ \times\ (y\ +\ 12) $$
{| class="nicetable"
|-
| [[Image: cfmimetex10.gif|frame|center]]
|-
|Fraction and square root.
|}

Additional spaces can be placed into the equation using the \ without a trailing character.

==Reserved Characters and Keywords==

Most characters and numbers on the keyboard can be used at their default value. As with any computing language, though, there are a set of reserved characters and keywords that are used by the program for its own purposes. TeX Notation is no different, but it does have a very small set of Reserved Characters. This will not be a complete list of reserved characters, but some of these are:

@ # $ % ^ & * ( ) .

To use these characters in an equation just place the \ in front of them like \$ or \%. If you want to use the backslash, just use \backslash. The only exception here seems to be the &, ampersand.

==Superscripts, Subscripts and Roots==

Superscripts are recorded using the caret, ^, symbol. An example for a Maths class might be:

$$ 4^2 \ \times \ 4^3 \ = 4^5 $$
This is a shorthand way of saying:
(4 x 4) x (4 x 4 x 4) = (4 x 4 x 4 x 4 x 4)
or
16 x 64 = 1024.

<math>4^2 \ \times \ 4^3 \ = 4^5</math>

Subscripts are similar, but use the underscore character.

$$ 3x_2 \ \times \ 2x_3 $$

<math>3x_2 \ \times \ 2x_3</math>

This is OK if you want superscripts or subscripts, but square roots are a little different. This uses a control sequence.

$$ \sqrt{64} \ = \ 8 $$

<math>\sqrt{64} \ = \ 8</math>

You can also take this a little further, but adding in a control character. You may ask a question like:

$$ If \ \sqrt[n]{1024} \ = \ 4, \ what \ is \ the \ value \ of \ n? $$

<math>If \ \sqrt[n]{1024} \ = \ 4, \ what \ is \ the \ value \ of \ n?</math>

Using these different commands allows you to develop equations like:

$$ The \sqrt{64} \ \times \ 2 \ \times \ 4^3 \ = \ 1024 $$

<math>The \sqrt{64} \ \times \ 2 \ \times \ 4^3 \ = \ 1024</math>

Superscripts, Subscripts and roots can also be noted in [[Using TeX Notation 4 | Matrices]].

==Fractions==

Fractions in TeX are actually simple, as long as you remember the rules.

$$ \frac{numerator}{denominator} $$ which produces <math>\frac{numerator}{denominator}</math> .

This can be given as:

<math>\frac{5}{10} \ is \ equal \ to \ \frac{1}{2}</math>.

This is entered as:

$$ \frac{5}{10} \ is \ equal \ to \ \frac{1}{2}.$$

With fractions (as with other commands) the curly brackets can be nested so that for example you can implement negative exponents in fractions. As you can see,

$$\frac {5^{-2}}{3}$$ will produce <math>\frac {5^{-2}}{3}</math>

$$\left(\frac{3}{4}\right)^{-3}$$ will produce <math>\left(\frac{3}{4}\right)^{-3}</math> and

$$\frac{3}{4^{-3}}$$ will produce <math> \frac{3}{4^{-3}} </math>

You likely do not want to use $$\frac{3}{4}^{-3}$$ as it produces <math>\frac{3}{4}^{-3}</math>

You can also use fractions and negative exponents in [[Using TeX Notation 4 | Matrices]].

==Brackets==

As students advance through Maths, they come into contact with brackets. Algebraic notation depends heavily on brackets. The usual keyboard values of ( and ) are useful, for example:

<math>d = 2 \ \times \ (4 \ - \ j)</math>

This is written as:

$$ d = 2 \ \times \ (4 \ - \ j) $$

Usually, these brackets are enough for most formulae but they will not be in some circumstances. Consider this:

<math>4x^3 \ + \ (x \ + \ \frac{42}{1 + x^4})</math>

Is OK, but try it this way:

<math>4x^3 \ + \ \left(x \ + \ \frac{42}{1 + x^4}\right)</math>

This can be achieved by:

$$ 4x^3 \ + \ \left(x \ + \ \frac{42}{1 + x^4}\right) $$

A simple change using the \left( and \right) symbols instead. Note the actual bracket is both named and presented. Brackets are almost essential in [[Using TeX Notation 4 | Matrices]].

==Ellipsis==

The Ellipsis is a simple code:

<math>x_1, \ x_2, \ \ldots, \ x_n</math>

Written like:

$$ x_1, \ x_2, \ \ldots, \ x_n $$

A more practical application could be:

Question:
"Add together all the numbers from 1 <math>\ldots</math> 38.
What is an elegant and simple solution to this problem?
Can you create an algebraic function to explain this solution?
Will your solution work for all numbers?"

Answer:
The question uses an even number to demonstrate a mathematical process and generate an algebraic formula.

{| class = "nicetable"
|-
| Part 1:
| Part 2.
| Part 3.
|-
|
<math>1. \ 1 \ + \ 38 \ = \ 39</math>

<math>2. \ 2 \ + \ 37 \ = \ 39</math>

<math>3. \ 3 \ + \ 36 \ = \ 39</math>

<math>\ldots</math>

<math>19. 19 \ + \ 20 \ = \ 39 </math>

<math>\therefore x \ = \ 39 \ \times \ 19 </math>

<math>\therefore x \ = \ 741 </math>

|An algebraic function might read something like:
<math>t = (1 + n) \times n/2 </math>

Where t = total and n = the last number.

|The solution is that, using the largest and the smallest numbers, the numbers are added and then multiplied by the number of different combinations to produce the same result adding the first and last numbers.
The answer must depend on the number, <math>\frac{n}{2}</math> being a whole number. Therefore, the solution will not work for an odd range of numbers, only an even range.

|}

==Symbols==

These are not all the symbols that may be available in TeX Notation for Moodle, just the ones that I have found to work in Moodle.

{| class="nicetable"
|-
| \amalg
| <math>\amalg</math>
| \cup
| <math>\cup</math>
| \oplus
| <math>\oplus</math>
| \times
| <math>\times</math>
|-
|\ast
|<math>\ast</math>
|\dagger
|<math>\dagger</math>
| \oslash
| <math>\oslash</math>
| \triangleleft
| <math>\triangleleft</math>
|-
| \bigcirc
| <math>\bigcirc</math>
| \ddagger
| <math>\ddagger</math>
| \otimes
| <math>\otimes</math>
| \triangleright
| <math>\triangleright</math>
|-
| \bigtriangledown
| <math>\bigtriangledown</math>
| \diamond
| <math>\diamond</math>
| \pm
| <math>\pm</math>
| \odot
| <math>\odot</math>
|-
| \bigtriangleup
| <math>\bigtriangleup</math>
| \div
| <math>\div</math>
| \ominus
| <math>\ominus</math>
| \wr
| <math>\wr</math>
|-
| \circ
| <math>\circ</math>
| \wedge
| <math>\wedge</math>
| \vee
| <math>\vee</math>
| \sqcup
| <math>\sqcup</math>
|-
| \leq
| <math>\leq</math>
| \geq
| <math>\geq</math>
| \equiv
| <math>\equiv</math>
| \prec
| <math>\prec</math>
|-
| \succ
| <math>\succ</math>
| \sim
| <math>\sim</math>
| \perp
| <math>\perp</math>
| \preceq
| <math>\preceq</math>
|-
| \succeq
| <math>\succeq</math>
| \simeq
| <math>\simeq</math>
| \mid
| <math>\mid</math>
| \ll
| <math>\ll</math>
|-
| \gg
| <math>\gg</math>
| \asymp
| <math>\asymp</math>
| \parallel
| <math>\parallel</math>
| \subset
| <math>\subset</math>
|-
| \supset
| <math>\supset</math>
| \subseteq
| <math>\subseteq</math>
| \supseteq
| <math>\supseteq</math>
| \approx
| <math>\approx</math>
|-
| \neq
| <math>\neq</math>
| \ni
| <math>\ni</math>
| \notin
| <math>\notin</math>
| \in
| <math>\ni</math>
|-
| \vdash
| <math>\vdash</math>
| \dashv
| <math>\dashv</math>
| \bullet
| <math>\bullet</math>
| \cdot
| <math>\cdot</math>
|}

==Arrows==

{| class="nicetable"
|-
| \leftarrow
| <math> \leftarrow</math>
| \longleftarrow
| <math> \longleftarrow</math>
| \Leftarrow
| <math> \Leftarrow</math>
| \Longleftarrow
| <math> \Longleftarrow</math>
|-
| \rightarrow
| <math> \rightarrow</math>
| \longrightarrow
| <math> \longrightarrow</math>
| \Rightarrow
| <math> \Rightarrow</math>
| \Longrightarrow
| <math> \Longrightarrow</math>
|-
| \uparrow
| <math> \uparrow</math>
| \Uparrow
| <math> \Uparrow</math>
| \downarrow
| <math> \downarrow</math>
| \Downarrow
| <math> \Downarrow</math>
|-
| \leftrightarrow
| <math> \leftrightarrow</math>
| \longleftrightarrow
| <math> \longleftrightarrow</math>
| \updownarrow
| <math> \updownarrow</math>
| \Updownarrow
| <math> \Updownarrow</math>
|-
| \Leftrightarrow
| <math> \Leftrightarrow</math>
| \Longleftrightarrow
| <math> \Longleftrightarrow</math>
| \leftrightharpoons
| <math> \rightleftharpoons</math>
| \Im
| <math> \Im</math>
|-
| \nearrow
| <math> \nearrow</math>
| \nwarrow
| <math> \nwarrow</math>
| \swarrow
| <math> \swarrow</math>
| \searrow
| <math> \searrow</math>

|}

==Delimiters and Maths Constructs==

NOTE: Most delimiters and constructs need additional parameters for them to appear appropriately.

{| class="nicetable"
|-
| \{x
| <math> \{x </math>
| x | \}
| <math>x | \} </math>
| \rangle
| <math> \rangle </math>
| \langle
| <math> \langle </math>
|-
| \angle
| <math> \angle </math>
| \=
| <math> \| </math>
| \sqrt{ab}
| <math> \sqrt{ab}</math>
| \sqrt[n]{ab}
| <math> \sqrt[n]{ab}</math>
|-
| \frac{ab}{cd}
| <math> \frac{ab}{cd}</math>
| \backslash
| <math> \backslash</math>
| \widehat{ab}
| <math> \widehat{ab}</math>
| \$
| <math> \$ </math>
|-
| \overline{ab}
| <math> \overline{ab}</math>
| \underline{ab}
| <math> \underline{ab}</math>
| \therefore
| <math> \therefore</math>
| \ddots
| <math> \ddots</math>
|-
| \%
| <math> \%</math>
| \#
| <math> \# </math>
| \vdots
| <math> \vdots</math>
| \emptyset
| <math> \emptyset</math>
|}
WARNINGS: The & character in LaTeX usually requires a backslash, \. In TeX Notation for Moodle, apparently, it does not. Other packages, AsciiMath, may use it differently again so be careful using it. The copyright character may use the MimeTeX charset, and produces a copyright notice for John Forkosh Associates who provided a lot of the essential packages for the TeX Notation for Moodle, so I understand. I have been, almost reliably, informed that a particular instruction will produce a different notice though .:)

There are also a number of characters that can be used in TeX Notation for Moodle but do not render in this page:

{| class="nicetable"
|-
| [[Image: cfmimetex08.png|frame|left]]
| Larger \left(x and \right) brackets
|-
|[[Image: cfmimetex06.gif|frame|left]]
| \widetilde{ab}
|-
|[[Image: cfmimetex09.gif|frame|left]]
| \textdegree or (50)^\circ
|}

==Greek Letters==

{| class="nicetable"
|-
| <math>\alpha</math>
| \alpha
| <math>\beta</math>
| \beta
| <math>\gamma</math>
| \gamma
|-
| <math>\delta</math>
| \delta
| <math>\epsilon</math>
| \epsilon
| <math>\zeta</math>
| \zeta
|-
| <math>\eta</math>
| \eta
| <math>\theta</math>
| \theta
| <math>\iota</math>
| \iota
|-
| <math>\kappa</math>
| \kappa
| <math>\lambda</math>
| \lambda
| <math>\mu</math>
| \mu
|-
| <math>\xi</math>
| \xi
| <math>\pi</math>
| \pi
| <math>\rho</math>
| \rho
|-
| <math>\sigma</math>
| \sigma
| <math>\tau</math>
| \tau
| <math>\upsilon</math>
| \upsilon
|-
| <math>\phi</math>
| \phi
| <math>\chi</math>
| \chi
| <math>\psi</math>
| \psi
|-
| <math>\omega</math>
| \omega
| <math>\Omega</math>
| \Omega
| <math>\Theta</math>
| \Theta
|-
| <math>\Delta</math>
| \Delta
| <math>\Pi</math>
| \Pi
| <math>\Phi</math>
| \Phi
|-
| <math>\Gamma </math>
| \Gamma
| <math>\Lambda </math>
| \Lambda
| <math>\Sigma </math>
| \Sigma
|-
| <math>\Psi </math>
| \Psi
| <math>\Xi </math>
| \Xi
| <math>\Upsilon</math>
| \Upsilon
|-
| <math>\vartheta </math>
| \vartheta
| <math>\varrho </math>
| \varrho
| <math>\varphi </math>
| \varphi
|-
| <math>\varsigma </math>
| \varsigma
|}

'''Notable Exceptions'''

Greek letter omicron (traditionally, mathemeticians don't make much use of omicron due to possible confusion with zero). Simply put, lowercase omicron is an "o" redered as <i>o</i>. But note \omicron may now work with recent TeX implementations including MathJax.

At the time of writing, these Greek capital letters cannot be rendered by TeX Notation in Moodle:

Alpha, Beta, Zeta, Eta, Tau, Chi, Mu, Iota, Kappa and Epsilon.

TeX methematics adopts the convention that lowercase Greek symbols are displayed as italics whereas uppercase Greek symbols are displayed as upright characters. Therefore, the missing Greek capital letters can simply be represented by the \mathrm{ } equivalent

<math>\mathrm{A, B, Z, H, T, X, M, I, K, E}</math>

==Boolean algebra==

There are a number of different conventions for representing Boolean (logic) algebra. Common conventions used in computer science and electronics are detailed below:

Negation, NOT, ¬, !, ~, <sup>−</sup>
\lnot, !, \sim, \overline{ }
Conjunction, AND, ∧, <math>\cdot</math>
\land, \wedge, \cdot
Dysjunction, OR, ∨, +,
\lor, \vee, +
Exclusive dysjunction, XOR ⊻, ⊕
\veebar, \oplus
Equivalence, If and only if, Iff, ≡, ↔, ⇔
\equiv, \leftrightarrow \iff

Example: two representations of De Morgan's laws:

<math>A \cdot B = \overline{\overline{A} + \overline{B}}</math>
$$ A \cdot B = \overline{\overline{A} + \overline{B}} SS

<math>(A \land B) \equiv \lnot(\lnot{A} \lor \lnot{B})</math>
$$ (A \land B) \equiv \lnot(\lnot{A} \lor \lnot{B}) $$

==Fonts==

To use a particular font you need to access the font using the same syntax as demonstrated above.

A math calligraphic font:

<math>\mathcal{ABCDEFGHIJKLMNOPQRSTUVXYZ}</math>

or

$$ \mathcal{ABCDEFGHIJKLMNOPQRSTUVXYZ}$$

Blackboard bold, a Castellar type font:

<math>\mathbb{ABCDEFGHIJKLMNOPQRSTUVXYZ}</math>

or

$$ \mathbb{ABCDEFGHIJKLMNOPQRSTUVXYZ}$$

Often used in number theory. For example: <math>\mathbb{N}</math> = set of natural numbers including 0 {0, 1, 2, 3, ...}, <math>\mathbb{Z}</math> = set of integers {-..., -3, -2, -1, 0, 1, 2, 3, ... }, <math>\mathbb{Q}</math> = set of rational numbers, including integers, <math>\mathbb{R}</math> = set of real numbers, which includes the natural numbers, rational numbers and irrational numbers.

Fraktur, an Old English type font:

<math>\mathfrak{ABCDEFGHIJKLMNOPQRSTUVXYZ}</math>

or

$$ \mathfrak{ABCDEFGHIJKLMNOPQRSTUVXYZ}$$

This is different in Tex Notation in Moodle than it is for other, full, TeX packages.

An italic font:

<math>\mathit{ABCDEFGHIJKLMNOPQRSTUVXYZ}</math>

or

$$ \mathit{ABCDEFGHIJKLMNOPQRSTUVXYZ} $$

A normal, upright non-italic, Roman font:

<math>\mathrm{ABCDEFGHIJKLMNOPQRSTUVXYZ}</math>

or

$$ \mathrm{ABCDEFGHIJKLMNOPQRSTUVXYZ} $$
A bold-face font:

<math>\mathbf{ABCDEFGHIJKLMNOPQRSTUVXYZ}</math>

or

$$ \mathbf{ABCDEFGHIJKLMNOPQRSTUVXYZ} $$

==Size of displays==

The default size is rendered slightly larger than normal font size. TeX Notation in Moodle uses eight different sizes ranging from "tiny" to "huge". However,these values seem to mean different things and are, I suspect, dependent upon the User's screen resolution. The sizes can be noted in four different ways:

{| class="nicetable"
|-
| \fontsize{0} to \fontsize{7}
| $$\fontsize{2} x \ = \ \frac{\sqrt{144}}{2} \ \times \ (y \ + \ 12)$$
| [[Image:cfmimetex10.gif|left]]
|-
| \fs{0} to \fs{7}
| $$\fs{4} x \ = \ \frac{\sqrt{144}}{2} \ \times \ (y \ + \ 12)$$
| [[Image:cfmimetex10.gif|left]]
|-
| \fs0 to \fs7
| $$\fs6 x \ = \ \frac{\sqrt{144}}{2} \ \times \ (y \ + \ 12)$$
| [[Image:cfmimetex11c.gif|left]]
|-
| As well, you can use \tiny \small
\normalsize \large \Large
\LARGE \huge \Huge
| $$\normalsize x \ = \ \frac{\sqrt{144}}{2} \ \times \ (y \ + \ 12)$$
| [[Image:cfmimetex11d.gif|left]]
|}

It appears that TeX Notation in Moodle now allows \fs6, \fs7, \huge and \Huge to be properly rendered.

==Colour==

Unlike many scripting languages, we only need to name the colour we want to use. You may have to experiment a little with colours, but it will make for a brighter page. Once named, the entire statement will appear in the colour, and if you mix colours, the last named colour will dominate. Some examples:

{| class="nicetable"
|-
| $$ \red x \ = \ \frac{\sqrt{144}}{2} \ \times \ (y \ + \ 12) $$
| [[Image: cfmimetex30a.gif|right]]
|-
| $$ \blue x \ = \ \frac{\sqrt{144}}{2} \ \times \ (y \ + \ 12) $$
| [[Image: cfmimetex30b.gif|right]]
|-
| $$ \green x \ = \ \frac{\sqrt{144}}{2} \ \times \ (y \ + \ 12) $$
| [[Image: cfmimetex30c.gif|right]]
|-
| $$ \red x \ = \ \frac{\sqrt{144}}{2}$$ $$ \times $$
$$\green (y \ + \ 12) $$ $$ \ = $$ $$ \ \blue 6^3 $$
| [[Image: cfmimetex30d.gif|right]]
|}

Moodle 2.2 note: You may find this doesn't work for you. You can try to add "\usepackage{color}" to your tex notation setting "LaTeX preamble" (under Site adminstration/Plugins/Filters/TeX notation)and then use this new syntax: $$ \color{red} x \ = \ \frac{\sqrt{144}}{2} \ \times \ (y \ + \ 12) $$

You may note this last one, it is considerably more complex than the previous for colours. TeX Notation in Windows does not allow multicoloured equations, if you name a number of colours in the equation, only the last named will be used.

==Geometric Shapes==

There are two ways to produce geometric shapes, one is with circles and the other is with lines. Each take a bit of practice to get right, but they can provide some simple geometry. It may be easier to produce the shapes in Illustrator or Paint Shop Pro or any one of a number of other drawing packages and use them to illustrate your lessons, but sometimes, some simple diagrams in Moodle will do a better job.

==Circles==

Circles are easy to make.

{| class="nicetable"
|-
| [[Image:cfmimetex20.gif|left]]
| Circles are easily created, and only needs a number to determine how large the circle is.
To create the circle use $$ \circle(150) $$. This makes a circle of 150 pixels in diameter.

|}

==Creating Arcs==

Arcs are also easy to produce, but require some additional parameters. The same code structure used in circles create the basic shape, but the inclusion of a start and end point creates only the arc. However, notice where the 0 point is, not at the true North, but rather the East and run in an anti-clockwise direction.

{| class="nicetable"
|-
| [[Image:cfmimetex21a.gif|left]]
| $$ \circle(120;90,180)$$
| [[Image:cfmimetex21b.gif|left]]
| $$ \circle(120;0,90)$$
|-
| [[Image:cfmimetex21c.gif|left]]
| $$ \circle(120;180,270)$$
| [[Image:cfmimetex21d.gif|left]]
| $$ \circle(120;270,360)$$
|}

This structure breaks down into the \circle command followed by the diameter, not the radius, of the circle, followed by a semi-colon, then the demarcation of the arc, the nomination of the start and end points in degrees from the 0, East, start point. Note that the canvas is the size of the diameter nominated by the circle's parameters.

==The \picture Command==

Using circles and arcs as shown above is somewhat limiting. The \picture command allows you to use a frame in which to build a picture of many layers. Each part of the picture though needs to be in its own space, and while this frame allows you to be creative, to a degree, there are some very hard and fast rules about using it.

All elements of a picture need to be located within the picture frame. Unexpected results occur when parts of an arc, for example, runs over the border of the frame. (This is particularly true of lines, which we will get to next, and the consequences of that overstepping of the border can cause serious problems.)

The \picture command is structured like:
\picture(100){(50,50){\circle(200)}}
\command(size of frame){(x co-ordinate, y co-ordinate){\shape to draw(size or x co-ordinate, y co-ordinate)})

'''NOTE:''' The brace is used to enclose each set of required starting point coordinates. Inside each set of braces, another set of braces is used to isolate each set of coordinates from the other, and those coordinates use their proper brackets and backslash. Count the opening and closing brackets, be careful of the position,

{| class="nicetable"
|-
| [[Image:cfmimetex24a.gif|left]]
| $$ \picture(100){(50,50){\circle(200)}}&&

The picture frame brings elements together that you may not otherwise see.

Because of the frame size of 100px and the centre point of the circle in the mid-point of the frame, the 200px circle will be squashed. Unexpected results occur when sizes are not correct.
| [[Image:cfmimetex24b.gif|left]]
|
Using the picture frame, you can layer circles
and lines over each other, or they can intersect.

$$ \picture(100){(50,50){\circle(99)} (50,50){\circle(80)}} $$
|-
| [[Image:cfmimetex24c.gif|left]]
| You may want to see an image of a circle with a dot in the middle.
You may have to try to place the centre dot correctly , but the
ordering of the elements in the image may have an impact.

$$ \picture(100){(48,46){\bullet}(50,50){\circle(99)}} $$
| [[Image:cfmimetex24d.gif|left]]
| Using the same ideas as above, you can make semi-circles.

$$\picture(150){(50,50){\circle(100;0,180)}(100,50){\circle(100;180,360)}}$$
|}

==Lines==

----

'''Warning:''' Drawing lines in TeX Notation in Moodle is an issue, go to the [[Using_TeX_Notation#Reserved_Characters_and_Keywords| Using Text Notation]] for more information. If the line is not noted properly then the parser will try to correctly draw the line but will not successfully complete it. This means that every image that needs be drawn will be drawn until it hits the error. When the error is being converted, it fails, so no subsequent image is drawn. Be careful and make sure your line works BEFORE you move to the next problem or next image.

----
{| class="nicetable"
|-
| [[Image: cfmimetex26.gif|frame|left| a couple of lines]]
| $$\red \picture(200){(20,0){ \line(180,0)}{(20,180){\line(180,0}$$

The structure of the picture box is that the \picture(200) provides a square image template.

The (20,0) provides the starting coordinates for any line that comes after. In this case the start point is at 20pixels in the x axis and 0 pixels in the y axis. The starting point for all coordinates, 0,0, is the bottom left corner and they run in a clockwise manner. '''Do not confuse this with arcs.'''

The \line(180,0) determines the length and inclination of the line. In this case, the inclination is 0 and the length is 180px.

These are enclosed in braces, all inside one set of braces owned by the \picture() control sequence.

The next set of commands are the same, that is, the (20,200) are the coordinates of the next line. The x co-ordinate is the 20, that is the distance to the right from the 0 point. The y co-ordinates is the distance from the bottom of the image. Whereas the first line started and ran on the bottom of the picture frame, the y co-ordinate starts at the 200 pixel mark from the bottom of the image. The line, at 180 pixels long and has no y slope. This creates a spread pair of parallel lines.
| [[Image: cfmimtex27.gif|thumb|right|150px|\picture explained]]
|}

While this explains the structure of a line, there is a couple of elements that you need to go through to do more with them.

==Squares and Rectangles==
Drawing squares and rectangles is similar, but only slightly different.

There should be a square box tool, and there is, but unless it has something inside it, it does not display. It is actually easier to make a square using the \line command.

{| class="nicetable"
|-
| [[Image: line03.gif|left]]
|This box is constructed using:
$$ \picture(250){(10,10){\line(0,230)}(10,10){\line(230,0)}(240,10){\line(0,230)}(10,240){\line(230,0)}}$$
It is a 250 pixel square box with a 230 pixel square inside it.
| [[Image: line04.gif|left]]
|This box is different in that is has the equal length indicators that are used in a square.
$$ \picture(250){(10,10){\line(0,230)}
(5,120){\line(10,0)}
(10,10){\line(230,0)}
(120,5){\line(0,10)}
(240,10){\line(0,230)}
(235,120){\line(10,0)}
(10,240){\line(230,0)}
(120,235){\line(0,10)}}$$
|-
| [[Image: line05.gif|left]]
| The rectangle then becomes the same thing, but with one side shorter. For a portrait canvas it would be:
$$ \picture(250){(10,10){\line(0,230)}(10,10){\line(150,0)}(160,10){\line(0,230)}(10,240){\line(150,0)}}$$
| [[Image: line06.gif|left]]
|The rectangle can also produce a landscape shape:
$$ \picture(250){(10,10){\line(0,160)}(10,10){\line(230,0)}(240,10){\line(0,160)}(10,170){\line(230,0)}}$$
|}

==Controlling Angles==

Controlling angles is a little different. They involve a different perception, but not one that is unfamiliar. Consider this:

We have a point from which we want to draw a line that is on an angle. The notation used at this point can be positive, positive or positive, negative or negative, positive or negative, negative. Think of it like a number plane or a graph, using directed numbers. The 0,0 point is in the centre, and we have four quadrants around it that give us one of the previously mentioned results.

{| class="nicetable"
|-
| rowspan="4"|[[Image:co-ordquadrants.png|left]]
| [[Image:line06a.gif|left]] $$\picture(100){(50,50){\line(40,45)}}$$,
a positive x and positive y
|-
| [[Image:line06b.gif|left]]$$\picture(100){(50,50){\line(-40,45)}}$$
a negative x and positive y
|-
| [[Image:line06c.gif|left]]$$\picture(100){(50,50){\line(-40,-45)}}$$
a negative x and negative y
|-
| [[Image:line06d.gif|left]]$$\picture(100){(50,50){\line(40,-45)}}$$
a positive x and a negative y
|}

Essentially, what these points boil down to is that anything above the insertion point is a positive on the y axis, anything below is a negative. Anything to the left of the insertion point is a negative while everything to the right is a positive.

{| class="nicetable"
|-
|[[Image:line06e.gif|left]]
| $$\picture(100){(50,50){\line(40,45)}(50,50){\line(-40,45)}(50,50){\line(-40,-45)}(50,50){\line(40,-45)}}$$

The co-ordinate alignment process in TeX is not that good that you can use one set of co-ords as a single starting point for all lines. The layering of each object varies because of the position of the previous object, so each object needs to be exactly placed.

This co-ord structure has a great deal of impact on intersecting lines, parallel lines and triangles.
|}

==Intersecting Lines==

You can set up an intersecting pair easily enough, using the \picture control sequence.

{| class="nicetable"
|-
| [[Image:cfmimetex31.gif|left]]
| $$ \picture(200){(10,0){\line(150,150)} (0,130){\line(180,-180)}} $$

The lines that are drawn can be labeled.

$$ \picture(200){(10,0){\line(150,150)}(0,130){\line(180,-180)}
(0,10){A}(0,135){B}(140,0){C}(140,150){D}(62,80){X}} $$

To produce another image.
| [[Image:cfmimetex32.gif|right]]
|-
| colspan="3" style="text-align: center;"| To which you may want to ask the question:
$$The \ \angle \ of \ AXB \ is \ 72\textdegree. \ What \ is \ the \ value \ of \ \angle BXD? $$
[[Image: cfmimetex32a.gif|center]]

NOTE: Labeling this image, above-right, turned out to be fairly simple. Offsetting points by a few pixels at the start or end points of the lines proved a successful strategy. The X point proved a little more problematic, and took a number of adjustments before getting it right. Experience here will help.
|-
| colspan="2"| With labels the drawing can become a little more like your traditional geometric drawing, but the devil is in the details. The parallel markers need to be placed properly, and that is where experience really comes into it. On lines that are vertical or horizontal, you can get away with using the > or < directly from the keyboard, or the <math>\gg</math> or <math>\ll</math> symbols. In either case, you need to position them properly.

The code:
$$\picture(200){(15,45){\line(170,0)} (15,30){c}(170,28){d}(15,160){\line(170,0)}(15,145){e}(180,143){f}(50,20){\line(110,175)}(58,20){a}(140,185){b}(42,32){\kappa}(53,48){\beta}
(150,165){\kappa}
(90,38){\gg}(80,153){\gg}
}$$
| [[Image:line10.gif|right]]
|}

==Lines and Arcs==

Combining lines and arcs is a serious challenge actually, on a number of levels. For example lets take an arc from the first page on circles.
{| class="nicetable"
|-
| [[Image: cfmimetex21a.gif|left]]
| Fairly innocuous of itself, but when we start to add in elements, it changes dramatically.

$$ \circle(120;90,180) $$
|-
| [[Image: line12.gif|left]]
| $$\picture(150){(75,75){\circle(120;90,180)}(75,75){\line(-70,0)}(75,75){\line(0,75)}} $$
All elements in this drawing start in the same place. Each is layered, and properly placed on the canvas, and using the same co-ord to start makes it easy to control them. No matter the size of the arc, intersecting lines can all be drawn using the centre co-ords of the arc.
|}

==Triangles ==

Of all the drawing objects, it is actually triangles that present the most challenge. For example:

{|
|-
| [[Image:line13.gif|left]]
$$\picture(350){(10,10){\line(0,320)}(10,330){\line(330,0)}(10,10){\line(330,320)}}$$
|This is a simple triangle, one that allows us to establish a simple set of rules for the sides. The vertical always has an x=0 co-ord and the horizontal always has a y=0 co-ord.

In this case with an x value of 330 on the horizontal, and a y value of 320 on the vertical, the hypotenuse should then have a value of x=340, and the y=330, but not so, they actually have an x=330 and a y=320.

There is no need to add the starting point co-ords to the x and y values of the line.
| [[Image:line14.gif|right]]
$$picture(350){(10,10){\line(330,0)}(340,10){\line(0,320)}(340,330){\line(-330,-320)}}$$

|}

This triangle has been developed for a Trigonometry page - but the additional notation should provide insight into how you can use it.

{| class="nicetable"
|-
| [[Image:line16.gif|left]]
| This is a labeled image, but it has an \fbox in it with its little line. With some effort, it could be replaced with two intersecting short lines.
$$\picture(350,150){(25,25){\line(300,0)}(325,25){\line(0,110)}(25,25){\line(300,110)}(309,25){\fbox{\line(5,5)}}
(307,98){\theta}(135,75){\beta}(150,5){\alpha}(335,75){\epsilon}}$$
|}

{| class="nicetable"
|-
| The triangle shows like:
[[Image:trig01.gif|left]]
|We use the different elements of the triangle to identify those things we need to know about a right-angled triangle.

The hypotenuse is always the side that is opposite the right angle. The longest side is always the Hypotenuse.

To identify the other elements of the triangle we look for the sign <math>\theta</math>. <math>\Theta</math> is the starting point for naming the other sides.

The side that is opposite <math>\angle \theta</math> is known as the Opposite.

The side that lies alongside <math>\angle \theta</math> is known as the Adjacent side.

To determine which is which, draw a line that bisects <math>\angle \theta</math> and whatever line it crosses is the Opposite side.
|-
| colspan="2"| The code:
$$ \picture(350,250){(25,25){\line(300,0)}(25,25){\line(0,220)}(25,245){\line(300,-220)}(310,25){\circle(100;135,180)}(20,100){\line(310,-75)} (25,25){\fbox{\line(5,5)}}(25,25){\line(150,150)}(165,140){Hypotenuse}(120,2){Adjacent}(2,80){\rotatebox{90}{Opposite}}(270,40){\theta}}$$
|}

=Matrices=
A Matrix is a rectangular array of numbers arranged in rows and columns which can be used to organize numeric information. Matrices can be used to predict trends and outcomes in real situations - i.e. polling.

==A Matrix==
A matrix can be written and displayed like [[Image: matrices03.gif|A matrix]]

In this case the matrix is constructed using the brackets before creating the array:
$$ M = \left[\begin{array}{ccc} a&b&1 \ c&d&2 \ e&f&3\end{array}\right] $$
The internal structure of the array is generated by the &, ampersand, and the double backslash.

You can also create a grid for the matrix.

{| class="nicetable"
|-
|A dashed line
|A solid line
|A mixed line
|-
|[[Image: matrices04.gif]]
|[[Image: matrices05.gif]]
|[[Image: matrices06.gif]]
|-
|$$ M = \left[\begin{array}'''{c.c.c}''' a&b&1 \ '''\hdash''' c&d&2 \ '''\hdash''' e&f&3\end{array}\right] $$
|$$ M = \left[\begin{array}'''{c|c|c}''' a&b&1 \ '''\hline''' c&d&2 \ '''\hline''' e&f&3\end{array}\right] $$
|$$ M = \left[\begin{array}'''{c.c|c}''' a&b&1 \ '''\hline''' c&d&2 \ '''\hdash''' e&f&3\end{array}\right] $$
|}

The command sequences here are the {c|c.c} and \hdash and \hline. The pipe, |, and the full stop determine the line type for the vertical line.

Matrices also respond to other TeX Notation commands such as size and colour.

{| class="nicetable"
|-
|
Colour
| colspan="2"|Size
|-
|[[Image: matrices07.gif]]
|[[Image: matrices08.gif]]
|[[Image: matrices09.gif]]
|-
|$$ '''\blue''' M = \left[\begin{array}{c.c.c} a&b&1 \ \hdash c&d&2 \ \hdash e&f&3\end{array}\right] $$
|$$ '''\fs7''' M = \left[\begin{array}{c.c.c} a&b&1 \ \hdash c&d&2 \ \hdash e&f&3\end{array}\right] $$
|$$ '''\fs2''' M = \left[\begin{array}{c.c.c} a&b&1 \ \hdash c&d&2 \ \hdash e&f&3\end{array}\right] $$
|}

==Creating equal and unequal matrices==
Equal and unequal matrices are simply matrices that either share or not share the same number of rows and columns. To be more precise, equal matrices share the same order and each element in the corresponding positions are equal. Anything else is unequal matrices.

Actually equal and unequal matrices are constructed along similar lines, but have different shapes:

{| class="nicetable"
|-
|Equal Matrix
|An unequal matrix
|-
|[[Image: matrices10.gif]]
|[[Image: matrices11.gif]]
|-
| $$ \left[\begin{array} a&b&1 \ c&d&2 \ e&f&3\end{array}\right] \ = \ \left[\begin{array} 12&11&z \ 10&9&y \ 8&7&x\end{array}\right] $$
| $$ \left[\begin{array} a&b \ c&d \ e&f \end{array}\right] \ \neq \ \left[\begin{array} 12&11&z \ 10&9&y \ 8&7&x\end{array}\right] $$
|}

==Labeling a Matrix==

Addition and subtraction matrices are similar again, but the presentation is usually very different. The problem comes when trying to mix labels into arrays. The lack of sophistication in the TeX Notation plays against it here.

Moodle allows an easy adoption of tables to make it work though. For example:

Bill the baker supplies three shops, A, B and C with pies, pasties and sausage rolls.
He is expected to determine the stock levels of those three shops in his estimation of supplies.

It is better to use the Moodle Fullscreen editor for this, to have a better idea of how the end product will look and to take advantage of the additional tools available. Design decisions need occupy our attention for a while. We need a table of five rows and four columns. The first row is a header row, so the label is centred. The next row needs four columns, a blank cell to start and labels A, B and C. The next three rows are divided into two columns, with the labels, pies, pasties and sausage rolls in each row of the first column and the matrix resides in a merged set of columns there. So first the table:

{| class="nicetable"
|-
| Insert Table - initial properties
| Merge Cells Button
| Advanced Properties
|-
| rowspan="2"|[[Image: matricestable01.png|Table properties]]
| [[Image: matricestable02.png | Merge cells]]
| [[Image: matricestable03.png | Cell properties button]]
|-
| colspan="2"| You may need to look into the Advanced properties setting of the tables and cells to make this work.
|}

This is the immediate result:

[[Image: matricestable04.png | The resulting table]]

While not a very good look, it can be made better by tweaking the table using the advanced settings and properties buttons and then you can tweak the matrix itself.

==Tweaking the Matrix==

[[Image: matricestable05a.png | A tweaked matrix]]

Things are not always as they seem, be aware, the "c" does not stand for "column", it actually stands for "centre". The columns are aligned by the letters l, for left, c for centre and r for right.

Each column is spread across 50 pixels, so the value of 50 is entered into the alignment declaration. The plus sign before the value is used to "propogate" or to force the value across the whole matrix, but is not used when wanting to separate only one column.

To set the rows is a little more problematic. The capital letter C sets the vertical alignment to the centre, (B is for baseline, but that does not guarantee that the numbers will appear on the base line, and there does not appear to be any third value). The plus sign and following value sets the height of all rows to the number given. In this I have given it a value of 25 pixels for the entire matrix. If there were four or five rows, the same height requirement is made.

The order things appear is also important. If you change the order of these settings, they will either not work at all, or will not render as you expect them to. If something does not work properly, then check to make sure you have the right order first.

==An Addition Matrix==

The rule for performing operations on matrices is that they must be equal matrices. For example, addition matrices look like:

[[Image: matricestable06.png | An addition matrix]]

with the results obvious. The code is:

$$\left[\begin{array}{c+50C+25.c.c}
11&14&12 \ \hdash16&12&22 \ \hdash 14&17&15
\end{array}\right] + \left[\begin{array}{c+50C+25.c.c}
60&60&60 \ \hdash 40&40&30 \ \hdash 30&30&30
\end{array}\right] $$

==A Subtraction Matrix==

Similar to an addition matrix in its construction, the subtraction matrix is subject to the same rules of equality.

Using the same essential data, we can calculate the daily sales of each of the shops.

[[Image: matricestable07.png | A subtraction matrix]]

The code is:
$$ \left[\begin{array}{c+50C+25.c.c}
72&95&68 \ \hdash 54&61&65 \ \hdash 48&51&60
\end{array}\right] - \left[\begin{array}{c+50C+25.c.c}
11&14&12 \ \hdash 16&12&22 \ \hdash 14&17&15
\end{array}\right] = \left[\begin{array}{c+50C+25.c.c}
61&81&56 \ \hdash 38&49&43 \ \hdash 34&34&48
\end{array}\right] $$

This code looks more complex than it really is, it is cluttered by the lines and alignment sequences.

==Multiplication Matrices==

Different than the addition or subtraction matrices, the multiplication matrix comes in three parts, the row matrix, the column matrix and the answer matrix. This implies it has a different construction methodology.

[[Image: matrices16.gif | A multiplication matrix]]

And the code for this is:
$$ \begin{array} 10&14&16\end{array} \
\left[\begin{array} 45 \\ 61 \\ 19 \end{array}\right]
\ = \ \begin{array} 450&854&304\end{array} $$

While different, it is not necessarily more complex. For example a problem like:

Bill the baker is selling his product to Con the cafe owner, who
wants to make sure his overall prices are profitable for himself.
Con needs to make sure that his average price is providing sufficient
profit to be able to keep the cafes open. Con makes his calculations
on a weekly basis, comparing cost to sale prices.

With the pies, pasties and sausage rolls in that order he applies them to the cost and sale price columns :

[[Image: matrices17.gif | A multiplication matrix]]

The code for this is:
$$\left[\begin{array} 350&310&270 \end{array}\right] \
\left[\begin{array} \$2.10&\$3.60 \ \$2.05&\$3.60 \ \$1.90&\$3.10 \end{array}
\right] \ = \ \left[\begin{array} \$735.00&\$1260.00 \ \$635.50&\$1116.00 \
\$513.00&$\837.00 \end{array}\right] $$

==See Also==
* [[MathJax_filter]] - available in Moodle 2.7 and later
* [[TeX notation filter]] To turn on the TeX Notation
* [[Advanced Maths Tools]] Moodle 2.x - The Next Generation of TeX Tools
* [[DragMath equation editor]]
* [[Chemistry notation using mhchem]]

[[Category:Mathematics]]

Assignment settings

2015-09-24T12:08:20Z

Tqr: /* Adding and editing an Assignment activity */

{{Assignment}}

==Adding and editing an Assignment activity==
*To add a new Assignment activity to your course, login with the appropriate access rights (e.g.editing teacher, course creator or administrator) and Turn Editing On. Within the required Week or Topic Block click the 'Add an Activity or Resource' link.
*In the Add an activity or resource dialogue box that appears, select Assignment and click Add.
*To edit an existing Assignment activity, login to your course with the appropriate access rights (e.g. editing teacher, course creator or administrator) and Turn Editing On. Select the Update icon against the relevant Assignment item.
*Alternatively, after logging into your course simply click on the name of the Assignment activity you wish to edit and then click the Edit Settings link under Assignment administration within the Settings block.

The following configuration options are available when creating or editing/updating any Assignment activity. Only General,Availability and Submission types are open by default;the others are collapsed. To expand everything, click the "Expand all" link top right.
Click on any screenshot to see it full size.

==General ==
The General section allows you to give your assignment a name and description.
{|
|[[File:assignmentgeneral26.png|General settings for an assignment]]
|}

===Assignment name===
Give your Assignment a name (e.g. “Report on Topic 1 Content”). The title entered here will be the name that learners see in the course content area. Learners will click on this name to view the details of the assignment and, if applicable, submit their work.

===Description===
Provide instructions for your students here so they are clear what they have to do.
Click the icon on the left to expand the toolbar and drag the bottom right of the text box out to expand it.

You can also provide information or resources related to the assignment, such as a video clip, an image, or a link to a web page.

===Display description on course page===
Enabling this will display the description on the course page just below the link to the assignment activity.

===Additional files===

Here a teacher can attach files which may be of help to the students as they do their assignment, such as example submissions or answer templates.

[[File:AddFilesAssign.png|thumb|center|500px]]

==Availability==
{|
|[[File:AssignAvailability.png|thumb|450px|Availability settings for an assignment]]
|}

===Allow submissions from===
The Allow submissions from setting prevents students from submitting their assignment before the shown date. A teacher can to set a day, month, year and time (24 hour clock) from which learners can begin to submit their assignments. Please note that this setting does not hide the activity from the learners. Instead, the learner will see the activity, be able to view the instructions and use any materials you have included in the description, but the learner will not be able to submit or complete the assignment until the Allow submissions from date.

This setting is enabled (ticked/checked) by default and is set at the day and time you added the assignment. To disable this, remove the tick/check.

===Due date===
The Due date setting establishes when the assignment is due. Submissions will still be allowed after this date, but any assignments submitted after this date are marked as late.

This option allows an teacher to set a day, month, year and time (24 hour clock) before which learners must submit their assignment.

By default the Due date is Enabled (ticked) and is set at 7 days ahead of the day and time you selected Add Assignment. To disable this feature, simply ensure the Enable checkbox is not marked. For more information on using the Due Date see [[Assignment FAQ]].

Note: Assignments without a Due date will appear on the Dashboard with “No Due date” displayed.

===Cut-off date===

The Cut-off date is the date beyond which students will not be able to send in their assignment as the button for doing so will no longer be displayed. After that date (or time) a teacher may, on request, grant an extension by going to the class assignment grading screen, clicking the "Edit" column and choosing "grant extension" for the relevant student.

For more details, see this Youtube screencast [http://www.youtube.com/watch?v=UaL0LzZwyYI&feature=share&list=UUCRg_EbhU9tdpLdiGGN1Mgg Assignment Extensions]

===Always show description===

If the 'Always show description' checkbox is ticked, the assignment description is always shown. If the checkbox is not ticked, the assignment description will be hidden until the 'Allow submissions from' date.

{|
|[[File:alwaysshowdescription.png|thumb|450px|Assignment description hidden until the 'Allow submissions from' date.]]
|}

If 'Allow submissions from' is disabled, then this setting has no meaning: the assignment description will always be visible to students.

==Submission types==

{|
|[[File:26submissioncomments.png|thumb|450px|Select the type of submission here]]
|}
Here you can decide how you wish students to submit their work to you.

''Note that if Submission comments are enabled in ''Administration>Plugins>Activity modules>Assignment>Submission plugins'' then students will be able to add a note to their teacher on submitting work. If Blind marking is enabled, student comments display as from "Participant 01 etc" to avoid revealing identities. These comments will appear in the grading table in the Submission comments column.''

===Online text===
Learners can type their response directly in Moodle using the text editor.

Text typed into the Atto text editor is automatically saved at regular intervals. See [[Text editor]] for more information.

It's possible to set a word limit on an online text assignment. Students get a warning if they try to exceed the word limit:

[[File:onlinetextwordlimit.png|center|]]

''Note:'' Numbers (such as in addresses) are counted as words; structures such as I'm where an apostrophe replaces a part of a word are only counted as one word.

===File submissions===
Learners can upload and edit one or more files of any type the teacher can open.

If the student uploads a pdf file, the teacher can annotate it within the browser, and on saving, the annotated file is made available to the student. See section 5.4.1 Annotating pdfs in [[Using Assignment]].

Note: This requires Ghostscript to be enabled on the server. This can be checked in ''Administration>Site administration>Plugins>Activity modules>Assignments>Feedback plugins>Annotate pdf''.

===Maximum number of uploaded files===
Here you can decide the maximum number of files which may be uploaded by each learner. (It might be helpful to display the number in the assignment description.)

===Maximum submission size===
This setting specifies the maximum size per file of each of the files that the students can upload as part of their submission. This maximum upload size may only be equal to or less than the course limit (which in turn may only be equal to or less than the site limit). The maximum size of each file is displayed to students at the point where they upload files.

{|
|[[File:submission comments.jpg|thumb|Submission comments]]
|[[File:maximum file size.jpg|thumb|Maximum file size]]
|}

==Feedback types==
(This setting is collapsed by default)

{|
|[[File:feedbacktypes.png|Feedback types]]
|}

===Feedback comments===
Setting this to yes means that markers can leave feedback comments for each submission. It enables the Feedback Comments column in the grading table.(To access the grading table, click on the assignment activity and then ''View/Grade all Submissions'').
Feedback comments are also accessible by clicking on the green tick in the grade column on the grading table.

{|
|[[File:feedback comments.jpg|thumb|The Feedback comments column]]
|[[FIle:feedback comments 2.jpg|thumb|Type feedback comments into the box]]
|}

===Offline grading worksheet===

If set to yes, the teacher will have a link to download the grading list as a spreadsheet. They will then be able to enter grades and feedback comments offline:
(Not working for non English users, yet. See https://tracker.moodle.org/browse/MDL-40597)

{|
|[[File:emptygradebook.png|thumb|The empty gradebook on Moodle]]
|[[File:downloadgradingworksheet.png|thumb|The dropdown to download the list]]
|[[File:excelgrades.png|thumb|Editing the grades offline]]
|}

When the teacher has completed their grading offline, they can then upload the spreadsheet, confirm the changes and the grades and comments will be transferred over into Moodle's gradebook:

{|
|[[File:uploadgradingworksheet.png|thumb|Uploading the grading worksheet]]
|[[File:confirmchanges.png|thumb|Confirming the changes]]
|[[File:fullgradebook.png|thumb|Grades and feedback transferred into Moodle]]
|}

See also [http://www.somerandomthoughts.com/blog/2012/11/19/offline-grading-worksheet-in-moodle-2-4-assignment/ Offline grading worksheet] blog post by Gavin Henrick.

===Feedback files===
This allows markers to upload files with feedback when marking. These files may be the marked up student assignments, documents with comments, a completed marking guide, or spoken audio feedback. It enables the Feedback Files column in the grading table. (To access the grading table click on the assignment activity and then ''View/Grade all Submissions'')To upload feedback files, click on the green tick in the grade column on the grading table and then upload either with drag and drop or using the [[File picker]].

Feedback is displayed to students on the assignment submission page.

{|
|[[File:feedback files.jpg|thumb|The Feedback files column]]
|[[File:feedback files 2.jpg|thumb|Upload files here]]
|[[File:feedback view for students.jpg|thumb|Student view with comments and file feedback both enabled]]
|}
====Uploading multiple feedback files====

It is also possible to upload multiple feedback files as a zip, from the dropdown above the grading list:

#Download the students' assignments using the "Download all submissions" link from the same dropdown menu;
#Extract the folder offline and add your comments to the student's submissions.Keep the names the same.
#Select the students' submissions and zip them into a new folder. Important: Don't just edit them inside their original folder and re-zip this; it will not work. The folder name does not matter as long as the feedback files have the same names as before.
#Upload this newly zipped folder.
#You will be presented with a confirmation screen displaying your feedback files.

{|
|[[File:mutiplefeedbackzip.png|thumb|Choose from the dropdown menu]]
|[[File:multiplezip1.png|thumb|Confirmation screen displaying the feedback files to be uploaded]]
|[[File:multiplezip2.png|thumb|Screen confirming uploaded feedback]]
|}

''Note:''If you zip files on a Mac, you may get a folder included in the zip called _MACOSX_ which needs to be removed otherwise moodle will not recognise the changes in the files.

===Comment inline===

If set to Yes, a teacher can comment directly on the text which a student has submitted as an online text type assignment.

==Submission settings==
(This setting is collapsed by default)

{|
|[[File:submissionsettings.png|Submission settings]]
|}
===Require students click submit button===
Students can upload draft versions of the assignment until such time as they are ready to submit.Once they click the submit button they indicate to the teacher that they have finished working on the assignment. In earlier versions of Moodle this was called ''"Send for marking"''.)

They can then longer edit their submission. If they need to change it, they must ask the teacher who can revert the assignment to draft status.

To revert to the draft stage, click on the assignment activity and then View/Grade all Submissions. Locate the student and click the action icon in the Edit column. Select Revert the submission to draft.

If this setting is No, then students do not have to to click a submit button and are able to make changes to uploaded files at any time.

If this setting is No but the teacher wishes to grade students work, then you can stop students from making further changes by using Prevent submission changes. Prevent submission changes can also be used in cases where students have neglected to click the Submit button and grading has commenced.
To prevent submission changes, click on the assignment activity, then click on the View/Grade all submissions button. On the grading table, locate the student and click the action icon in the Edit column. Select Prevent submission changes.

To do either of these with a number of students, use the ''With selected'' menu at the bottom of the grading table.

{|
|[[File:revert to draft.jpg|thumb|Reverting to draft]]
|[[File:prevent submission changes.jpg|thumb|Prevent submission changes]]
|[[File:with selected.jpg|thumb|"With selected"..]]
|}

To do either of these with a number of students, use the ''With selected'' menu at the bottom of the grading table.

===Require that students accept the Submission statement===

An administrator can define a "Submission statement", ie, a statement where students promise the work is their own and which they must agree to before submitting their work. This may be done via ''Settings>Site administration>Plugins>Activity modules>Assignment.''

If preferred, the available default statement which may be used instead: ''This assignment is my own work, except where I have acknowledged the use of the works of other people''

If the administrator has given teachers the option of using a submission statement or not, then it will be available in the assignment settings screen. The section [[#Submission_Statement]] explains how an administrator can set this up.

When this setting is enabled, students will have to check a button before they can submit their assignment:

If the administrator has forced the statement throughout the site, a teacher will not have this option in the settings but a student will see the statement when accessing their assignment.

===Attempts reopened===

This setting allows the teacher to decide how submissions are reopened. The default is "Never", in that students may only submit once. However, a teacher can set this to "Manually" and reopen it themselves for the student to resubmit, or to "Automatically until pass". The student must then keep trying and resubmitting until they get a pass grade. [[Grade_items#Activity-based_grade_items|Passing grades]] are set in the Gradebook. ''(Note that for this you need to set the assignment so that students have to click 'submit for marking'. If not, then, unless you manually lock a student's assignment, then they can continue to edit it for as long as they like.)''

===Maximum attempts===

If a student is allowed to resubmit, this setting will determine how many times they can resubmit before they are no longer allowed to do so. (For example, if a student has to keep trying until they get a pass grade, the teacher might decide that ten attempts is enough even though they have not yet passed!)

==Groups submission settings==
(This setting is collapsed by default)
{|
|[[File:requiregroupmembership.png|Group submission settings]]
|}

===Students submit in groups===

If this box is ticked, then students are able to collaborate on an assignment. This might involve for example, working in the same online text area, or one student uploading an MS Powerpoint which another student downloads, improves and re-uploads to the common assignment area.

When grading, the teacher may choose to give a common grade and feedback to all students in the group or to give individual grades and feedback to each member.
===Require group to make submission===

'''New in 2.9:''' By default, if a student is not in a group they can still submit an assignment. However, this setting may be changed in ''Site administration > Plugins >Assignment > Assignment settings'' so that if student is not in any group, or no groups have been made, then Moodle will display a message ''You're not a member of any group; please contact your teacher'' , and the student will not be able to submit the assignment.

===Require all group members submit===

This setting will only appear if the teacher has ticked the "Require students click submit button" earlier. The assignment will not be classed as "submitted" until all members of the group have made a contribution. When one student has submitted, the other members of the group will be able to see who still has to submit.

===Grouping for student groups===
If a particular grouping is selected here, then the gradebook will display any other groups and non-grouped students in the "default group", while naming the group(s) that are in the chosen grouping. If "none" is selected, then the gradebook will display the names of all groups and put any non-grouped students in the "default group". See this [https://moodle.org/mod/forum/discuss.php?d=216399#p942913 forum post on grouping for student groups] for examples of how this might be used.

==Notifications==
(This setting is collapsed by default)

{|
|[[File:notifications25.png|Notifications]]
|}
===Notify graders about submissions===
Teachers will receive a message (of a type they choose) whenever a student submits an assignment. Please note if you are using the assignment in Groups Mode (eg Separate or Visible Groups), the teacher will need to be a member of the group in order to receive the submission notification.
===Notify graders about late submission===
Teachers will receive a message (of a type they choose)whenever a student submits a late assignment. Please note if you are using the assignment in Groups Mode (eg Separate or Visible Groups), the teacher will need to be a member of the group in order to receive the submission notification.

==Grade==
(This setting is collapsed by default)
{|
|[[File:point1.png|Grade]]
|}

===Grade===
*Select [[Grade points|Points]] or [[Scales|Scale]] from the dropdown. If you will not be giving a grade for the assignment, choose No Grade.
*Then select your points or chosen scale.

===Grading method===

There are 3 options:
* Simple direct grading (entering a grade or scale item)
* [[Marking guide]]
* [[Rubric]]

===Grade Category===
Any custom [[Grade_categories|Grade Categories]] that have been created within your site or course will be listed here and will be available for selection. Select the required Grade Category to add this assignment as a [[Grade_items|Grade item]] within this Category.
===Grade to pass===
Here you can set a passing grade for the assignment. This may be connected with [[Activity completion]] and [[Conditional activities]] such that a student will not be able to access a follow up activity until they have passed this assignment.

===Blind marking===
''Note that in the US, this is known as 'blind grading'.''

If this setting is enabled, then a teacher will not see the names of students who have submitted their assignments. Instead, they will see randomly generated Participant numbers. (The student view of the assignment does not change.) This is also the case if student comments have been enabled. Once they have graded the assignment, it is however possible for teachers to see who submitted what by clicking on "Reveal student identities" in the Assignment settings.

====Returning Marks to Students ====
Because of the nature of blind marking, the students cannot see the final grade until all of the students' names have been revealed. If you are grading an assignment using an advanced grading method such as a rubric, the rubric will also be hidden from students' view until the names are revealed. To reveal student names after you are finished grading, look under Assignment Settings > Reveal Student Names. Feedback comments will appear whether or not student names are hidden or revealed.

''Note:'' Because of this, the level of anonymity might not suit the privacy requirements of your establishment. See this tracker entry MDL-35390 - "Blind Marking is not so blind"

For more details on this feature, see this Youtube video [http://youtu.be/Biiw3E13mgM Blind marking in 2.4].

===Use marking workflow===
When set to Yes, teachers will be able to specify the stage they are at in their grading of individual assignments (as in the screenshot below)

''Note that in the US this is known as 'grading workflow'.''

{|
|[[File:26markingworkflow.png|thumb|Marking workflow state in the individual grading screen]]
|[[File:26quickgradingworkflow.png|thumb|Dropdown to select marking workflow state when quick grading]]
|}

One advantage of using marking workflow is that the grades can be hidden from students until they are set to 'Released'. The actual list of steps are:

* Not marked (the marker has not yet started)
* In marking (the marker has started but not yet finished)
* Marking completed (the marker has finished but might need to go back for checking/corrections)
* In review (the marking is now with the teacher in charge for quality checking)
* Ready for release (the teacher in charge is satisfied with the marking but wait before giving students access to the marking)
* Released (the student can access the grades/feedback)

====Example use cases====

One marker, Marker, wants to release all grades at the same time
* Marker enables "Use marking workflow"
* Marker marks each submission and transitions the grading to "Marking completed" as each submission is graded.
* Marker then uses the batch operations to transition all grades to "Released" at the same time.

Multiple markers,
* Marker enables "Use marking workflow"
* Marker marks each submission and transitions the grading to "Marking completed" as each submission is graded.
* Marker then uses the batch operations to transition all grades to "Released" at the same time.

===Use marking allocation===
''Note that in the US, this is known as 'grading allocation'.''

If marking workflow (see above) is set to Yes, it is possible to enable marking allocation. This means that teachers can be selected to grade or review the submitted work of specific students. Colleagues can monitor progress through the displayed marking workflow states:

{|
|[[File:26markingworkflowallocatedmarkers.png|thumb|Allocated markers on the grading screen]]
|}

==Common module settings==
See [[Common module settings]]

==Restrict access settings==
The restrict access area becomes visible in Moodle activities and resource settings if [[Conditional_activities|Conditional Activities]] have been enabled.

==Locally assigned roles==

In ''Administration > Assignment administration > Locally assigned roles'' selected users can be given additional roles in the activity. See the Using Moodle [http://moodle.org/mod/forum/discuss.php?d=98208 Custom role for 'Course Monitor'] forum discussion for an example.

==Assignment capabilities==

* [[Capabilities/mod/assign:exportownsubmission|Export own submission]]
* [[Capabilities/mod/assign:grade|Grade assignment]]
* [[Capabilities/mod/assign:submit|Submit assignment]]
* [[Capabilities/mod/assign:view|View assignment]]

Role permissions for the activity can be changed in ''Settings > Assignment administration > Permissions''.

==Site administration settings==

The following configuration options are available for an administrator under ''Administration > Site administration > Plugins > Activity modules > Assignment''.

===Assignment settings===
====Feedback plugin====
The comments that are pushed to the gradebook from the assignment are limited to a single text only comment. An Administrator can specify which of the feedback plugins will be push comments to the gradebook. On a standard Moodle install the choices are "Feedback comments" (default) or "Feedback file" but there may be additional options if your Moodle install contains additional feedback plugins.

====Show recent submissions====
This option allows everyone to see notifications of submissions in [[Recent activity]] reports and the Recent Activity Block, within a course context. Note that the default for this option is No which means students will not be able to see when classmates have submitted or updated any Assignments.

====Send submission receipt to students====
This switch will enable submission receipts for students. Students will receive a notification every time they successfully submit an assignment.
{|
|[[File:ass_settings.jpg|thumb|350px|Submission receipts settings]]
|}

====Submission Statement====

An administrator can enter text in the box here which will appear when students are about to submit their assignment.

{|
|[[File:newsubmissionstatement.png|thumb|Admin view of Submission statement set up screen - click to enlarge]]
|[[File:submissionstatement.png|thumb|Student view when about to submit - click to enlarge]]
|}

If it is left as the default "No", then teachers will have the choice within their own assignments to force this or not.

The submission statement may be shown in different languages. See [[Multi-language content filter]] for how to do this.

====Default assignment settings====
The administrator can specify here the default assignment settings which may be set as 'Advanced' (i.e. they will appear when clicking 'Show more') or 'Locked' (ie the teacher cannot change them.)
{|
|[[File:26assignmentdefaults.png|thumb|Default, Advanced and Locked checkboxes]]
|}

The following configuration options are available for an administrator under ''Administration > Site administration > Plugins > Assignment''.

===Submission plugins===
====Manage assignment submission plugins====
Here you can change the order, check the settings or uninstall a particular submission plugin.
====File submissions====
'''Enabled by default''' If set, this submission method will be enabled by default for all new assignments.

'''Maximum submission size''' An Administrator can specify the maximum size of any individual file uploaded within the assignment module across all courses on the site. This limit may be equal to or less than course file upload limit.

====Online text submissions====
'''Enabled by default''' If set, this submission method will be enabled by default for all new assignments.

====Submission comments====

If Submission comments are enabled in ''Site administration>Plugins>Activity modules>Assignment>Submission plugins'' AND comments enabled globally in ''Site Administration > Advanced features'') then students will be able to send a message to their teacher when submitting their assignment. If either of those settings is disabled, then the submission comments link will not appear.

===Feedback plugins===
====Manage assignment feedback plugins====
Here you can change the order, check the settings or uninstall a particular feedback plugin.
====Feedback comments====
'''Enabled by default''' If set, this submission method will be enabled by default for all new assignments.
====Annotate pdf====

Here you can upload stamps for teachers to use when annotating student pdfs. You can also check the ghostscript path:
{|
|[[File:Selection_116.png|thumb|Ghostscript not installed or incorrectly installed]]
|[[File:Selection_115.png|thumb|Ghostscript correctly installed]]
|}

If the default stamps are deleted by accident, they can be found in mod/assign/feedback/editpdf/pix and re-uploaded.

====File feedback====
'''Enabled by default''' If set, this submission method will be enabled by default for all new assignments.

===Offline grading worksheet===

'''Enabled by default''' If set, this will be enabled by default for all new assignments

==See also==
Synergy Learning blog post: [http://www.synergy-learning.com/moodle-2-5-improvements-assignment-resubmissions/ Assignment resubmissions]
[[de:Aufgabe konfigurieren]]
[[fr:Ajouter/modifier un devoir]]
[[ja:課題を追加/編集する]]
[[es:Configuraciones de tarea]]

How to add custom fonts in a theme

2015-05-01T17:19:19Z

Tqr:

Create a new directory in your theme and call it fonts. Then add all your custom fonts into this directory' eg: moodle/theme/yourtheme/fonts/

'''In your themes CSS file add the following:'''
<pre>
@font-face { /* where FontName and fontname represents the name of the font you want to add */
font-family: 'FontName';
src: url([[font:theme|fontname.eot]]);
src: url([[font:theme|fontname.eot]]) format('embedded-opentype'),
url([[font:theme|fontname.woff]]) format('woff'),
url([[font:theme|fontname.woff2]]) format('woff2'),
url([[font:theme|fontname.ttf]]) format('truetype'),
url([[font:theme|fontname.svg]]) format('svg');
font-weight: normal;
font-style: normal;
}
</pre>
Next ADD the name of your font wherever you want that font to be used in your stylesheet

For example:

#page-header h1 { font-family: FontName;}

[[Category:Themes]]

[[es:Como añadir fonts personalizados dentro de un tema]]

How to add custom fonts in a theme

2015-05-01T17:11:40Z

Tqr: fixed typo

Create a new directory in your theme and call it fonts. Then add all your custom fonts into this directory' eg: moodle/theme/yourtheme/fonts/

In your themes CSS file add the following:

@font-face { /* where FontName and fontname represents the name of the font you want to add */
font-family: 'FontName';
src: url([[font:theme|fontname.eot]]);
src: url([[font:theme|fontname.eot]]) format('embedded-opentype'),
url([[font:theme|fontname.woff]]) format('woff'),
url([[font:theme|fontname.woff2]]) format('woff2'),
url([[font:theme|fontname.ttf]]) format('truetype'),
url([[font:theme|fontname.svg]]) format('svg');
font-weight: normal;
font-style: normal;
}

Next ADD the name of your font wherever you want that font to be used in your stylesheet

For example:

#page-header h1 { font-family: FontName;}

[[Category:Themes]]

[[es:Como añadir fonts personalizados dentro de un tema]]

How to add custom fonts in a theme

2015-04-13T19:13:13Z

Tqr:

Create a new directory in your theme and call it fonts. Then add all your custom fonts into this directory.
eg: moodle/theme/yourtheme/fonts/

In your themes CSS file add the following:
@font-face { /* where FontName and fontname represents the name of the font you want to add */
font-family: 'FontName';
src: url(<nowiki>[[font:theme|fontname.eot]]</nowiki>);
src: url(<nowiki>[[font:theme|fontname.eot]]</nowiki>) format('embedded-opentype'),
url(<nowiki>[[font:theme|fontname.woff]]</nowiki>) format('woff'),
url(<nowiki>[[font:theme|fontname.ttf]]</nowiki>) format('truetype'),
url(<nowiki>[[font:theme|fontname.svg]]</nowiki>) format('svg');
font-weight: normal;
font-style: normal;
}

Next ADD the name of your font wherever you want that font to be used in your stylesheet.
For example:
#page-header h1 { font-family: FontName;}

[[Category:Themes]]

[[es:Como añadir fonts personalizados dentro de un tema]]

Morecandy

2015-04-07T21:46:54Z

Tqr: /* How to add a slideshow. */

{{Themes}}
{{Infobox plugin
|type = Theme
|entry = coming soon
|tracker = coming soon
|discussion = coming soon
|maintainer = [[User:Mary Evans|Mary Evans]]
|float = right
}}
This is a [[:Category:Contributed_code|contributed (third party)]] theme for Moodle written by Mary Evans and shared on Moodle.org

== Customising Morecandy ==
Listed below are some simple steps to help you customize your Moodle site using Morecandy.
=== How to add a Logo ===
=== How to add marketing spots to the footer of your frontpage ===
=== How to add a seperate menu to the front page ===
=== How to add a slideshow. ===
This is all the HTML you will need to add this carousel to your Moodle site.
'''Here are some simple steps:'''

# Go to the Home page of your Moodle site and choose 'Frontpage settings' from the Administration block, and proceed to enable 'Site topics' if not already enabled.
# Save settings and return to Home page and 'Turn editing on'.
# Open the 'Site topic' area and then 'Copy and Paste' the Carousel HTML from the bottom of this page, to the HTML part of the Editor, and save it.
# Now switch back to normal view in your editor and you should see four place-holder images. By just selecting each image in turn with your mouse you can edit it by clicking on the Image icon in your editor. Here you can choose an image of your own to upload. Any size will work but do take into consideration the size of your site topic area especially if you have blocks.
# After adding your images save your work and sit back and watch how it works.
# Once you are familiar with the editing part of this you can add your own captions.
# Remember too that this is only a prototype and as such is very basic, but it does demonstrate what can be done with the minimum of fuss.
<pre>

<div id="frontpage-slider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>First caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Second caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Third caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Fourth caption text here</p>
</div>
</div>
</div>

<a class="carousel-control left" href="#frontpage-slider" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#frontpage-slider" data-slide="next">&rsaquo;</a>
</div>

</pre>

Morecandy

2015-04-06T08:38:00Z

Tqr: /* Listed below are some simple steps to help you customize your Moodle site using this theme */

== Customising Morecandy ==
Listed below are some simple steps to help you customize your Moodle site using Morecandy.
=== How to add a Logo ===
=== How to add marketing spots to the footer of your frontpage ===
=== How to add a seperate menu to the front page ===
=== How to add a slideshow. ===
This is all the HTML you will need to add this carousel to your Moodle site.
'''Here are some simple steps:'''

# Go to the Home page of your Moodle site and choose 'Frontpage settings' from the Administration block, and proceed to enable 'Site topics' if not already enabled.
# Save settings and return to Home page and 'Turn editing on'.
# Open the 'Site topic' area and then 'Copy and Paste' the Carousel HTML from the bottom of this page, to the HTML part of the Editor, and save it.
# Now switch back to normal view in your editor and you should see four place-holder images. By just selecting each image in turn with your mouse you can edit it by clicking on the Image icon in your editor. Here you can choose an image of your own to upload. Any size will work but do take into consideration the size of your site topic area especially if you have blocks.
# After adding your images save your work and sit back and watch how it works.
# Once you are familiar with the editing part of this you can add your own captions.
# Remember too that this is only a prototype and as such is very basic, but it does demonstrate what can be done with the minimum of fuss.
<pre>

<div id="frontpage-slider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>First caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Second caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Third caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Fourth caption text here</p>
</div>
</div>
</div>

<a class="carousel-control left" href="#frontpage-slider" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#frontpage-slider" data-slide="next">&rsaquo;</a>
</div>

<pre>

Morecandy

2015-04-06T08:36:25Z

Tqr: /* (a Moodle 2.8 theme) byLazyDaisy */

== Listed below are some simple steps to help you customize your Moodle site using this theme ==

=== How to add a Logo ===
=== How to add marketing spots to the footer of your frontpage ===
=== How to add a seperate menu to the front page ===
=== How to add a slideshow. ===
This is all the HTML you will need to add this carousel to your Moodle site.
'''Here are some simple steps:'''

# Go to the Home page of your Moodle site and choose 'Frontpage settings' from the Administration block, and proceed to enable 'Site topics' if not already enabled.
# Save settings and return to Home page and 'Turn editing on'.
# Open the 'Site topic' area and then 'Copy and Paste' the Carousel HTML from the bottom of this page, to the HTML part of the Editor, and save it.
# Now switch back to normal view in your editor and you should see four place-holder images. By just selecting each image in turn with your mouse you can edit it by clicking on the Image icon in your editor. Here you can choose an image of your own to upload. Any size will work but do take into consideration the size of your site topic area especially if you have blocks.
# After adding your images save your work and sit back and watch how it works.
# Once you are familiar with the editing part of this you can add your own captions.
# Remember too that this is only a prototype and as such is very basic, but it does demonstrate what can be done with the minimum of fuss.
<pre>

<div id="frontpage-slider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>First caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Second caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Third caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Fourth caption text here</p>
</div>
</div>
</div>

<a class="carousel-control left" href="#frontpage-slider" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#frontpage-slider" data-slide="next">&rsaquo;</a>
</div>

<pre>

Morecandy

2015-04-06T08:25:55Z

Tqr: /* Adding a slideshow */

== (a Moodle 2.8 theme) byLazyDaisy ==

=== How to add a slideshow ===

This is all the HTML you will need to add this carousel to your Moodle site.
Here are some simple steps:

# Go to the Home page of your Moodle site and choose 'Frontpage settings' from the Administration block, and proceed to enable 'Site topics' if not already enabled.
# Save settings and return to Home page and 'Turn editing on'.
# Open the 'Site topic' area and then 'Copy and Paste' the Carousel HTML from the bottom of this page, to the HTML part of the Editor, and save it.
# Now switch back to normal view in your editor and you should see four place-holder images. By just selecting each image in turn with your mouse you can edit it by clicking on the Image icon in your editor. Here you can choose an image of your own to upload. Any size will work but do take into consideration the size of your site topic area especially if you have blocks.
# After adding your images save your work and sit back and watch how it works.
# Once you are familiar with the editing part of this you can add your own captions.
# Remember too that this is only a prototype and as such is very basic, but it does demonstrate what can be done with the minimum of fuss.
<pre>

<div id="frontpage-slider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>First caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Second caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Third caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Fourth caption text here</p>
</div>
</div>
</div>

<a class="carousel-control left" href="#frontpage-slider" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#frontpage-slider" data-slide="next">&rsaquo;</a>
</div>

<pre>

Morecandy

2015-04-06T08:25:20Z

Tqr: /* Adding a slideshow */

== (a Moodle 2.8 theme) byLazyDaisy ==

=== Adding a slideshow ===

This is all the HTML you will need to add this carousel to your Moodle site.
Here are some simple steps:

# Go to the Home page of your Moodle site and choose 'Frontpage settings' from the Administration block, and proceed to enable 'Site topics' if not already enabled.
# Save settings and return to Home page and 'Turn editing on'.
# Open the 'Site topic' area and then 'Copy and Paste' the Carousel HTML from the bottom of this page, to the HTML part of the Editor, and save it.
# Now switch back to normal view in your editor and you should see four place-holder images. By just selecting each image in turn with your mouse you can edit it by clicking on the Image icon in your editor. Here you can choose an image of your own to upload. Any size will work but do take into consideration the size of your site topic area especially if you have blocks.
# After adding your images save your work and sit back and watch how it works.
# Once you are familiar with the editing part of this you can add your own captions.
# Remember too that this is only a prototype and as such is very basic, but it does demonstrate what can be done with the minimum of fuss.
<pre>

<div id="frontpage-slider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>First caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Second caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Third caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Fourth caption text here</p>
</div>
</div>
</div>

<a class="carousel-control left" href="#frontpage-slider" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#frontpage-slider" data-slide="next">&rsaquo;</a>
</div>

<pre>

Morecandy

2015-04-06T08:22:48Z

Tqr: /* Adding a slideshow */

== (a Moodle 2.8 theme) byLazyDaisy ==

=== Adding a slideshow ===

This is all the HTML you will need to add this carousel to your Moodle site.
Here are some simple steps:

# Go to the Home page of your Moodle site and choose 'Frontpage settings' from the Administration block, and proceed to enable 'Site topics' if not already enabled.
# Save settings and return to Home page and 'Turn editing on'.
# Open the 'Site topic' area and then 'Copy and Paste' the Carousel HTML from the bottom of this page, to the HTML part of the Editor, and save it.
# Now switch back to normal view in your editor and you should see four place-holder images. By just selecting each image in turn with your mouse you can edit it by clicking on the Image icon in your editor. Here you can choose an image of your own to upload. Any size will work but do take into consideration the size of your site topic area especially if you have blocks.
# After adding your images save your work and sit back and watch how it works.
# Once you are familiar with the editing part of this you can add your own captioss.
# Remember too that this is only a prototype and as such is very basic, but it does demonstrate what can be done with the minimum of fuss.
<pre>

<div id="frontpage-slider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>First caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Second caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Third caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Fourth caption text here</p>
</div>
</div>
</div>

<a class="carousel-control left" href="#frontpage-slider" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#frontpage-slider" data-slide="next">&rsaquo;</a>
</div>

<pre>

Morecandy

2015-04-06T08:19:27Z

Tqr: Adding contents

== (a Moodle 2.8 theme) byLazyDaisy ==

=== Adding a slideshow ===

This is all the HTML you will need to add this carousel to your Moodle site.
Here are some simple steps:

1. Go to the Home page of your Moodle site and choose 'Frontpage settings' from the Administration block, and proceed to enable 'Site topics' if not already enabled.
2. Save settings and return to Home page and 'Turn editing on'.
3. Open the 'Site topic' area and then 'Copy and Paste' the Carousel HTML from the bottom of this page, to the HTML part of the Editor, and save it.
4. Now switch back to normal view in your editor and you should see four place-holder images. By just selecting each image in turn with your mouse you can edit it by clicking on the Image icon in your editor. Here you can choose an image of your own to upload. Any size will work but do take into consideration the size of your site topic area especially if you have blocks.
5. After adding your images save your work and sit back and watch how it works.
6. Once you are familiar with the editing part of this you can add your own captioss.
7. Remember too that this is only a prototype and as such is very basic, but it does demonstrate what can be done with the minimum of fuss.
<pre>

<div id="frontpage-slider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>First caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Second caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Third caption text here</p>
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/960x200" alt="" />
<div class="carousel-caption">
<p>Fourth caption text here</p>
</div>
</div>
</div>

<a class="carousel-control left" href="#frontpage-slider" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#frontpage-slider" data-slide="next">&rsaquo;</a>
</div>

<pre>

Morecandy

2015-04-06T08:15:21Z

Tqr: /* Morecandy */

== (a Moodle 2.8 theme) byLazyDaisy ==

Morecandy

2015-04-06T08:14:56Z

Tqr: Adding a placeholder and creating a new Moodle doc for Morecandy theme.

== Morecandy ==
== (a Moodle 2.8 theme) byLazyDaisy ==

Allow theme change by URL

2015-02-11T00:08:55Z

Tqr: /* Site Administration > Appearance > Themes > Theme settings */

'''
== Site Administration > Appearance > Themes > Theme settings ==

Enabling this setting in Moodle 2.0+ themes allows you to change theme by adding either '''?theme=''' or '''&theme=''' (followed by the theme name you wish to change to) depending on where you are at the time you want to swap to another theme.

'''For Example:'''
If you are at the front page of your site that add '''?theme='''
<pre>http://localhost/moodle28/?theme=essential</pre>
after clicking the Enter tab on your keyboard. this will change from your present theme to the Essential theme layout, providing or course that you have that theme installed in your Moodle site.

Alternatively if you are in a course page then add '''&theme='''
<pre>http://localhost/moodle28/course/view.php?id=3&theme=essential</pre>
will change theme to Essential after clicking the Enter tab on your keyboard.

Allow theme change by URL

2015-02-11T00:01:58Z

Tqr: /* Site Administration > Appearance > Themes > Theme settings */

'''
== Site Administration > Appearance > Themes > Theme settings ==

Enabling this setting in Moodle 2.0+ themes allows you to change theme by adding either '''?theme=''' or '''&theme=''' (followed by the theme name you wish to change to) depending on where you are at the time you want to swap to another theme.

'''For Example:'''
If you are at the front page of your site that add '''?theme='''
:: http://localhost/moodle28/?theme=essential
after clicking the Enter tab on your keyboard. this will change from your present theme to the Essential theme layout, providing or course that you have that theme installed in your Moodle site.

Alternatively if you are in a course page then add '''&theme='''..
:: http://localhost/moodle28/course/view.php?id=3&theme=essential
will change theme to Essential after clicking the Enter tab on your keyboard.

Allow theme change by URL

2015-02-10T23:59:05Z

Tqr: /* Site Administration > Appearance > Themes > Theme settings */

'''
== Site Administration > Appearance > Themes > Theme settings ==

Enabling this setting in Moodle 2.0+ themes allows you to change theme by adding either '''?theme=''' or '''&theme=''' (followed by the theme name you wish to change to) depending on where you are at the time you want to swap to another theme.

'''For Example:'''
If you are at the front page of your site that add '''?theme='''
:: http://localhost/moodle28/?theme=essential
after clicking the Enter tab on your keyboard. this will change from your present theme to the Essential theme layout, providing or course that you have that theme installed in your Moodle site.

Alternatively if you are in a course page then add the following to the end of the url that you see in your browser address bar...
:: http://localhost/moodle28/course/view.php?id=3&theme=essential
will change theme to Essential after clicking the Enter tab on your keyboard.

Allow theme change by URL

2015-02-10T23:49:55Z

Tqr: /* Site Administration > Appearance > Themes > Theme settings */

'''
== Site Administration > Appearance > Themes > Theme settings ==

Enabling this setting in Moodle 2.0+ themes allows you to change theme by adding either ?theme= or &theme= depending on where you are at the time you want to swap to another theme.

'''For Example:'''
:: http://localhost/moodle28/?theme=essential
will change from your present theme to the Essential theme layout.

Alternatively if you are in a course page then add this to the end of the url that you see in your browser adressbar...
:: &theme=essential

Allow theme change by URL

2015-02-10T23:43:43Z

Tqr: Created page with "''' == Site Administration > Appearance > Themes > Theme settings == Enabling this setting in Moodle 2.0+ themes allows you to change theme by adding either ?theme= or &them..."

Purge all cache

2014-08-07T07:35:00Z

Tqr: /* Settings > Site Administration > Development > Purge all caches */

== '''Site Administration > Development > Purge all caches''' ==

This setting is necessary when making changes to your theme or Moodle code in general. It removes the cached data, and so after refreshing your browser window with Ctrl + F5 you will see the changes you have made.

[[es:Purgar todas las cachés]]

Theme settings

2014-07-02T12:19:09Z

Tqr: /* Adding other attributes to the HTML */

{{Themes}}
== Theme settings ==
An administrator can change theme settings in ''Settings > Site administration > Appearance > Themes > Theme settings''.

[[File:Themesettings.png]]

===Theme list===
This lists the themes available for course and user themes. Leave this blank to allow any valid theme to be used. If you want to shorten the theme menu, you may specify a comma-separated list of names, though don't use spaces (e.g. standard,orangewhite).

You can preview the available themes in ''Administration > Site Administration > Appearance > Themes > Themes selector.''

===Theme designer mode===
Turn this on if you are designing and testing themes as it will stop the themes being cached and enable you to see theme changes quickly. (You can also do this with the Clear theme cache button on the theme selector page.)

===Allow user themes===
If the option ''allowuserthemes'' is enabled, each user may select their preferred theme on the edit profile page. All Moodle pages will be displayed in the user's theme, apart from courses where a course theme has been set.

'''NOTE:''' the user's theme will not be available in mobile and tablet devices unless the option ''enabledevicedetection'' is unchecked.

===Allow course themes===
If you enable this, then teachers will be able to set their own course themes. Course themes override all other theme choices (site, user, or session themes).

*If the option ''allowcoursethemes'' is enabled, each editing teacher may select their course theme via the Force theme option on the [[course/edit|Course settings]] page. The course will always be displayed in the theme specified in the course setting, with user and the site themes being overwritten.

'''NOTE:''' the course theme will not be available in mobile and tablet devices unless the option ''enabledevicedetection'' is unchecked.

===Allow category themes===
When enabled, themes can be set at the category level. This will affect all child categories and courses unless they have specifically set their own theme. WARNING: Enabling category themes may affect performance, as it will result in a few extra DB queries on each page, so only turn this on if you need it!

'''NOTE:''' the category theme will not be available in mobile and tablet devices unless the option ''enabledevicedetection'' is unchecked.

===Allow theme changes in the URL===
*If this is checked then the theme may be changed by adding <code>?theme=theme_name</code> (or <code>&theme=theme_name</code> if there are other URL parameters) to the URL in the browser. Theme names should be in lower case with spaces replaced by underscores, for example the theme "Formal white" should be entered as <code>?theme=formal_white</code>

===Allow users to hide blocks===
Allows users to display and hide blocks

===Allow blocks to use the docks===
*If the theme allows it, then checking this will allow the user to move blocks to the side dock.

===Custom menu items===
The custommenuitems setting allows you to create a drop down menu that can be displayed by themes that support it. Currently all themes that are provided with Moodle 2.0 support this custom menu.

You are able to create the custom menu by entering custom menu items one per line into the setting. Each item is preceded by a number of hyphens (-), the number of hyphens determines the depth of the item. So items that are '''NOT''' preceded by a hyphen appear on the top level of the menu (always visible), items with a single hyphen appear on a drop down menu below the previous top level item, and items with two hyphens appear on a drop down menu below the previous first level item and so on.

The content of each item is constructed of up to three bits, each separated by a '''|''' (Shift + \) character. The bits are '''label''' | '''url''' | '''tooltip'''.
; label : This is the text that will be shown within the menu item. You must specify a label for every item on the menu.
; url : This is the URL that the user will be taken to it they click the menu item. This is optional, if not provided then the item will not link anywhere.
; tooltip : If you provide a URL you can also choose to provide a tooltip for the link that is created with the URL. This is optional and if not set the label is used as the tooltip for the menu item.

The following is an example of how you would create a custom menu:

<pre>
Moodle community|http://moodle.org
-Moodle free support|http://moodle.org/support
-Moodle development|http://moodle.org/development
--Moodle Tracker|http://tracker.moodle.org
--Moodle Docs|https://docs.moodle.org
-Moodle News|http://moodle.org/news
Moodle company
-Moodle commercial hosting|http://moodle.com/hosting
-Moodle commercial support|http://moodle.com/support
</pre>

Note: The custom menu does not escape characters within the label, if you want to use a special HTML character such as an ampersand you must escape it yourself within the label. e.g. use & instead of &.

For more information on this setting please see the ''Using Moodle'' forum discussion [http://moodle.org/mod/forum/discuss.php?d=149803 Moodle 2.0: Custom menu in core]

==== Multilanguage support ====

You can add a language code (or a comma separated list of codes) as the 4th item of the line. The line will be then printed if and only if the user has currently selected the listed language. For example:

<pre><nowiki>
English only|http://moodle.com|English only item|en
German only|http://moodle.de|Deutsch|de,de_du,de_kids
</nowiki></pre>

==== Adding other attributes to the HTML ====
Other attributes, such as '''target''' can be added:
<pre><nowiki>
Moodle Homepage|http://moodle.org" target="_blank
</nowiki></pre>
The first escaped quote closes the href attribute, allowing other attributes to be added. Do not add the closing quotation mark on the final attribute, it is added automatically by Moodle.

===Enable device detection===
Will detect mobile and tablets that identify themselves via the web browser at the time of login to Moodle. These work with the theme selector. When the theme selector has identified a default, mobile and tablet themes, this feature will use that theme.

===Device detection regular expressions===
This will allow you to customize the theme selector options. For example, you can add a custom theme for IE6 and another for Windows CE by entering the identifying expressions the browser sends and the "Return value" you want to display as the theme selectors "Device type".

==Special themes==

=== Session themes ===
Moodle offers an additional way to set a theme - the '''session theme'''. This is set with the URL and lasts until you log out. When you next login, the site/course/user themes are active again. This option is great for theme testing and works perfectly when you want to enable different themes for different situations.

For example you can offer a special link for PDA users and integrate the session theme ''orangewhitepda'' in that link. Nobody needs to change any settings, you just click on that link. The session theme is called by the URL parameter <code>&theme=orangewhitepda</code>. The whole URL without the session theme could look like <code><nowiki>http://mymoodlesite.org/course/view.php?id=18</nowiki></code> and with the parameter for the PDA theme like <code><nowiki>"http://mymoodlesite.org/course/view.php?id=18&theme=orangewhitepda"</nowiki></code>.

In a standard Moodle installation, session themes are not active. To activate them the administrator must add the parameter <code>$CFG->allowthemechangeonurl = true;</code> to the Moodle ''config.php'' file in the Moodle base directory.

=== Page theme ===
A page theme is for special page-only themes set by code, use <code>$PAGE->force_theme()</code>.

== Theme hierarchy ==
Here is the usual order that themes are considered by the Moodle interface.

{| style="border:1px dashed #ddd"
|- style="vertical-align:top;text-align:left"
!Theme type
! style="background:#eee"|Overwrites
!Display
! style="background:#eee"|Setting type
|- style="vertical-align:top"
|Site
|style="background:#eee"| -
|all pages*
|style="background:#eee"|saved in theme profile
|- style="vertical-align:top"
|User
|style="background:#eee"|Site theme
|all pages*
|style="background:#eee"|saved in user profile
|- style="vertical-align:top"
|Course
|style="background:#eee"|Site, user and session themes
|one course
|style="background:#eee"|saved in course profile
|- style="vertical-align:top"
|Session
|style="background:#eee"|Site and user themes
|all pages*
|style="background:#eee"|temporary until logout
|}
(* except courses with the course theme set)

=== Change default hierarchy===
The priority of themes can be set via the /moodle/config.php file. The order defines which theme wins when there are several set at different levels. You can set a variable called $CFG->themeorder (see config-dist.php for more details). By default it is set to:

<code><nowiki>$CFG->themeorder = array('course', 'category', 'session', 'user', 'site');</nowiki></code>

==Particular theme settings==

Logo, tagline, link colour, column width, custom CSS and other settings for a particular theme may be set by an administrator in ''Administration > Site administration > Appearance > Themes > Theme name''.

[[es:Configuración de temas]]
[[fr:Réglages des thèmes]]
[[ja:テーマ設定]]
[[de:Design-Einstellungen]]

Themes FAQ

2014-06-12T08:26:14Z

Tqr: /* How can I get the links in my custom menu to open in new windows? */

{{Themes}}
==Where can I find more Moodle themes?==

As well as standard themes, which you will find in your Moodle installation, there are a number of FREE add-on themes available for download from [https://moodle.org/plugins/browse.php?list=category&id=3 Moodle plugins directory - Category:Themes]. Don't forget to choose the correct version of a theme for the version of Moodle you are currently using.

==How do I install a new theme?==

# Unzip the .zip file to an empty local directory.
# Upload folder to your web server to the /moodle/theme/[Theme Name]. (Replace [Theme Name] with the name of the theme you have downloaded.) Ensure the new theme folder and its contents are readable by the webserver. Change Read and Write permissions (CHMOD) for the files and folder to 755 - Owner read/write/execute, Group read/execute, Everyone read/execute. Incorrect permissions may prevent display of the newly installed theme.
# Choose your new theme from within Moodle via ''Administration > Appearance > Themes > Theme selector''.

=== How do I install a new theme when using cPanel? ===

# Upload your new theme .zip file to your web server via cPanel.
# Then using cPanel install the new theme to your Moodle theme's folder. The new theme will be installed into its own folder at /moodle/theme/[mytheme] (where [mytheme] is the name of your new theme.
# Ensure the new theme folder and its contents are readable by the webserver. If necessary change Read and Write permissions (CHMOD) for the files and folder to 755 - Owner read/write/execute, Group read/execute, Everyone read/execute. Incorrect permissions may prevent display of the newly installed theme.
# Choose your new theme from within Moodle via ''Administration > Appearance > Themes > Theme selector''

=== Why is the new theme I uploaded not showing up in Theme Selector? ===

You probably forgot to do something correctly. Here are steps to create a "new" theme from an existing theme called "standard". Bold show places you must change for the theme to appear.
#Copy folder theme/standard and call it theme/new
#In theme/new/lang/en folder,
##'''Renamed theme_standard.php to theme_new.php'''
#Opened theme/new/lang/en/theme_new.php, recommend you change 2 lines to read something like:
##$string['pluginname'] = 'New theme - Martin D';
##$string['choosereadme'] = 'New theme came from the Standard theme and is being changed by Martin D in 2011';
##Saved the file
#In theme/new/config.php
##Change '''$THEME->NAME = 'new'''';
#Went to ''Administration > Site Administration > Appearance > Theme settings'' > Theme designer mode (Checked)
#''Settings > Site Administration > Appearance > Theme selector''
##Clear theme caches
##Select theme

:''Tip:'' There could be a number of problems with the theme you uploaded, but one major problem reported in the Themes Forum all point to the way in which the theme is uploaded on certain servers. Using the cPanel method, as described in the FAQ [[Themes_FAQ#How do I install a new theme when using cPanel?|How do I install a new theme when using cPanel?]] will, in most cases, cure the problem.

== How do I control what themes show up where? ==

You can control which themes show up in which contexts by a series of settings in ''Administration>Site Administration>Appearance>Themes>Theme settings''

===How can I restrict the available themes to users and in courses?===

In'' Administration>Site Administration>Appearance>Themes>Theme settings'', add the themes you want them to use in the Theme list. These will then restrict the theme choice lists in pull down menus the contexts (Course, Category, User) where you allow them.

===What is the hierarchy of contexts for themes to override each other?===

There are five contexts in which themes appear and can be set: courses, category, session, user, and site (or Default, i.e. the site wide default theme). That is the level of priority of appearance they have as well.

* You enable/disable these in [https://docs.moodle.org/en/Theme_settings Theme settings.]
* It is possible to change this hierarchy in the config.php file - see [https://docs.moodle.org/en/Theme_settings#Change_default_hierarchy change default hierarchy] for how.

====Hierarchy of themes====

* Course overrides Category (and below)
* Category overrides Session (and below)
* Session overrides User (and below)
* User overrides Default
* Default (site)

====Note on Session Themes====

* It is important to note that Session level themes (those set with the URL parameter theme=theme_name), override the Site level theme ONLY for the user's current logged in session. When the user logs out, they will then see the Default site theme, not the Session theme.
* You only have to set the theme once via the URL parameter and it will persist until the user logs out.

==How do I create a custom theme?==

See the developer documentation [[:dev:Theme development|Theme development]].

==Can I assign a specific theme to a course?==

Yes. In the course settings, use the "Force theme" dropdown box.

==Is it possible to customise language strings per theme?==
Not by default, as when strings are customised, they are customised for the whole site. However, it is possible to make a new language pack based on your main language and apply that pack to the course which has that theme. See this forum post for more information: https://moodle.org/mod/forum/discuss.php?d=220671

==How can I get the links in my custom menu to open in new windows?==
It is possible to create your own fly out menu via the custom menu block in Settings>Site administration>Appearance>Themes>Theme settings. Copy the examples given below the box. If you want the links to open in a new window, use the following code:
Moodle|http://www.moodle.org" target="_blank

See also https://tracker.moodle.org/browse/MDL-35420

== Where shall I put my custom CSS code? ==

Note that the standard themes Afterburner, Arialist, Formal White, Fusion, Nonzero, Overlay, Sky High and Splash all offer the possibility to add custom CSS in their page settings via ''Settings>Appearance>Themes>''.

Failing this, instead of modifying the theme's CSS files you better put your own code in a separate CSS file and make your theme aware of that file by modifying its config.php file (be sure add your own CSS file as the last one in the list so that you will override all prior settings). See this posting for [http://moodle.org/mod/forum/discuss.php?d=128599#p564055 detailed instructions].

See also the instructions on creating your own theme mentioned above.

==Will I lose my courses, language files, logo, etc. if I switch my theme?==
Switching themes only changes the appearance of your site, not the content within it. The logo is a part of the theme and will be lost when you switch.

Follow these instructions to [[:dev:Creating_a_custom_theme#Adding_a_Logo|add a logo]] to a theme.
:If you upgrade your Moodle site and tweaked an existing standard theme, you will lose your changes. Thus it is a good idea to create a custom theme which will not be changed when you upgrade.

==I can't access theme files on the server. Can I still add a logo to a theme?==
Yes. You have three choices:
**Use the Clean theme (new in 2.5) or the Afterburner theme, both of which have the File picker available for you to upload your logo.
**Either upload your logo to another place publicly available online and then copy the image's URL to paste into the logo field of the theme page you are editing (such as Afterburner)
**Or add the main menu block to your front page; upload the logo via Main menu>Add a resource. Get its URL and paste it into the logo field of the theme page you are editing. You can safely then hide or delete the main menu block; the logo will still be there. ''NOTE'' - your logo will appear in ''Navigation>Site pages'' as well. To prevent this, go to ''Administration>Site administration>Appearance>Navigation'' and untick the box "Show front page activities in the navigation")

==How can I add custom fonts to a theme?==

See [[How to add custom fonts in a theme]]

== Are there tools which help me creating and editing themes? ==

=== Clear Cache Button ===
This useful Firefox add-on let's you add a button to your tool bar for easily clearing your cache while working on your theme: https://addons.mozilla.org/de/firefox/addon/1801

<p class="note">Please note that the following tools are only for development. They only change the way ''you'' see your Moodle site, not the Moodle site itself. Any changes you make using these tools will not be visible to anyone else who uses your site. For this you will have to make those changes permanent by changing your theme's CSS files for example.</p>

=== Firebug ===
The single most useful tool is the [[:dev:Firebug|Firebug]] add-on for the [[:dev:Firefox|Firefox]] web browser. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page... And there are additional add-ons for making Firebug an even more powerful tool.

==== Firebug enhancements ====
You can enhance Firebug even further. See [[:dev:Firebug|Firebug]] for more information.

=== Web Developer Toolbar ===
Another great tool for any web developer is the [[:dev:Web developer extension|Web developer extension]], another Firefox add-on. One very useful feature is the option to '''disable your browser's cache''' while working on your theme. That way you are sure you're always presented with your latest modifications and not with an older, cached version.

Now also available for Google's Chrome browser: [http://www.sitepoint.com/blogs/2010/03/23/chrome-web-developer-toolbar/ "The Web Developer Toolbar Comes to Chrome"]

=== Stylish ===
Modifications made with Firebug are lost when refreshing your page. If you want your CSS changes to be a bit more permanent, for example to try them with different pages of your Moodle installation, you can use another Firefox plugin: [https://addons.mozilla.org/en-US/firefox/addon/2108 Stylish]. That way you can change your site's CSS with a simple mouse click without having to change Moodle code.

See [[:dev:Stylish|Stylish]] for detailed instructions and examples.

==== Stylish-Custom ====
This is an [https://addons.mozilla.org/en-US/firefox/addon/12105/ custom additions] to the Stylish extension which brings back features from 0.5.9 and adds new features.

== How do I check for cross-browser compatibility? ==
There are some tools (standalone and online) which can show you how your site looks in different browsers. See this [http://moodle.org/mod/forum/discuss.php?d=127746 forum discussion] for details. See the new device detection settings in [[Theme settings]] which will allow you to create a theme for those "special" browsers.

==How are the device types used in Moodle?==
If "Enabled device detection" has been turned on, Moodle will automatically use the theme which has been set for the device in the [[Standard themes|Theme selector]] settings page. It is also possible to add additional types to the Theme selector page by using the "device detection regular expressions" fields.

Site administrators can find these enable device detection settings in Site administration > Appearance >Themes > [[Theme settings]] .

== Concrete examples for modifying Moodle themes ==
<p class="note">
The following examples were taken from the former ''Theme Scrapbook'':
<br />
"The Moodle '''Theme Scrapbook''' is a collection of small how-to descriptions. You theme designers and Moodle users working with themes add your knowledge here to help new Moodle users with tips and tricks for their theme work.
<br />
Feel free to add to this list! Don't know how? Read our [[MoodleDocs:Guidelines_for_contributors|Guidelines for contributors]]."
</p>

=== Changing things ===

==== Colors ====
* [[:dev:Forcing the colour of the chat discussion pane (pop-up mode)]]
* [http://moodle.org/mod/forum/discuss.php?d=142765 Changing background colour of a topic box]
* [http://moodle.org/mod/forum/discuss.php?d=152357 How to change the colour of the popup event's header and background]

==== Logo and icons ====
* [[:dev:Alternate Icon Set|Using an alternate icon set in Moodle]]
* [[Favicon|Change the favicon that shows in front of the web address]]
* [[Footer replacement|Replace the logo in the footer with your web address and/or or own logo]]
*[[:dev:Header logo|Replace the logo in the header]]

==== Layout ====
* [http://moodle.org/mod/forum/discuss.php?d=136546 Overriding the $menu / $button variables] using PHP regular expressions in header.html
* [http://moodle.org/mod/forum/discuss.php?d=143411 Changing the view of course categories] - work in progress
* [http://moodle.org/mod/forum/discuss.php?d=145077 Sub categories and courses layout] - work in progress
* [http://moodle.org/mod/forum/discuss.php?d=151370 Tracker 'components' list too small]

=== Adding things ===
* [http://moodle.org/mod/forum/discuss.php?d=157935 How to add a different img-bullet to each category?]

=== Hiding things ===
* Hiding an element with CSS is generally achieved using the [http://reference.sitepoint.com/css/display display: none;] property on the element.
* See [[:dev:Print style]] and [[:dev:Stylish#Print style for Database records]] for an example how to hide parts of a page not meant for printing.

=== Moving things ===
* [[:dev:Center Forum Posts|Centre smaller forum posts on the page]]
* [[:dev:Footer positioning|Positioning the page footer]]
* [[:dev:Left-align quiz|Left align quiz questions and answers]]
* [http://moodle.org/mod/forum/discuss.php?d=121847 Indentation for nested categories]
* [http://moodle.org/mod/forum/discuss.php?d=128599 Positioning login and choose language field]
* [http://moodle.org/mod/forum/discuss.php?d=145179 Match question type - position answers nearer to the questions]
* [[:dev:Stylish#Fixed admin menue with CSS]]

=== Miscellaneous ===
* [[:dev:Fixed-width theme|Creating a fixed-width theme]]
* [http://moodle.org/mod/forum/discuss.php?d=146763 Is there a way to fix oversized HTML Editor using CSS?]
* [[:dev:Category Design|Modifying the design of specific categories with CSS]]

==How can I see theme changes when using the Windows Complete Installer package==
In the [http://download.moodle.org/windows/ Windows Complete Installer package], the eAccelerator in the XAMPP install can cause some issues with changes to your theme's CSS and HTML files from showing.

Open the php.ini file inside of the server\php folder from your install in notepad and search for "eAccelerator" you should see a line that reads:
extension=eaccelerator.dll

Insert a semi-colon (turns the line into a comment) at the start of this line so it now reads:
;extension=eaccelerator.dll

Restart the Moodle server using the "stop moodle" and then the "start moodle" programs in your server folder. You should now find that all of your changes to your CSS are reflected as soon as you save the file and refresh your browser cache (usually you can refresh your cache by pressing F5). This FAQ from a discussion at [http://moodle.org/mod/forum/discuss.php?d=151562#p663950 Deactivating caching with XAMPP installations]

==How can I have a custom menu for different roles, eg student or teacher?==
While it is not possible to show a different menu to different roles (because they tend to be assigned course-wide not site-wide), it is possible to have a different menu for different users. See this [https://moodle.org/mod/forum/discuss.php?d=149803#p1131386 forum post on custom menus]

== See also ==

* Using Moodle [http://moodle.org/mod/forum/view.php?f=29 Themes forum]
* [[:dev:CSS FAQ]]
* [http://learn.open.ac.uk/mod/oublog/view.php?user=155976 "Understanding Moodle Themes"] - Blog post by [http://moodle.org/user/view.php?id=78896&course=5 Christopher Douce] (Open University)
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=149534 Testing 2.0. Use for modern vs old browsers] forum discussion

[[Category:FAQ]]
[[de:Designs_FAQ]]

Header and footer

2014-04-03T15:39:37Z

Tqr: /* Additional HTML */

{{Site appearance}}
== Additional HTML ==

An administrator can add additional HTML or CSS or JavaScript to every page in ''Settings > Site administration > Appearance > Additional HTML''.

These settings allow you to specify HTML or CSS or JavaScript that you want added to every page without altering the Moodle code files.

You can add HTML, CSS or JavaScript, to three sections in the Additonal HTML page.
# Within HEAD: within the <head></head> tag for the page. (Example: Meta tags, CSS, JavaScript).
# When BODY is opened: above the header section of the main body of the page that is displayed. (Example: Banner image or text heading, alert message).
# When BODY is closed: below the footer of the page. (Example: Google Analytics).

Doing this allows you add custom headers or footers on every page, or add support for services like Google Analytics very easily and independent of your chosen theme.

Another way of adding a custom footer or support for Google Analytics is via the settings of certain themes such as the Clean theme.

==Moodle Docs==
[[File:MoodleDocsforthispageScreenshot.png|thumb|'Moodle Docs for this page' link]]
Moodle Docs is an abbreviation for ''Moodle documentation''.

By default, managers, teachers and non-editing teachers (and any other users with the capability [[Capabilities/moodle/site:doclinks|moodle/site:doclinks]]) have "Moodle Docs for this page" links at the bottom of each page in Moodle for accessing context-specific documentation.

An administrator can change Moodle Docs settings in ''Settings > Site administration > Appearance > Moodle Docs''.

The default path is to docs.moodle.org. If a user has selected a language for which there is documentation available, the "Moodle Docs for this page" links will link to the documentation in that language.

If the Moodle Docs document root field is left blank, no "Moodle Docs for this page" links will appear.

You may find that teachers prefer the documentation to open in a new window, so they can easily return to their page in Moodle. If so, click the "Open in new window" checkbox.

As you may have discovered, Moodle Docs contains many searchable pages which represents 1,000s of hours of refinement by the Moodle community. For example, it is common to see a link from a forum in Moodle.org to a specific page or section in a Moodle Docs page. Likewise, something can be added to Moodle Docs to cover a new feature or to give a more detail description of a process that is not possible or desirable in a forum or as part of the help files.

Moodle Docs is a living document that is constantly changing at docs.moodle.org . Anyone in the Moodle community who sees a need is invited to make an addition or add their opinion in the page comments tab.

:Tip: If your site language is one for which there is unmaintained documentation (see [https://docs.moodle.org/overview/ Moodle Docs overview]) e.g. Czech and you wish to make use of the archived documentation, you can set the Moodle Docs document root to https://docs.moodle.org/archive/cs/.

The document root may also be changed to point to some custom online documentation. The paths the custom documentation should follow the same format as https://docs.moodle.org.

==See also==

* [[Theme settings]] for details of how to set up custom menu items
* [http://wimski.org/docs/ http://wimski.org/docs/] for downloading offline Moodle Docs pages.

[[de:Kopf- und Fußzeile]]
[[es:Encabezado y pie de página]]

Header and footer

2014-04-03T15:34:43Z

Tqr: Added a few extra uses other than HTML

{{Site appearance}}
== Additional HTML ==

An administrator can add additional HTML or CSS or JavaScript to every page in ''Settings > Site administration > Appearance > Additional HTML''.

These settings allow you to specify HTML or CSS or JavaScript that you want added to every page without altering the Moodle code files.

You can add HTML, CSS or JavaScript, to three sections in the Additonal HTML page.
1) Within HEAD: within the HEAD tag for the page. (Example: Meta tags, CSS, JavaScript).
2) When BODY is opened: within the HEADER of the page. (Example: Banner image or text heading, alert message).
3) When BODY is closed: within the FOOTER of the page. (Example: Google Analytics).

Doing this allows you add custom headers or footers on every page, or add support for services like Google Analytics very easily and independent of your chosen theme.

Another way of adding a custom footer or support for Google Analytics is via the settings of certain themes such as the Clean theme.

==Moodle Docs==
[[File:MoodleDocsforthispageScreenshot.png|thumb|'Moodle Docs for this page' link]]
Moodle Docs is an abbreviation for ''Moodle documentation''.

By default, managers, teachers and non-editing teachers (and any other users with the capability [[Capabilities/moodle/site:doclinks|moodle/site:doclinks]]) have "Moodle Docs for this page" links at the bottom of each page in Moodle for accessing context-specific documentation.

An administrator can change Moodle Docs settings in ''Settings > Site administration > Appearance > Moodle Docs''.

The default path is to docs.moodle.org. If a user has selected a language for which there is documentation available, the "Moodle Docs for this page" links will link to the documentation in that language.

If the Moodle Docs document root field is left blank, no "Moodle Docs for this page" links will appear.

You may find that teachers prefer the documentation to open in a new window, so they can easily return to their page in Moodle. If so, click the "Open in new window" checkbox.

As you may have discovered, Moodle Docs contains many searchable pages which represents 1,000s of hours of refinement by the Moodle community. For example, it is common to see a link from a forum in Moodle.org to a specific page or section in a Moodle Docs page. Likewise, something can be added to Moodle Docs to cover a new feature or to give a more detail description of a process that is not possible or desirable in a forum or as part of the help files.

Moodle Docs is a living document that is constantly changing at docs.moodle.org . Anyone in the Moodle community who sees a need is invited to make an addition or add their opinion in the page comments tab.

:Tip: If your site language is one for which there is unmaintained documentation (see [https://docs.moodle.org/overview/ Moodle Docs overview]) e.g. Czech and you wish to make use of the archived documentation, you can set the Moodle Docs document root to https://docs.moodle.org/archive/cs/.

The document root may also be changed to point to some custom online documentation. The paths the custom documentation should follow the same format as https://docs.moodle.org.

==See also==

* [[Theme settings]] for details of how to set up custom menu items
* [http://wimski.org/docs/ http://wimski.org/docs/] for downloading offline Moodle Docs pages.

[[de:Kopf- und Fußzeile]]
[[es:Encabezado y pie de página]]

User pictures

2014-03-19T17:34:44Z

Tqr: /* Updating user pictures */

{{Accounts}}
==User pictures==
Every user on Moodle is able to have their own personal profile picture (or "avatar") which can be uploaded via their profile. If no picture has been uploaded then the default is:

[[File:F1.png]]

==Viewing all user pictures==
*An administrator can do a quick check of the user pictures by typing in the browser http://www.YOURMOODLESITE.com/userpix when logged in as admin.

== Updating user pictures ==

Users can update their picture by editing their user profile in ''Administration > My profile > Edit profile''. (The site administrator can disable this ability in ''Administration > Site administration > Security > Site policies''.)

The user's picture is usually displayed next to the user's name. For example, next to content they have has posted in a forum, or in a participant list.

There is a default image that is used by the Moodle site. The site administrator can change the default picture for the site by replacing the F1 and F2 images in the theme folder '''/theme/''themename''/pix_core/u/''' or in the core folder '''/pix/u/'''. Remember to refresh your browser [Ctrl + F5] to see any picture changes!

* There is a delete box when checked will delete the picture when the profile is saved.
* There is a browse button for the user to find and upload a picture file.
* The upload image will be reduced and saved in two files of 100px by 100px and 35px by 35px.
* The picture description appears when the mouse rolls over the picture.

Tip: If you want the default picture to be blank, then replace it with a 1px x 1px transparent spacer image with the same filename. It can be either a '.png' or '.gif' file extension.

==Uploading user pictures in bulk==

An administrator can upload a zip file containing user images in ''Settings > Site administration > Users > Accounts > Upload user pictures''.

[[File:Uploaduserpictures.png]]

*The image files should be named after the username, the idnumber or the id of the student (along with the correct image file extension.) For example, a student with the username ''jbrown98'' would have a picture called ''jbrown98.jpg''
*Image types supported include gif, jpg, and png.
*Image file names are not case sensitive.

==Gravatars==

An administrator can enable the use of gravatars in ''Settings > Site administration > Users > Permissions > User policies''. If a user has not uploaded a user picture, Moodle will check whether the user's email address has an associated gravatar and if so, will use the gravatar as the user's picture.

See also (for 2.3.3 onwards) Gravatar default image URLs in [[Roles settings]]

==See also==

*Using Moodle [http://moodle.org/mod/forum/discuss.php?d=141378 Cannot upload or change profile pictures] forum discussion

[[eu:Erabiltzailearen_irudiak]]
[[es:Imágenes de los usuarios]]
[[fr:Image des utilisateurs]]
[[de:Nutzerbilder]]

User pictures

2014-03-19T17:30:45Z

Tqr: /* Updating user pictures */

{{Accounts}}
==User pictures==
Every user on Moodle is able to have their own personal profile picture (or "avatar") which can be uploaded via their profile. If no picture has been uploaded then the default is:

[[File:F1.png]]

==Viewing all user pictures==
*An administrator can do a quick check of the user pictures by typing in the browser http://www.YOURMOODLESITE.com/userpix when logged in as admin.

== Updating user pictures ==

Users can update their picture by editing their user profile in ''Administration > My profile > Edit profile''. (The site administrator can disable this ability in ''Administration > Site administration > Security > Site policies''.)

The user's picture is usually displayed next to the user's name. For example, next to content they have has posted in a forum, or in a participant list.

There is a default image that is used by the Moodle site. The site administrator can change the default picture for the site by replacing the F1 and F2 images in the theme folder '''/theme/''themename''/pix_core/u/''' or in the core folder '''/pix/u/'''. Remember to refresh your browser [Ctrl + F5] to see any picture changes!

* There is a delete box when checked will delete the picture when the profile is saved.
* There is a browse button for the user to find and upload a picture file.
* The upload image will be reduced and saved in two files of 100px by 100px and 35px by 35px.
* The picture description appears when the mouse rolls over the picture.

Tip: If you want the default picture to be blank? Replace your user picture with a 1px x 1px transparent spacer image.

==Uploading user pictures in bulk==

An administrator can upload a zip file containing user images in ''Settings > Site administration > Users > Accounts > Upload user pictures''.

[[File:Uploaduserpictures.png]]

*The image files should be named after the username, the idnumber or the id of the student (along with the correct image file extension.) For example, a student with the username ''jbrown98'' would have a picture called ''jbrown98.jpg''
*Image types supported include gif, jpg, and png.
*Image file names are not case sensitive.

==Gravatars==

An administrator can enable the use of gravatars in ''Settings > Site administration > Users > Permissions > User policies''. If a user has not uploaded a user picture, Moodle will check whether the user's email address has an associated gravatar and if so, will use the gravatar as the user's picture.

See also (for 2.3.3 onwards) Gravatar default image URLs in [[Roles settings]]

==See also==

*Using Moodle [http://moodle.org/mod/forum/discuss.php?d=141378 Cannot upload or change profile pictures] forum discussion

[[eu:Erabiltzailearen_irudiak]]
[[es:Imágenes de los usuarios]]
[[fr:Image des utilisateurs]]
[[de:Nutzerbilder]]

error/core plugin/detectedmisplacedplugin

2014-02-06T21:12:08Z

Tqr: Created this page

== DO NOT PANIC THIS IS EASILY FIXED ==

Let me guess, you arrived here after trying to install a new theme? If so then check that the version.php of the theme in question, and make sure that it is completed correctly, especially this line...

$plugin->component = 'theme_'''yourthemename''''; // Full name of the plugin (used for diagnostics)

...where ''''yourthemename'''' is the correct spelling of the theme you are trying to install.

How to add custom fonts in a theme

2013-11-19T17:26:58Z

Tqr:

Create a new directory in your theme and call it fonts. Then add all your custom fonts in this directory.
eg: moodle/theme/yourtheme/fonts/

In your themes CSS file add the following:
@font-face { /* where FontName and fontname represents the name of the font you want to add */
font-family: 'FontName';
src: url(<nowiki>[[font:theme|fontname.eot]]</nowiki>);
src: url(<nowiki>[[font:theme|fontname.eot]]</nowiki>) format('embedded-opentype'),
url(<nowiki>[[font:theme|fontname.woff]]</nowiki>) format('woff'),
url(<nowiki>[[font:theme|fontname.ttf]]</nowiki>) format('truetype'),
url(<nowiki>[[font:theme|fontname.svg]]</nowiki>) format('svg');
font-weight: normal;
font-style: normal;
}

Next ADD the name of your font wherever you want that font to be used in your stylesheet.
For example:
#page-header h1 { font-family: FontName;}

How to add custom fonts in a theme

2013-11-19T15:39:50Z

Tqr: Created page with " Create a new directory in your theme and call it fonts. Then add all your custom fonts in this directory. eg: moodle/theme/yourtheme/fonts/ In your themes CS..."

Create a new directory in your theme and call it fonts. Then add all your custom fonts in this directory.
eg: moodle/theme/yourtheme/fonts/

In your themes CSS file add the following:
@font-face { /* where FontName and fontname represents the name of the font you want to add */
font-family: 'FontName';
src: url([[font:theme|fontname.eot]]);
src: url([[font:theme|fontname.eot]]) format('embedded-opentype'),
url([[font:theme|fontname.woff]]) format('woff'),
url([[font:theme|fontname.ttf]]) format('truetype'),
url([[font:theme|fontname.svg]]) format('svg');
font-weight: normal;
font-style: normal;
}

Next ADD the name of your font wherever you want that font to be used in your stylesheet.
For example:
#page-header h1 { font-family: FontName;}

Standard themes

2013-08-31T20:17:30Z

Tqr: /* Themes with right hand column(s) only */

{{Themes}}
==Theme selector==

An administrator can set a theme for the site in ''Administration > Site administration > Appearance > Themes > Theme selector''.

Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.

Go to ''Administration > Site administration > Appearance > Themes > Theme selector''
*Click on the "Select theme" button next to the type you wish to change
*Scroll down to see the previews of the available themes and click on the "Use theme" button to chose the theme
*The next screen will provide information about the theme. Click "Continue"

Note 1: Moodle caches themes so if you don't immediately see changed settings that you were expecting, click the "Clear theme caches" button at the top of the Theme selector page.

Note 2: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].

Tip: The [[MyMobile theme]] is especially designed for mobile devices.

[[File:Themeselector21.png|thumb|center|theme selector showing default and none selected in other theme types]]

==Notes on individual themes==

Arialist: does not display the logo at course/course level. This means it is not useful for branding at a category/course level.

===Themes that allow you to change a logo===
*Afterburner (this offers you the File picker to upload your logo)
*Arialist (only at home page level) Code to change this: http://moodle.org/mod/forum/discuss.php?d=192409
*Brick
*Clean (this offers you the File picker to upload your logo)
*Formal White (this offers you the File picker to upload your logo)
*Magazine
*Sky High
*Splash

===Themes that allow custom CSS===
*Afterburner
*Anomaly
*Arialist
*Formal White
*Fusion
*Non-zero
*Overlay
*Sky High
*Splash

===Themes with right hand column(s) only===
*Arialist
*Brick
*Fusion
*Nimble
*Non-zero (2 columns)
*Overlay (2 columns)
*Sky High (2 columns)

===Various forum help that may be useful===
#Changing logo height in Afterburner: http://moodle.org/mod/forum/discuss.php?d=197924
#Moving columns in Sky High: http://moodle.org/mod/forum/discuss.php?d=209626
#Tweaks to header area in Formal White: http://moodle.org/mod/forum/discuss.php?d=167544

==Standard themes==

In alphabetical order here are the standard themes in Moodle:
<gallery caption="Standard Themes - click on any to enlarge" widths="200px" heights="113px" perrow="3">
Image:theme_afterburner.png|Afterburner theme
Image:theme_anomaly.png|Anomaly theme
Image:theme_arialist.png|Arialist theme
Image:theme_binarius.png|Binarius theme
Image:theme_boxxie.png|Boxxie theme
Image:theme_brick.png|Brick theme
Image:CLEANtheme.png|Clean theme (new in 2.5)
Image:theme_formalwhite.png|Formal white theme
Image:theme_formfactor.png|FormFactor theme
Image:theme_fusion.png|Fusion theme
Image:theme_leatherbound.png|Leatherbound theme
Image:theme_magazine.png|Magazine theme
Image:Mymobile_theme.png|MyMobile theme
Image:theme_nimble.png|Nimble theme
Image:theme_nonzero.png|Nonzero theme
Image:theme_overlay.png|Overlay theme
Image:theme_serenity.png|Serenity theme
Image:theme_skyhigh.png|Sky High theme
Image:theme_splash.png|Splash theme
Image:theme_standard.png|Standard theme
</gallery>

==See also==

* [[Theme credits]]
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=189573 What counts as a 'legacy' device type?] forum discussion

[[de:Standard-Designs]]

Standard themes

2013-08-31T20:17:05Z

Tqr: /* Themes that allow you to change a logo */

{{Themes}}
==Theme selector==

An administrator can set a theme for the site in ''Administration > Site administration > Appearance > Themes > Theme selector''.

Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.

Go to ''Administration > Site administration > Appearance > Themes > Theme selector''
*Click on the "Select theme" button next to the type you wish to change
*Scroll down to see the previews of the available themes and click on the "Use theme" button to chose the theme
*The next screen will provide information about the theme. Click "Continue"

Note 1: Moodle caches themes so if you don't immediately see changed settings that you were expecting, click the "Clear theme caches" button at the top of the Theme selector page.

Note 2: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].

Tip: The [[MyMobile theme]] is especially designed for mobile devices.

[[File:Themeselector21.png|thumb|center|theme selector showing default and none selected in other theme types]]

==Notes on individual themes==

Arialist: does not display the logo at course/course level. This means it is not useful for branding at a category/course level.

===Themes that allow you to change a logo===
*Afterburner (this offers you the File picker to upload your logo)
*Arialist (only at home page level) Code to change this: http://moodle.org/mod/forum/discuss.php?d=192409
*Brick
*Clean (this offers you the File picker to upload your logo)
*Formal White (this offers you the File picker to upload your logo)
*Magazine
*Sky High
*Splash

===Themes that allow custom CSS===
*Afterburner
*Anomaly
*Arialist
*Formal White
*Fusion
*Non-zero
*Overlay
*Sky High
*Splash

===Themes with right hand column(s) only===
*Arialist
*Brick
*Fusion
*Nimble
*Non-zero (2 columns)
*Overlay (2 columns)
*Skyhigh (2 columns)

===Various forum help that may be useful===
#Changing logo height in Afterburner: http://moodle.org/mod/forum/discuss.php?d=197924
#Moving columns in Sky High: http://moodle.org/mod/forum/discuss.php?d=209626
#Tweaks to header area in Formal White: http://moodle.org/mod/forum/discuss.php?d=167544

==Standard themes==

In alphabetical order here are the standard themes in Moodle:
<gallery caption="Standard Themes - click on any to enlarge" widths="200px" heights="113px" perrow="3">
Image:theme_afterburner.png|Afterburner theme
Image:theme_anomaly.png|Anomaly theme
Image:theme_arialist.png|Arialist theme
Image:theme_binarius.png|Binarius theme
Image:theme_boxxie.png|Boxxie theme
Image:theme_brick.png|Brick theme
Image:CLEANtheme.png|Clean theme (new in 2.5)
Image:theme_formalwhite.png|Formal white theme
Image:theme_formfactor.png|FormFactor theme
Image:theme_fusion.png|Fusion theme
Image:theme_leatherbound.png|Leatherbound theme
Image:theme_magazine.png|Magazine theme
Image:Mymobile_theme.png|MyMobile theme
Image:theme_nimble.png|Nimble theme
Image:theme_nonzero.png|Nonzero theme
Image:theme_overlay.png|Overlay theme
Image:theme_serenity.png|Serenity theme
Image:theme_skyhigh.png|Sky High theme
Image:theme_splash.png|Splash theme
Image:theme_standard.png|Standard theme
</gallery>

==See also==

* [[Theme credits]]
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=189573 What counts as a 'legacy' device type?] forum discussion

[[de:Standard-Designs]]

Standard themes

2013-08-31T20:16:05Z

Tqr: /* Themes that allow custom CSS */

{{Themes}}
==Theme selector==

An administrator can set a theme for the site in ''Administration > Site administration > Appearance > Themes > Theme selector''.

Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.

Go to ''Administration > Site administration > Appearance > Themes > Theme selector''
*Click on the "Select theme" button next to the type you wish to change
*Scroll down to see the previews of the available themes and click on the "Use theme" button to chose the theme
*The next screen will provide information about the theme. Click "Continue"

Note 1: Moodle caches themes so if you don't immediately see changed settings that you were expecting, click the "Clear theme caches" button at the top of the Theme selector page.

Note 2: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].

Tip: The [[MyMobile theme]] is especially designed for mobile devices.

[[File:Themeselector21.png|thumb|center|theme selector showing default and none selected in other theme types]]

==Notes on individual themes==

Arialist: does not display the logo at course/course level. This means it is not useful for branding at a category/course level.

===Themes that allow you to change a logo===
*Afterburner (this offers you the File picker to upload your logo)
*Arialist (only at home page level) Code to change this: http://moodle.org/mod/forum/discuss.php?d=192409
*Brick
*Clean (this offers you the File picker to upload your logo)
*Formal White (this offers you the File picker to upload your logo)
*Magazine
*Skylight
*Splash

===Themes that allow custom CSS===
*Afterburner
*Anomaly
*Arialist
*Formal White
*Fusion
*Non-zero
*Overlay
*Sky High
*Splash

===Themes with right hand column(s) only===
*Arialist
*Brick
*Fusion
*Nimble
*Non-zero (2 columns)
*Overlay (2 columns)
*Skyhigh (2 columns)

===Various forum help that may be useful===
#Changing logo height in Afterburner: http://moodle.org/mod/forum/discuss.php?d=197924
#Moving columns in Sky High: http://moodle.org/mod/forum/discuss.php?d=209626
#Tweaks to header area in Formal White: http://moodle.org/mod/forum/discuss.php?d=167544

==Standard themes==

In alphabetical order here are the standard themes in Moodle:
<gallery caption="Standard Themes - click on any to enlarge" widths="200px" heights="113px" perrow="3">
Image:theme_afterburner.png|Afterburner theme
Image:theme_anomaly.png|Anomaly theme
Image:theme_arialist.png|Arialist theme
Image:theme_binarius.png|Binarius theme
Image:theme_boxxie.png|Boxxie theme
Image:theme_brick.png|Brick theme
Image:CLEANtheme.png|Clean theme (new in 2.5)
Image:theme_formalwhite.png|Formal white theme
Image:theme_formfactor.png|FormFactor theme
Image:theme_fusion.png|Fusion theme
Image:theme_leatherbound.png|Leatherbound theme
Image:theme_magazine.png|Magazine theme
Image:Mymobile_theme.png|MyMobile theme
Image:theme_nimble.png|Nimble theme
Image:theme_nonzero.png|Nonzero theme
Image:theme_overlay.png|Overlay theme
Image:theme_serenity.png|Serenity theme
Image:theme_skyhigh.png|Sky High theme
Image:theme_splash.png|Splash theme
Image:theme_standard.png|Standard theme
</gallery>

==See also==

* [[Theme credits]]
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=189573 What counts as a 'legacy' device type?] forum discussion

[[de:Standard-Designs]]

Standard themes

2013-08-31T20:14:31Z

Tqr: /* Themes that allow custom CSS */

{{Themes}}
==Theme selector==

An administrator can set a theme for the site in ''Administration > Site administration > Appearance > Themes > Theme selector''.

Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.

Go to ''Administration > Site administration > Appearance > Themes > Theme selector''
*Click on the "Select theme" button next to the type you wish to change
*Scroll down to see the previews of the available themes and click on the "Use theme" button to chose the theme
*The next screen will provide information about the theme. Click "Continue"

Note 1: Moodle caches themes so if you don't immediately see changed settings that you were expecting, click the "Clear theme caches" button at the top of the Theme selector page.

Note 2: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].

Tip: The [[MyMobile theme]] is especially designed for mobile devices.

[[File:Themeselector21.png|thumb|center|theme selector showing default and none selected in other theme types]]

==Notes on individual themes==

Arialist: does not display the logo at course/course level. This means it is not useful for branding at a category/course level.

===Themes that allow you to change a logo===
*Afterburner (this offers you the File picker to upload your logo)
*Arialist (only at home page level) Code to change this: http://moodle.org/mod/forum/discuss.php?d=192409
*Brick
*Clean (this offers you the File picker to upload your logo)
*Formal White (this offers you the File picker to upload your logo)
*Magazine
*Skylight
*Splash

===Themes that allow custom CSS===
*Afterburner
*Anomaly
*Arialist
*Formal White
*Fusion
*Non-zero
*Overlay
*Sky High (2 columns)
*Splash

===Themes with right hand column(s) only===
*Arialist
*Brick
*Fusion
*Nimble
*Non-zero (2 columns)
*Overlay (2 columns)
*Skyhigh (2 columns)

===Various forum help that may be useful===
#Changing logo height in Afterburner: http://moodle.org/mod/forum/discuss.php?d=197924
#Moving columns in Sky High: http://moodle.org/mod/forum/discuss.php?d=209626
#Tweaks to header area in Formal White: http://moodle.org/mod/forum/discuss.php?d=167544

==Standard themes==

In alphabetical order here are the standard themes in Moodle:
<gallery caption="Standard Themes - click on any to enlarge" widths="200px" heights="113px" perrow="3">
Image:theme_afterburner.png|Afterburner theme
Image:theme_anomaly.png|Anomaly theme
Image:theme_arialist.png|Arialist theme
Image:theme_binarius.png|Binarius theme
Image:theme_boxxie.png|Boxxie theme
Image:theme_brick.png|Brick theme
Image:CLEANtheme.png|Clean theme (new in 2.5)
Image:theme_formalwhite.png|Formal white theme
Image:theme_formfactor.png|FormFactor theme
Image:theme_fusion.png|Fusion theme
Image:theme_leatherbound.png|Leatherbound theme
Image:theme_magazine.png|Magazine theme
Image:Mymobile_theme.png|MyMobile theme
Image:theme_nimble.png|Nimble theme
Image:theme_nonzero.png|Nonzero theme
Image:theme_overlay.png|Overlay theme
Image:theme_serenity.png|Serenity theme
Image:theme_skyhigh.png|Sky High theme
Image:theme_splash.png|Splash theme
Image:theme_standard.png|Standard theme
</gallery>

==See also==

* [[Theme credits]]
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=189573 What counts as a 'legacy' device type?] forum discussion

[[de:Standard-Designs]]

Standard themes

2013-08-31T20:13:17Z

Tqr: /* Themes that allow custom CSS */

{{Themes}}
==Theme selector==

An administrator can set a theme for the site in ''Administration > Site administration > Appearance > Themes > Theme selector''.

Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.

Go to ''Administration > Site administration > Appearance > Themes > Theme selector''
*Click on the "Select theme" button next to the type you wish to change
*Scroll down to see the previews of the available themes and click on the "Use theme" button to chose the theme
*The next screen will provide information about the theme. Click "Continue"

Note 1: Moodle caches themes so if you don't immediately see changed settings that you were expecting, click the "Clear theme caches" button at the top of the Theme selector page.

Note 2: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].

Tip: The [[MyMobile theme]] is especially designed for mobile devices.

[[File:Themeselector21.png|thumb|center|theme selector showing default and none selected in other theme types]]

==Notes on individual themes==

Arialist: does not display the logo at course/course level. This means it is not useful for branding at a category/course level.

===Themes that allow you to change a logo===
*Afterburner (this offers you the File picker to upload your logo)
*Arialist (only at home page level) Code to change this: http://moodle.org/mod/forum/discuss.php?d=192409
*Brick
*Clean (this offers you the File picker to upload your logo)
*Formal White (this offers you the File picker to upload your logo)
*Magazine
*Skylight
*Splash

===Themes that allow custom CSS===
*Afterburner
*Arialist
*Formal White
*Fusion
*Non-zero
*Overlay
*Sky High (2 columns)
*Splash

===Themes with right hand column(s) only===
*Arialist
*Brick
*Fusion
*Nimble
*Non-zero (2 columns)
*Overlay (2 columns)
*Skyhigh (2 columns)

===Various forum help that may be useful===
#Changing logo height in Afterburner: http://moodle.org/mod/forum/discuss.php?d=197924
#Moving columns in Sky High: http://moodle.org/mod/forum/discuss.php?d=209626
#Tweaks to header area in Formal White: http://moodle.org/mod/forum/discuss.php?d=167544

==Standard themes==

In alphabetical order here are the standard themes in Moodle:
<gallery caption="Standard Themes - click on any to enlarge" widths="200px" heights="113px" perrow="3">
Image:theme_afterburner.png|Afterburner theme
Image:theme_anomaly.png|Anomaly theme
Image:theme_arialist.png|Arialist theme
Image:theme_binarius.png|Binarius theme
Image:theme_boxxie.png|Boxxie theme
Image:theme_brick.png|Brick theme
Image:CLEANtheme.png|Clean theme (new in 2.5)
Image:theme_formalwhite.png|Formal white theme
Image:theme_formfactor.png|FormFactor theme
Image:theme_fusion.png|Fusion theme
Image:theme_leatherbound.png|Leatherbound theme
Image:theme_magazine.png|Magazine theme
Image:Mymobile_theme.png|MyMobile theme
Image:theme_nimble.png|Nimble theme
Image:theme_nonzero.png|Nonzero theme
Image:theme_overlay.png|Overlay theme
Image:theme_serenity.png|Serenity theme
Image:theme_skyhigh.png|Sky High theme
Image:theme_splash.png|Splash theme
Image:theme_standard.png|Standard theme
</gallery>

==See also==

* [[Theme credits]]
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=189573 What counts as a 'legacy' device type?] forum discussion

[[de:Standard-Designs]]

Standard themes

2013-08-31T20:12:16Z

Tqr: /* Themes that allow you to change a logo */

{{Themes}}
==Theme selector==

An administrator can set a theme for the site in ''Administration > Site administration > Appearance > Themes > Theme selector''.

Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.

Go to ''Administration > Site administration > Appearance > Themes > Theme selector''
*Click on the "Select theme" button next to the type you wish to change
*Scroll down to see the previews of the available themes and click on the "Use theme" button to chose the theme
*The next screen will provide information about the theme. Click "Continue"

Note 1: Moodle caches themes so if you don't immediately see changed settings that you were expecting, click the "Clear theme caches" button at the top of the Theme selector page.

Note 2: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].

Tip: The [[MyMobile theme]] is especially designed for mobile devices.

[[File:Themeselector21.png|thumb|center|theme selector showing default and none selected in other theme types]]

==Notes on individual themes==

Arialist: does not display the logo at course/course level. This means it is not useful for branding at a category/course level.

===Themes that allow you to change a logo===
*Afterburner (this offers you the File picker to upload your logo)
*Arialist (only at home page level) Code to change this: http://moodle.org/mod/forum/discuss.php?d=192409
*Brick
*Clean (this offers you the File picker to upload your logo)
*Formal White (this offers you the File picker to upload your logo)
*Magazine
*Skylight
*Splash

===Themes that allow custom CSS===
*Arialist
*Fusion
*Non-zero
*Overlay
*Sky High (2 columns)
*Splash

===Themes with right hand column(s) only===
*Arialist
*Brick
*Fusion
*Nimble
*Non-zero (2 columns)
*Overlay (2 columns)
*Skyhigh (2 columns)

===Various forum help that may be useful===
#Changing logo height in Afterburner: http://moodle.org/mod/forum/discuss.php?d=197924
#Moving columns in Sky High: http://moodle.org/mod/forum/discuss.php?d=209626
#Tweaks to header area in Formal White: http://moodle.org/mod/forum/discuss.php?d=167544

==Standard themes==

In alphabetical order here are the standard themes in Moodle:
<gallery caption="Standard Themes - click on any to enlarge" widths="200px" heights="113px" perrow="3">
Image:theme_afterburner.png|Afterburner theme
Image:theme_anomaly.png|Anomaly theme
Image:theme_arialist.png|Arialist theme
Image:theme_binarius.png|Binarius theme
Image:theme_boxxie.png|Boxxie theme
Image:theme_brick.png|Brick theme
Image:CLEANtheme.png|Clean theme (new in 2.5)
Image:theme_formalwhite.png|Formal white theme
Image:theme_formfactor.png|FormFactor theme
Image:theme_fusion.png|Fusion theme
Image:theme_leatherbound.png|Leatherbound theme
Image:theme_magazine.png|Magazine theme
Image:Mymobile_theme.png|MyMobile theme
Image:theme_nimble.png|Nimble theme
Image:theme_nonzero.png|Nonzero theme
Image:theme_overlay.png|Overlay theme
Image:theme_serenity.png|Serenity theme
Image:theme_skyhigh.png|Sky High theme
Image:theme_splash.png|Splash theme
Image:theme_standard.png|Standard theme
</gallery>

==See also==

* [[Theme credits]]
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=189573 What counts as a 'legacy' device type?] forum discussion

[[de:Standard-Designs]]

Theme Designer Mode

2013-02-22T22:52:00Z

Tqr: /* Site Administration > Appearance > Themes > Theme settings */

'''
== Site Administration > Appearance > Themes > Theme settings ==

Enabling this setting in Moodle 2.0+ themes stops Moodle caching the data of the elements you are working on, and thus enables you to see those changes after refreshing your browser window using Ctrl + F5.

Theme Designer Mode

2013-02-22T22:51:39Z

Tqr: /* Site Administration > Appearance > Themes > Theme settings */

Theme Designer Mode

2013-02-22T22:50:48Z

Tqr: /* Settings > Site Administration > Appearance > Themes > Theme settings */

Theme Designer Mode

2013-02-18T00:49:24Z

Tqr: /* Settings > Site Administration > Appearance > Themes > Theme settings */

'''
== Settings > Site Administration > Appearance > Themes > Theme settings ==

Enabling this setting in Moodle 2.0+ themes stops Moodle caching the data of the elements you are working on, and thus enables you to see those changes.

Purge all cache

2013-02-02T18:59:50Z

Tqr: /* Settings > Site Administration > Development > Purge all cache */

== '''Settings > Site Administration > Development > Purge all caches''' ==

This setting is necessary when making changes to your theme or Moodle code in general. It removes the cached data, and so after refreshing your browser window with Ctrl + F5 you will see the changes you have made.

Purge all cache

2013-02-02T18:59:18Z

Tqr:

== '''Settings > Site Administration > Development > Purge all cache''' ==

This setting is necessary when making changes to your theme or Moodle code in general. It removes the cached data, and so after refreshing your browser window with Ctrl + F5 you will see the changes you have made.

Purge all cache

2013-02-02T18:57:41Z

Tqr: New doc.

'''== Settings > Site Administration > Purge all cache =='''

This setting is necessary when making changes to your theme or Moodle code in general. It removes the cached data, and so after refreshing your browser window with Ctrl + F5 you will see the changes you have made.

Theme Designer Mode

2013-01-28T18:10:46Z

Tqr: /* Settings > Site Administration > Appearance > Themes > Theme settings */

'''
== Settings > Site Administration > Appearance > Themes > Theme settings ==

Enabling this setting in Moodle 2.0+ themes stops Moodle caching the data of the elements you are working on.

Theme Designer Mode

2013-01-28T18:08:01Z

Tqr:

'''
== Settings > Site Administration > Appearance > Themes > Theme settings ==
'''

Theme Designer Mode

2013-01-28T18:07:23Z

Tqr: Created page with "''' == Settings > Site Administration > Themes > Theme settings == '''"

'''
== Settings > Site Administration > Themes > Theme settings ==
'''