Um moodle hübscher zu gestalten kann man, neben der Nutzung von HTML-Schnipseln, auch in größerem Umfang CSS einsetzen. So kann man die Klassen die in moodle genutzt werden umgestalten und auch eigene Klassen definieren.
Die zwei Bilder zeigen Beispiele, was man machen da erreichen kann. Das erste Bild zeigt eine Kursseite/Abschnittsseite, das zweite eine Textseite.
Wie man es macht!
Wie üblich beim Definieren von CSS-Informationen muss man den Texteditor Atto ausschalten.
Die CSS-Informationen für die Gestaltung beider Seiten befindet sich in einem Textblock, der im nur im Bearbeitungsmodus zu sehen. Ist der Bearbeitungsmodus ausgeschaltet, ist er nicht zu erkennen, außer das er etwas Platz einnimmt. Erreicht wird das, indem man per CSS entsprechend die Gestaltung vornimmt.
WICHTIG: Den Block sollte man auf der Kursseite anlegen und dann festlegen, dass er auf allen Seiten des Kurses zu sehen sein soll. Damit wirkt er sich auch überall aus!
Um zu sehen, wie man den Block umgestaltet hilft wie immer ein Blick in die Entwickler-Darstellung der Seite, nachdem man den Textblock angelegt hat.
Will man es sich leicht machen, kann man die Klasse „card“ umgestalten. Allerdings wird diese Klasse öfters verwendet und damit verändert sich das Aussehen noch etwas mehr. In dem Fall hier könnte man auch den Block unsichtbar machen, wenn man ihn über die ID=“inst10707″ anspricht. Der Code zum Verstecken wäre dann:
#inst10707
{
background:#ebebeb !important;
border:0px;
}
… wobei die Farbe hier natürlich entsprechend der eigenen Instanz angepasst werden muss.
Hat man im Kurs sowieso schon Blöcke in Nutzung, dann kann man den Block an das Ende der restlichen Blöcke schieben und er fällt nicht auf. Hat man keinen anderen Block so würde nur unnütz Platz am rechten Rand verbraucht werden. Da gibt es einen Trick, mit dem man den Block nach hinten/unten zwingen kann.
#region-main-settings-menu.has-blocks, #region-main.has-blocks {
width: calc(100% - 10px);
}
So genau weiß ich nicht, was das bedeutet ;-). Ich habe mir aber sagen lassen, dass der Block/die Blöcke so breit werden, dass sie nach hinten rutschen, was ja bei einem schmalen Display von alleine geschieht.
Fazit
Da ist wirklich viel möglich. Es gibt weitergehende Ideen, etwa auch dass man den Block nicht im Kurs anlegt sondern im Kursbereich und damit könnten sich die CSS-Definitionen in allen Kursen im Kursbereich auswirken.
Oder man legt alle CSS-Definitionen in einer Datei ab, die frei erreichbar ist … sonst wirkt sie sich bei der Ansicht durch andere Personen nicht aus. Statt in den Block für mehrere Kurse jedes Mal alle Style-Informationen einzufügen könnte man dann auf die CSS-Datei verweisen. Man braucht dann auch einen Block aber weniger Code. Vor allem aber, reicht es, an einer Stelle eine Änderung vorzunehmen und hat dann Änderungen in allen Kursen.
Antworten