Schritt 12: Benutzerdefinierte Stile definieren

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.