Standard-Designs

Standard-Designs

Das Standard-Paket von Moodle enthält drei Designs: Boost (ab Moodle 3.2), Clean - ein responsives Design, das auf Bootstrap 4 basiert und More - ein Design, das von der Moodle-Administration direkt in Moodle angepasst werden kann.

Weitere Designs, die in früheren Versionen in der Moodle-Standardinstallation enthalten waren, sind weiterhin in der Moodle-Plugins-Datenbank verfügbar und können nachinstalliert werden.

Beispiel für ein angepasstes Boost Design

Die Moodle School Demo Site Mount Orange verwendet das Boost Design mit folgenden Anpassungen:

• Ein Bild für die Startseite und ein Hintergrundbild müssen hochgeladen und im Code referenziert werden.

• Textabschnitt auf der Startseite:

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>

• Erweiterte Einstellungen für das Boost Design - Raw initial CSS:

$brand-primary: #0070a8; $body-color: #336; $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; $breadcrumb-bg: #fff;

• Erweiterte Einstellungen für das Boost Design - 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;

}

Design-Auswahl

Als Administrator/in können Sie auf der Seite Website-Administration (oder im Block Einstellungen) > Website-Administration) > Darstellung > Designs > Design-Auswahl wählen, in welchem Design Ihre Moodle-Seite dargestellt wird.

Sie können verschiedene Designs für verschiedene Endgeräte auswählen: Default, Legacy, Mobile und Tablet.

Gehen Sie auf die Seite Website-Administration (oder im Block Einstellungen) > Website-Administration) > Darstellung > Designs > Design-Auswahl.

• Klicken Sie auf den Button Design wechseln für das entsprechende Endgerät.
• In der Liste der vorhandenen Designs wählen Sie ein geeignetes aus und klicken auf den zugehörigen Button Design auswählen.
• Die nächste Seite zeigt Informationen zum Design. Klicken Sie auf den Button Weiter.

Hinweis 1: Moodle speichert Designs im Cache. Wenn Änderungen im Design nicht sofort sichtbar werden, klicken Sie auf der Seite Website-Administration (oder im Block Einstellungen) > Website-Administration) > Darstellung > Designs > Design-Auswahl oben auf den Button Design-Cache löschen.

Hinweis 2: Das gewählte Design ist das Site-Design. Es kann durch Kurs-, Nutzer- oder Session-Designs überschrieben werden, wenn diese Designs erlaubt sind. Siehe Design-Einstellungen für detaillierte Informationen.

Siehe auch

• Boost Design
• More Design
• Theme credits
• What counts as a 'legacy' device type? Diskussionsbeitrag im Kurs Using Moodle auf moodle.org