--- sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development Release : - yokohama ft:locale : - de-DE ft:publication_title : - Yokohama Erstellen oder ändern Sie Anwendungen ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Ändern Sie die Standarddarstellung von Komponenten ================================================== Ändern Sie die Standarddarstellung von Komponenten {#ariaid-title1} =================================================================== * Freigeben Version: Yokohama * * Aktualisiert 30. Januar 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 Minuten Lesedauer Legen Sie die Stile für Komponenten und Wrapper fest, um die Standarddarstellung zu ändern. In diesem Video erfahren Sie, wie Sie das folgende Verfahren durchführen. Vorbereitungen -------------- Erforderliche Rolle: ui_builder_admin Warum und wann dieser Vorgang ausgeführt wird --------------------------------------------- Diese Aufgabe beschreibt, wie Sie Stile zu Komponenten und Wrappern (z. B. Textkörper, Spaltenlayouts oder eine Spalte) hinzufügen, die Komponenten enthalten. Passen Sie die Formatierung von Komponenten an, indem Sie die Komponente in der Inhaltsstruktur auswählen, oder wenden Sie Formate auf mehrere Komponenten an, indem Sie Komponenten in einem Wrapper platzieren. Informationen zum Hinzufügen von Stilen zu Ihrer gesamten Experience finden Sie unter [Visuellen Stil von UI Builder-Experiences verwalten](https://servicenow-prod.fluidtopics.net/pEVye2H02WmzW_2Mq0ANvw "Mit Designs können Sie den visuellen Stil Ihrer UI Builder -Experiences so ändern, dass sie das Erscheinungsbild Ihrer Marke zum Ausdruck bringen"). Diese Aufgabe gilt für das neue Layoutsystem, das in Yokohamaeingeführt wurde. Wenn Ihre Seite das alte Layoutsystem verwendet, finden Sie weitere Informationen unter [Fügen Sie einer Komponente mit dem alten Layoutsystem Stile hinzu](https://servicenow-prod.fluidtopics.net/TurKTKXf06hwCHKUEtlw8Q#add-styling-to-component-old-layout "Legen Sie CSS-Stile für eine Komponente fest, um ihre Standarddarstellung zu ändern."). Hinweis: Während Sie auf der Seite Komponenten hinzufügen und konfigurieren, zeigt die Phase Ihre Arbeit. Wenn Sie Änderungen vornehmen und die Updates nicht in der Phase geladen werden, wählen Sie das Menüsymbol Öffnen und dann Entwickler \> Phase neu ladenaus. Wenn Sie die Phase neu laden, werden Ihre Änderungen zwar angezeigt, aber nicht gespeichert. Um Ihre Arbeit zu speichern, wählen Sie oben rechts Speichern. Prozedur -------- 1. Navigieren zu AlleNow-Experience-FrameworkUI Builder. 2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen ErstellenExperience. Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. Erstellen oder öffnen Sie eine Seite oder Seitenvariante. Weitere Informationen zum Erstellen einer Seite in UI Builder finden Sie unter [Seite in UI Builder erstellen](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen."). 4. Wählen Sie im Bereich Inhalt eine Komponente oder einen Wrapper (z. B. Text, ein Spaltenlayout oder eine Spalte) aus, für die Sie Formatierung hinzufügen möchten. 5. Für den Textkörper oder eine Komponente wählen Sie im Konfigurationsbereich die Registerkarte Stile. 6. Verwenden Sie die visuellen Darstellungen auf der Registerkarte Stile, um zu entscheiden, was für das Erscheinungsbild Ihrer Seite am besten geeignet ist. Barrierefreiheit (Spaltenlayout und Spalte) : Gibt Eingabehilfeeinstellungen wie ARIA-Regionsname, ARIA-Regionsüberschriftsebene, ARIA-Rolle und Einbeziehung der ARIA-Überschrift an. Ausführliche Informationen finden Sie in der ARIA-Dokumentation unter [Developer.servicenow.com](https://developer.servicenow.com/dev.do#!/reference/next-experience/utah/ui-framework/advanced/accessibility). Ausrichtung (Spalte und Komponente) : Definiert für eine Spalte, wie Komponenten innerhalb der Spalte als Gruppe ausgerichtet werden. Definiert für eine Komponente, wie die Komponente innerhalb des übergeordneten Layoutelements ausgerichtet wird, z. B. eine Spalte oder ein Spaltenlayout. Hintergrund (Text, Spaltenlayout, Spalte und Komponente) : Legt die Hintergrundfarbe hinter dem Layoutelement fest. Wählen Sie eine Farbe auf der Registerkarte „Meine Farben" der Farbauswahl aus, auf der Sie die verfügbaren Farben in einem Raster oder einer Liste anzeigen können. Verwenden Sie alternativ die Registerkarte Anwenderdefiniert, um eine beliebige Farbe in HEX, RGB oder HSL anzugeben. Rahmen (Spaltenlayout, Spalte und Komponente) : Fügt einen Rahmen um den Inhalt hinzu. Der Rahmen wird direkt innerhalb des Rands und unmittelbar außerhalb des Abstands platziert. Legen Sie Rahmenstärke, Typ, Farbe und Form der Ecken fest. Für Komponenten können Sie anwenderdefiniertes CSS für den Rahmen verwenden. Layout (Text, Spaltenlayout, Spalte und Komponente) : Gibt für Textkörper und Spalte die Richtung, Ausrichtung und Inhaltsbegründung an. Gibt für das Spaltenlayout die Anzahl der Spalten und den Spaltenabstand (Abstand zwischen Spalten) an. Wählen Sie für einige Komponenten, wie z. B. Kartenbasis-Container, CSS bearbeiten aus, um bestimmte CSS-Stile auf die Containerebene und die internen Ebenen anzuwenden, die Komponenten im Container steuern. Schatten (Spaltenlayout, Spalte und Komponente) : Fügt Schatteneffekte um den Inhalt hinzu. Sie haben die Möglichkeit, anwenderdefiniertes CSS zu verwenden. Größenanpassung (Komponente) : Legt für entsprechende Komponenten die standardmäßige, minimale und maximale Höhe und Breite für die Komponente fest (in px, % em, rem oder ein anwenderdefinierter Wert). Dieser Wert ist relevant, wenn die Größe des Browserfensters geändert wird. ![Größenoption erweitert um Optionen für Breite und Höhe erweitert.]() Abstand (Textkörper, Spaltenlayout und Komponente) : Der Rand legt die Größe des Bereichs direkt am inneren Rand des Textkörpers, des Spaltenlayouts oder der Komponente fest. Die Auffüllung legt die Größe des Bereichs direkt am äußeren Rand des Textkörpers, des Spaltenlayouts oder der Komponente fest. Wählen Sie Rand oder Abstand, um für alle vier Seiten dieselbe Größe festzulegen. ![Optionen für Rand- und Abstandsabstände.]() : Sie können die Größe für jede Rand- oder Abstandsseite festlegen, indem Sie die aktuelle Einstellung und dann eine Option auswählen. 7. **Wahlweise:** Für Text und Komponenten können Sie den CSS-Code bearbeiten, indem Sie unten auf der Registerkarte Stile den Link CSS anzeigen und bearbeiten auswählen. Auf der Registerkarte „Stile" wird ein Code-Editor für CSS-Stile angezeigt. Die folgenden CSS-Eigenschaften werden am häufigsten verwendet: * `Hintergrundfarbe` * `Hintergrundbild` * `Rahmenstil` * `Rahmenbreite` * `Rahmenfarbe` * `Rahmenradius` * `Box-Shadow` * `height` * `Mindesthöhe` * `Max. Höhe` * `Rand` * `Überlauf` * `Auffüllung` * `width` * `Mindestbreite` * `max-width` * `z-Index` {#add-styling-to-component__ul_sb4_wxm_xnb} Wichtig: Einige Komponenten enthalten integrierte Stilkonfigurationen, die Sie nicht mit CSS in UI Builderüberschreiben können. Informationen zum Überschreiben dieser Stilkonfigurationen finden Sie unter [Visuellen Stil von UI Builder-Experiences verwalten](https://servicenow-prod.fluidtopics.net/pEVye2H02WmzW_2Mq0ANvw "Mit Designs können Sie den visuellen Stil Ihrer UI Builder -Experiences so ändern, dass sie das Erscheinungsbild Ihrer Marke zum Ausdruck bringen"). 8. Wählen Sie im Hauptheader Speichern aus, um Ihre Änderungen zu speichern. Fügen Sie einer Komponente mit dem alten Layoutsystem Stile hinzu {#ariaid-title2} ---------------------------------------------------------------------------------- Legen Sie CSS-Stile für eine Komponente fest, um ihre Standarddarstellung zu ändern. ### Vorbereitungen Erforderliche Rolle: ui_builder_admin ### Warum und wann dieser Vorgang ausgeführt wird Diese Aufgabe beschreibt, wie Sie dem Wrapper, der Ihre Komponente enthält, Stile hinzufügen. Dies wird im Allgemeinen empfohlen, anstatt Stile direkt auf die Komponente anzuwenden. Stellen Sie sicher, dass die Komponente, deren Stile Sie definieren möchten, in einer Containerkomponente platziert ist, um die Komponente in einen Wrapper zu setzen. Der Wrapper Ihrer Komponente befindet sich eine Ebene höher als die Komponente in der Inhaltshierarchie und wird standardmäßig als Mainbezeichnet. Um einer ganzen Seite Stile hinzuzufügen, können Sie standardbasiertes CSS im Wrapper für die Seite verwenden. Informationen zum Hinzufügen von Stilen zu Ihrer gesamten Experience finden Sie unter [Visuellen Stil von UI Builder-Experiences verwalten](https://servicenow-prod.fluidtopics.net/pEVye2H02WmzW_2Mq0ANvw "Mit Designs können Sie den visuellen Stil Ihrer UI Builder -Experiences so ändern, dass sie das Erscheinungsbild Ihrer Marke zum Ausdruck bringen"). ### Prozedur 1. Navigieren zu AlleNow-Experience-FrameworkUI Builder. 2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen ErstellenExperience. Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. Erstellen oder öffnen Sie eine Seite oder Seitenvariante. Weitere Informationen zum Erstellen einer Seite in UI Builder finden Sie unter [Seite in UI Builder erstellen](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen."). Hinweis: Eine Komponente muss in einem Container platziert werden, bevor der Komponente Stile hinzugefügt werden. 4. Wählen Sie den Container aus, der die Komponente enthält, der Sie eine Formatierung hinzufügen möchten. Der Container befindet sich normalerweise eine Ebene höher als die Komponente in der Inhaltsstruktur. Die Registerkarte Stile wird im Konfigurationsbereich angezeigt. 5. Geben Sie im Fenster „CSS-Stile" standardbasierte CSS-Eigenschaften und -Werte ein. Die folgenden CSS-Eigenschaften werden am häufigsten für die Anwendung von Stilen für Komponenten in Containern verwendet: * `Hintergrundfarbe` * `Hintergrundbild` * `Rahmenstil` * `Rahmenbreite` * `Rahmenfarbe` * `Rahmenradius` * `Box-Shadow` * `height` * `Mindesthöhe` * `Max. Höhe` * `Rand` * `Überlauf` * `Auffüllung` * `width` * `Mindestbreite` * `max-width` * `z-Index` {#add-styling-to-component-old-layout__ul_sb4_wxm_xnb} Wichtig: Einige Komponenten enthalten integrierte Stilkonfigurationen, die Sie nicht mit CSS in UI Builderüberschreiben können. Informationen zum Überschreiben dieser Stilkonfigurationen finden Sie unter [Visuellen Stil von UI Builder-Experiences verwalten](https://servicenow-prod.fluidtopics.net/pEVye2H02WmzW_2Mq0ANvw "Mit Designs können Sie den visuellen Stil Ihrer UI Builder -Experiences so ändern, dass sie das Erscheinungsbild Ihrer Marke zum Ausdruck bringen"). 6. Wählen Sie im Hauptheader Speichern aus, um Ihre Änderungen zu speichern. Abbildung : 1. Fügen Sie einer Komponente im Konfigurationsbereich „Stile " einen Stil hinzu.