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

Standard themes: Difference between revisions

From MoodleDocs
Main page ► Managing a Moodle site ► Site appearance ► Themes ► Standard themes
Themes
m (changing school demo link)
 
(47 intermediate revisions by 8 users not shown)
Line 1: Line 1:
{{Themes}}
{{Themes}}
==Theme selector==
{{Note|Note: Clean, More and Bootstrapbase have been removed from core in Moodle 3.7. You are advised to use the [[Classic theme]] instead.}}
==Standard themes==


An administrator can set a theme for the site in ''Settings > Site administration > Appearance > Themes > Theme selector''.
Moodle has two standard themes: ''[[Boost theme|Boost]]''  and ''[[Classic theme|Classic]],'' a responsive, bootstrap-based theme combining the navigation structure of the deprecated Clean and More themes and the customisation options of the Boost theme.


Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.
Other themes are available from the [https://moodle.org/plugins/browse.php?list=category&id=3 Themes section of the Moodle plugins directory].


Go to ''Settings > Site administration > Appearance > Themes > Theme selector''
===Example of a customised Boost theme===
*Click on the "Select theme" button next to the type you wish to change
[[File:SchoolDemoBoost.png|thumb|center|600px]]
*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.
The Moodle School demo site, [http://school.moodledemo.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:'''


Note 2: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].
<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>


Tip: The [[MyMobile theme]] is especially designed for mobile devices.
'''*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>


[[File:Themeselector21.png|thumb|center|theme selector showing default and none selected in other theme types]]
'''*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>


==Notes on individual themes==
==Theme selector==


Arialist: does not display the logo at course/course level.  This means it is not useful for branding at a category/course level.
An administrator can set a theme for the site in ''Administration > Site administration > Appearance > Themes > Theme selector''.


===Themes that allow you to change a logo===
Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.
*Arialist (only at home page level) Code to change this: http://moodle.org/mod/forum/discuss.php?d=192409
*Brick
*Formal White
*Magazine
*Skylight
*Splash


===Themes that allow custom CSS===
Go to ''Administration > Site administration > Appearance > Themes > Theme selector''
*Arialist
*Click on the "Select theme" button next to the type you wish to change
*Fusion
*Scroll down to see the previews of the available themes and click on the "Use theme" button to chose the theme
*Non-zero
*The next screen will provide information about the theme. Click "Continue"
*Overlay
*Skyhigh
*Splash


===Themes with right hand column(s) only===
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.
*Arialist
*Brick
*Fusion
*Nimble
*Non-zero (2 columns)
*Overlay (2 columns)
*Skyhigh (2 columns)


===Various forum help that may be useful===
Note 2: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].
#Changing logo height in Afterburner: http://moodle.org/mod/forum/discuss.php?d=197924
#Moving columns in Skyhigh: 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: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==
==See also==


* [[Boost theme]]
* [[More theme]]
* [[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]]
[[de:Standard-Designs]]
[[es:Temas estándar]]
[[fr:Thèmes standards]]

Latest revision as of 10:43, 2 September 2019

Note: Note: Clean, More and Bootstrapbase have been removed from core in Moodle 3.7. You are advised to use the Classic theme instead.

Standard themes

Moodle has two standard themes: Boost and Classic, a responsive, bootstrap-based theme combining the navigation structure of the deprecated Clean and More themes and the customisation options of the Boost theme.

Other themes are available from the Themes section of the Moodle plugins directory.

Example of a customised Boost theme

SchoolDemoBoost.png

The Moodle School demo site, 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:

YOUR HEADING

SENTENCE/TAG LINE

SMALLER HEADING

Paragraph of text

<a class="btn btn-primary" href="BUTTON LINK URL">BUTTON TEXT »</a>

SMALLER HEADING

Paragraph of text.

<a class="btn btn-primary" href="BUTTON LINK URL">BUTTON TEXT »</a>

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

*Boost theme Advanced settings - Raw SCSS: 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;

}

  1. nav-drawer {
   background-color: rgba(236, 238, 239, .9);

}

  1. page-header.row {
   margin-left: -30px;
   margin-right: -30px;

}

  1. page-header .card {
   background-color: transparent;
   border: none;
   margin-bottom: 0;

}

  1. page-header h1 {
   color: #fff;
   font-weight: 500;
   text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

}

  1. page-header .breadcrumb {
   padding: .50rem 1rem;

} .block-region .card-block .card-title { 

   color: #f98012;
   font-size: 1.07rem;
   font-weight: 400;

}

  1. page-footer a {
   color: #f98012;

}

  1. page-site-index #page-header {
   display:none;

}

  1. page-site-index #region-main .card.card-block {
   padding: 0;
   border: 0;
   background-color: transparent;

}

  1. page-site-index #block-region-side-pre {
   margin-top: 15px;

}

  1. page-site-index .label {
   padding: 0;

}

  1. page-site-index .activity > div {
   padding: 0;

}

  1. page-site-index .mod-indent-outer {
   padding-left: 0;

}

  1. 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%;

}

  1. settingsnav.box.block_tree_box.p-y-1 {
   padding-top: 0!important;

}

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

Retrieved from "https://docs.moodle.org/39/en/index.php?title=Standard_themes&oldid=135200"
Powered by MediaWiki