Du kan opprette en definert liste over stiler som kan brukes i komponentene dine av brukere.
Når du skal ha en forhåndsdefinert liste over stiler for komponenten, følger du den samme modellen som gjelder når du skal definere stilklasser for komponenter levert av Oracle Content Management via utformingsfilene for et tema. Du gir de egendefinerte stilklassene navn i filen appinfo.json
for komponenten.
Du definerer flere stiler i filene design.css
og design.json
. Filen json
inneholder en tilordning fra navnet som vises i brukergrensesnittet, til det faktisk underliggende css
-klassenavnet, og filen css
inneholder detaljene for hver stilklasse.
Filen design.json
har følgende struktur for komponenter:
{ "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": [] } } }
Hver av oppføringene for "styles":[]
kan inneholde en liste over stiler for denne bestemte komponenten. Oppføringen for "name"
kan være en referanse til en innebygd lokalisert streng eller en angitt verdi som skal brukes. Komponenten Title inneholder for eksempel disse standardstilene:
{ "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" } ] }
Verdiene for navn tilordnes til de faktiske ordene som skal vises i brukergrensesnittet, på denne måten:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
Filen css
inneholder definisjonene for klasseverdiene:
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
I filen design.json
for temaet kan du for eksempel legge til oppføringer for komponenten basert på verdien for initialData.compomentId
du definerer i filen components.json
:
"componentId": "news-article"
De tilsvarende oppføringene i filen design.json
blir som følger:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
De tilsvarende oppføringene i filen design.css
blir som følger:
.news-article-default-style .scs-image {…} .news-article-style-1 .scs-image {…}