Dieser Artikel ist auch verfügbar in:
Bei Corporate und Enterprise Owl Plänen 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 mit Easy LMS erstellten Tests und Kurse ändern. Eine Möglichkeit, dies zu tun, ist die Anpassung der Einstellungen auf der Registerkarte Styling, 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 Timerleiste verändert haben, auffällige animierte Übergänge hinzugefügt haben und andere großartige Dinge durch benutzerdefiniertes CSS.

Quiz, Beurteilungen und Kurse

Wenn Sie das CSS für Ihr Quiz, Ihre Bewertung oder Ihren Kurs anpassen möchten, schicken Sie uns eine Nachricht. Wenn es sich um eine einfache Änderung handelt (z. B. die Änderung der Schriftgröße), können wir diese sofort vornehmen.

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

Die CSS-Änderungen können speziell auf ein Quiz, eine Bewertung oder einen Kurs oder auf Ihr gesamtes Konto angewendet werden (wenn Sie die gleichen Einstellungen für jeden von Ihnen erstellten Inhalt 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 Untersuchung direkt in Ihrem Account bearbeiten. Gehen Sie zu Ihrer Prüfung > Erstellen > Styling > Benutzerdefiniertes CSS:



Auf der Registerkarte Dateimanager können Sie auch Ihre Schriftarten 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 Untersuchung, die mit den verfügbaren Einstellungen im Dashboard gestylt wurde:
https://www.onlineexambuilder.com/general-knowledge-exam-no-css/exam-319288

Und dies ist die gleiche Untersuchung, aber jetzt mit benutzerdefiniertem CSS-Styling:
https://www.onlineexambuilder.com/general-knowledge-exam-css/exam-276765

Alle Änderungen, die Sie auf der Registerkarte "Styling" vornehmen, werden von nun an auf Ihre Untersuchung angewendet, auch wenn es sich um eine bestehende Untersuchung handelt oder wenn sie in eine Website eingebettet ist.

Spickzettel für benutzerdefiniertes CSS

Unsere beliebten 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 Bewertung

Ändern der Schriftfamilie

Alle Google-Schriftarten sind jetzt für Prüfungen verfügbar.
Wenn Sie die Schriftart Ihrer Bewertung und Ihres Quiz ändern möchten, sehen Sie sich eine Liste von Web Safe Fonts an, oder siehe Google Fonts. Vergessen Sie nicht, die Schriftart in den Dateimanager (in Prüfungen > Styling) zu importieren und dann den Pfad der Schriftart per Copy-Paste in Ihr CSS-Sheet einzufügen.

Überschriften

Dazu gehören die Fragen.

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

Körpertext

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;}

Körpertext

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üfungen können Sie dies direkt über das Dashboard unter Styling > Theme > Dark photo background tun.

Für Assessments und Quizzes 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 sie im Dateimanager in einem Ihrer Exams hinzufügen. Nachdem Sie sie dort hochgeladen haben, wird ein CSS-Pfad auf der Registerkarte Styling > Custom CSS generiert. 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 Ihres Kurses ändern möchten, finden Sie eine Liste von Web Safe Fonts, oder siehe Google Fonts. Vergessen Sie nicht, die Schriftart in den Dateimanager (in Prüfungen > Styling) zu importieren und dann den Pfad der Schriftart per Copy-Paste in Ihr CSS-Sheet einzufügen.

Überschriften

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

Fließtext

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 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; }}

Mobile

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; }}

Bodytext

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 sie im Dateimanager in einer Ihrer Prüfungen hinzufügen. Nachdem Sie sie dort hochgeladen haben, wird auf der Registerkarte "Styling > Benutzerdefiniertes 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 Werkzeug, 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 ist PNG.

Logo hochladen

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

Berechnen der richtigen Breite

In CSS müssen Sie die Höhe und Breite des hinzugefügten Logos angeben. 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 mit der rechten Maustaste darauf und dann 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 sagt dann so etwas 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 das Logo mit einer soliden Hintergrundfarbe versehen und mit einem Padding versehen 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

Passen Sie width, height und background-size entsprechend den Abmessungen Ihres Bildes an.

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!