Etapa 12: Definir Estilos Personalizados

Os componentes que você cria são tratados como qualquer outro nos arquivos design.json e design.css no tema usado para o site.

Para adicionar seu próprio estilo para seu componente personalizado, confirme o valor id que você usou quando registrou seu componente. No arquivo appinfo.json, era "id": "hello-world".

Usando esse valor, edite o arquivo design.json do tema e adicione os novos estilos que você deseja suportar para id. Por exemplo, edite o arquivo /designs/default/design.json em seu tema e adicione este código:

"hello-world": {
  "styles": [{
    "name": "Plain",
    "class": "hello-world-default-style"
  },
  {
    "name": "Gothic",
    "class": "hello-world-gothic-style"
  }]
},

Se você abrir o painel Definições para seu componente, deverá ver agora Plain (padrão) e Gothic como as duas opções listadas na guia Estilo. No entanto, a alternância entre essas opções não fará nada até que você de fato defina as classes de estilo listadas no arquivo design.css.

Edite o arquivo design.css do tema e adicione as classes CSS do seu estilo. Por exemplo, edite o arquivo /designs/default/design.css em seu tema e adicione este código:

.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; }

Salve e sincronize seus arquivos com o servidor de instância do Oracle Content Management.