Naast het standaard kleurschema van de website kun je voor de knoppen nog andere kleuren instellen. Instelbaar zijn tekst- en achtergrondkleur. Er dient altijd voldoende contrast te zijn tussen tekst- en achtergrondkleur.

• Button background color: Achtergrondkleur van de standaard knoppen.
• Button text color: Tekstkleur van de standaard knoppen.
• Secondary button background color: Achtergrondkleur van de secondaire knoppen.
• Secondary button text color: Tekstkleur van de secondaire knoppen.

Typografie gaat over teksten (lettertype, lettergrootte, gewicht). Je stelt dit in voor de gehele website en bepaald voor een groot deel de uitstraling van de website.

• Website font: Lettertype voor alle teksten. Keuze uit een aantal lattertypen.
• Website font size: Lettergrootte van de platte tekst. Het effect is afhankelijk van het gekozen lettertype bij Website font.
• Website font weight: Gewicht van de platte tekst. Meestal 'Regular' of 'Light'. Het effect is afhankelijk van het gekozen lettertype bij Website font.
• Headings font: Voor koppen kan een afwijkend lettertype worden gekozen. Meestal wel gelijk aan het gekozen lettertype bij Website font.
• Headings weight: Voor koppen kan een afwijkend gewicht worden gekozen.
• Heading 1 font: Voor de H1 kop kan ook aan afwijkend lettertype worden gekozen. Deze is vaak wel afwijkend van het standaard lettertype.
• Heading 1 weight: Voor de H1 kop kan ook aan afwijkend lettertype worden gekozen. Deze is vaak wel afwijkend van het standaard lettertype.
• Typographic scale: Bepaal hier de onderlinge verhouding tussen alle onderdelen op de website (lettergroottes, koppen, marges binnen artikelen, marges tussen artikelen). Deze instelling heeft effect op de gehele website en stel je meestal maar n keer in bij de start.

Bij layout bepaal je de breedtes en indeling van de website.

• Maximun website width: Standaard breedte van het contentdeel van de website (header heeft eigen instelling). Individuele artikelen kunnen alsnog breder worden ingesteld.
• Space between articles: Verticale witruimte tussen artikelen.
• Sidebar position: Als je de template variant met zijbalk hebt gekozen, bepaal je hiermee of je de zijbalk links (standaard) of rechts wilt tonen.
• Breadcrumbs: Aan of uit. Een homepage of landingspagina met een hero banner heeft meestal geen broodkruimelpad nodig.
• Page title: Aan of uit. Een homepage of landingspagina met een hero banner heeft meestal geen titel nodig.
• Shape style: Wel of geen afgeronde hoeken op knoppen, afbeeldingen of elementen met een achtergrondkleur. Dat kun je hier instellen.
• Subnavigation: Aan of uit. In situaties waarin de template variant met zijbalk is gekozen en er een submenu is, kun je er toch voor kiezen het submenu niet te tonen.
• Account navigation: Aan of uit. In situaties waarin de template variant met zijbalk is gekozen en er een account submenu is, kun je er toch voor kiezen het submenu niet te tonen.
• Animations: Aan of uit. Onderdelen op een pagina kunnen subtiel verplaatsen tijdens het scrollen.

De header van de website, o.a. logo en navigatie, is hier in te stellen. En ook welke onderdelen staan 'aan' of 'uit'.

