More Design: Unterschied zwischen den Versionen

Aus MoodleDocs
Wechseln zu:Navigation, Suche
KKeine Bearbeitungszusammenfassung
 
Zeile 2: Zeile 2:


==More Design anpassen==
==More Design anpassen==
Die Moodle-Administration kann das Design ''More'' auf der Seite ''Website-Administration'' (oder im Block ''[[Einstellungen-Block|Einstellungen]]) > Website-Administration'')'' > Darstellung > Designs > More'' anpassen.
Die Moodle-Administration kann das Design ''More'' auf der Seite ''Website-Administration'' (oder im Block ''[[Einstellungen-Block|Einstellungen]] > Website-Administration'')'' > Darstellung > Designs > More'' anpassen.


[[File:more.png|600px]]
[[File:more.png|600px]]

Aktuelle Version vom 19. Februar 2020, 13:21 Uhr


More Design anpassen

Die Moodle-Administration kann das Design More auf der Seite Website-Administration (oder im Block Einstellungen > Website-Administration) > Darstellung > Designs > More anpassen.

more.png


Folgende Einstellungen stehen zur Verfügung:

  • Textfarbe / Linkfarbe - können über die Farbauswahl oder die Eingabe des Farbcodes festgelegt werden.
  • Hintergrundfarbe / Hintergrundbild - die Hintergrundfarbe kann wie die Textfarbe ausgewählt werden, das Hintergrundbild kann hochgeladen werden. (Hinweis: Das Hintergrundbild überschreibt die Hintergrundfarbe.)
  • Hintergrundwiederholung / Hintergrundposition / Fixierter Hintergrund - legen Sie hier fest, wie das Hintergrundbild wiederholt werden soll, seine Position und ob es auf der Seite fixiert werden soll.
  • Primäre Hintergrundfarbe / Sekundäre Hintergrundfarbe - können über die Farbauswahl oder die Eingabe des Farbcodes festgelegt werden. Die sekundäre Hintergrundfarbe schließt Blöcke und die Navigationsleiste ein.
  • Navigationsleiste invertieren - wenn Sie diese Checkbox markieren, dann tauscht der Text und die Hintergrundfarbe der Navigationsleiste die Fraben schwarz und weiß.
  • Logo - hier können Sie ein Logo hochladen.
  • CSS-Anpassungen / Fußzeile - hier können Sie CSS-Code-Anpassungen und einen Fußzeilentext eingeben, die auf jeder Moodle-Seite verwendet werden.

Tipp: Bei der Angabe der Farbwerte können Sie sogar Transparenzwerte verwenden, z.B. rgba(255,255,255,0.8).

Bei den Farbeinstellungen können Sie so schöne Sachen eingeben, wie z.B.

   whitesmoke
   #0404E6
   rgb(0,255,244)
   rgba(0,255,244,0.5)
   transparent
   currentColor
   inherit
   hsl(207,38%,47%)
   hsla(207,38%,47%,0.8)

Das Design More mit orangefarbenem Hintergrundbild, Logo und angepassten Farben könnte so aussehen:

moodle27-orange.png


Mount Orange Demo Site - Beispiel für ein angepasstes More Design

Das Design der School Demo Site basiert auf Einstellungen aus MDLSITE-3095 und MDLSITE-3245.

Hinweis: Ab Moodle 3.2 verwendet die Mount Orange Demo Site ein angepasstes Boost Design.
Startseite
Kursseite

Weitere Design-Einstellungen

  • Textfarbe: #595959
  • Linkfarbe: #0070a8
  • Hintergrundfarbe: #93abc3
  • Hintergrundbild: bg6.png
  • Hintergrundwiederholung: Keine Wiederholung
  • Hintergrundposition: Links unten
  • Fixierter Hintergrund: Ja
  • Primäre Hintergrundfarbe: #fff
  • Sekundäre Hintergrundfarbe: #fff
  • Navigationsleiste invertieren: Nein
  • Logo: keins
  • CSS-Anpassungen:
body {
   background-size: cover;
}
h1, h2, h3, h4, h5, h6 {
   color: #f98012;
   font-weight: normal;
}
#page-header h1 { 
   color: #fff;
   font-weight: bold;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
}
.block .header h2 {
   color: #f98012;
   font-weight: normal;
}
#page-footer {
   color: #ccc;
}
#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;
}
#page-site-index #region-main {
   padding: 0; 
   border: 0;
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
}
#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 .hero-unit {
   padding:0;
   border-radius:0;
   background: transparent no-repeat right bottom / cover;
   line-height: 250px;
}
.frontpage .hero-unit .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 .hero-unit h2 {
   color: #fff;
   font-size: 32px;
   font-weight: 200;
   text-shadow: 1px 1px 1px #444;
   margin-bottom: 0;
}
.frontpage .hero-unit .lead {
   text-shadow: 1px 1px 1px #333;
}
.frontpage .row-fluid {
   line-height: 24px;
   background-color: #fff;
   padding: 10px 20px 20px;
   box-sizing: border-box;
}
.frontpage .fp-block {
   padding: 10px 20px 0;
}
.frontpage h3 {
   font-size: 26px;
   line-height: 30px;
   font-weight: 200;
}
.frontpage .button {
   text-align: right;
}

Einstellungen für die Startseite

Hinweis: Diese Einstellungen sorgen für ein großes Bild und zwei Textbereiche auf der Startseite. Laden Sie das Bannerbild über das Bild-Symbol im Texteditor hoch. Wechseln Sie in die HTML-Code-Ansicht und kopieren Sie die URL des Bildes.

<div class="frontpage container-fluid"> <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>

<div class="row-fluid"> <div class="fp-block span6"> <h3>LEFT 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 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>

Weitere Anpassungen

Weitere Anpassungen sind in diesem Diskussionsbeitrag von Mary Evans beschrieben.