Note: You are currently viewing documentation for Moodle 3.8. 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 (removed new features)
m (changing school demo link)
 
(14 intermediate revisions by 6 users not shown)
Line 1: Line 1:
{{Themes}}
{{Themes}}
 
{{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==
==Standard themes==


Moodle has two standard themes: ''Clean'', a responsive, bootstrap based theme which is used as default, and ''More'', a theme customisable from within the admin interface.
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.


[[File:CLEAN.png|center|thumb|500px|'Clean', the default theme]]
Other themes are available from the [https://moodle.org/plugins/browse.php?list=category&id=3 Themes section of the Moodle plugins directory].


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]]


'''''NOTE:''' If you were using a previous core theme or one based on a previous core theme and you are upgrading to Moodle 2.7, make sure you reinstall the relevant theme(s) before running the upgrade.''
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:'''


==Theme selector==
<code php><div class="frontpage container-fluid">
 
An administrator can set a theme for the site in ''Administration > Site administration > Appearance > Themes > Theme selector''.
    <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>


Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.
'''*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>


Go to ''Administration > Site administration > Appearance > Themes > Theme selector''
'''*Boost theme Advanced settings - Raw SCSS:'''
*Click on the "Select theme" button next to the type you wish to change
<code php>body {
*Scroll down to see the previews of the available themes and click on the "Use theme" button to chose the theme
    background-image: url("YOUR UPLOADED BACKGROUND IMAGE.png");
*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]].
 
 
 
==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)'''
 
[[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
 
{|
| [[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: #93abc3
*Background image [https://docs.moodle.org/38/en/File:bg6.png bg6.png]
*Background repeat: No repeat
*Background position: Left bottom
*Background fixed: Yes
*Main content background colour: #fff
*Secondary background colour: #fff
*Invert navbar: No
*Logo: None
*CUSTOM CSS:
 
body {
     background-size: cover;
     background-size: cover;
}
    background-repeat: no-repeat;
h1, h2, h3, h4, h5, h6 {
    background-attachment: fixed;
    letter-spacing: .3px;
}
h1, h2, h3, h4, h5, h6 {
     color: #f98012;
     color: #f98012;
     font-weight: normal;
     font-weight: normal;
}
}
#page-header h1 {  
.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;
     color: #fff;
     font-weight: bold;
     font-weight: 500;
     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);  
     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);  
}
}
.block .header h2 {
#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;
     color: #f98012;
    font-weight: normal;
}
}
#page-site-index #page-header {
#page-footer {
    color: #444;
}
#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;
     display:none;
}
}
#page-site-index #region-main {
#page-site-index #region-main .card.card-block {
     padding: 0;  
     padding: 0;
     border: 0;
     border: 0;
    border-radius: 0;
    box-shadow: none;
     background-color: transparent;
     background-color: transparent;
}
}
#page-site-index .label {
#page-site-index #block-region-side-pre {
    margin-top: 15px;
}
#page-site-index .label {
     padding: 0;
     padding: 0;
}
}
#page-site-index .activity > div {
#page-site-index .activity > div {
     padding: 0;
     padding: 0;
}
}
#page-site-index .mod-indent-outer {
#page-site-index .mod-indent-outer {
     padding-left: 0;
     padding-left: 0;
}
}
#page-site-index .contentwithoutlink {
#page-site-index .contentwithoutlink {
     padding-right: 0;
     padding-right: 0;
}
}
.frontpage.container-fluid {
.frontpage.container-fluid {
     padding: 0;
     padding: 0;
}
}
.frontpage .hero-unit {
.frontpage .jumbotron {
     padding:0;
     padding:0;
     border-radius:0;
     border-radius:0;
     background: transparent no-repeat right bottom / cover;
     background: transparent no-repeat right bottom / cover;
     line-height: 250px;
     line-height: 250px;
}
}
.frontpage .hero-unit .texts {
.frontpage .jumbotron .texts {
     color: #fff;
     color: #fff;
     letter-spacing: .5px;
     letter-spacing: .5px;
Line 142: Line 127:
     display: inline-block;
     display: inline-block;
     vertical-align: bottom;
     vertical-align: bottom;
}
}
.frontpage .hero-unit h2 {
.frontpage .jumbotron h2 {
     color: #fff;
     color: #fff;
     font-size: 32px;
     font-size: 32px;
     font-weight: 200;
     font-weight: 300;
     text-shadow: 1px 1px 1px #444;
     text-shadow: 1px 1px 1px #444;
     margin-bottom: 0;
     margin-bottom: 0;
}
    margin-top: 10px;
.frontpage .hero-unit .lead {
}
.frontpage .jumbotron .lead {
     text-shadow: 1px 1px 1px #333;
     text-shadow: 1px 1px 1px #333;
}
    line-height: 30px;
.frontpage .row-fluid {
    font-size: 21px;
}
.frontpage .row-fluid {
     line-height: 24px;
     line-height: 24px;
     background-color: #fff;
     background-color: #fff;
     padding: 10px 20px 20px;
     padding: 10px 20px 20px;
     box-sizing: border-box;
     box-sizing: border-box;
}
}
.frontpage .fp-block {
.frontpage .row-fluid::after {
    display: table;
    content: "";
    clear: both;
    line-height: 0;
}
.frontpage .fp-block {
     padding: 10px 20px 0;
     padding: 10px 20px 0;
}
}
.frontpage h3 {
.frontpage h3 {
     font-size: 26px;
     font-size: 26px;
     line-height: 30px;
     line-height: 30px;
     font-weight: 200;
     font-weight: 300;
}
    margin-top: 20px;
.frontpage .button {
    margin-bottom: 20px;
}
.frontpage .button {
     text-align: right;
     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==


====Front page topic summary settings====
An administrator can set a theme for the site in ''Administration > Site administration > Appearance > Themes > Theme selector''.
(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">
Different themes may be set according to 'device type' - default, legacy (for older browsers), mobile and tablet.
    <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>
Go to ''Administration > Site administration > Appearance > Themes > Theme selector''
    <div class="row-fluid">
*Click on the "Select theme" button next to the type you wish to change
        <div class="fp-block span6">
*Scroll down to see the previews of the available themes and click on the "Use theme" button to chose the theme
            <h3>LEFT TEXT BOX TITLE</h3>
*The next screen will provide information about the theme. Click "Continue"
            <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>
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.
        <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>
Note 2: The selected theme may be overridden if user/course or category themes have been allowed in the [[Theme settings]].
</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.]


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


*[http://youtu.be/OUTzAFItLx4 Moodle HQ video on themes]
* [[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
Line 215: Line 199:
[[de:Standard-Designs]]
[[de:Standard-Designs]]
[[es:Temas estándar]]
[[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/38/en/index.php?title=Standard_themes&oldid=135200"
Powered by MediaWiki