Dieser Artikel ist auch verf├╝gbar in:
Mit den Corporate and Enterprise Owl Pl├Ąnen ist es m├Âglich, das CSS Ihres Lerninhalts zu bearbeiten.

Dieser Artikel wurde automatisch mit maschineller ├ťbersetzung ├╝bersetzt (DeepL oder Google Translate). Wenn Sie eine R├╝ckmeldung haben, freuen wir uns ├╝ber Ihr Feedback!

Vielleicht m├Âchten Sie die Schriftarten, Farben, Formen der Schaltfl├Ąchen und den Hintergrund Ihrer mit Easy LMS erstellten Tests und Kurse ├Ąndern. Eine M├Âglichkeit dazu besteht darin, die Einstellungen auf der Registerkarte Styling anzupassen, aber vielleicht m├Âchten Sie sogar noch mehr ├änderungen vornehmen als die direkt verf├╝gbaren.

Der Zugriff auf das CSS erm├Âglicht es Ihnen, die Art und Weise zu ├Ąndern, in der Online-Inhalte pr├Ąsentiert werden, wie z.B. Farben, Schriftarten, Schriftgr├Â├čen, Formen der Schaltfl├Ąchen usw. Um Zugang zu dieser Funktion zu haben, ben├Âtigen Sie einen Corporate oder Enterprise Owl plan.

Abh├Ąngig von Ihren CSS-Kenntnissen gibt es viele ├änderungen, die Sie an der Oberfl├Ąche Ihrer Tests vornehmen k├Ânnen. Wir hatten Kunden, die das Aussehen der Timerleiste ge├Ąndert, auff├Ąllige animierte ├ťberg├Ąnge hinzugef├╝gt und andere tolle Dinge durch benutzerdefiniertes CSS realisiert haben.

Quizzes, Beurteilungen und Kurse

Wenn Sie das CSS f├╝r Ihr Quiz, Ihre Bewertung oder Ihren Kurs anpassen m├Âchten, senden Sie uns eine Nachricht. Wenn die ├änderung einfach ist (z.B. ├änderung der Schriftgr├Â├če), k├Ânnen wir sie sofort vornehmen.

Wenn Sie weitere ├änderungen ben├Âtigen, senden wir Ihnen eine Datei zur Anpassung an ­čôé, damit Sie sie an uns zur├╝cksenden 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 speziell auf ein Quiz, eine Bewertung oder einen Kurs oder auf Ihr gesamtes Konto angewendet werden (wenn Sie f├╝r jeden von Ihnen erstellten Inhalt die gleichen Einstellungen verwenden m├Âchten). Das CSS kann als Liste in einem Notizblock-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 Examen > Erstellen > Styling > Benutzerdefiniertes CSS:



