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:

Mini Masterclass - Building awesome look & feels

Ga naar de taben kies een look & feel per subomgeving.
https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3026858828/original/deIesNsjIvj4xdeGBDpelI5hXM4OI0UFkQ.png?1488804681

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.

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012752123/original/conf_1.jpg?1442926329

Een aantal instellingen zijn alleen van toepassing op pagina's na het inloggen:

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012745302/original/conf_2.png?1442913389

Advanced

Element colours

Primary colourDit is de primaire kleur en heeft effect op dezelfde onderdelen als bij de 'basic' instellingen hierboven.

Secondary colourDit is de secundaire kleur en heeft effect op dezelfde onderdelen als bij de 'basic' instellingen hierboven.

Course tile header colourDit 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 colourDit is de standaard achtergrondkleur voor elementen zoals tegels, de adviesbalk, activiteiten en de widgets.

Homepage box background colourDit is de achtergrondkleur voor het inlogveld.

Homepage box background opacity0% zal de achtergrond van het inlogveld helemaal doorzichtig maken en 100% maakt het ondoorzichtig.

Homepage box with text background colourStandaard 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 opacity0% 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. 

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012745864/original/conf_3.png?1442914513

Deze instellingen overschrijven de standaardinstellingen.

"View objectives" text colourDit verandert de tekstkleur van de link "Bekijk leerdoelen" bovenaan de learning journey.

Activity colourDit is de achtergrondkleur van activiteiten en overschrijft de 'Page elements'-instelling.

Widget header colourDit is de achtergrondkleur voor de headers van de widgets en overschrijft de 'Page elements'-instelling.

Widget title colourDit is de tekstkleur voor de titel in de header van een widget en overschrijft de andere tekstkleurinstellingen.

Widget icon colourDit 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.

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012783809/original/conf_4.png?1443006568

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 colourDit is de achtergrondkleur voor de hele website. Deze zal alleen zichtbaar zijn wanneer er geen achtergrondafbeelding is ingesteld.

Background imageDit 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 repetitionZie 'Algemene instellingen' onderaan de pagina.

Background image positionZie 'Algemene instellingen' onderaan de pagina.

Background image fixedZie 'Algemene instellingen' onderaan de pagina.

Background image sizingZie 'Algemene instellingen' onderaan de pagina.

Background image for login screenDit 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 colourDe '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 colourDit is de achtergrondkleur voor de header, achter het logo.

Header background opacityDeze kleur kun je doorzichtig maken om de achtergrondkleur of -afbeelding van de pagina te laten zien.

Background imageDit overschrijft de achtergrondkleur en -doorzichtigheid van de header en toont alleen een afbeelding achter het logo.

Background image repetitionZie 'Algemene instellingen' onderaan de pagina.

Background image positionZie 'Algemene instellingen' onderaan de pagina.

Background image for login screenDit is de headerafbeelding voor het inlogscherm. Deze wordt ook achter het menu dat boven het logo staat geplaatst.

Logo imageHier 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 widthDe breedte van het logo, dit veld wordt automatisch ingevuld.

Logo heightDe hoogte van het logo, dit veld wordt automatisch ingevuld.

Padding above and under logoDit voegt ruimte boven en onder het logo toe. Dit is standaard 10 pixels.

Menu background colour - Zie hieronder.
Menu background opacity
Menu fontZie "Algemene instellingen" onderaan de pagina.

Menu font weightZie "Algemene instellingen" onderaan de pagina.

Menu font sizeZie "Algemene instellingen" onderaan de pagina.

Menu font colourZie 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 colourZie hieronder.

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012784292/original/conf_5.png?1443007600

Subheader background colourDit 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 imageIn plaats van een achtergrondkleur, kun je hier ook een afbeelding plaatsen, deze wordt niet doorzichtig.

Subheader background repetitionZie '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 fontZie 'Algemene instellingen' onderaan de pagina.

Text font weightZie 'Algemene instellingen' onderaan de pagina.

Text font sizeDe 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 fontZie 'Algemene instellingen' onderaan de pagina.

Title font weightZie 'Algemene instellingen' onderaan de pagina.

Title font sizeDeze 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 fontZie 'Algemene instellingen' onderaan de pagina.

Activity title font weightZie '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.

HeightDit 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 sizeZie 'Algemene instellingen' onderaan de pagina.

Rounded cornersHoeken zijn standaard 50% afgerond, wat de zijkanten van een knop helemaal rond maakt. 0% maakt het vierkant.

Border sizeJe kunt de primaire knoppen een rand geven door hier de dikte in te vullen.

Border colourHiermee 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 colourDe secundaire knop is standaard wit.

Text colourDeze is standaard de primaire kleur.

Border size -

Border colourDeze 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 imageDit is de achtergrondafbeelding.

Background colourJe kunt ook een achtergrondkleur instellen, die is alleen zichtbaar als er geen afbeelding is geselecteerd.

Background image repetitionZie 'Algemene instellingen' onderaan de pagina.

Background image position Zie 'Algemene instellingen' onderaan de pagina.

Background image fixedZie '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 colourDit is de tekstkleur van de titel.

Title bar logoaNewSpring 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 widthDit 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 heightDit 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 fieldsDeze is alleen van toepassing op knoppen en tekstvelden.

Page element rounded cornersDeze is van toepassing op pagina-onderdelen, zoals tegels, de adviesbalk, activiteiten en de widgets.

Page element border sizeHier 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 radiusDit is het aantal pixels waarover de rand van de schaduw wordt vervaagd. Zie afbeelding hieronder.

Spread radiusDeze rekt de schaduw met een bepaald aantal pixels uit in alle richtingen.

Colour Dit is de kleur van de schaduw.

OpacityIn de meeste gevallen zou je een schaduw doorzichtig willen maken, gebruik daar deze optie voor.

https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/3012785541/original/conf_6.png?1443009804


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

RepetitionHiermee 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

FontWij 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!