Von Ihnen erstellte Komponenten werden wie alle anderen Komponenten auch in den Dateien design.json
und design.css
im Theme für die Site behandelt.
Um Ihren eigenen Stil für eine benutzerdefinierte Komponente hinzuzufügen, prüfen Sie den id
-Wert, mit dem Sie die Komponente registriert haben. In der Datei appinfo.json
lautete dieser Wert "id": "hello-world"
.
Bearbeiten Sie die Datei design.json
des Themes mit diesem Wert, und fügen Sie die neuen Stile hinzu, die für diese id
unterstützt werden sollen. Beispiel: Bearbeiten Sie die Datei /designs/default/design.json
im Theme, und fügen Sie den folgenden Code hinzu:
"hello-world": { "styles": [{ "name": "Plain", "class": "hello-world-default-style" }, { "name": "Gothic", "class": "hello-world-gothic-style" }] },
Wenn Sie den Einstellungsbereich für die Komponente öffnen, sollten jetzt die Optionen Plain (Standard) und Gothic auf der Registerkarte "Stil" angezeigt werden. Der Wechsel zwischen diesen beiden Optionen hat aber erst eine Wirkung, wenn Sie die in der Datei design.css
aufgelisteten Stilklassen auch definieren.
Bearbeiten Sie die Datei design.css
des Themes, und fügen Sie die CSS-Klassen des Stils hinzu. Beispiel: Bearbeiten Sie die Datei /designs/default/design.css
im Theme, und fügen Sie den folgenden Code hinzu:
.hello-world-default-style .scs-component-content { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; } .hello-world-gothic-style .scs-component-content { font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif; font-size: 32px; font-weight: bold; }
Speichern Sie die Dateien, und synchronisieren Sie sie mit dem Oracle Content Management-Instanzserver.
Ergebnisse für Schritt 12 prüfen
Aktualisieren Sie die Seite in der Site, damit Sitebuilder die Änderungen an der Komponente abrufen kann.
Öffnen Sie die Seite im Bearbeitungsmodus.
Ziehen Sie die Komponente per Drag-and-Drop auf die Seite.
Öffnen Sie den Einstellungsbereich für die Komponente.
Gehen Sie zur Registerkarte "Stil".
Wechseln Sie zwischen den Stilen Gothic und Plain, die in der Datei design.json
definiert sind.
Sie werden sehen, dass sich der Schriftgrad in der Komponente beim Wechsel der angewendeten CSS-Klasse für jede Auswahl ändert.
Weiter mit Schritt 13: Komponente in einem Inlineframe rendern.