Dit artikel is ook beschikbaar in:
Met Corporate en Enterprise Owl plannen is het mogelijk om de CSS van je leerstof te bewerken.

Je kunt de lettertypen, kleuren, vormen van knoppen en de achtergrond van je tests en cursussen die je met Easy LMS hebt gemaakt, wijzigen. Een manier om dit te doen is door de instellingen op het Styling tabblad aan te passen, maar misschien wil je nog meer wijzigingen aanbrengen dan die welke direct beschikbaar zijn.

Met toegang tot de CSS kun je de manier waarop online content wordt gepresenteerd, zoals kleuren, lettertypen, lettergroottes, vormen van knoppen, etc., wijzigen. Om toegang te hebben tot deze functie, moet je een Corporate of Enterprise Uil plan hebben.

Afhankelijk van je CSS-vaardigheden zijn er veel veranderingen die je kunt aanbrengen in de interface van je tests. We hebben klanten gehad die het uiterlijk van de timerbalk hebben veranderd, flitsende geanimeerde overgangen hebben toegevoegd en andere geweldige dingen hebben gedaan via aangepaste CSS.

Quizzen, beoordelingen en cursussen

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

Als je meer wijzigingen nodig hebt, sturen we je een bestand šŸ“‚ voor aanpassing, zodat je het naar ons kunt terugsturen, en we passen de wijzigingen toe op je account. Stuur je verzoek via de chat.

Wijzigingen in de CSS kunnen worden toegepast, met name op een Quiz, Assessment of Course, of in je hele account (als je dezelfde instellingen wilt gebruiken voor elk stuk content dat je aanmaakt). De CSS kan worden opgeslagen als een lijst in een notitieblokdocument en naar ons worden verzonden. Wij implementeren het dan in je account.

Examens

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



Op het tabblad File manager kun je ook je lettertypes en afbeeldingen uploaden voor gebruik op het CSS stylesheet (kijk op dit artikel voor meer informatie):



Om je een voorbeeld te geven, dit is de link naar een examen dat is gestyled met de beschikbare instellingen in het Dashboard:
https://www.onlineexambuilder.com/general-knowledge-exam-no-css/exam-319288

En dit is hetzelfde examen, maar nu met aangepaste CSS-styling:
https://www.onlineexambuilder.com/general-knowledge-exam-css/exam-276765

Alle wijzigingen die op het tabblad Styling worden aangebracht, worden vanaf dat moment op je examen toegepast, zelfs als het een bestaand examen betreft of als het ingebed is in een website.

Aangepaste CSS cheat sheet

Onze geliefde ontwerpers deelden een aantal codefragmenten die je kunt gebruiken om je CSS-blad te maken. Bekijk ze hieronder.

1. Examen, quiz en beoordeling

Veranderen van de lettertypefamilie

Alle Google-lettertypen zijn nu beschikbaar voor examens.
Als je het lettertype van je Assessment en Quiz wilt wijzigen, zie dan een lijst met Web Safe Fonts, of zie Google Fonts. Vergeet niet het lettertype te importeren in de File manager (in Exams > Styling) en vervolgens het lettertype pad te kopiƫren-plakken naar je CSS sheet.

Koppen

Dit is inclusief de vragen.

h1, h2, h3, h4, h5, h6, onderschrift, *[klasse*=rubriek_h], .examenvraag>sterke { font-familie: Georgiƫ, schreef;}

Lichaamstekst

Dit is inclusief de antwoorden.

lichaam { font-familie: Arial, Helvetica, sans-serif;}

Knoppen

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

Alles (hetzelfde lettertype)

body, h1, h2, h3, h4, h5, h6, onderschrift, *[klasse*=rubriek_h], .examenvraag>sterke,.container.knop, .container input[type=indienen], .container input[type=knop], .container knop, .container .gameisrunning.continue { font-familie: Arial, Helvetica, sans-serif;}

Veranderen van de lettergrootte

Koppen

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

Lichaamstekst

lichaam { fontgrootte: 13px;}

Knoppen

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

Vragen

#vragencontainer h1 { fontgrootte: 28px;}

Antwoorden

.answers label, .answers label span, .answerinput * { lettergrootte: 13px;}

Een achtergrondafbeelding toevoegen

