Passo 12: Definir Estilos Customizados

Os componentes que cria são tratados como outro componente nos ficheiros design.json e design.css no tema utilizado para o seu site.

Para acrescentar o seu próprio estilo para o seu componente customizado, confirme o valor id que utilizou quando registou o seu componente. No ficheiro appinfo.json, isso era "id": "hello-world".

Utilizando esse valor, edite o ficheiro design.json do tema e acrescente nos novos estilos que pretende que suportem essa id. Por exemplo, edite o ficheiro /designs/default/design.json no seu tema e acrescente este código:

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

Se abrir o painel Definições com o seu componente, deverá ver Plain (por omissão) e Gothic como as duas opções listadas no separador Estilo. No entanto, alternar entre estas opções não irá alterar nada a não ser que defina na realidade as classes de estilo listadas no ficheiro design.css.

Edite o ficheiro design.css do tema e acrescente nas classes de folha de estilos em cascatas (CSS) do seu estilo. Por exemplo, edite o ficheiro /designs/default/design.css no seu tema e acrescente 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; }

Grave e sincronize os seus ficheiros com o servidor da instância do Oracle Content Management.