Dit artikel is ook beschikbaar in:
Dit artikel is vertaald met behulp van machinevertaling. Hierin zijn mogelijk foutieve of vreemde vertalingen aanwezig. Vooralsnog denken we dat het waardevol is om dit hulpartikel in jouw moedertaal te kunnen lezen. Laat ons onderaan het artikel weten of het artikel nuttig was en of je nog andere feedback voor ons hebt.

Met de Corporate en Enterprise Owl plannen is het mogelijk om de CSS van je leerinhoud te bewerken.

Je wilt misschien de lettertypes, kleuren, vormen van knoppen, en achtergrond van je toetsen veranderen en cursussen gemaakt met Easy LMS. Een manier om dat te doen is door de instellingen aan te passen bij de Styling tabblad, maar het kan zijn dat je nog meer veranderingen wilt aanbrengen dan die direct beschikbaar zijn.

Met toegang tot de CSS kun je de manier veranderen waarop online inhoud wordt gepresenteerd, zoals kleuren, lettertypes, lettergrootte, vormen van knoppen, enz. Om toegang tot deze functie te hebben, moet je een Corporate of Enterprise Owl plan hebben.

Afhankelijk van je CSS vaardigheden zijn er een heleboel veranderingen die je aan de interface van je tests kunt aanbrengen. We hebben klanten gehad die het uiterlijk van de timer balk veranderden, flitsende geanimeerde overgangen toevoegden, en andere leuke dingen door aangepaste CSS.
Quizzen, Assessments, en Cursussen

Als je de CSS wilt aanpassen voor je Quiz, Assessment, of Cursus, stuur ons een bericht. Als de verandering eenvoudig is (zoals het veranderen van de lettergrootte), kunnen we die meteen aanbrengen.

Veranderingen in de CSS kunnen worden toegepast, specifiek op een Quiz, Assessment, of Cursus, of in je hele account (als je voor elk stuk inhoud dat je maakt dezelfde instellingen wilt gebruiken). De CSS kun je als een lijst in een kladblok document opslaan en naar ons sturen. Wij zullen het dan in je account implementeren.
Examens

Je kunt de CSS van je Examen direct vanuit je account bewerken. Ga naar je Examen > Maken > Styling > Aangepaste CSS:



Op de Bestandsbeheer tabblad kun je ook je lettertypes en afbeeldingen uploaden voor gebruik in het CSS stijlblad (kijk op dit artikel voor meer informatie):



Om je een voorbeeld te geven is dit de link naar een Examen die gestyled werd met de beschikbare instellingen in het Dashboard:
https://www.onlineexambuilder.com/ocean-sailor-exam/exam-70792



En dit is dezelfde Examen, maar nu met aangepaste CSS styling
https://www.onlineexambuilder.com/ocean-sailor-exam-css/exam-93757



Alle veranderingen op het tabblad Styling worden vanaf dan toegepast op je Examen, ook als het een bestaande is of als hij in een website ingebed is.

Aangepaste CSS spiekbriefje

Onze geliefde ontwerpers deelden enkele code snippets die je kunt gebruiken om je CSS blad te maken. Bekijk ze hieronder.
1. Examen , Quiz, en Assessment
De letterfamilie veranderen

Alle Google lettertypes zijn nu beschikbaar voor Examens.
Als je het lettertype van je Assessment en Quiz wilt veranderen, zie dan een lijst van Web Safe Fonts, of zie Google Fonts. Vergeet niet het lettertype te importeren in de Bestandsbeheer (in Examens > Styling) en kopieer-plak dan het lettertype pad naar je CSS blad.

Koppen

Dit omvat de vragen.

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

Lichaamstekst

Dit omvat de antwoorden.

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

Knoppen

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

Alles (hetzelfde lettertype)

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;}
De lettergrootte veranderen

Koppen

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

Hoofdtekst

body { font-size: 13px;}

Knoppen

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

Vragen

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

* **Antwoorden**
.answers label, .answers label span, .answerinput * { font-size: 13px;}``
Een achtergrondafbeelding toevoegen

Voor Examenskun je dit direct via het dashboard doen in Styling > Thema > Donkere foto-achtergrond.

Echter, voor Assessments en Quizzen heb je de volgende regels code nodig:

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

Om een achtergrondafbeelding toe te voegen, moet je die eerst naar onze servers uploaden. Je kunt dat doen door ze toe te voegen aan het Bestandsbeheer in een van je Examens. Nadat je ze daar geüpload hebt, wordt een CSS pad gegenereerd bij de Styling > Aangepaste CSS tabblad. Je kunt dan dit afbeelding/lettertype pad in je CSS blad kopiëren-plakken.