Voor Exams kun je dit direct doen via het dashboard in Styling > Thema > Donkere fotoachtergrond.

Voor Beoordelingen en Quizzen heb je echter de volgende regels code nodig:

html { achtergrond: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relatief_url_van_het_bestand_je_hebt_geuploaded]') geen-repeat centrum vast; achtergrondgrootte: cover;}html body { achtergrond: geen rgba(59,59,59,0.7);}

Om een achtergrondafbeelding toe te voegen, moet je deze eerst naar onze servers uploaden. Dat kun je doen door ze toe te voegen aan de File Manager in een van je examens. Na het uploaden wordt er een CSS pad gegenereerd op de Styling > Custom CSS tab. Je kunt dit afbeeldings/content pad dan kopiƫren-plakken in je CSS sheet.


2. Cursussen

Veranderen van de lettertypefamilie

Als je het lettertype van je cursus wilt wijzigen, zie dan een lijst met Web Safe Fonts, of zie Google Fonts. Vergeet niet het lettertype te importeren in de File manager (in Exams > Styling) en vervolgens het lettertype pad te kopiƫren-plakken naar je CSS sheet.

Koppen

h1, h2, h3, h4, h5, h6, onderschrift, *[klasse*=onderverdeling_h], .examenvraag>sterke { font-familie: "Droid Serif", schreef;}

Lichaamstekst

lichaam { font-familie: "Open Sans", sans-serif;}

Knoppen

knop, .knop { font-familie: "Open Sans", sans-serif;}

Alles (hetzelfde lettertype)

lichaam, h1, h2, h3, h4, h5, h6, onderschrift, *[klasse*=onderverdeling_h], .examenvraag>sterke, knop, .knop { font-familie: "Open Sans", sans-serif;}

Veranderen van de lettergrootte

Koppen

De koppen zijn verschillend tussen de verschillende schermafmetingen.

Tablet en Desktop

@media alleen scherm en (min. breedte: 40.0625em) { h1 { fontgrootte: 2.55556rem; } h2 { fontgrootte: 2.11111rem; } h3 { fontgrootte: 1.66667rem; } h4 { fontgrootte: 1.11111rem; } h5 { fontgrootte: 1rem; } h6 { fontgrootte: 1rem; }}}

Mobiel

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

Alle schermafmetingen

h1 { fontgrootte: 1.88889rem;}h2 { fontgrootte: 1.55556rem;}h3 { fontgrootte: 1.22222rem;}h4 { fontgrootte: .77778rem;}h5 { fontgrootte: 1rem;}h6 { fontgrootte: 1rem;}@media only screen en (min-breedte: 40.)0625em) { h1 { fontgrootte: 2,55556rem; } h2 { fontgrootte: 2,11111rem; } h3 { fontgrootte: 1,66667rem; } h4 { fontgrootte: 1,11111rem; } h5 { fontgrootte: 1rem; } h6 { fontgrootte: 1rem; }}}

Lichaamstekst

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

Knoppen

knop, .knop { fontgrootte: .88889rem;}

Vragen

#vragencontainer h1 { fontgrootte: 28px;}

Antwoorden

.antwoordt label>span, .antwoordt label { lettergrootte: .8rem;}

Een achtergrond toevoegen

lichaam { achtergrond: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relatief_url_van_het_bestand_je_hebt_geuploaded]') geen herhalingscentrum vast; achtergrondgrootte: dekking;}.

Om een achtergrondafbeelding toe te voegen, moet je deze eerst uploaden naar onze servers. Dat kun je doen door ze toe te voegen aan de File Manager in een van je examens. Nadat je ze daar hebt geĆ¼pload, wordt er een CSS-pad gegenereerd op het tabblad Styling > Custom CSS. Je kunt dit afbeeldings/content pad dan kopiĆ«ren-plakken in je CSS sheet.

Voor een betere leesbaarheid kun je een overlappende kleur toevoegen tussen de achtergrondafbeelding en de inhoud. Verander het laatste getal voor de ondoorzichtigheid; 0,5 staat voor 50% transparantie).

Voor een zwarte overlay:

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

Voor een witte overlay:

.off-canvas-wrap { achtergrond: rgba(255, 255, 255, 0.5);}

Een logo toevoegen

De afbeelding vergroten of verkleinen

