Door u gemaakte componenten worden op dezelfde manier behandeld als andere componenten in de bestanden design.json
en design.css
van het thema dat voor uw site wordt gebruikt.
U kunt uw eigen stijl voor uw aangepaste component toevoegen door de waarde van id
te bevestigen die u bij de registratie van uw component hebt gebruikt. Voor het bestand appinfo.json
was dit "id": "hello-world"
.
Bewerk het bestand design.json
voor het thema en voeg de nieuwe stijlen toe die u op basis van die waarde voor id
wilt ondersteunen. U kunt bijvoorbeeld het bestand /designs/default/design.json
bewerken in uw thema en deze code toevoegen:
"hello-world": { "styles": [{ "name": "Plain", "class": "hello-world-default-style" }, { "name": "Gothic", "class": "hello-world-gothic-style" }] },
Als u het paneel 'Instellingen' opent voor uw component, ziet u de volgende twee opties op het tabblad 'Stijl': Normaal (standaard) en Gotisch. Het kiezen van een andere optie heeft pas effect als u daadwerkelijk de stijlklassen definieert in het bestand design.css
.
Bewerk het bestand design.css
voor het thema en voeg de CSS-klassen (Cascading Style Sheet) van uw stijl toe. U kunt bijvoorbeeld het bestand /designs/default/design.css
bewerken in uw thema en deze code toevoegen:
.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; }
Sla uw bestanden op de server van uw Oracle Content Management instance op en synchroniseer ze.
Controleer de resultaten voor stap 12.
Vernieuw uw pagina op uw site, zodat de wijzigingen in de component kunnen worden opgehaald met de sitebuilder.
Open de pagina in de bewerkmodus.
Sleep de component naar de pagina.
Open het paneel 'Instellingen' voor uw component.
Ga naar het tabblad 'Stijl'.
Schakel tussen de stijlen Gotisch en Normaal die in uw bestand design.json
zijn gedefinieerd.
U ziet dat de tekengrootte in uw component wordt gewijzigd op basis van de CSS-klasse die voor elke selectie is toegepast.
Doorgaan naar Stap 13: een component weergeven in een inline-frame.