Gehostete und veröffentlichte Spaces können mithilfe von CSS angepasst werden.
Ihre CSS-Änderungen werden nur auf Ihrer benutzerdefinierten Domain angewendet. Wenn Sie Ihren veröffentlichten Space in der Vorschau anzeigen, sind sie nicht sichtbar, daher müssen Sie ihn in die Production veröffentlichen.
Wählen Sie einen Space und klicken Sie auf das Einstellungen Symbol ( ⚙️ ), um die Bereichseinstellungen
Suchen Sie im Fenster Space Settings nach dem Reiter Benutzerdefinierter Code.
Gehen Sie zum Feld Benutzerdefiniertes CSS.
Geben Sie die HTML <style> Tags ein
Speichern Sie Ihre Änderungen im Custom CSS Feld.
<style>
/* add the CSS clases and the properties you want to change */
</style>
Aus Sicherheitsgründen wird benutzerdefinierter Code nur auf einer benutzerdefinierten Domain einbezogen.
Im gesamten DOM finden Sie HTML-Elemente mit einer CSS-Klasse, die mit ab- beginnt. Sie können diese Klassen anvisieren, um das Portal zu gestalten. Diese Klassen werden garantiert niemals geändert, damit Ihre Anpassungen bei Systemaktualisierungen nicht brechen.
Wenn das Element, das Sie gestalten möchten, keine mit ab- beginnende Klasse hat, erlauben wir keine Anpassung. Dies dient überwiegend Ihrem eigenen Schutz. Wenn wir zum Beispiel die Struktur ändern, könnte dies Ihre Gestaltung beeinträchtigen.
Jedes Element und jeder Block im Inhaltsbereich hat ebenfalls eine ähnliche Klasse. Unten finden Sie eine Liste dieser Klassen. Wenn Sie sie prüfen möchten, öffnen Sie die DevTools in Ihrem Browser per Rechtsklick → Inspect.
Dies ist eine Liste der aktuell verfügbaren CSS-Klassen:
.ab-callout { }
.ab-changeloc { }
.ab-code-editor { }
.ab-minitasker { }
.ab-graphiql { }
.ab-horizontal-divider { }
.ab-jira { }
.ab-map { }
.ab-mermaid { }
.ab-vertical-split { }
.ab-vertical-split-item { }
.ab-video { }
.ab-checklist { }
.ab-blockquote { }
.ab-diagram { }
.ab-embed { }
.ab-file { }
.ab-iframe { }
.ab-html { }
.ab-image { }
.ab-ul-list { }
.ab-ol-list { }
.ab-list-item { }
.ab-list-item-child { }
.ab-table { }
.ab-space { }
.ab-collection { }
.ab-space-container { }
.ab-collection-container { }
.ab-top-navbar { }
.ab-search-input { }
.ab-public-search { }
.ab-space-content { }
.ab-collection-content { }
.ab-tree-navigation { }
.ab-tree-navigation-link { }
.ab-left-nav-chevron { }
.ab-tree-navigation-link-inactive { }
.ab-space-navigation { }
.ab-doc-name { }
.ab-h1 { }
.ab-h2 { }
.ab-h3 { }
.ab-expandable-heading { }
.ab-link { }
.ab-link-dynamic { }
.ab-nav-right { }
.ab-nav-right-text { }
.ab-bold { }
.ab-code { }
.ab-paragraph { }
.ab-footer-container { }
.ab-search-modal-header { }
.ab-search-modal-content { }
.ab-auth-jwt-button { }
.ab-auth-saml-button { }
.ab-windy-template { }
.ab-color-nav-template { }
.ab-booklet-template { }
.ab-openapi { }
.ab-open-api-param-name { }
.ab-open-api-param-expand-icon { }
.ab-open-api-param-type { }
.ab-open-api-param-description-wrap { }
.ab-open-api-param-example-wrap { }
.ab-open-api-param-custom-type { }
.ab-open-api-required-star { }
.ab-open-api-param-example-title { }
.ab-open-api-param-example { }
.ab-open-api-param-description-title { }
.ab-open-api-param-description { }
.ab-open-api-input-wrap { }
.ab-open-api-array-input-wrap { }
.ab-open-api-schema-wrap { }
.ab-breadcrumb-item { } Jedes Breadcrumb-Label
.ab-breadcrumb-item-clickable { } Breadcrumb, das zum Navigieren anklickbar ist
.ab-breadcrumb-item-highlight { } Das aktuell aktive/hervorgehobene Breadcrumb
.ab-breadcrumb-separator { } Das Chevron-Symbol zwischen Breadcrumbs
.ab-breadcrumbs-wrapper { } Der Container um die gesamte Breadcrumb-Leiste
.ab-breadcrumb-ellipsis { } Das "..." bei zu vielen Breadcrumbs
Der Dark Mode fügt eine Dark-Klasse an der Spitze des HTML-Baums hinzu, und Sie können diese verwenden, um Dark-Mode-Stile zuzuweisen.
Zum Beispiel können Sie so den Text im Dark Mode auf Rot ändern:
<style>
.dark .ab-paragraph {
color: red !important ;
}
</style>
