Standard themes: Difference between revisions

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

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;

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;

}

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.

Documentation

Standard themes: Difference between revisions

Latest revision as of 20:43, 5 July 2017

Contents

Standard themes

Example of a customised Boost theme

YOUR HEADING

SMALLER HEADING

SMALLER HEADING

Theme selector

See also

@@ Line 3: / Line 3: @@
 ==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 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', the default theme]]
+[[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].
-'''''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.''
+===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==
@@ Line 25: / Line 191: @@
 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==
-{{New features}}
-[[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.
-*'''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.
-[[File:morewood.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.
 ==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