Création d'un thème personnalisé | HCL Digital Experience

Cet organigramme explique comment créer le thème personnalisé de la conception à partir d'un composant HTML. Le thème permet de personnaliser le modèle de générateur de site et d'autres modèles de page pour le nouveau site créé par le créateur de contenu.

Qui doit utiliser cette feuille de route ?

Vous êtes un développeur de l'équipe technique chargée d'implémenter le prototype HTML. Votre tâche consiste à créer un thème personnalisé et à remplacer le logo par défaut par celui de l'entreprise. Les autres développeurs sont chargés de développer d'autres éléments de la conception. Apprenez les bases de la création et de la modification du logo de thème en vue de refléter votre activité.

Création de votre thème personnalisé

Procédure

  1. Click the Applications menu icon. Then, click Theme Development.
  2. Cliquez sur Créer un thème.
  3. Dans la zone Titre, entrez Greenwheels.
  4. Dans le menu Modèle, sélectionnez Simple.
  5. Cliquez sur Créer.
  6. Lorsque la boîte de dialogue indique que votre thème a été créé, cliquez sur Terminé.
Maintenant que vous avez créé votre nouveau thème, vous pouvez personnaliser son apparence.
  1. A partir du Gestionnaire de thème, recherchez Greenwheels et sélectionnez Gérer les propriétés.
  2. Sur l'onglet Général, sélectionnez 1Column dans le menu Présentation par défaut.

Résultats

Votre thème simple personnalisé est désormais prêt à être utilisé par le créateur de contenu pour personnaliser le site et les modèles de page.

Modification du logo de thème

Avant de commencer

Vérifiez que vous avez créé un thème personnalisé pour Greenwheels qui utilise le modèle de thème simple. Pour apprendre à créer le thème personnalisé, rendez-vous sur la section Organigramme et recherchez Organigramme : Création d'un thème simple personnalisé.

Procédure

  1. Create the directory ThemeLogo.
  2. Utilisez un client WebDAV. to donwload the Greenwheels theme.
  3. Ouvrez l'annuaire ThemeLogo.
  4. Téléchargez votre nouveau logo dans un dossier du thème, par exemple, Greenwheels/css/images. Dans cet exemple, le nouveau logo est une image .png appelée logo.png.
  5. Ouvrez le fichier theme.html dans le dossier de thème racine Greenwheels/theme.html.
  6. Recherchez la chaîne de code suivante :
    <svg class="stLogo" role="img" aria-label="HCL Digital Experience"> <title>IBM Digital Experience</title> <use xlink:href="#stBee"></use> </svg>.
  7. Remplacez la chaîne de code de l'étape ci-dessus par la chaîne de code suivante :
    <img alt="Logo" src="css/images/logo.png">.
  8. Enregistrez le fichier.
  9. Use a WebDAV client pour transférer les fichiers de modifications de votre thème.

Résultats

Le logo de thème par défaut est remplacé par le logo de Greenwheels.