Stylesheets

Een stylesheet bepaalt hoe dingen eruitzien: lettertype, kleuren, afstanden. Je schrijft hem in CSS, de opmaaktaal van het web. Je maakt een stylesheet één keer en laat er daarna formulieren, e-mails en andere onderdelen van het project naar verwijzen, zodat alles in dezelfde huisstijl staat. Op deze pagina lees je hoe je een stylesheet maakt en wat de editor je helpt. CSS zelf leggen we hier niet uit.

De editor met de stylesheet van het demoproject: links de naam, in het midden de CSS, rechts de nummers van de vragen

Waar een stylesheet voor dient

Een stylesheet doet niets zolang je hem nergens kiest. Je kiest hem in het onderdeel dat de opmaak nodig heeft:

E-mails: bij Stylesheet in de instellingen van een email template.
Formulieren: bij Stylesheet in de instellingen van een formulier (zie Form views). Laat je het op Geen staan, dan krijgt het formulier de standaardopmaak.
Webpagina’s: bij Stylesheet in de instellingen van een pagina.
Overzichten: bij Stylesheet in de instellingen van een overzicht, voor de opmaak van de weergave en van de export naar HTML.
Schermberichten en documenten: elk schermbericht en elk documenttemplate heeft een eigen keuze voor een stylesheet. Een document met een stylesheet wordt daarmee opgemaakt, bijvoorbeeld als PDF.

Wijzig je de CSS van een stylesheet en sla je hem op, dan geldt de nieuwe opmaak overal waar je hem hebt gekozen. Een onderdeel zonder stylesheet gebruikt de standaardopmaak van Easydus.

Een stylesheet maken

Open je project en kies in het menu onder Proces | Ontwerp voor Stylesheets. Je ziet de stylesheets van het project, op naam gesorteerd.
Klik bovenaan de lijst op +. Er opent een lege stylesheet.
Vul links bij Name een naam in.
Typ de CSS in het grote vak onder Stylesheet.
Klik op Save.

Een bestaande stylesheet open je door in de lijst op de naam te klikken.

Een stylesheet kan bijvoorbeeld zo beginnen. Dit is de stylesheet van het demoproject: alle tekst in Arial, in donkergrijs.

body {
  font-family: Arial, sans-serif;
  color: #1a1a1a;
}

De editor

Het vak Stylesheet met de CSS in kleur, regelnummers en een inklapknop bij regel 1

De editor is gemaakt voor CSS. Je ziet het aan het volgende:

Kleuren: eigenschappen, waarden en accolades hebben elk een eigen kleur, zodat je de opbouw snel ziet.
Regelnummers links van de tekst. Het pijltje naast een regel klapt het blok eronder in of uit.
Aanvullen: begin je een woord te typen, bijvoorbeeld background-c, dan verschijnt een lijst met eigenschappen die erbij passen. Kies er een met de pijltjestoetsen en Enter.

Het vak Stylesheet tijdens het typen: een lijst met suggesties bij background-c

Inspringen: Tab springt de regel in, in plaats van naar het volgende veld te gaan.
Foutmarkering: Easydus controleert de CSS tijdens het typen. Naast een regel met een probleem staat een gele driehoek (waarschuwing) of een rode cirkel (fout). Het probleem zelf heeft een golflijntje eronder. Houd je muis op de markering om te lezen wat er aan de hand is, bijvoorbeeld “Unknown property ‘colour’.” of “Unexpected token ‘;’ at line 4, col 10.”

Het vak Stylesheet met een waarschuwing bij een onbekende eigenschap en een fout bij een lege waarde

De nummers van de vragen

Rechts van de editor staat een overzicht van de vragen van het hoofdformulier van het project, met het nummer van elke vraag.

De kolom rechts met de uitleg van #e, #i en #q en een tabel met nummers en vragen

Met die nummers kun je in je CSS één vraag opmaken:

Main form: #e en het nummer is het label van een vraag, #i en het nummer het invoerveld. Bij vraag 10 zijn dat #e10 en #i10.
HTML view: #q en het nummer is de vraag in een overzicht met een HTML-weergave, bijvoorbeeld #q10.

De tabel nr. / Question laat bij elk nummer de naam van de vraag zien.

Verwijderen

Klik op Delete om de stylesheet te verwijderen. Easydus vraagt je dat eerst te bevestigen. Delete staat er alleen bij een stylesheet die al is opgeslagen.