Het lesrooster op je website neemt de kleuren van je school over. Je stelt vier kleuren in, en voor wie meer wil is er eigen CSS.
De vier kleuren
Alleen de standaard kleur is verplicht. Laat je de andere leeg, dan kiest het lesrooster zelf een passende kleur.
| Veld | Waar zie je het | Leeg betekent |
|---|---|---|
| Standaard kleur | Knoppen (Inschrijven, gekozen dag) en accenten zoals de lijn onder elke dag | Verplicht, standaard oranje |
| Achtergrond | Achter het hele lesrooster | Transparant: de achtergrond van je website schijnt erdoor |
| Tekst | Alle tekst; randen en lijnen worden er automatisch lichter van afgeleid | Donker, bijna zwart |
| Tekst op knoppen | De tekst op de knoppen | Automatisch wit of zwart, wat het best leesbaar is op de knopkleur |
Het aanmeldformulier en het ticketformulier voor events houden de vaste DanceAdmin-stijl. De kleuren gelden voor het lesrooster.
Zo stel je het in
- Ga in DanceAdmin naar Instellingen > Schoolgegevens.
- Open het tabblad Webformulieren en scrol naar Aangepaste instellingen.
- Klik op een kleurvlak en kies een kleur, of typ de hexcode (bijvoorbeeld #e3191f). Met het kruisje in de kiezer maak je een veld weer leeg.
- Klik op Opslaan.
- Ververs de pagina met het lesrooster op je website. De nieuwe kleuren staan er meteen.
Tips
- Donkere website: zet de tekst op wit (#ffffff). Laat de achtergrond leeg, of kies dezelfde kleur als je website.
- Knopkleur: neem de hoofdkleur uit je logo of huisstijl. De tekst op de knoppen wordt vanzelf leesbaar.
- Lichte knopkleur (geel, lichtblauw): laat Tekst op knoppen leeg, dan wordt die automatisch zwart.
- Controleer op je telefoon: daar staat elke les als kaart onder elkaar, en de filters zitten achter de knop Filters.
Meer aanpassen met eigen CSS
Wil je meer dan de vier kleuren, zoals een eigen lettertype of rechte hoeken, dan kan je websitebouwer een eigen stylesheet maken. Zet de link bij Link naar custom.css, op dezelfde plek als de kleuren. De link moet met https:// beginnen en op .css eindigen. Het lesrooster laadt dit bestand na de eigen opmaak, dus jouw regels winnen.
De kleuren stel je het best in via de instellingen hierboven: die staan rechtstreeks op de pagina en gaan voor op een stylesheet. Handige aanknopingspunten voor de rest:
| Wat | Naam |
|---|---|
| Afronding van kaarten | --cs-radius (standaard 14px) |
| De hele pagina | body#danceadmin-body |
| Een les | .cs-lesson |
| Kop per dag of datum | .cs-group-title |
| Knop Inschrijven | .cs-btn-primary |
| Filters en dagknoppen | .cs-filters, .cs-chip |
| Dansstijl-label | .cs-tag |
| Lesinformatie (uitgeklapt) | .cs-info |
Voorbeeld: rechte hoeken, een eigen lettertype en dagkoppen in hoofdletters.
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");
:root { --cs-radius: 4px; }
body#danceadmin-body { font-family: Montserrat, sans-serif; }
.cs-group-title { text-transform: uppercase; letter-spacing: .05em; }