Grafiken in Logineo

Grafiken können helfen Logineo LMS oder Moodle optisch besser zu strukturieren und interessanter zu gestalten.

Ich bin ein optischer Typ. Deshalb mag ich ansprechend gestaltete Websites, die nicht zu überfrachtet sind. Verwendete Grafiken o.ä. sollten einfach und schlicht sein. Solche Grafiken finden sich auf der Seite fontawesome, wahrscheinlich mit die beliebteste Websites dieser Art. Die dort zu findenden Icons lassen sich mit wenigen Handgriffen in Logineo1 einbinden.

Am Beispiel von solchen Checkboxen zeige ich dir, wie das geht.
/static/images/checkbox.png

Icon wählen

Zunächst solltet ihr auch auf der Seite von fontawesome das Icon aussuchen, welches ihr nutzen wollt. Über dem Icon findet ihr u.a. den HTML Code. Wenn ihr mit der Maus über diesen fahrt, könnt ihr ihn euch kopieren, in unserem Besipiel also:

1
2
<i class="fa fa-check-square-o">
</i>


Icon in Logineo einfügen

Als nächstes wechselt ihr zu Logineo (Moodle), meldet euch an und schaltet die Bearbeiten-Funktion ein. Ihr könnt das Icon mittels des HTML-Codes an jeder beliebigen Stellte mittels des Text-Editors einbinden. Dazu müsst ihr zunächst das Menü des Editors erweitern bzw. aufklappen in dem ihr auf den gebogenen Pfeil nach unten klickt und dann die Code-Ansicht auswählt. /static/images/LMS/menue_01.png

Damit der HTML-Code bzw. die Icons in Logineo richtig dargestellt werden, müssen noch kleine Veränderungen vorgenommen werden. Zunächst müssen wir das Präfix far verändern, es steht seit der Version 5 bei fontawesome für “regular”, kann aber von Logineo offensichtlich (noch) nicht gelesen werden. Was aber gelesen werden kann, ist das “alte” Präfix fa, so dass unser Code dann so aussieht:

1
2
<i class="fa fa-check-square-o">
</i>

Diesen Code fügt ihr an der gewünschten Stelle im HTML-Editor in euren Text ein.

Größe des Icon verändern

Ihr habt jetzt noch die Möglichkeit, das Aussehen des Icons u./o. die Größe zu verändern. Die Größe ändert ihr, indem ihr den HTML-Schnippsel fa-Größenbezeichnung einfügt, wobei z.B. xs für klein steht und 5x für groß.

1
2
3
4
5
<i class="fa fa-check-square-o fa-xs"></i>
<i class="fa fa-check-square-o fa-2x"></i>
<i class="fa fa-check-square-o fa-3x"></i>
<i class="fa fa-check-square-o fa-5x"></i>

Das Output/das Ergebnis in Logineo sähe dann so aus:
/static/images/LMS/check_black.png

Farbe des Icon ändern

Zuletzt soll noch die Farbe geändert werden. Dazu fügt ihr hinter die Größenangabe noch einen kleinen weiteren Teil HTML-Code ein. Zur Auswahl stehen sucess für grün, danger für rot, warning für gelb und info für ein in Richtung türkis gehendes blau?!

Das Bild der oben gezeigten verschieden großen farblichen Checkboxen ließe sich in Logineo also mit folgendem HTML-Code realisieren:

1
2
3
4
5
6
7
8
<div>
    <i class="fa fa-check-square-o fa-sm"></i>
    <i class="fa fa-check-square-o fa-2x text-success"></i>
    <i class="fa fa-check-square-o fa-3x text-danger"></i>
    <i class="fa fa-check-square-o fa-4x text-warning"></i>
    <i class="fa fa-check-square-o fa-5x text-info"></i>

</div>

Natürlich könnt ihr die einzelnen Elemente Größe und Farbe auch beliebig miteinander kombinieren und so das Icon ganz nach euren Bedürfnissen gestalten.

Wer mag kann zur Demonstration auch mein passendes YouTube-Video gucken.


  1. In Moodle funktioniert das Vorgehen genau so und wenn im hier im Text von Logineo die Rede ist, ist Moodle immer mitgemeint. ↩︎