Dieser Artikel ist auch verfügbar in:
Dieser Artikel wurde mit maschineller Übersetzung übersetzt. Er könnte dementsprechend einige Fehler oder kuriose Formulierungen enthalten. Wir glauben trotzdem, dass es nützlich für Sie ist, diesen Hilfeartikel in Ihrer Sprache lesen zu können. Geben Sie uns nach dem Lesen aber gerne Bescheid, ob der Artikel hilfreich war, oder ob Sie sonstiges Feedback haben.

Bei den Plänen Corporate und Enterprise Owl ist es möglich, das CSS Ihrer Lerninhalte zu bearbeiten.

Möglicherweise möchten Sie die Schriftarten, Farben, Formen von Schaltflächen und den Hintergrund Ihrer Tests und kurse die mit Easy LMS erstellt wurden. Eine Möglichkeit, dies zu tun, ist die Anpassung der Einstellungen auf der Seite Gestalten registerkarte, aber vielleicht möchten Sie noch mehr Änderungen vornehmen als die direkt verfügbaren.

Der Zugriff auf das CSS ermöglicht es Ihnen, die Art und Weise der Darstellung von Online-Inhalten zu ändern, z. B. Farben, Schriftarten, Schriftgrößen, Formen von Schaltflächen usw. Um Zugriff auf diese Funktion zu haben, benötigen Sie einen Corporate oder Enterprise Owl Plan.

Abhängig von Ihren CSS-Kenntnissen gibt es eine Menge Änderungen, die Sie an der Oberfläche Ihrer Tests vornehmen können. Wir hatten schon Kunden, die das Aussehen der Timer-Leiste verändert haben, auffällige animierte Übergänge hinzugefügt haben und andere großartige Dinge durch benutzerdefiniertes CSS.
Quiz, Assessments, und Kurse

Wenn Sie das CSS für Ihr System anpassen möchten Quiz, Assessment, oder Kurs, senden Sie uns eine Nachricht. Wenn die Änderung einfach ist (z. B. Ändern der Schriftgröße), können wir sie sofort vornehmen.

Wenn Sie mehr Änderungen benötigen, senden wir Ihnen eine Datei 📂 zur Anpassung, die Sie an uns zurückschicken können, und wir werden die Änderungen dann auf Ihr Konto anwenden. Bitte senden Sie Ihre Anfrage über den Chat.

Änderungen im CSS können insbesondere auf a Quiz, Assessment, oder Kurs, oder in Ihrem gesamten Konto (wenn Sie für jeden von Ihnen erstellten Inhalt die gleichen Einstellungen verwenden möchten). Das CSS kann als Liste in einem Notepad-Dokument gespeichert und an uns gesendet werden. Wir werden es dann in Ihrem Konto implementieren.
Prüfungen

Sie können das CSS Ihrer Prüfung direkt von Ihrem Konto aus bearbeiten. Gehen Sie zu Ihrem Prüfung > Erstellen > Styling > Benutzerdefiniertes CSS:



Im Dateimanager können Sie auch Ihre Schriften und Bilder für die Verwendung im CSS-Stylesheet hochladen (lesen Sie diesen Artikel, um mehr darüber zu erfahren):



Um Ihnen ein Beispiel zu geben, ist dies der Link zu einer Prüfung, die mit den verfügbaren Einstellungen im Dashboard gestylt wurde:
https://www.onlineexambuilder.com/ocean-sailor-exam/exam-70792



Und dies ist die gleiche Prüfung, aber jetzt mit benutzerdefiniertem CSS-Styling
https://www.onlineexambuilder.com/ocean-sailor-exam-css/exam-93757



Alle auf der Registerkarte "Styling" vorgenommenen Änderungen werden von da an auf Ihre Prüfung angewendet, auch wenn es sich um eine bestehende oder in eine Website eingebettete Website handelt.

Spickzettel für benutzerdefinierte CSS

Unsere lieben Designer haben einige Codeschnipsel zur Verfügung gestellt, mit denen Sie Ihr CSS-Sheet erstellen können. Sehen Sie sich diese unten an.
1. Prüfung , Quiz, und Assessment
Ändern der Schriftfamilie

Alle Google-Schriften sind jetzt für Prüfungen.
Wenn Sie die Schriftart Ihrer Assessment und Quizändern möchten, sehen Sie sich bitte die Liste der Web Safe Fonts an, oder schauen Sie unter Google Fonts nach. Vergessen Sie nicht, die Schriftart in den Datei-Manager (unter Prüfungen > Formatierung) und fügen Sie dann den Pfad der Schriftart per Copy-Paste in Ihr CSS-Sheet ein.

Überschriften

Dazu gehören die Fragen.

