○ De Look & feel instellen
Wil je meer weten over het bouwen van mooie look & feels? Volg dan onze korte learning journey in de Academy en klik op onderstaande link:
Ga naar de taben kies een look & feel per subomgeving.
De look & feel is na het selecteren direct zichtbaar op de schermen van deelnemers. Dus ook wanneer je doet alsof je een deelnemer bent bij het testen van een template, of bij het meelopen van een uitvoering.
Je kunt ook per template en per uitvoering een look en feel instellen. Voor een template kan dit onder de knop Meer en kies van voor Instellingen. Selecteer onder het kopje Standaard instantieer instellingen de look en feel die je aan de template wil koppelen.
Wil je voor een uitvoering een andere look en feel selecteren? Dan kan dit op de Instellingen tab van een uitvoering. Selecteer dan bij Look & Feel onder Geavanceerde instellingen de gewenste look en feel.
Als je geen look & feel kunt selecteren, dan kun je er één aanmaken. Scroll naar beneden en klik in het paneel Look & Feel op Beheer look & Feels.
Tip: Als je dat nog niet hebt gedaan, zet dit artikel open in de supportwidget wanneer je werkt aan je look & feel.
Wil je niet zelf een look & feel maken? Dan kunnen onze Training Improvement Engineers dit voor je doen! Bekijk de website en vul het contactformulier in:
aNewSpring Training Improvement Engineer Service
Klik op + Look & Feel om een nieuwe aan te maken. Je kunt als basis een thema kiezen en verder aanpassen.
Er zijn twee configuratiemodussen: Basic en Advanced.
Basic
In de afbeelding hieronder zie je welke instellingen waar effect op hebben.
Een aantal instellingen zijn alleen van toepassing op pagina's na het inloggen:
Advanced
Element colours
Primary colour - Dit is de primaire kleur en heeft effect op dezelfde onderdelen als bij de 'basic' instellingen hierboven.
Secondary colour - Dit is de secundaire kleur en heeft effect op dezelfde onderdelen als bij de 'basic' instellingen hierboven.
Course tile header colour - Dit is de achtergrondkleur van de header van de tegels die je vindt onder 'Home'. Deze is alleen zichtbaar wanneer de tegel geen afbeelding heeft.
Page elements colour - Dit is de standaard achtergrondkleur voor elementen zoals tegels, de adviesbalk, activiteiten en de widgets.
Homepage box background colour - Dit is de achtergrondkleur voor het inlogveld.
Homepage box background opacity - 0% zal de achtergrond van het inlogveld helemaal doorzichtig maken en 100% maakt het ondoorzichtig.
Homepage box with text background colour - Standaard gebruikt dit dezelfde instellingen als 'Homepage box background colour', maar overschrijft de instellingen voor een tekstveld boven het inlogveld (dat is een maatwerkinstelling die in de meeste leeromgevingen niet actief is).
Homepage box with text background opacity - 0% zal de achtergrond van het tekstveld helemaal doorzichtig maken en 100% maakt het ondoorzichtig.
Advice bar colour - Zie hieronder.
Advice bar icon colour - Zie hieronder.
Advice bar title colour - Zie hieronder.
Advice bar text colour - Zie hieronder.
Advice bar link colour - Zie hieronder.
Advice bar close button colour - Zie hieronder.
Advice bar colour (in MemoTrainer widget) - Je kunt een andere kleur instellen voor het MemoTrainer-advies wanneer de MemoTrainer widget in een 'subpage' is geopend.
Deze instellingen overschrijven de standaardinstellingen.
"View objectives" text colour - Dit verandert de tekstkleur van de link "Bekijk leerdoelen" bovenaan de learning journey.
Activity colour - Dit is de achtergrondkleur van activiteiten en overschrijft de 'Page elements'-instelling.
Widget header colour - Dit is de achtergrondkleur voor de headers van de widgets en overschrijft de 'Page elements'-instelling.
Widget title colour - Dit is de tekstkleur voor de titel in de header van een widget en overschrijft de andere tekstkleurinstellingen.
Widget icon colour - Dit is de kleur van het icoon in de header van een widget en overschrijft de andere kleurinstellingen.
Widget background colour - Standaard is dit een lichtere versie van de 'widget header colour' of 'page elements colour'. Het is de achtergrondkleur van de inhoud van de widgets wanneer deze zijn uitgeklapt.
Subpage background colour - Wanneer de widgets zijn ingeklapt, openen deze in een subpagina die over de activiteiten heen ligt. DIt is daar de achtergrondkleur voor.
User statistics background colour - Zie hieronder.
User statistics background opacity - Zie hieronder.
User statistics border colour - Zie hieronder.
User statistics table background colour (even rows) - Zie hieronder.
User statistics table background colour (odd rows) - Zie hieronder.
Input field text colour - Dit is de tekstkleur van invoervelden.
Input field background colour - Dit is de achtergrondkleur van invoervelden.
Background images and colours
Background colour - Dit is de achtergrondkleur voor de hele website. Deze zal alleen zichtbaar zijn wanneer er geen achtergrondafbeelding is ingesteld.
Background image - Dit is de afbeelding voor op de achtergrond van alle cursuspagina's, behalve het inlogscherm en het afspeelscherm van de cursus. We raden een afbeelding aan van 2000 bij 1500 pixels en niet groter dan 500 kB. Andere afbeeldingen zijn ook mogelijk.
Background image repetition - Zie 'Algemene instellingen' onderaan de pagina.
Background image position - Zie 'Algemene instellingen' onderaan de pagina.
Background image fixed - Zie 'Algemene instellingen' onderaan de pagina.
Background image sizing - Zie 'Algemene instellingen' onderaan de pagina.
Background image for login screen - Dit is de achtergrondafbeelding voor op het inlogscherm. Deze gebruikt dezelfde instellingen als de achtergrondafbeelding voor de rest van de pagina's.
Background video for login screen (mp4) - Deze vervangt de achtergrondafbeelding voor op het loginscherm door een video. We raden het gebruik van een groot bestand af, omdat het even kan duren voordat het geladen is bij de gebruiker. Om dit goed te laten functioneren, zul je de video in 3 formaten moeten uplaoden. MP4, WEBM en OGV
Background video for login screen (webm) - WEBM
Background video for login screen (ogv) - en OGV (soms ook OGG genoemd).
Background overlay colour - De 'overlay' is het vlak voor de achtergrondkleur of -afbeelding en achter de inhoud van de pagina. Deze is er op alle pagina's, behalve het inlogscherm en het afspeelscherm van de cursus.
Background overlay opacity - Deze optie kun je gebruiken om dit vlak doorzichtig te maken. Dat ziet er meestal goed uit in combinatie met een achtergrondafbeelding.
Background footer colour
Header, logo and subheader
Header background colour - Dit is de achtergrondkleur voor de header, achter het logo.
Header background opacity - Deze kleur kun je doorzichtig maken om de achtergrondkleur of -afbeelding van de pagina te laten zien.
Background image - Dit overschrijft de achtergrondkleur en -doorzichtigheid van de header en toont alleen een afbeelding achter het logo.
Background image repetition - Zie 'Algemene instellingen' onderaan de pagina.
Background image position - Zie 'Algemene instellingen' onderaan de pagina.
Background image for login screen - Dit is de headerafbeelding voor het inlogscherm. Deze wordt ook achter het menu dat boven het logo staat geplaatst.
Logo image - Hier kun je het logo uploaden. Wij raden een PNG-bestand met transparante achtergrond aan. Het bestand dient al de juiste afmetingen te hebben voordat je het uploadt.
Logo width - De breedte van het logo, dit veld wordt automatisch ingevuld.
Logo height - De hoogte van het logo, dit veld wordt automatisch ingevuld.
Padding above and under logo - Dit voegt ruimte boven en onder het logo toe. Dit is standaard 10 pixels.
Menu background colour - Zie hieronder.
Menu background opacity
Menu font - Zie "Algemene instellingen" onderaan de pagina.
Menu font weight - Zie "Algemene instellingen" onderaan de pagina.
Menu font size - Zie "Algemene instellingen" onderaan de pagina.
Menu font colour - Zie hieronder.
Menu background colour (when hovering over item) - Dit is de achtergrondkleur wanneer je er met de muis overheen gaat.
Menu background colour (active item) - Zie hieronder.
Menu font colour (active item) - Zie hieronder.
Menu border colour - Zie hieronder.
Subheader background colour - Dit is de achtergrondkleur voor de subheader, deze vind je op een aantal pagina's (zoals 'Home' en het cursusoverzicht) vlak onder het menu.
Subheader background opacity - Door de subheader doorzichtig te maken zal de achtergrondkleur of -afbeelding te zien zijn.
Subheader background image - In plaats van een achtergrondkleur, kun je hier ook een afbeelding plaatsen, deze wordt niet doorzichtig.
Subheader background repetition - Zie 'Algemene instellingen' onderaan de pagina.
Subheader background position - Zie 'Algemene instellingen' onderaan de pagina.
Text fonts and colours
Deze instellingen zijn van toepassing op alle tekst:
Text font - Zie 'Algemene instellingen' onderaan de pagina.
Text font weight - Zie 'Algemene instellingen' onderaan de pagina.
Text font size - De standaardgrootte is 16 pixels. Pas dit aan om de tekst kleiner of groter te maken. Alle lettergrootte's zijn hierop gebaseerd, behalve wanneer het met andere instellingen anders is aangegeven.
Text font colour
Je kan deze instellingen overschrijven voor titels:
Title font - Zie 'Algemene instellingen' onderaan de pagina.
Title font weight - Zie 'Algemene instellingen' onderaan de pagina.
Title font size - Deze overschrijft de standaardgrootte waarvan de lettergrootte van titels afhankelijk is. Die is standaard ook 16 pixels. Pas dit aan om de titels kleiner of groter te maken.
Title font colour
Activiteiten zijn bijvoorbeeld lessen, opdrachten en toetsen. Je kunt de instellingen ook overschrijven voor de titels van activiteiten:
Activity title font - Zie 'Algemene instellingen' onderaan de pagina.
Activity title font weight - Zie 'Algemene instellingen' onderaan de pagina.
Activity title font size - Dit is een precieze afmeting in pixels.
Activity title font colour -
Link colour - Dit is de kleur voor de meeste links/snelkoppelingen. Standaard is deze hetzelfde als de 'Primaire kleur'.
Primary buttons
De primaire knoppen zijn de belangrijkste knoppen in het platform voor de deelnemer. Primaire knoppen verdienen meer aandacht, omdat ze verwijzen naar de volgende stap voor de deelnemer. Op deze manier wordt de deelnemer door de cursus genavigeerd. Denk hierbij aan de Volgende knop in een activiteit om naar de volgende pagina te gaan.
Height - Dit is de hoogte van zowel de primaire als secundaire knoppen.
Height (for smaller buttons) - Dit is de hoogte voor de knoppen in de widgets, deze zijn standaard minder hoog.
Background colour
Text colour
Font weight - Zie 'Algemene instellingen' onderaan de pagina.
Font size - Zie 'Algemene instellingen' onderaan de pagina.
Rounded corners - Hoeken zijn standaard 50% afgerond, wat de zijkanten van een knop helemaal rond maakt. 0% maakt het vierkant.
Border size - Je kunt de primaire knoppen een rand geven door hier de dikte in te vullen.
Border colour - Hiermee pas je de kleur van de rand aan.
Background colour (when hovering over button) - De kleur van de knop verandert wanneer je er met de muis overheen beweegt.
Text colour (when hovering over button)
Border colour (when hovering over button)
Background colour (when pressing button) - De kleur verandert ook wanneer je de knop indrukt.
Text colour (when pressing button)
Border colour (when pressing button)
Background colour (when button is disabled) - Soms is een knop niet aanklikbaar (bijvoorbeeld de knop waarmee je een activiteit start wanneer de activiteit nog niet beschikbaar is). Deze is standaard grijs.
Text colour (when button is disabled)
Border colour (when button is disabled)
Secondary buttons
De secundaire knoppen zijn in principe de minder belangrijke knoppen voor de deelnemer, omdat ze niet gebruikt worden om de deelnemer naar de volgende stap in de learning journey brengen.
Een voorbeeld hiervan is de 'Controleer' knop in een toetsactiviteit.
Background colour - De secundaire knop is standaard wit.
Text colour - Deze is standaard de primaire kleur.
Border size -
Border colour - Deze is standaard de primaire kleur.
Background colour (when hovering over button) -
Text colour (when hovering over button) -
Border colour (when hovering over button) -
Background colour (when pressing button) -
Text colour (when pressing button) -
Border colour (when pressing button) -
Background colour (when button is disabled) -
Text colour (when button is disabled) -
Border colour (when button is disabled) -
Content parts and plus editor
Dit zijn de standaardinstellingen voor alle inhoudsdelen. Ze zijn ook van toepassing op vragen die met de plus-editor zijn gemaakt. Zie 'Algemene instellingen' onderaan de pagina voor informatie over de opties per tekststijl.
Heading font -
Heading font weight -
Heading font size - Dit is een precieze afmeting in pixels.
Heading font colour -
(Heading staat gelijk aan Kop 1 in het drop down menu bij het selecteren van de opmaak via de Teksteditor en Pluseditor > Tekst)
Subheading font -
Subheading font weight -
Subheading font size - Dit is een precieze afmeting in pixels.
Subheading font colour -
(Subheading staat gelijk aan Kop 2 in het drop down menu bij het selecteren van de opmaak via de Teksteditor en Pluseditor > Tekst)
Sub-subheading font -
Sub-subheading font weight -
Sub-subheading font size - Dit is een precieze afmeting in pixels.
Sub-subheading font colour -
(Sub-subheading staat gelijk aan Kop 3 in het drop down menu bij het selecteren van de opmaak via de Teksteditor en Pluseditor > Tekst)
Paragraph font -
Paragraph font weight -
Paragraph font size - Dit is een precieze afmeting in pixels.
Paragraph font colour -
Paragraph line height - Dit is de regelhoogte van alinea's.
(Paragraph staat gelijk aan Alinea in het drop down menu bij het selecteren van de opmaak via de Teksteditor en Pluseditor > Tekst)
Questions
Dit zijn de standaardinstellingen voor alle vragen, behalve voor de vraagtekst die met de plus-editor zijn gemaakt.
Question font -
Question font weight -
Question font size - Dit is een precieze afmeting in pixels.
Question font colour -
Question line height -
Description font wordt gebruikt voor de kleine tekst onder vragen, zoals "Meerdere antwoorden zijn mogelijk".
Description font -
Description font weight -
Description font size - Dit is een precieze afmeting in pixels.
Description font colour -
Description line height -
Answer font -
Answer font weight -
Answer font size - Dit is een precieze afmeting in pixels.
Answer font colour -
Answer line height -
Colour palette for content parts and questions
Stel een aantal standaard kleuren in die auteurs kunnen gebruiken in de teksteditor voor tekst en de achtergrond van tekst.
Text colour 1 -
Text colour 2 -
Text colour 3 -
Text colour 4 -
Text colour 5 -
Background colour 1 -
Background colour 2 -
Background colour 3 -
Background colour 4 -
Background colour 5 -
De getoonde kleuren in het palet van de auteur zijn afhankelijk van de look&feel die ingesteld staat in de subomgeving. Staan er meer look&feels ingesteld met andere tekst- en/ of achtergrondkleuren? Dan kan de kleur anders zijn wanneer de vraag of inhoudsdeel in een andere subomgeving bekeken wordt.
Activity screen
Wanneer je een activiteit opent, kom je meestal in het afspeelscherm van de cursus terecht, deze wordt ook vaak de 'player' of 'course part player' genoemd. Er zijn een aantal instellingen die kunnen worden aangepast
Background image - Dit is de achtergrondafbeelding.
Background colour - Je kunt ook een achtergrondkleur instellen, die is alleen zichtbaar als er geen afbeelding is geselecteerd.
Background image repetition - Zie 'Algemene instellingen' onderaan de pagina.
Background image position - Zie 'Algemene instellingen' onderaan de pagina.
Background image fixed - Zie 'Algemene instellingen' onderaan de pagina.
Background image sizing - Zie 'Algemene instellingen' onderaan de pagina.
Sidebar background colour - Dit is het inklapbare veld aan de linkerkant van het scherm. Je kunt de achtergrondkleur aanpassen.
Sidebar background opacity - Door de achtergrondkleur van dit inklapbare veld doorzichtig te maken, zal de achtergrondkleur of -afbeelding zichtbaar worden.
Sidebar text colour -
Title background colour - De titel staat bovenin het scherm naast de knop 'Terug naar overzicht'. Hierin staat de naam van de activiteit. Pas hiermee de achtergrondkleur aan.
Title text colour - Dit is de tekstkleur van de titel.
Title bar logo - aNewSpring is geoptimaliseerd voor gebruik op draagbare apparaten en verschillende schermformaten. In verband hiermee raden wij af om een logo te plaatsen. We hebben deze optie wel beschikbaar gemaakt, omdat dit soms verplicht is vanwege marketing richtlijnen. In dat geval, kun je hier het logo uploaden.
Title bar logo width - Dit veld wordt automatisch gevuld. Je kan dit handmatig aanpassen, maar hierdoor wijzig je de breedte van de ruimte voor het logo, en niet van het logo zelf. Deze kun je wel aanpassen door het logo bij 'Title bar logo' te bewerken.
Title bar logo height - Dit veld wordt automatisch gevuld. Je kan dit handmatig aanpassen, maar hierdoor wijzig je de hoogte van de ruimte voor het logo, en niet van het logo zelf. Deze kun je wel aanpassen door het logo bij 'Title bar logo' te bewerken.
Pagination indicator colour - Hiermee verander je de achtergrondkleur van de actieve pagina in de paginering onderaan de pagina.
Borders
Rounded corners for buttons and text fields - Deze is alleen van toepassing op knoppen en tekstvelden.
Page element rounded corners - Deze is van toepassing op pagina-onderdelen, zoals tegels, de adviesbalk, activiteiten en de widgets.
Page element border size - Hier kun je ook een rand aan toevoegen, door de dikte in te vullen.
Page element border style -
Page element border colour -
Shadows
Je kunt ook schaduwen toevoegen aan de 'pagina-onderdelen'.
Horizontal placement - Zie afbeelding hieronder.
Vertical placement - Zie afbeelding hieronder.
Blur radius - Dit is het aantal pixels waarover de rand van de schaduw wordt vervaagd. Zie afbeelding hieronder.
Spread radius - Deze rekt de schaduw met een bepaald aantal pixels uit in alle richtingen.
Colour - Dit is de kleur van de schaduw.
Opacity - In de meeste gevallen zou je een schaduw doorzichtig willen maken, gebruik daar deze optie voor.
Accessibility
Keyboard focus colour - Hiermee stel je de kleur in van de rand die om elementen zit wanneer een gebruiker het systeem met het toetsenbord bestuurt. Het element dat actief is wordt omlijnd in de door hier ingestelde kleur.
Algemene instellingen
Afbeeldingen
Repetition - Hiermee geef je aan of een afbeelding herhaalt dient te worden. Dit is vooral handig voor achtergrondpatronen. y betekent verticaal en z horizontaal.
Position - Hiermee geef je aan in welke hoek of aan welke rand je de afbeelding wilt uitlijnen.
Fixed - Kies voor scroll om de afbeelding niet vast te zetten, maar mee te laten scrollen op de pagina. Met fixed zet je de afbeelding wel vast.
Sizing - De standaardinstelling is 'auto'. Kies voor 'cover' als je de afbeelding de hele achtergrond wilt laten beslaan, maar een deel van de afbeelding wordt dan afgesneden. Met 'contain' wordt de hele afbeelding zichtbaar in de achtergrond, maar wordt niet de hele achtergrond door de afbeelding bedekt.
Lettertypes
Font - Wij ondersteunen alleen standaard webfonts en Google Fonts.
Font weight - Om de juiste bestanden van Google Fonts te laden, wordt de dikte van lettertypes aangegeven door middel van getallen. 400 is hetzelfde als normaal en 700 als vetgedrukt.
Font size - Deze instelling werkt niet altijd hetzelfde. Deze is hierboven per stuk beschreven.
Mocht je een wijziging hebben doorgevoerd, let er bij het updaten dan op dat de oude Look&Feel nog in het cachegeheugen opgeslagen kan zijn. Het verschilt per browser hoe je de cache kunt verversen, maar de meest voorkomende sneltoets is CTRL+SHIFT+R.
Tip: Als je dat nog niet hebt gedaan, zet dit artikel open in de supportwidget wanneer je werkt aan je look & feel!