In de publieke site worden verschillende formulieren gebruikt: voor de interne zoekmachine, een formumbericht schrijven, inschrijving in het privé gedeelte, enz. Voor deze formulieren geldt hetzelfde als voor de rest van SPIP: hun grafische weergave kan via CSS worden veranderd om ze in lijn te brengen met de totale grafische styling.
Om te profiteren van dit artikel, is een redelijke kennis van HTML-tags vereist.
Elk formulier zijn eigen stijl
Alle formulieren van SPIP die in de publieke site gebruikt worden zijn opgenomen in een div met dezelfde class, .formulaire_spip, die op eenvoudige wijze een aanpassing van alle formulieren mogelijk maakt.
Wil je bijvoorbeeld alle omschrijvingen van de invoervelden (<label>) van je formulieren in vetschrift weergeven, dan pas je deze styling toe:
.formulaire_spip label {
font-weight: bold;
}Ieder formulier is bovendien voorzien van een eigen stijl. Dit laat toe één specifiek formulier te stylen, zonder dat de andere formulieren erdoor worden beïnvloed.
Die stijl heeft dezelfde naam als het baken waarmee het formulier in een skelet wordt opgeroepen. Zo staat in de HTML van het formulier voor de zoekmachine (squelettes-dist/formulaires/recherche.html) dat wordt opgeroepen door het baken #FORMULAIRE_RECHERCHE een extra class .formulaire_recherche.
Styling van de invoervelden
De class .forml wordt toegepast op de invoervelden van de formulieren. Je kunt er de achtergrondkleur en de breedte mee instellen, maar ook hun hoogte en lettertype. Bijvoorbeeld:
.forml {
width: 99%;
padding: 1px;
border: 1px solid #666;
font-family: Verdana;
font-size: 11px;
}Deze styling is met name zinvol om een homogeen geheel van invoervelden in alle formulieren te krijgen, bijvoorbeeld in meerdere HTML-tags, zoals in het forumformulier de tags <input> en <textarea>.
Ook ieder veld heeft een unieke class, omhuld door een <label> tag. Je past dus de weergave van deze labels aan met de volgende class: .formulaire_spip label.
Deze CSS classen laten niet alleen de aanpassing van de kleur en het lettertype toe, maar kunnen ook de relatieve positionering op de pagina aansturen. Je kunt er ook een exacte onderlinge afstand mee aangeven (bijvoorbeeld: <input>, <textarea> en <label>), zonder gebruikmaking van <table>!
Knoppen met jouw kleuren
Naast het veranderen van de kleur van de invoervelden kun je ook de knoppen op een formulier van kleur doen veranderen [1]. De class .spip_bouton gebruik je voor de knoppen van formulieren in SPIP.
Wil je bijvoorbeeld dat je knoppen een lichtblauwe achtergrond krijgen met een redelijk zichtbare omranding in reliëf, pas dat dan alsvolgt aan in je stylesheet:
.spip_bouton {
background-color: #b0d0FF;
border: 2px outset #000060;
color: black;
}Het forumformulier heeft een knoppenbalk met typografische knoppen. De weergave hiervan wordt gestuurd door de class .spip_barre. Dus wil je de ikonen gebruiken die veranderen wanneer de muis erover wordt bewogen, dan moet je aanpassingen doen aan .spip_barre a img en .spip_barre a:hover img.
Elementen op een visueel logische volgorde rangschikken
De verschillende elementen van een formulier zijn ingedeeld in «logische blokken» met behulp van de HTML-tags <fieldset> en <legend>. Hun weergave kan dus eenvoudig worden bepaald door .formulaire_spip fieldset en .formulaire_spip legend (terwijl dat vroeger met .spip_encadrer moest worden gedaan). Zo kun je bijvoorbeeld elk onderdeel van een omkadering voorzien.
Er zijn nog elkele aanvullende classes die de weergave van je formulieren kunnen beïnvloeden:
- Foutboodschappen en andere meldingen die door formulieren worden geretourneerd kunnen worden aangepast met de class .reponse_formulaire.
- Bepaalde formulieren bieden een vooruitblik van wat werd ingevoerd voordat de feitelijke verzending plaatsvindt. Deze weergave wordt gecontroleerd door de class .previsu.
- Tenslotte een class die niet in een formulier voorkomt maar wel het resultaat is van een formulier (dat van de zoekmachine): .spip_surligne bepaalt hoe gezochte termen worden weergegeven in de resultaten van de zoekopdracht.