` h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong { font-family: Georgia, serif;}

Textkörper

Dies beinhaltet die Antworten.

body { font-family: Arial, Helvetica, sans-serif;}

Schaltflächen

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}

Alles (die gleiche Schriftart)

` body, h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong,.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}
Ändern der Schriftgröße

Überschriften

h1 { font-size: 28px;}h2, caption, .heading_h2, .examquestion>strong { font-size: 21px;}h3, .heading_h3 { font-size: 16.8px;}h4 { font-size: 15.4px;}h5 { font-size: 14px;}h6 { font-size: 11.2px;}

Textkörper

body { font-size: 13px;}

Schaltflächen

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-size: 13px;}

Fragen

` #questioncontainer h1 { font-size: 28px;}

Antworten

` .answers label, .answers label span, .answerinput * { font-size: 13px;}
Hinzufügen eines Hintergrundbildes

Für Prüfungenkönnen Sie dies direkt über das Dashboard in Styling > Thema > Dunkler Fotohintergrund.

Jedoch für Assessments und Quiz benötigen Sie jedoch die folgenden Codezeilen:

html { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') no-repeat center center fixed; background-size: cover;}html body { background: none rgba(59,59,59,0.7);}

Um ein Hintergrundbild hinzuzufügen, müssen Sie dieses Bild zunächst auf unsere Server hochladen. Das können Sie tun, indem Sie es im Dateimanager in einem Ihrer Prüfungen. Nachdem Sie sie dort hochgeladen haben, wird ein CSS-Pfad unter Stilisierung > Benutzerdefiniertes CSS registerkarte. Diesen Bild-/Schriftpfad können Sie dann per Copy-Paste in Ihr CSS-Sheet einfügen.

2. Kurse
Ändern der Schriftfamilie

Wenn Sie die Schriftart Ihrer Kurs ändern möchten, finden Sie eine Liste mit Web Safe Fonts, oder siehe Google Fonts. Vergessen Sie nicht, die Schriftart in den Datei-Manager (unter Prüfungen > Formatierung) und fügen Sie dann den Pfad der Schriftart per Copy-Paste in Ihr CSS-Sheet ein.

Überschriften

` h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong { font-family: "Droid Serif", serif;}

Textkörper

body { font-family: "Open Sans", sans-serif;}

Schaltflächen

button, .button { font-family: "Open Sans", sans-serif;}

Alles (die gleiche Schriftart)

` body, h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong, button, .button { font-family: "Open Sans", sans-serif;}
Ändern der Schriftgröße

Überschriften

Die Größe der Überschriften ist bei den verschiedenen Bildschirmgrößen unterschiedlich

Tablet und Desktop

@media only screen and (min-width: 40,0625em) { h1 { font-size: 2,55556rem; } h2 { font-size: 2,11111rem; } h3 { font-size: 1,66667rem; } h4 { font-size: 1,11111rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; }}

Mobil

h1 { font-size: 1,88889rem;}h2 { font-size: 1,55556rem;}h3 { font-size: 1,22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}

Alle Bildschirmgrößen

h1 { font-size: 1,88889rem;}h2 { font-size: 1,55556rem;}h3 { font-size: 1,22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}@media only screen and (min-width: 40,0625em) { h1 { font-size: 2,55556rem; } h2 { font-size: 2,11111rem; } h3 { font-size: 1,66667rem; } h4 { font-size: 1,11111rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; }}

Textkörper

p, li, th, td, label, input, select, textarea, .qtype, .errorMessage, .assessboard p, .assessboard li, .contentcontainer .col12 .singleaxisscorecard p, .contentcontainer .col12 .singleaxisscorecard li {font-size: 1rem;}

Schaltflächen

button, .button { font-size: .88889rem;}

Fragen

` #questioncontainer h1 { font-size: 28px;}

Antworten

.answers label>span, .answers label { font-size: .8rem;}
Hinzufügen eines Hintergrunds

body { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') no-repeat center center fixed; background-size: cover;}

Um ein Hintergrundbild hinzuzufügen, müssen Sie dieses Bild zunächst auf unsere Server hochladen. Das können Sie tun, indem Sie es im Dateimanager in einem Ihrer Prüfungen. Nachdem Sie sie dort hochgeladen haben, wird auf der Registerkarte "Styling > Custom CSS" ein CSS-Pfad generiert. Diesen Bild-/Schriftpfad können Sie dann per Copy-Paste in Ihr CSS-Sheet einfügen.

Zur besseren Lesbarkeit können Sie eine Überlagerungsfarbe zwischen dem Hintergrundbild und dem Inhalt hinzufügen. Ändern Sie die letzte Zahl für die Deckkraft; 0,5 steht für 50 % Transparenz).

Für ein schwarzes Overlay:

.off-canvas-wrap { background: rgba(0, 0, 0, 0.5);}

Für ein weißes Overlay:

.off-canvas-wrap { background: rgba(255, 255, 255, 0.5);}
Hinzufügen eines Logos

Größe des Bildes ändern

Um ein Logo in einem Kurs zu verwenden, müssen Sie es wahrscheinlich in der Größe anpassen. Verwenden Sie daher dieses Tool, um die Größe des Logos zu ändern, bevor Sie es auf Amazon: Online Image Resizer hochladen.

Laden Sie das Bild hoch. Sie können es bei Bedarf zuschneiden, aber wenn dies nicht erforderlich ist, gehen Sie direkt zu Schritt 4. Setzen Sie die Zahl "108" in das letzte Feld und lassen Sie das Kontrollkästchen aktiviert, etwa so:



Laden Sie nun das Logo herunter. Am besten im PNG-Format.

Laden Sie das Logo hoch

Um das Logo zu verwenden, müssen Sie dieses Bild auf unsere Server hochladen. Bitte fügen Sie diese in einem Prüfung > Styling > Dateimanager und fügen Sie den CSS-Pfad unten im Unterregister Custom CSS per Copy-Paste ein, um es in Ihrem Kurs zu verwenden.

Berechnen der richtigen Breite

In CSS müssen Sie die Höhe und Breite des Logos angeben, das Sie hinzufügen. Dabei müssen Sie das Seitenverhältnis des Logos beachten, daher benötigen Sie einen Rechner, um dies zu tun: Easy Aspect Ratio Calculator. Hier sehen Sie, wie Sie ihn verwenden:

Ermitteln Sie zunächst die aktuellen Abmessungen Ihres Bildes. Gehen Sie zu dem soeben hochgeladenen Logo in Ihrem Explorer, klicken Sie es mit der rechten Maustaste an und klicken Sie auf Eigenschaften. Wählen Sie die Registerkarte Details. Oben sehen Sie Ihre Abmessungen aufgelistet
Rufen Sie den Online-Rechner auf. Geben Sie die Breite und Höhe des Bildes ein (die in den Eigenschaften), wählen Sie Neue Höhe, und geben Sie die neue Höhe ein (siehe unten nach Hintergrundgröße, der zweite Wert ist die gewünschte Höhe).
Der Rechner wird etwas sagen wie: "Siehe! Die neue Breite", und Ihre Zahl ist da! Runden Sie diese Zahl auf den nächsten Wert (es gibt keine halben Pixel).
Logo auf der linken Seite (neben der Menütaste)

Bitte beachten Sie, dass das Bild unten direkt von der Menü-Schaltfläche gestylt wurde, und dass dem Logo eine einfarbige Hintergrundfarbe mit Polsterung hinzugefügt wurde. Wenn Sie dies anders haben möchten, müssen Sie mit der Hintergrundgröße und der Hintergrundposition herumspielen (siehe das Beispiel unten).

.tab-bar::after { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-repeat: no-repeat; background-position: right top; background-size: 156px 51px; content: ''; display: block; position: relative; float: left; width: 156px; height: 51px;}@media only screen and (min-width: 64,063em) { .tab-bar::after { background-size: 165px 54px; width: 165px; height: 54px; }}@media only screen and (max-width: 40em) { .tab-bar::after { width: 138px; height: 45px; background-size: 138px 45px; }}
Logo auf der rechten Seite

Bitte beachten Sie, dass das Bild unten so gestylt wurde, dass es von der Seite und von oben leicht gepolstert ist. Wenn Sie das nicht wollen, können Sie die Höhe des Bildes auf 54px für Desktop und 45px für Mobile setzen und stattdessen die background-position auf top right setzen (siehe das Beispiel oben). Das Bild wird die volle Höhe der oberen Leiste einnehmen und an den Rändern des Fensters haften.

.tab-bar { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-position: top 10px right 10px; background-repeat: no-repeat; background-size: 117px 40px;}@media only screen and (max-width: 40em) { .tab-bar { background-position: right 10px center; background-size: 102px 35px; }}
Logo unten links oder rechts

Stellen Sie die Breite, Höhe und Hintergrundgröße entsprechend den Abmessungen Ihres Bildes ein

Im Beispiel unten ist das Logo rechts ausgerichtet. Um es nach links auszurichten, ändern Sie right: 0 in left: 0

Wenn Sie das Logo ein wenig vom Rand entfernt benötigen, schreiben Sie Dinge wie right: 10px und bottom: 10px.

.main-section .ui-page::after { content: ''; display: block; width: 102px; height: 35px; background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-size: 102px 35px; background-repeat: no-repeat; background-position: center; position: absolute; right: 0; bottom: 0; z-index: 99;}
War dieser Beitrag hilfreich?
Stornieren
Danke!