CSS-fragmenten zijn vooraf geschreven blokken CSS-code die je direct in de aangepaste CSS-editor in Document360 kunt invoeren met één klik. In plaats van CSS helemaal vanaf nul te schrijven, selecteer je het fragment dat je nodig hebt, voeg het in de editor in en pas je de waarden aan om aan je eisen te voldoen. Document360 biedt zeven vooraf geladen fragmenten die de meest voorkomende aanpassingen van de kennisbank van sites behandelen.
Wanneer CSS-snippets gebruiken
Gebruik CSS-fragmenten wanneer je snel een algemene visuele wijziging aan je kennisbanksite wilt maken, zonder CSS vanaf nul te hoeven schrijven:
- Verander typografie - werk het hoofdlettertype of koplettertype bij in alle artikelen om aan te sluiten bij de richtlijnen van je merk.
- Pas tabelstijlen aan - pas consistente randen, achtergrondkleuren en opvulling toe op alle tabellen in je kennisbank.
- Afbeeldingen uitlijnen - afbeeldingen in het midden uitlijnen in artikelinhoud site-breed met één enkel fragment.
- Wijzig calloutkleuren - verander de achtergrond- en randkleuren van Info, Warning, Error en Success callouts om bij je merkpalet te passen.
- Verander de achtergrond van de held op de homepage - werk de achtergrondkleur of verloop van de herosectie bij met CSS.
- Schakel de knop van achteren naar boven uit - verberg de knop om terug naar boven te zweven als deze conflicteert met het ontwerp van je site.
CSS-fragmenten zijn een snelkoppeling naar de meest voorkomende aanpassingen. Voor wijzigingen die niet door de vooraf geladen snippets worden behandeld, kun je je eigen CSS direct in de code-editor schrijven. Zie Custom CSS voor richtlijnen.
Hoe je CSS-fragmenten kunt openen
- Navigeer naar () > Knowledge base site } in de linker navigatiebalk van het kennisbasisportaal.
- Navigeer in het linker navigatiepaneel naar Site-aanpassing.
- Klik op Custom CSS & JavaScript.
- Selecteer het tabblad CSS .
- Klik rechtsboven in de code-editor op 'Voeg codefragmenten toe'. Het fragmentenpaneel verschijnt.
Het paneel bevat zeven vooraf geladen fragmenten:
| Fragment | Wat het doet |
|---|---|
| Verander lettertype van de hoofdtekst | Werkt de lettertypefamilie en kleur bij voor de inhoud van het artikel. |
| Verander het lettertype van de kop | Werkt de lettertypefamilie en kleur bij voor H1–H4-koptags |
| Verandertabelstijlen | Voegt randen, opvulling, achtergrondkleuren en afwisselende rijkleuren toe op tabellen |
| Afbeeldingen in artikelen uitlijnen | Alle afbeeldingen centraal in artikelinhoud |
| Verander achtergrond van de hoofdsectie van de homepage builder | Verandert de achtergrondstijl van het hoofdgedeelte van de homepage |
| Verander de kleuren van de callout | Werkt de achtergrond- en randkleuren van alle vier de callout-types bij |
| Schakel de knop 'terug naar boven' uit | Verbergt de 'floating back to top'-knop op de site |
- Klik op een willekeurig fragment om het in de CSS-editor in te voegen.
- Pas de waarden in de ingevoegde code aan om aan je eisen te voldoen.
- Druk op Ctrl + S of klik op Opslaan om je wijzigingen toe te passen.
Je kunt ook je eigen CSS-code direct in het tekstgebied schrijven zonder de vooraf geladen snippets te gebruiken. Elke geldige CSS die in de editor wordt ingevoerd, geldt globaal voor de kennisbanksite.
Beschikbare fragmentengidsen
Voor gedetailleerde walkthroughs van elk fragment - inclusief de CSS-code, voorbeelduitvoer en aanpassingstips - zie de afzonderlijke artikelen hieronder:
- Aanpasbare callouts
- Lichaamslettertype aanpassen
- Headerlettertype aanpassen
- Tabelstijlen aanpassen
- Beelduitlijning aanpassen
Best practices
- Altijd na het opslaan van een preview - fragmentwijzigingen gelden globaal. Controleer hoe de wijziging eruitziet in artikeltypes, tabellen en aanmeldingen voordat je verder gaat.
- Pas één fragment tegelijk aan - voeg één fragment toe en test het eerst voordat je het volgende toevoegt. Dit maakt het makkelijker om te herkennen welk fragment een probleem heeft veroorzaakt als er iets niet klopt.
- Verwijder oude snippets voordat je een nieuwe alignment-snippet toevoegt - als je een nieuw image alignment-snippet toevoegt terwijl een oud nog actief is, zullen beide draaien en kunnen ze conflicteren. Verwijder eerst het vorige fragment.
- Gebruik het fragment als uitgangspunt - de vooraf geladen waarden zijn logische standaardinstellingen. Vervang lettertypenamen, kleurcodes en groottewaarden door je merkspecifieke waarden.
FAQ
Kan ik mijn eigen aangepaste CSS-snippets toevoegen naast de vooraf geladen?
Ja. Je kunt je eigen CSS-code direct in het tekstgebied in het CSS-tabblad schrijven en plakken. De vooraf geladen snippets en je aangepaste code bestaan naast elkaar in dezelfde editor — voeg je code gewoon toe onder of naast de ingevoegde snippets.
Hebben snippetwijzigingen invloed op alle werkruimtes?
Ja. CSS is geconfigureerd op projectniveau en is universeel toepasbaar op alle werkruimtes. Er is geen manier om een snippet via de CSS-editor te scopen naar een specifieke werkruimte.
Hoe verwijder ik een snippet dat ik niet meer nodig heb?
Selecteer de snippetcode in de CSS-editor en druk op Delete op je toetsenbord om deze te verwijderen. Klik op Opslaan om de wijziging toe te passen.