Note: You are currently viewing documentation for Moodle 2.6. Up-to-date documentation for the latest stable version of Moodle may be available here: Standard themes.

Standard themes: Difference between revisions

From MoodleDocs
(→‎See also: forum discussion link)
m (added link to spanish translation of document)
 
(26 intermediate revisions by 7 users not shown)
Line 2: Line 2:
==Theme selector==
==Theme selector==


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


[[File:Themeselector20.png]]
Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.


*Scroll down to see the previews of the available themes and choose either the ''Use for modern browsers'' or ''Use for old browsers'' button depending on what you think the most common browser version of your users will be. (IE and IE7 are examples of "older browsers")
Go to ''Administration > Site administration > Appearance > Themes > Theme selector''
*The next screen will provide information about the theme. Click ''Continue'' to select this theme.
*Click on the "Select theme" button next to the type you wish to change
*Moodle 2.0 caches themes so if you don't immediately see changed settings that you were expecting, click the 'Clear theme caches' button.
*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: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].
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.


{{Moodle 2.1}}In Moodle 2.1 you may select different themes depending upon the device that will be viewing Moodle. For example, you might have one theme for computers with monitors and another for mobile phones and another for tablets.
Note 2: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].
 
 
[[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==
==Standard themes==


In alphabetical order here are the standard themes in Moodle 2
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">
<gallery caption="Standard Themes - click on any to enlarge" widths="200px" heights="113px" perrow="3">
Image:theme_afterburner.png|Afterburner theme
Image:theme_afterburner.png|Afterburner theme
Line 24: Line 67:
Image:theme_boxxie.png|Boxxie theme
Image:theme_boxxie.png|Boxxie theme
Image:theme_brick.png|Brick theme
Image:theme_brick.png|Brick theme
Image:theme_formalwhite.png|Formal White with some editing
Image:CLEANtheme.png|Clean theme
Image:theme_formfactor.png|Form Factor theme
Image:theme_formalwhite.png|Formal white theme
Image:theme_formfactor.png|FormFactor theme
Image:theme_fusion.png|Fusion theme
Image:theme_fusion.png|Fusion theme
Image:theme_leatherbound.png|Leatherbound theme
Image:theme_leatherbound.png|Leatherbound theme
Image:theme_magazine.png|Magazine theme
Image:theme_magazine.png|Magazine theme
Image:theme_nimble.png|Nimble theme
Image:theme_nimble.png|Nimble theme
Image:theme_nonzero.png|None Zero theme
Image:theme_nonzero.png|Nonzero theme
Image:theme_overlay.png|Overlay theme
Image:theme_overlay.png|Overlay theme
Image:theme_serenity.png|Serenity theme
Image:theme_serenity.png|Serenity theme
Line 36: Line 80:
Image:theme_splash.png|Splash theme
Image:theme_splash.png|Splash theme
Image:theme_standard.png|Standard theme
Image:theme_standard.png|Standard theme
</gallery>  
</gallery>


==See also==
==See also==
Line 42: Line 86:
* [[Theme credits]]
* [[Theme credits]]
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=189573 What counts as a 'legacy' device type?] forum discussion
* 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]]

Latest revision as of 03:11, 7 April 2014

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.


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.

  • 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

  1. Changing logo height in Afterburner: http://moodle.org/mod/forum/discuss.php?d=197924
  2. Moving columns in Sky High: http://moodle.org/mod/forum/discuss.php?d=209626
  3. 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:

See also