CSS-Schnipsel sind vorgefertigte CSS-Codeblöcke, die man direkt mit einem Klick in den benutzerdefinierten CSS-Editor in Document360 einfügen kann. Anstatt CSS von Grund auf zu schreiben, wählst du den benötigten Snippet aus, fügst ihn in den Editor ein und passt die Werte entsprechend deinen Anforderungen an. Document360 bietet sieben vorinstallierte Ausschnitte, die die häufigsten Anpassungen der Wissensdatenbank abdecken.
Wann man CSS-Schnipsel verwenden sollte
Verwenden Sie CSS-Schnipsel, wenn Sie schnell eine gängige visuelle Änderung an Ihrer Wissensdatenbank vornehmen möchten, ohne CSS von Grund auf neu schreiben zu müssen:
- Ändern Sie die Typografie – aktualisieren Sie die Hauptschrift oder Überschrift in allen Artikeln, um Ihren Markenrichtlinien zu entsprechen.
- Passen Sie Tabellenstile an – wenden Sie alle Tabellen in Ihrer Wissensdatenbank konsistente Ränder, Hintergrundfarben und Füllmaterial an.
- Bilder ausrichten – Bilder mittig ausrichten im Artikelinhalt seitenweit mit einem einzigen Ausschnitt.
- Ändere die Callout-Farben – ändere die Hintergrund- und Randfarben der Info-, Warning-, Error- und Success-Callouts, damit sie zu deiner Markenpalette passen.
- Ändere den Heldenhintergrund der Startseite – aktualisiere die Hintergrundfarbe oder den Farbverlauf des Hero-Abschnitts mit CSS.
- Deaktiviere den Back-to-Top-Button – verstecke den schwebenden Back-to-Top-Button, falls er mit dem Design deiner Seite kollidiert.
CSS-Schnipsel sind eine Abkürzung zu den gängigsten Anpassungen. Für Änderungen, die nicht von den vorinstallierten Snippets abgedeckt sind, kannst du dein eigenes CSS direkt im Code-Editor schreiben. Siehe Custom CSS für Hinweise.
Wie man auf CSS-Schnipsel zugreift
- Navigiere zu () > Knowledge base site in der linken Navigationsleiste des Wissensdatenbankportals.
- Im linken Navigationsfenster navigieren Sie zur Site-Anpassung.
- Klicken Sie auf benutzerdefiniertes CSS & JavaScript.
- Wähle den CSS-Reiter .
- Klicke oben rechts im Code-Editor auf Code-Snippets hinzufügen . Das Snippets-Panel erscheint.
Das Panel enthält sieben vorinstallierte Ausschnitte:
| Ausschnitt | Was es bewirkt |
|---|---|
| Schriftart des Haupttextes ändern | Aktualisiert die Schriftfamilie und Farbe für den Inhalt des Artikeltexts |
| Schriftart des Überschrifts ändern | Aktualisiert die Schriftfamilie und Farbe für H1–H4-Überschriften-Tags |
| Stile der Wechseltabelle | Wendet Rahmen, Polsterung, Hintergrundfarben und abwechselnde Zeilenfarben auf Tabellen an |
| Mittlere Ausrichtungsbilder in Artikeln | Zentriert alle Bilder im Artikelinhalt |
| Hintergrund des Hintergrundbereichs des Titelseite-Builder-Editors ändern | Ändert den Hintergrundstil des Heldenbereichs auf der Startseite |
| Ändere die Callout-Farben | Aktualisiert die Hintergrund- und Randfarben aller vier Callout-Typen |
| Deaktiviere den 'Zurück nach oben'-Button | Verbirgt den Schalter "Zurück nach oben" auf der Seite |
- Klicken Sie auf einen beliebigen Ausschnitt, um ihn in den CSS-Editor einzufügen.
- Passen Sie die Werte im eingefügten Code so an, dass sie Ihren Anforderungen entsprechen.
- Drücken Sie Strg + S oder klicken Sie auf Speichern , um Ihre Änderungen anzuwenden.
Du kannst auch deinen eigenen CSS-Code direkt im Textbereich schreiben, ohne die vorinstallierten Schnipsel zu verwenden. Jedes gültige CSS, das im Editor eingegeben wird, gilt global für die Knowledge Base-Seite.
Verfügbare Ausschnitt-Guides
Für detaillierte Schritte zu jedem Ausschnitt – einschließlich CSS-Code, Beispielausgaben und Änderungstipps – siehe die einzelnen Artikel unten:
- Anpassung von Callouts
- Anpassung der Hauptschrift
- Anpassung der Header-Schriftart
- Anpassung von Tabellenstilen
- Anpassung der Bildausrichtung
Best Practices
- Immer nach dem Speichern vorschauen – Änderungen an den Ausschnitten gelten global. Überprüfen Sie, wie die Änderung in Artikeltypen, Tabellen und Aufrufen aussieht, bevor Sie weitermachen.
- Ändere einen Ausschnitt nach dem anderen – füge einen Ausschnitt ein und teste es, bevor du den nächsten hinzufügst. Das macht es einfacher zu erkennen, welcher Ausschnitt das Problem verursacht hat, falls etwas nicht stimmt.
- Entferne alte Ausrichtungsschnippel, bevor du einen neuen Ausrichtungsschnipsel hinzufügst – wenn du einen neuen Bildausrichtungsschnipsel hinzufügst, während ein altes noch aktiv ist, laufen beide und können in Konflikt geraten. Lösche zuerst den vorherigen Ausschnitt.
- Nutze den Snippet als Ausgangspunkt – die vorgeladenen Werte sind sinnvolle Standardwerte. Ersetzen Sie Schriftnamen, Farbcodes und Größenwerte durch Ihre markenspezifischen Werte.
FAQ
Kann ich zusätzlich zu den vorinstallierten eigene benutzerdefinierte CSS-Schnipsel hinzufügen?
Ja. Du kannst deinen eigenen CSS-Code direkt in den Textbereich im CSS-Tab schreiben und einfügen. Die vorinstallierten Schnipsel und Ihr eigener Code existieren gemeinsam im selben Editor – fügen Sie einfach Ihren Code darunter oder neben die eingefügten Schnipsel hinzu.
Beeinflussen Snippet-Änderungen alle Arbeitsbereiche?
Ja. CSS ist auf Projektebene konfiguriert und gilt universell für alle Arbeitsbereiche. Es gibt keine Möglichkeit, einen Ausschnitt über den CSS-Editor auf einen bestimmten Arbeitsbereich zu limitieren.
Wie entferne ich einen Ausschnitt, den ich nicht mehr brauche?
Wähle den Snippet-Code im CSS-Editor aus und drücke auf deiner Tastatur Delete, um ihn zu entfernen. Klicken Sie auf Speichern , um die Änderung anzuwenden.