Startseiten-Design von moodle.org

Wechseln zu: Navigation, Suche

Hinweis: Sie sind auf den Seiten der Moodle 1.9 Dokumentation. Die Dokumentation der aktuellsten Moodle-Version finden Sie hier: Startseiten-Design von moodle.org.

Moodle homepage.png
Das frühere Design von moodle.org ist nicht in der Standardinstallation von moodle enthalten. Dieser Artikel beschreibt die wichtigsten Elemente dieses Designs, und Design-Entwickler sind herzlich eingeladen, diese Ausführungen als Ideen und Anregungen zu nutzen!

Zunächst müssen Sie in den Einstellungen für die Startseite die Option Themenbereich einbeziehen aktivieren. Anschließend schalten Sie die Startseite in den Bearbeitungsmodus und fügen ein Arbeitsmaterial vom Typ Text oder Überschrifthinzu. Aktivieren Sie den HTML-Editor, indem Sie auf das <>-Symbol rechts in der unteren Symbolleiste klicken, und geben Sie folgenden Code ein:

<div class="frontblock">
<h1 class="frontblock fronthead p1">Welcome to Moodle!</h1>
<p class="fronttext p1">
text...
</p>
</div>
 
<div class="frontblock">
<h1 class="frontblock fronthead p2">Moodle Community</h1>
<p class="fronttext p2">
text...
</p>
</div>
 
<div class="frontblock">
<h1 class="frontblock fronthead p3"><span class="nolink">Moodle Development</span></h1>
<p class="fronttext p3">
text...
</p>
</div>
 
<div class="frontblock">
<h1 class="frontblock fronthead p4"><span class="nolink">Moodle Downloads</span></h1>
<p class="fronttext p4">
text...
</p>
</div>

Außerdem müssen Sie die CSS Style Sheets auf Ihrem Moodle-Server anpassen. Sie können dies beispielsweise in der Datei moodle/theme/standard/styles_fonts.css tun - fügen Sie dort folgenden Code ein und speichern Sie anschließend die Datei auf dem Server:

.fronthead {
  font-size:1.3em;
  letter-spacing:0.04em;
}
 
.fronttext {
  margin-top:5px;
  margin-left:20px;
  margin-right:10px;
  margin-bottom:20px;
}
 
div.frontblock {
  margin-top: 12px;
  margin-bottom: 25px;
  border: #DDD solid 1px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 20px;
  font-size: 0.95em;
}
 
h1.frontblock {
  border: #DDD solid 1px;
  background-image: url(gradient.jpg);  
  background-position: top;  
  background-repeat: repeat-x;  
  padding: 1px 10px;
  display: inline;
  position: relative;
  top: -0.5em;
  left: 8px;
  font-weight: normal;
}
 
p.fronttext.p1 {
  min-height: 90px;
}
p.fronttext.p2 {
  min-height: 90px;
}
p.fronttext.p3 {
  min-height: 125px;
}
p.fronttext.p4 {
  min-height: 105px;
}

Siehe auch