Note: You are currently viewing documentation for Moodle 3.4. Up-to-date documentation for the latest stable version of Moodle is likely available here: Standard themes.

Standard themes: Difference between revisions

From MoodleDocs
Main page ► Managing a Moodle site ► Site appearance ► Themes ► Standard themes
Themes
m (removing category)
 
(52 intermediate revisions by 10 users not shown)
Line 1: Line 1:
{{Themes}}
{{Themes}}
==Standard themes==
==Standard themes==


In alphabetical order here are the standard themes in Moodle 2
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.
<gallery caption="Standard Themes - click on any to enlarge" widths="200px" heights="113px" perrow="3">
 
Image:theme_afterburner.png|Afterburner theme
[[File:CLEAN.png|center|thumb|500px|'Clean']]
Image:theme_anomaly.png|Anomaly theme
 
Image:theme_arialist.png|Arialist theme
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].
Image:theme_binarius.png|Binarius theme
 
Image:theme_boxxie.png|Boxxie theme
===Example of a customised Boost theme===
Image:theme_brick.png|Brick theme
[[File:SchoolDemoBoost.png|thumb|center|600px]]
Image:theme_formalwhite.png|Formal White with some editing
 
Image:theme_formfactor.png|Form Factor theme
The Moodle School demo site, [http://school.demo.moodle.net Mount Orange],uses standard Boost with customisations as follows:
Image:theme_fusion.png|Fusion theme
* An image for the front page and a background image need to be uploaded and referenced in the code.
Image:theme_leatherbound.png|Leatherbound theme
*'''Front page topic section:'''
Image:theme_magazine.png|Magazine theme
 
Image:theme_nimble.png|Nimble theme
<code php><div class="frontpage container-fluid">
Image:theme_nonzero.png|None Zero theme
Image:theme_overlay.png|Overlay theme
    <div class="jumbotron jumbotron-fluid" style="background-image: url('YOUR UPLOADED FRONT PAGE IMAGE.jpg');">
Image:theme_serenity.png|Serenity theme
        <div class="texts">
Image:theme_skyhigh.png|Sky High theme
            <h2>YOUR HEADING</h2>
Image:theme_splash.png|Splash theme
            <p class="lead">SENTENCE/TAG LINE</p>
Image:theme_standard.png|Standard theme
        </div>
</gallery>  
    </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==
==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''.
 
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.


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


*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")
==See also==
*The next screen will provide information about the theme. Click ''Continue'' to select this theme.
*Moodle 2.0 caches themes so if you don't immediately see changed settings that you were expecting, click the 'Clear theme caches' button.


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


{{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.
[[de:Standard-Designs]]
[[es:Temas estándar]]

Latest revision as of 20:43, 5 July 2017


Standard themes

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

'Clean'

Other themes, including themes which were standard in previous versions of Moodle, 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/34/en/index.php?title=Standard_themes&oldid=128248"
Powered by MediaWiki