Etape 12 : définition des styles personnalisés

Les composants que vous créez sont traités de la même façon que les autres composants des fichiers design.json et design.css du thème utilisé sur votre site.

Pour ajouter votre propre style à un composant personnalisé, vérifiez la valeur id que vous avez utilisée pour inscrire votre composant. Dans le fichier appinfo.json, il s'agit de "id": "hello-world".

Utilisez cette valeur pour modifier le fichier design.json du thème et ajouter les nouveaux styles que vous voulez prendre en charge pour cet id. Par exemple, modifiez le fichier /designs/default/design.json dans votre thème et ajoutez le code suivant :

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

Si vous ouvrez le panneau des paramètres du composant, vous devriez voir les options Simple (par défaut) et Gothique dans l'onglet Style. Toutefois, le basculement entre ces deux options n'a aucune incidence tant que vous n'avez pas défini les classes de style répertoriées dans le fichier design.css.

Modifiez le fichier design.css du thème et ajoutez les classes CSS de votre style. Par exemple, modifiez le fichier /designs/default/design.css de votre thème et ajoutez le code suivant :

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

Enregistrez vos fichiers et synchronisez-les avec l'instance de serveur Oracle Content Management.