Paso 12: Definir estilos personalizados

Los componentes que crea se tratan como cualquier otro componente de los archivos design.json y design.css del tema que utiliza para el sitio.

Para agregar un estilo propio al componente personalizado, confirme el valor id que usó cuando registró el componente. En el archivo appinfo.json; era "id": "hello-world".

Con este valor, edite el archivo design.json del tema y agregue los estilos nuevos que desea que id soporte. Por ejemplo, edite el archivo /designs/default/design.json del tema y agregue este código:

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

Si abre el panel de configuración del componente, debería ver las opciones Sin formato (por defecto) y Gótico en el separador Estilo. Sin embargo, cambiar entre estas opciones no producirá cambios hasta que defina las clases de estilo incluidas en el archivo design.css.

Edite el archivo design.css del tema y agregue las clases de hoja de estilos en cascada (CSS) del estilo. Por ejemplo, edite el archivo /designs/default/design.css en el tema y agregue 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; }

Guarde y sincronice sus archivos en el servidor de instancias de Oracle Content Management.