Auf der Registerkarte Datei-Manager k├Ânnen Sie auch Ihre Schriften und Bilder f├╝r die Verwendung im CSS-Stylesheet hochladen (lesen Sie [diesen Artikel] (https://help.easy-lms.com/en-us/article/upload-images-and-fonts-for-custom-css-use-bkbxmu/), um mehr dar├╝ber zu erfahren):



Nur um Ihnen ein Beispiel zu geben: Dies ist der Link zu einer Pr├╝fung, die mit den verf├╝gbaren Einstellungen im Dashboard gestaltet wurde:
https://www.onlineexambuilder.com/general-knowledge-exam-no-css/exam-319288

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

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

Benutzerdefinierter CSS-Spickzettel

Unsere geliebten Designer haben uns einige Code-Schnipsel zur Verf├╝gung gestellt, die Sie zur Erstellung Ihres CSS-Blatts verwenden 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 den Schrifttyp Ihrer Bewertung und Ihres Quiz ├Ąndern m├Âchten, sehen Sie sich bitte eine Liste von [Web Safe Fonts] (https://www.w3schools.com/cssref/css_websafe_fonts.asp) oder [Google Fonts] (https://fonts.google.com/) an. Vergessen Sie nicht, die Schriftart in den Datei-Manager (in Pr├╝fungen > Styling) zu importieren und den Schriftartenpfad in Ihr CSS-Blatt zu kopieren und einzuf├╝gen.

├ťberschriften

Dazu geh├Âren auch die Fragen.

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

K├Ârpertext

Dazu geh├Âren auch die Antworten.

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

Kn├Âpfe

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

* **Kn├Âpfe**
.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 in Styling > Thema > Dunkler Fotohintergrund.

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 zuerst dieses Bild auf unsere Server hochladen. Sie k├Ânnen dies tun, indem Sie sie in einer Ihrer Pr├╝fungen zum Dateimanager hinzuf├╝gen. Nachdem Sie sie dort hochgeladen haben, wird ein CSS-Pfad auf der Registerkarte Styling > Benutzerdefiniertes CSS generiert. Sie k├Ânnen dieses Bild/diesen Schriftartenpfad dann per Copy-Paste in Ihr CSS-Blatt einf├╝gen.


2. Kurse

Ändern der Schriftfamilie

Wenn Sie die Schriftart Ihres Kurses ├Ąndern m├Âchten, sehen Sie sich bitte eine Liste von [Web Safe Fonts] (https://www.w3schools.com/cssref/css_websafe_fonts.asp) oder [Google Fonts] (https://fonts.google.com/) an. Vergessen Sie nicht, die Schriftart in den Datei-Manager (in Pr├╝fungen > Styling) zu importieren und den Schriftartenpfad per Copy-Paste in Ihr CSS-Blatt einzuf├╝gen.

├ťberschriften

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

K├Ârpertext

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

* **Kn├Âpfe**
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 ├ťberschriftengr├Â├čen sind je nach Bildschirmgr├Â├če unterschiedlich.

Tablett 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

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

K├Ârpertext

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

Kn├Âpfe

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 zuerst dieses Bild auf unsere Server hochladen. Sie k├Ânnen dies tun, indem Sie es in einer Ihrer Pr├╝fungen zum Dateimanager hinzuf├╝gen. Nachdem Sie sie dort hochgeladen haben, wird auf der Registerkarte Styling > Benutzerdefiniertes CSS ein CSS-Pfad generiert. Dieses Bild/diesen Schriftpfad k├Ânnen Sie dann per Copy-Paste in Ihr CSS-Blatt 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 eine wei├če ├ťberlagerung:

.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 bitte dieses Tool, um die Gr├Â├če des Logos zu ├Ąndern, bevor Sie es zu Amazon hochladen: Online Image Resizer.

Laden Sie das Bild hoch. Sie k├Ânnen es bei Bedarf zuschneiden, aber wenn dies nicht n├Âtig ist, gehen Sie direkt zu Schritt 4. Geben Sie die Zahl "108" in das letzte K├Ąstchen ein und lassen Sie das Kontrollk├Ąstchen wie folgt angekreuzt:



Laden Sie jetzt das Logo herunter. PNG ist Ihre beste Wahl.

Das Logo hochladen

Um das Logo zu verwenden, m├╝ssen Sie dieses Bild auf unsere Server hochladen. Bitte f├╝gen Sie es einem Examen > Styling > Dateimanager hinzu und f├╝gen Sie den CSS-Pfad unten im Unterregister Benutzerdefiniertes CSS ein, um es in Ihrem Kurs zu verwenden.

Berechnen der richtigen Breite

Im CSS m├╝ssen Sie die H├Âhe und Breite des Logos angeben, das Sie hinzuf├╝gen m├Âchten. Sie m├╝ssen das Seitenverh├Ąltnis des Logos respektieren, daher ben├Âtigen Sie daf├╝r einen Taschenrechner: Einfacher Seitenverh├Ąltnis-Rechner. Hier sehen Sie, wie Sie ihn verwenden:

Finden Sie zuerst die aktuellen Abmessungen Ihres Bildes. Gehen Sie zu dem Logo, das Sie gerade in Ihren Explorer hochgeladen haben, klicken Sie mit der rechten Maustaste darauf und klicken Sie auf Eigenschaften. W├Ąhlen Sie die Registerkarte Details. Oben sehen Sie Ihre Abmessungen aufgelistet:
Gehen Sie zum Online-Rechner. 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 da! Die neue Breite", und Ihre Zahl ist da! Runden Sie diese Zahl auf den n├Ąchstliegenden Wert auf (es gibt keine halben Pixel).

Logo auf der linken Seite (neben der Men├╝taste)

Bitte beachten Sie, dass das untenstehende Bild direkt von der Men├╝schaltfl├Ąche aus gestylt wurde, und dass das Logo mit einer einfarbigen Hintergrundfarbe und einer F├╝llung im Inneren versehen wurde. Wenn Sie dies anders w├╝nschen, 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 von der Seite und von oben leicht gepolstert wurde. Wenn Sie das nicht w├╝nschen, k├Ânnen Sie die H├Âhe des Bildes auf 54px f├╝r den Desktop und 45px f├╝r das Handy einstellen und stattdessen die Hintergrundposition auf oben rechts setzen (siehe das Beispiel oben). Das Bild nimmt dann die volle H├Âhe der oberen Leiste ein und haftet 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 das Logo ein wenig vom Rand entfernt sein soll, schreiben Sie Dinge wie rechts: 10px und unten: 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!