• Logo: Hier kies je het logo van de website. Bij voorkeur indien mogelijk een .svg bestand. Dat geeft kwalitatief het beste resultaat.
• Logo width: Breedte van het logo.
• Invert logo on background image: Komt het logo op een donkere achtergrond (omdat je een donkere achtergrondkleur voor de navigatie hebt ingesteld of een banner die doorloopt tot onder de header) en dat matcht niet met de kleuren in het logo, dan worden hiermee de kleuren van het logo 'omgedraaid'. Dit geeft meestal een acceptabel resultaat.
• Type: Je hebt twee typen headers tot je beschikking: Basic of Extended. De extended versie heeft naast het hoofddeel een extra metadeel met een menu bovenaan de header. Dat biedt ruimte om bijvoorbeeld een zoekicoon of linkjes naar 'Contact' of 'Over ons' in te zetten. Zie dit voorbeeld.
• Width: Breedte van de header.
• Padding: Dit heeft betrekking op de witruimte boven en onder tussen de headerelementen. Hiermee geef je de header meer 'lucht'.
• Fixed position: Blijft de header boven in beeld 'plakken' of scrollt deze mee uit beeld met de rest van de pagina. Zie dit voorbeeld.
• Top bar background color: Achtergrondkleur van het metadeel (alleen bij extended header).
• Top bar text color (alleen bij extended header type): Tekstkleur van het metadeel.
• Navigation bar background color: Achtergrondkleur van het hoofddeel.
• Navigation bar text color: Tekstkleur van het hoofddeel.
• Search: Aan of uit. Wil je een zoekicoon tonen in de header.
• Login: Aan of uit. Wil je een inloggen tonen in de header.
• Shoppingcart: Als je een webshop hebt, dan kies je hier een artikel met het 'Winkelwagen (compact)' artikel.

De footer van de website is hier in te stellen. En ook hier welke onderdelen staan 'aan' of 'uit'.

Je hebt twee typen footers tot je beschikking: Basic of Extended. Beide versies bieden een hoofddeel waar je menu's en contactgegevens kunt plaatsen, en een metadeel met een menu waar je links naar bijvoorbeeld copyright, voorwaarden en privacyverklaring plaatst. Ook de taalkeuze bij meertalige websites staat in het metadeel.

• Logo: Dit logo kan afwijken van het standaard logo in de header. Bij een donkere achetrgrond wordt nog wel eens een compleet wit logo geplaatst.
• Logo width: Breedte van het logo in de footer.
• Text near logo: Eventueel een payoff die bij naast het logo staat.
• Type: Je hebt twee typen footers tot je beschikking: Basic of Extended. De extended versie biedt ruimte voor een logo en een extra artikel.
• Top background color: Achtergrondkleur van het hoofddeel.
• Top text color: Tekstkleur van het hoofddeel
• Bottom background color: Achtergrondkleur van het metadeel.
• Bottom text color: Tekstkleur van het metadeel.
• Highlighted article: Je kiest hier een bestaand artikel om in de footer te plaatsen. Dit kan bijvoorbeeld aan artikel zijn met een knop 'Inschrijven voor de nieuwsbrief'.
• Language selector: Taalkeuze aan of uit. Bij meertalige websites.
• Scroll to top: Aan of uit. Verschijnt rechtsonder in beeld bij een lange pagina, zodat bezoekers snel weer naar de bovenkant van de pagina worden gebracht.

Dit deel gebruik je om contactgegevens van de organisatie te tonen.

Gebruik dit deel voor links naar de social media kanalen van de organisatie.

• Socials icon colors: Kies hier de kleur van de iconen; de eigen kleuren van het betreffende platform, je eigen primaire of secundaire kleuren, of licht (wit) of donker.
  
  Beschikbare kanalen:
  • Instagram
  • Facebook
  • LinkedIn
  • X
  • YouTube

Op diverse plekken in de user intarface kunnen iconen worden gebruikt, zoals een vergrootglas voor zoeken of een 'hamburger'-icoon voor het mobiele menu. Als de huisstijl een bepaalde stijl voorschrijft, dan kun je hier je eigen iconen toevoegen.

• Favicon: Een favicon is het icoontje in de tab van de browser. Dit is meestal (een deel van) het logo.
• Menu icon: Standaard een 'hamburger'-icoon.
• Search icon: Standaard een vergrootglas.
• Close icon: Standaard een kruisje.

Een sectie voor gevorderden: CSS. Ben je een beetje thuis in css, dan kun je hier de stylesheets van de standaard Sapphire user interface overschrijven met je eigen css.

Advies: gebruik dit zeer beperkt. Sapphire wordt door Procurios onderhouden en voorzien van updates. We kunnen daarbij geen rekening houden met eigen css. De layout van de website zou na een update stuk kunnen gaan.