Benutzerdefiniertes CSS
Gehostete und veröffentlichte Spaces können mit CSS angepasst werden.
Ihre CSS-Änderungen werden nur auf Ihrer benutzerdefinierten Domain übernommen. Wenn Sie Ihren veröffentlichten Space in der Vorschau anzeigen, sind sie nicht sichtbar, daher müssen Sie ihn in Production veröffentlichen.
Wählen Sie einen Space aus und klicken Sie auf das Symbol Einstellungen ( ⚙️ ), um die Raumeinstellungen
Suchen Sie im Fenster "Space Settings" nach dem Tab Benutzerdefinierter Code
Gehen Sie zum Feld Benutzerdefiniertes CSS
Geben Sie die Tags HTML <style> ein
Speichern Sie Ihre Änderungen im Feld "Custom CSS".
<style>
/* add the CSS clases and the properties you want to change */
</style>
Aus Sicherheitsgründen wird benutzerdefinierter Code nur auf einer benutzerdefinierten Domain eingebunden.
Im gesamten DOM finden Sie HTML-Elemente mit einer CSS-Klasse, die mit ab- beginnt. Sie können diese Klassen verwenden, um das Portal zu gestalten. Es wird garantiert, dass sich diese Klassen niemals ändern, damit Ihr Styling bei Systemaktualisierungen nicht beschädigt wird.
Wenn das Element, das Sie gestalten möchten, keine Klasse besitzt, die mit ab- beginnt, erlauben wir keine Anpassung. Das dient hauptsächlich dazu, Sie vor Problemen zu schützen. Wenn wir beispielsweise die Struktur ändern, könnte sich das auf Ihr Styling auswirken.
Jedes Element und jeder Block im Inhaltsbereich hat ebenfalls eine ähnliche Klasse. Nachfolgend finden Sie eine Liste der Klassen. Wenn Sie diese prüfen möchten, öffnen Sie bitte die DevTools in Ihrem Browser über Rechtsklick -> Untersuchen.
Dies ist eine Liste der derzeit verfügbaren CSS-Klassen:
OpenAPI CSS-Klassen
Der Dark Mode fügt oben im HTML-Baum eine dunkle Klasse hinzu, und Sie können diese verwenden, um Dark-Mode-Stile gezielt anzusprechen.
Zum Beispiel ändern Sie damit den Text im Dark Mode in Rot:
<style>
.dark .ab-paragraph {
color: red !important ;
}
</style>