Wiki-Quellcode von Kurslayout
Version 1086.1 von Carina Enke am 19.01.2024
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | Mithilfe von CSS können Sie das Aussehen Ihres Kurses individuell anpassen, z. B. an das Corporate Design Ihrer Institution. Unter anderem ist es möglich, Schrift- und Hintergrundfarben anzupassen oder bestimmte Bedienelemente neu zu positionieren. | ||
| 2 | |||
| 3 | (% class="box warningmessage" %) | ||
| 4 | ((( | ||
| 5 | **Achtung** | ||
| 6 | |||
| 7 | Sie sollten das Kurslayout nur anpassen, wenn Sie gute Kenntnisse in HTML und CSS haben. Beachten Sie bitte, dass viele Klassen mehrfach verwendet werden und möglicherweise nicht alle Änderungen auf den ersten Blick sichtbar sind. Testen Sie Ihre Anpassungen mit verschiedenen Bildschirmgrößen und mobilen Endgeräten. | ||
| 8 | |||
| 9 | Achten Sie zur Unterstützung der Barrierefreiheit außerdem auf einen ausreichenden [[Kontrast zwischen Schriftfarbe und Hintergrund>>doc:LMS.Benutzerhandbuch OPAL.Barrierefreiheit.WebHome]]. | ||
| 10 | ))) | ||
| 11 | |||
| 12 | |||
| 13 | **Inhalt** | ||
| 14 | |||
| 15 | {{toc/}} | ||
| 16 | |||
| 17 | |||
| 18 | == Kurslayout aktivieren == | ||
| 19 | |||
| 20 | |||
| 21 | (% class="box infomessage" %) | ||
| 22 | ((( | ||
| 23 | Mit dem Release OPAL 11.3 ist die Funktion zum Ändern des Kurslayouts in der neuen Benutzeroberfläche verfügbar. Wie Sie das Kurslayout in der alten Benutzeroberfläche aktivieren, erläutert der Abschnitt Kurslayout aktivieren (alte Benutzeroberfläche). | ||
| 24 | ))) | ||
| 25 | |||
| 26 | **Schritt 1: CSS-Datei in den Kursordner laden** | ||
| 27 | |||
| 28 | |((( | ||
| 29 | Erstellen Sie zunächst Ihre eigene CSS-Datei und laden Sie diese in den **Kursordner** Ihres Kurses hoch. Diesen finden Sie im Kurseditor. | ||
| 30 | )))|((( | ||
| 31 | [[image:https://www.bps-system.de/help/download/attachments/55574597/Kurseditor%20-%20Aufruf%20Kursablageordner_de.png?version=1&modificationDate=1632463074362&api=v2||alt="Ablageordner im Kurseditor" width="400"]] | ||
| 32 | ))) | ||
| 33 | |||
| 34 | **Schritt 2: CSS-Datei einbinden** | ||
| 35 | |||
| 36 | Um das Kurslayout aus dieser CSS-Datei zu aktivieren, gehen Sie nun wie folgt vor: | ||
| 37 | |||
| 38 | | | ||
| 39 | |||
| 40 | |(% colspan="1" %)((( | ||
| 41 | Öffnen Sie in der Kursansicht das Menü [[image:https://www.bps-system.de/help/download/thumbnails/102368089/Icon_zweiR%C3%A4dchen.png?version=1&modificationDate=1685527375868&api=v2||alt="Icon Weitere Einstellungen" width="20"]] **Weitere Einstellungen** oben rechts im Kurs. | ||
| 42 | )))|(% rowspan="2" %)((( | ||
| 43 | [[image:https://www.bps-system.de/help/download/attachments/55574597/Kursrun%20-%20Kurseinstellungen%20aufrufen_de.png?version=1&modificationDate=1632463074205&api=v2||alt="Einstellungen zum Kurs öffnen" width="350"]] | ||
| 44 | ))) | ||
| 45 | | | ||
| 46 | |||
| 47 | |Wählen Sie den ersten Eintrag **Einstellungen **aus. Es öffnet sich der Dialog **Kurseinstellungen**. | ||
| 48 | | | ||
| 49 | |||
| 50 | |Klicken Sie in diesem Dialog im Abschnitt Kurs-Layout in der Box** CSS aus Ablageordner** auf das kleine Dreieck. Es öffnet sich eine Liste der verfügbaren CSS-Dateien. Wählen Sie nun die gewünschte CSS-Datei aus.|((( | ||
| 51 | [[image:https://www.bps-system.de/help/download/attachments/55574597/Kursrun%20-%20CSS%20ausw%C3%A4hlen_de.png?version=1&modificationDate=1632463074350&api=v2||alt="Liste der verfügbaren CSS-Dateien" width="400"]] | ||
| 52 | ))) | ||
| 53 | | | ||
| 54 | |||
| 55 | |Automatisch erscheint der gewählte Dateiname in der nun farbig hervorgehobenen Auswahlbox.|(% rowspan="2" %)((( | ||
| 56 | [[image:https://www.bps-system.de/help/download/attachments/55574597/Kursrun%20-%20gew%C3%A4hlte%20CSS_de.png?version=1&modificationDate=1632463074338&api=v2||alt="Ablageordner mit verwendetem Dateinamen" width="400"]] | ||
| 57 | ))) | ||
| 58 | | | ||
| 59 | |||
| 60 | |(% colspan="1" %)Speichern Sie Ihre Änderungen und schließen Sie den Dialog. | ||
| 61 | |||
| 62 | |||
| 63 | |||
| 64 | == Beispiele für Layoutanpassungen == | ||
| 65 | |||
| 66 | |||
| 67 | * [[Anpassungen an das Corporate Design>>url:https://www.bps-system.de/help/display/LMS/Kurslayout#Kurslayout-AnpassungenandasCorporateDesign]] | ||
| 68 | * [[Hauptnavigation ausblenden>>url:https://www.bps-system.de/help/display/LMS/Kurslayout#Kurslayout-Hauptnavigationausblenden]] | ||
| 69 | * [[Hintergrundbild für den Kurs einbinden>>url:https://www.bps-system.de/help/display/LMS/Kurslayout#Kurslayout-HintergrundbildfürdenKurseinbinden]] | ||
| 70 | * [[Einfärben von Kursbausteinen im Menü>>url:https://www.bps-system.de/help/display/LMS/Kurslayout#Kurslayout-EinfärbenvonKursbausteinenimMenü]] | ||
| 71 | * [[Status-Farben für den Kursfortschritt anpassen>>url:https://www.bps-system.de/help/display/LMS/Kurslayout#Kurslayout-Status-FarbenfürdenKursfortschrittanpassen]] | ||
| 72 | * [[Button "Test starten" für Tests oder Selbsttests umbenennen>>url:https://www.bps-system.de/help/display/LMS/Kurslayout#Kurslayout-Button"Teststarten"fürTestsoderSelbsttestsumbenennen]] | ||
| 73 | * [[Box "Lösungsversuche" neben dem Button "Test starten" für Selbsttests ausblenden>>url:https://www.bps-system.de/help/display/LMS/Kurslayout#Kurslayout-Box"Lösungsversuche"nebendemButton"Teststarten"fürSelbsttestsausblenden]] | ||
| 74 | * [[Bewertungsinformationen für Selbsttests ausblenden>>url:https://www.bps-system.de/help/display/LMS/Kurslayout#Kurslayout-BewertungsinformationenfürSelbsttestsausblenden]] | ||
| 75 | * [[Informationen auf der Startseite des Kurses ausblenden>>url:https://www.bps-system.de/help/display/LMS/Kurslayout#Kurslayout-InformationenaufderStartseitedesKursesausblenden]] | ||
| 76 | |||
| 77 | |||
| 78 | === Anpassungen an das Corporate Design === | ||
| 79 | |||
| 80 | ==== Logo im Header austauschen ==== | ||
| 81 | |||
| 82 | Fügen Sie Ihr Logo (png, jpg, svg) in den gleichen Ordner ein, in dem auch Ihre CSS-Datei liegt. Passen Sie bei Bedarf die Breite (width) sowie die Größe des Bildes (background-size) an. Im Beispiel nutzen wir das Logo "logo-bps.svg". | ||
| 83 | |||
| 84 | |((( | ||
| 85 | .logo { | ||
| 86 | |||
| 87 | width: 200px; | ||
| 88 | |||
| 89 | background-image~: url(logo-bps.svg); | ||
| 90 | |||
| 91 | background-size: 150px; | ||
| 92 | |||
| 93 | } | ||
| 94 | ))) | ||
| 95 | |||
| 96 | ==== Hintergrundfarbe der Navigationsleiste ändern (inkl. mobile Version) ==== | ||
| 97 | |||
| 98 | Die Schriftfarbe und die Gestaltung weiterer Elemente ist auf eine dunkle Navigationsleiste ausgerichtet. Bei einer hellen Hintergrundfarbe müssen Sie ggf. weitere Elemente anpassen. Im Beispiel wird auch die Farbe des Headers in der mobilen Version geändert. | ||
| 99 | |||
| 100 | |((( | ||
| 101 | .page .mobile-page-header, | ||
| 102 | |||
| 103 | .nav-container, | ||
| 104 | |||
| 105 | .nav-container + .clearfix { | ||
| 106 | |||
| 107 | background-color: #008079; | ||
| 108 | |||
| 109 | } | ||
| 110 | ))) | ||
| 111 | |||
| 112 | ==== Schrift-/Icon-Farbe von Links und Buttons anpassen ==== | ||
| 113 | |||
| 114 | Wählen Sie für die Interaktionsmöglichkeiten wie hover und focus eine andere Farbe, um Nutzer*innen Feedback zu geben. | ||
| 115 | |||
| 116 | |((( | ||
| 117 | a, .btn { | ||
| 118 | |||
| 119 | color: #008079; | ||
| 120 | |||
| 121 | } | ||
| 122 | |||
| 123 | |||
| 124 | a:hover, a:focus, a:active, | ||
| 125 | |||
| 126 | .btn:hover, .btn:focus, .btn:active { | ||
| 127 | |||
| 128 | color: #004A46; | ||
| 129 | |||
| 130 | } | ||
| 131 | ))) | ||
| 132 | |||
| 133 | [[image:https://www.bps-system.de/help/download/attachments/55574597/Kursdesign%20-%20Logo%20und%20Farben_de.png?version=1&modificationDate=1632465063044&api=v2||alt="Corporate Design Anpassungen" width="600"]] | ||
| 134 | |||
| 135 |