Buttons in Logineo LMS

Klickbare, farbige Buttons erleichtern die Navigation in Logineo LMS oder Moodle.

In diesem Beitrag zeige ich dir, wie du solche Buttons1 in Logineo einbauen kann.

Einen Button erstellt man in Logineo mit Hilfe von HTML. Dazu wechselt ihr zunächst im Texteditor in die HTML-Ansicht. Als erstes soll ein Button erstellt werden, der außen einen Rahmen hat, innen keine Farbfüllung, aber einen Text in der Farbe des Rahmens. Außerdem soll der Button auf einen link auf Logineo LMS NRW enthalten. Der link soll sich in einem neuen Browser-Tab öffnen.

/static/images/LMS/outline.png

1
<a href="https://logineonrw-lms.de/" target="_blank"> <button type="button" class="btn btn-outline-success">Logineo NRW LMS</button></a>


Soll der Button farblich gefüllt sein, muss der HTML Code nur geringfügig geändert werden, indem die Definition outline weggelassen wird.

/static/images/LMS/button.png

1
<a href="https://logineonrw-lms.de/" target="_blank"> <button type="button" class="btn btn-outline-success">Logineo NRW LMS</button></a>


Den Buttons können verschiedene Farben zugewiesen werden, die Klasse btn btn-Wort definiert diese. /static/images/LMS/button_colour.png

1
2
3
4
5
6
7
8
9
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>


Falls man das möchte, könnte man so in rot vor Logineo warnen 😝

/static/images/LMS/danger.png

1
2
<a href="https://logineonrw-lms.de/" target="_blank"> <button type="button" class="btn btn-danger">Logineo NRW LMS</button></a>


Zum Schluss soll noch ein Text angezeigt werden, wenn man mit der Maus über den Button fährt. Wir wollen z.B. sagen, dass Logineo LMS NRW gar nicht so schlecht ist. Dazu müssen wir noch folgendes vor die Definition des Buttons einfügen:

1
<a href="#" data-toggle="tooltip" title="Logineo ist super">


Der komplette HTML-Text sieht dann so aus:

1
<a href="https://logineonrw-lms.de/" target="_blank"></a><a href="#" data-toggle="tooltip" title="Logineo ist super"> <button type="button" class="btn btn-danger">Logineo NRW LMS</button></a>


Wer zum Verständnis lieber einen Erklärfilm gucken möchte, hier mein passendes YouTube-Video.


  1. Die Buttons sind hier im Text zur Ansicht lediglich als Screenshot dargestellt und haben keinerlei Funktion. ↩︎