Można utworzyć zdefiniowaną listę stylów, które mogą być stosowane przez użytkowników do składników.
Utrzymywanie predefiniowanej listy stylów dla składnika opiera się na tym samym modelu, co definiowanie klas stylów dla składników dostarczanych przez Oracle Content Management przy użyciu plików projektu motywu. Klasy stylów niestandardowych określa się w pliku appinfo.json
dla składnika.
Dodatkowe style definiuje się w plikach design.css
i design.json
. Plik json
zawiera odwzorowania nazwy, która pojawi się w interfejsie użytkownika, na faktycznie używaną nazwę klasy css
, zaś plik css
dostarcza szczegóły poszczególnych klas.
Plik design.json
ma następującą strukturę dla składników:
{ "componentStyles": { "scs-image": { "styles": [] }, "scs-map": { "styles": [] }, "scs-title": { "styles": [] }, "scs-paragraph": { "styles": [] }, "scs-txt": { "styles": [] }, "scs-divider": { "styles": [] }, "scs-button": { "styles": [] }, "scs-app": { "styles": [] }, "scs-spacer": { }, "scs-gallery": { "styles": [] }, "scs-youtube": { "styles": [] }, "scs-socialbar": { "styles": [] }, "scs-document": { "styles": [] } } }
Każdy z wpisów "styles":[]
może zawierać listę stylów dla konkretnego składnika. Wpis "name"
może się odwoływać do wbudowanego zlokalizowanego napisu lub do określonej wartości, która ma zostać użyta. Na przykład składnik "tytuł" udostępnia następujące style domyślne:
{ "styles": [{ "name": "COMP_STYLE_FLAT", "class": "scs-title-default-style" }, { "name": "COMP_STYLE_HIGHLIGHT", "class": "scs-title-style-2" }, { "name": "COMP_STYLE_DIVIDER", "class": "scs-title-style-3" } ] }
Wartości "name" są odwzorowywane na wyrazy wyświetlane w interfejsie użytkownika, jak poniżej:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
Plik css
udostępnia definicje wartości "class".
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
Na przykład w plikudesign.json
motywu można dodać wpisy dla składnika, oparte na wartości initialData.compomentId
zdefiniowanej w pliku components.json
:
"componentId": "news-article"
Odpowiadającymi wpisami w pliku design.json
mogą być następujące:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
Odpowiadającymi wpisami w pliku design.css
mogą być następujące:
.news-article-default-style .scs-image {…} .news-article-style-1 .scs-image {…}