Aangepaste CSS

Aangepaste CSS in Document360 stelt je in staat je eigen CSS-code toe te passen om het visuele uiterlijk van je kennisbanksite te veranderen, bovenop wat de ingebouwde instellingen voor site-aanpassing bieden. Je schrijft CSS-regels direct in het portaal en ze worden wereldwijd toegepast op je hele kennisbasis. Dit is het juiste hulpmiddel als je nauwkeurige controle nodig hebt over typografie, kleuren, afstand, tabelstijlen, beelduitlijning of een ander visueel element dat niet via de standaardinstellingen kan worden geconfigureerd.

Wanneer aangepaste CSS te gebruiken

Gebruik aangepaste CSS wanneer de ingebouwde stylingopties in Site-aanpassing je niet het niveau van controle geven dat je nodig hebt:

• Overschrijf standaardstijlen - verander het uiterlijk van elementen die niet zichtbaar zijn in de instellingen voor de site aanpassen, zoals callout-kleuren, tafelranden of de knop "terug naar boven".
• Pas merkconsistente typografie toe - stel een specifieke lettertypefamilie, grootte of gewicht in op alle artikelen om te voldoen aan de ontwerprichtlijnen van je product.
• Los problemen met de lay-out of afstand op – pas marges, opvulling of uitlijning aan voor specifieke elementen die er anders uitzien dan bedoeld.
• Pas visuele behandelingen toe op afbeeldingen – richt afbeeldingen in artikelen in het midden uit, voeg schaduwen toe of stel consistente afmetingen in voor artikelillustraties.

Voordat je begint

• Je moet een teamaccount hebben met beheerderstoegang tot het kennisbankportaal.
• Aangepaste CSS wordt wereldwijd toegepast op de gehele kennisbanksite - wijzigingen betreffen alle pagina's en alle lezers.
• Document360 valideert of pluist je CSS-code niet, dus fouten worden niet automatisch gemarkeerd.
• Misvormde of conflicterende CSS kan de lay-out van de site beschadigen. Test je wijzigingen zorgvuldig voordat je opslaat.
  :::

Hoe voeg je aangepaste CSS toe

1. Navigeer naar () > Knowledge base site in de linker navigatiebalk van het Knowledge Base-portaal.
2. Navigeer in het linker navigatiepaneel naar Site-aanpassing.
3. Klik op Custom CSS & JavaScript.
4. Selecteer het tabblad CSS . De CSS-code-editor verschijnt.
5. Voer je CSS-code in het tekstvak.

6. Druk op Ctrl + S of klik op Opslaan om je wijzigingen toe te passen.

De CSS wordt nu toegepast op je kennisbasis. Bezoek de site om de wijzigingen te bekijken.

Hoe gebruik je CSS-snippets

CSS-fragmenten zijn vooraf geschreven blokken code die je direct in de CSS-editor kunt invoegen. Ze behandelen de meest voorkomende aanpassingstaken en zijn ontworpen om aangepast te worden aan jouw specifieke wensen.

1. Ga naar () > Knowledge base site > Site-aanpassing > Aangepaste CSS en JavaScript.
2. Selecteer het tabblad CSS .
3. Klik rechtsboven in de code-editor op 'Voeg codefragmenten toe'.
4. Klik in het snippets-paneel op het gewenste snippet. De code wordt in de CSS-editor geplaatst.

5. Pas de ingevoegde code aan indien nodig - bijvoorbeeld vervang de lettertypenaam, kleurcode of groottewaarde.
6. Druk op Ctrl + S of klik op Opslaan.

Voor gedetailleerde walkthroughs van elk fragment, zie CSS-fragmenten.

Best practices

• Gebruik de vooraf gebouwde snippets als uitgangspunt – zelfs als je veel moet aanpassen, zorgt het starten van een snippet voor de juiste selectors en structuur voor de HTML van Document360.
• Gebruik specifieke selectors - vermijd brede selectors zoals body of * tenzij dat bewust is. Specifieke selecteurs verkleinen het risico om onbedoeld andere stijlen te overrulen.
• Geef commentaar op je code - voeg opmerkingen toe om uit te leggen wat elk blok doet, vooral als meerdere teamleden de CSS beheren. Voorbeeld: /* Centers all article images — added June 2026 */
• Test in zowel lichte als donkere modus - stijlen die er correct uitzien in lichte modus kunnen contrast- of zichtproblemen hebben in donkere modus. Bekijk altijd beide voordat je opslaat.
• Maak een back-up - kopieer voordat je grote wijzigingen aanbrengt, de huidige CSS naar een tekstbestand. Document360 houdt geen versiegeschiedenis bij van aangepaste CSS-wijzigingen.

FAQ