Look & feel

Laatst gewijzigd: 2017-03-06 14:09:07 +0100

Waar kan ik de look & feel aanpassen?

Ga naar de Instellingen-pagina en daar kun je per subomgeving een look&feel selecteren. De Instellingen-pagina is alleen zichtbaar voor 'omgevingsbeheerders'.

Als je geen look & feel kunt selecteren, dan zul je er eerst één moeten aanmaken. Doe dat via de knop Beheer look & feels. Vergeet nadat je het hebt aangemaakt, niet om deze te selecteren, anders worden je instellingen niet zichtbaar.

Tip: Als je dat nog niet hebt gedaan, zet dit artikel open in de supportwidget wanneer je werkt aan je look & feel!

Er zijn twee configuratiemodussen: Basic en Advanced.

Basic

In de afbeelding hieronder zie je welke instellingen waar effect op hebben.

conf_1.jpg

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

conf_2.png

Advanced

Element colors

Primary color - Dit is de primaire kleur en heeft effect op dezelfde onderdelen als bij de 'basic' instellingen hierboven.
Secondary color - Dit is de secundaire kleur en heeft effect op dezelfde onderdelen als bij de 'basic' instellingen hierboven.
Course tile header color - 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 color - Dit is de standaard achtergrondkleur voor elementen zoals tegels, de adviesbalk, activiteiten en de widgets.
Homepage box background color - 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 color - Standaard gebruikt dit dezelfde instellingen als 'Homepage box background color', 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
Advice bar color - Zie hieronder.
Advice bar icon color - Zie hieronder.
Advice bar title color - Zie hieronder.
Advice bar text color - Zie hieronder.
Advice bar link color - Zie hieronder.
Advice bar close button color - Zie hieronder.
Advice bar color (in MemoTrainer widget) - Je kunt een andere kleur instellen voor het MemoTrainer-advies wanneer de MemoTrainer widget in een 'subpage' is geopend. 

conf_3.png

Deze instellingen overschrijven de standaardinstellingen.
"View objectives" text color - Dit verandert de tekstkleur van de link "Bekijk leerdoelen" bovenaan de learning journey.
Activity color - Dit is de achtergrondkleur van activiteiten en overschrijft de 'Page elements'-instelling.
Widget header color - Dit is de achtergrondkleur voor de headers van de widgets en overschrijft de 'Page elements'-instelling.
Widget title color - Dit is de tekstkleur voor de titel in de header van een widget en overschrijft de andere tekstkleurinstellingen.
Widget icon color - Dit is de kleur van het icoon in de header van een widget en overschrijft de andere kleurinstellingen.
Widget background color - Standaard is dit een lichtere versie van de 'widget header color' of 'page elements color'. Het is de achtergrondkleur van de inhoud van de widgets wanneer deze zijn uitgeklapt.
Subpage background color - 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 color - Zie hieronder.
User statistics background opacity - Zie hieronder.
User statistics border color - Zie hieronder.
User statistics table background color (even rows) - Zie hieronder.
User statistics table background color (odd rows) - Zie hieronder.

Input field text color - Dit is de tekstkleur van invoervelden.
Input field background color - Dit is de achtergrondkleur van invoervelden.

Background images and colors

Background color - 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,
Background video for login screen (webm) - WEBM
Background video for login screen (ogv) - en OGV (soms ook OGG genoemd).
Background overlay color - 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.

Header, logo and subheader

Header background color - 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 - Dit is de breedte van het logo, dit veld wordt automatisch ingevuld.
Logo height - Dit is 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 color - 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 color - Zie hieronder.
Menu background color (when hovering over item) - Dit is de achtergrondkleur wanneer je er met de muis overheen gaat.
Menu background color (active item) - Zie hieronder.
Menu font color (active item) - Zie hieronder.
Menu border color - Zie hieronder.

Subheader background color - 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 colors

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 color
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 color
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 color
Link color - Dit is de kleur voor de meeste links/snelkoppelingen. Standaard is deze hetzelfde als de 'Primaire kleur'. 

Primary buttons

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 color
Text color
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 color - Hiermee pas je de kleur van de rand aan.
Background color (when hovering over button) - De kleur van de knop verandert wanneer je er met de muis overheen beweegt.
Text color (when hovering over button)
Border color (when hovering over button)
Background color (when pressing button) - De kleur verandert ook wanneer je de knop indrukt.
Text color (when pressing button)
Border color (when pressing button)
Background color (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 color (when button is disabled)
Border color (when button is disabled)

Secondary buttons

Background color - De secundaire knop is standaard wit.
Text color - Deze is standaard de primaire kleur.
Border size
Border color - Deze is standaard de primaire kleur.
Background color (when hovering over button)
Text color (when hovering over button)
Border color (when hovering over button)
Background color (when pressing button)
Text color (when pressing button)
Border color (when pressing button)
Background color (when button is disabled)
Text color (when button is disabled)
Border color (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 color
Subheading font
Subheading font weight
Subheading font size - Dit is een precieze afmeting in pixels.
Subheading font color
Sub-subheading font
Sub-subheading font weight
Sub-subheading font size - Dit is een precieze afmeting in pixels.
Sub-subheading font color
Paragraph font
Paragraph font weight
Paragraph font size - Dit is een precieze afmeting in pixels.
Paragraph font color
Paragraph line height - Dit is de regelhoogte van alinea's.

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 color
Question line height
Answer font
Answer font weight
Answer font size - Dit is een precieze afmeting in pixels.
Answer font color
Answer line height

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 color - 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 color - 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 color
Title background color - 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 color - 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.
Title bar logo height - Dit veld wordt automatisch gevuld.
Pagination indicator color - 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 color

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.
Color - Dit is de kleur van de schaduw.
Opacity - In de meeste gevallen zou je een schaduw doorzichtig willen maken, gebruik daar deze optie voor.

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. 

Was dit antwoord nuttig? Ja Nee

Feedback versturen
Het spijt ons dat we u niet hebben kunnen helpen. Als u feedback geeft, kunnen we het artikel verbeteren.
Hoe kunnen we dit artikel verbeteren?