Om een logo in een Cursus te gebruiken, zul je het waarschijnlijk moeten vergroten of verkleinen. Gebruik daarom deze tool om het logo te verkleinen voordat je het uploadt naar Amazon: Online Image Resizer.

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



Download nu het logo. PNG is je beste gok.

Upload het logo

Om het logo te gebruiken, moet je deze afbeelding uploaden naar onze servers. Voeg ze toe aan een Examen > Styling > Bestandsbeheer en copy-paste het CSS-pad onderaan de aangepaste CSS-subab om het te gebruiken in je Cursus.

Berekening van de juiste breedte

In CSS moet je de hoogte en breedte van het logo dat je toevoegt opgeven. Je moet de beeldverhouding van het logo respecteren, dus je hebt een calculator nodig om dat te doen: Easy Aspect Ratio Calculator. Hier is hoe je het gebruikt:

Zoek eerst de huidige afmetingen van je afbeelding. 2. Ga naar het logo dat je net hebt geĆ¼pload in je Verkenner, klik met de rechtermuisknop op het logo en klik op Eigenschappen. 2. Selecteer het tabblad Details. Je ziet je afmetingen bovenaan staan:
Ga naar de online calculator. Voer de breedte en hoogte van de afbeelding in (die in de eigenschappen), selecteer Nieuwe hoogte en voer de nieuwe hoogte in (zie hieronder na de achtergrondgrootte, de tweede waarde is de hoogte die je wilt).
De calculator zal iets zeggen als: "Zie! De nieuwe breedte," en je nummer is er! Doe dit getal om naar het dichtstbijzijnde getal (er bestaat niet zoiets als halve pixels).

Logo aan de linkerkant (naast de menuknop)

Houd er rekening mee dat de onderstaande afbeelding direct vanaf de menuknop is gestyled, en dat er een effen achtergrondkleur is toegevoegd aan het logo met een vulling aan de binnenkant. Als je dit anders wilt, moet je met de background-size en de background-positie rommelen (zie het voorbeeld hieronder).

.tab-balk::na {achtergrond-afbeelding: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relatief_url_van_het_bestand_je_hebt_geupload]'); achtergrond-repeat: no-repeat; achtergrond-positie: rechtsboven; achtergrondgrootte: 156px 51px; inhoud: ''; weergave: blok; positie: relatief; float: links; breedte: 156px; hoogte: 51px;}@media only screen en (min-breedte: 64.063em) { .tab-balk::na { achtergrondgrootte: 165px 54px; breedte: 165px; hoogte: 54px; }}@media only screen en (max-breedte: 40em) { .tab-balk::na { breedte: 138px; hoogte: 45px; achtergrondgrootte: 138px 45px; }}}

Logo aan de rechterkant

Houd er rekening mee dat de onderstaande afbeelding is gestyled om een lichte vulling te hebben van de zijkant en de bovenkant. 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 background-positie op top right zetten (zie het voorbeeld hierboven). De afbeelding neemt de volledige hoogte van de bovenste balk en blijft aan de randen van het venster hangen.

.tab-bar { achtergrond-afbeelding: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relatief_url_van_het_bestand_jij_hebt_geuploaded]'); achtergrond-positie: top 10px rechts 10px; achtergrond-repeat: no-repeat; achtergrondgrootte: 117px 40px;}@media only screen en (max-breedte: 40em) { .tab-balk { achtergrondpositie: rechts 10px midden; achtergrondgrootte: 102px 35px; }}}

Logo links of rechtsonder

Pas de breedte, hoogte en achtergrondgrootte aan volgens de afmetingen van je afbeelding.

In het onderstaande voorbeeld is het logo rechts uitgelijnd. Om het uit te lijnen naar links, verander je rechts: 0 naar links: 0.

Als je het logo een beetje van de rand af moet hebben, schrijf dan dingen als right: 10px en bottom: 10px.

.hoofdsectie .ui-pagina::na { inhoud: ''; weergave: blok; breedte: 102px; hoogte: 35px; achtergrond-afbeelding: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relatief_url_of_the_file_you_uploaded]'); achtergrondgrootte: 102px 35px; achtergrond-repeat: no-repeat; achtergrond-positie: midden; positie: absoluut; rechts: 0; onderaan: 0; z-index: 99;}
Was dit artikel behulpzaam ?
annuleren
Dank je wel !