2. Cursussen
De letterfamilie veranderen

Als je het lettertype van je Cursus wilt veranderen, zie dan een lijst van Web Safe Fonts, of zie Google Fonts. Vergeet niet het lettertype te importeren in de Bestandsbeheer (in Examens > Styling) en kopieer-plak dan het lettertype pad naar je CSS blad.

Koppen

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

Lichaamstekst

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

Knoppen

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

Alles (hetzelfde lettertype)

body, h1, h2, h3, h4, h5, h6, bijschrift, *[class*=heading_h], .examquestion>strong, button, .button { font-family: "Open Sans", sans-serif;}
De lettergrootte veranderen

Koppen

De afmetingen van de kopteksten zijn verschillend bij verschillende schermformaten

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

Mobiel

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 schermformaten

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

Hoofdtekst

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

Knoppen

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

Vragen

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

* **Antwoorden**
.answers label>span, .answers label { font-size: .8rem;}```
Een achtergrond toevoegen

Het is niet mogelijk om CSS te gebruiken voor het toevoegen van een achtergrondafbeelding voor Cursussen. Je moet de achtergrondafbeelding direct toevoegen vanuit de Styling tabblad. Meer informatie vind je in het Styling opties voor Cursussen artikel.
Een logo toevoegen

De grootte van het beeld aanpassen

Om een logo in een Cursus te gebruiken, moet je het waarschijnlijk vergroten of verkleinen. Gebruik daarom dit hulpmiddel om het logo te vergroten of te verkleinen voor je het uploadt naar Amazon: Online Image Resizer.

Upload het beeld. Je kunt het bijsnijden als dat nodig is, maar als dat niet nodig is, ga dan direct naar Stap 4. Zet het getal "108" in het laatste vakje, en houd het vakje aangevinkt, zoals dit:



Download nu het logo. PNG is je beste keus.

Upload het logo

Om het logo te gebruiken, moet je dit plaatje naar onze servers uploaden. Voeg ze toe aan een Examen > Styling > Bestandsbeheer en kopieer-plak het CSS pad onderaan de subtab Aangepaste CSS om het in je Cursus te gebruiken.

Bereken de juiste breedte

In CSS moet je de hoogte en breedte opgeven van het logo dat je toevoegt. Je moet de beeldverhouding van het logo respecteren, dus heb je daarvoor een calculator nodig: Easy Aspect Ratio Calculator. Hier staat hoe je het gebruikt:

Zoek eerst de huidige afmetingen van je afbeelding. Ga in je Verkenner naar het zojuist geüploade logo, klik er met de rechtermuisknop op en klik op Eigenschappen. Kies het tabblad Details. Je ziet je afmetingen bovenaan opgesomd
Ga naar de online calculator. Geef de breedte en hoogte van de afbeelding op (die in de eigenschappen), kies Nieuwe hoogte, en geef de nieuwe hoogte op (zie hieronder na background-size, de tweede waarde is de hoogte die je wilt).
De rekenmachine zal iets zeggen als, "Zie! De nieuwe breedte," en je getal staat er! Rond dit getal wel af op het dichtstbijzijnde één (er bestaat niet zoiets als halve pixels).
Logo aan de linkerkant (naast de menu knop)

Merk op dat het onderstaande beeld direct van de menuknop gestyled is, en dat er een effen achtergrondkleur aan het logo toegevoegd is met opvulling erin. Als je dit anders wilt, moet je rommelen met de achtergrond-grootte en de achtergrond-positie (zie het voorbeeld hieronder).

.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 aan de rechterkant

Merk op dat de afbeelding hieronder gestyled werd om lichte opvulling van de zijkant en bovenkant te hebben. Als je dat niet wilt, kun je de hoogte van de afbeelding instellen op 54px voor desktop en 45px voor mobiel en in plaats daarvan de achtergrond-positie op bovenaan rechts zetten (zie het voorbeeld hierboven). De afbeelding zal de volle hoogte van de bovenste balk innemen en tegen de randen van het venster blijven plakken.

.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 links of rechts onderaan

Pas de breedte, hoogte, en achtergrond-grootte aan naar de afmetingen van je afbeelding

In het voorbeeld hieronder is het logo rechts uitgelijnd. Om het naar links uit te lijnen verander je right: 0 in left: 0

Wil je dat het logo een eindje van de rand staat, schrijf dan dingen als right: 10px en 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;}
Was dit artikel behulpzaam ?
annuleren
Dank je wel !