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.

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

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

Je nach Ihren CSS-Kenntnissen können Sie eine Vielzahl von Änderungen an der Oberfläche Ihrer Tests vornehmen. Wir haben Kunden, die das Aussehen der Zeitleiste geändert haben, auffällige animierte Übergänge hinzugefügt haben und andere großartige Dinge durch benutzerdefinierte CSS.
Quiz, Assessments, und Kurse

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

Änderungen im CSS können insbesondere auf eine Quiz, Assessment, oder Kursoder 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 sie dann in Ihrem Konto implementieren.
Prüfungen

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



Auf der Seite Dateimanager können Sie auch Ihre Schriftarten und Bilder hochladen, die Sie im CSS-Stylesheet verwenden möchten (weitere Informationen finden Sie in diesem Artikel):



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



Und das 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 nun an auf Ihre Prüfung angewendet, auch wenn es sich um eine bestehende oder in eine Website eingebettete Website handelt.

Spickzettel für benutzerdefiniertes 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 verfügbar 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 sehen Sie sich Google Fonts an. Vergessen Sie nicht, die Schriftart in den Dateimanager (unter Prüfungen > Formatierung) und fügen Sie dann den Pfad der Schriftart per Copy-Paste in Ihr CSS-Blatt 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

Dazu gehören 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 tun unter Styling > Thema > Dunkler Fotohintergrund.

Für Assessments und Quiz benötigen Sie 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. Dies können Sie tun, indem Sie sie im Dateimanager in einem Ihrer Prüfungen. Nachdem Sie sie dort hochgeladen haben, wird ein CSS-Pfad auf der Seite Formatierung > 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 von Web Safe Fonts oder Google Fonts. Vergessen Sie nicht, die Schriftart in den Dateimanager (unter Prüfungen > Formatierung) und fügen Sie dann den Pfad der Schriftart per Copy-Paste in Ihr CSS-Blatt 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 je nach Bildschirmgröße 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

Es ist nicht möglich, CSS zu verwenden, um ein Hintergrundbild für Kurse. Sie müssen das Hintergrundbild direkt in der Gestalten registerkarte hinzufügen. Weitere Informationen finden Sie in dem Styling-Optionen für Kurse artikel.
Hinzufügen eines Logos

Größe des Bildes ändern

Um ein Logo in Kurs zu verwenden, müssen Sie es wahrscheinlich in der Größe verändern. Verwenden Sie daher bitte 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 sie zu einem Prüfung > Styling > Dateimanager und fügen Sie den CSS-Pfad unten auf der Unterregisterkarte Custom CSS 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. Dazu benötigen Sie einen Rechner: Easy Aspect Ratio Calculator. So verwenden Sie ihn:

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 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 solide Hintergrundfarbe mit Polsterung im Inneren 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 an den Seiten und 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 die background-position stattdessen auf top right setzen (siehe das Beispiel oben). Das Bild nimmt dann die volle Höhe der oberen Leiste ein und klebt an den Rändern des Fensters.

.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 die Breite, Höhe und Hintergrundgröße entsprechend den Abmessungen Ihres Bildes an

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

Wenn Sie das Logo ein wenig vom Rand entfernt haben möchten, schreiben Sie etwas 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!