Structure : Création d'un thème simple personnalisé

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é.

Remarque : Pour regarder un tutoriel vidéo ou lire une retranscription de texte de la vidéo qui décrit ces étapes, voir Vidéo et retranscription : Création d'un thème et ajout d'un logo.

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é, voir la rubrique Organigramme : Création d'un thème simple personnalisé.

Téléchargez HCL Digital Experience File Sync sur Github. Puis, découvrez comment utiliser DXSync pour éditer les fichiers de thème en lisant la rubrique Edition de ressources de thème statiques et connexion à DXSync.

Procédure

  1. Create the directory ThemeLogo.
  2. Utilisez la ligne de commande pour passer dans ThemeLogo et exécuter dxsync init.
  3. Saisissez les informations nécessaires au sujet du serveur.
  4. Sélectionnez le thème Greenwheels dans la liste de thèmes.
  5. Dans la ligne de commande, exécutez dxsync run. DXSync télécharge toutes les ressources associées au thème Greenwheels sur votre poste de travail local et télécharge les modifications que vous apportez à ces fichiers en arrière-plan.
  6. Open the directory ThemeLogo.
  7. Téléchargez votre nouveau logo dans un dossier du thème, par exemple, fs-type1/themes/Greenwheels/css/images. Dans cet exemple, le nouveau logo est une image .png appelée logo.png.
  8. Ouvrez le fichier theme.html dans le dossier de thème racine fs-type1/themes/Greenwheels/theme.html.
  9. 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>.
  10. Remplacez la chaîne de code de l'étape 9 par la chaîne de code suivante :
    <img alt="Logo" src="css/images/logo.png">.
  11. Enregistrez le fichier.

Résultats

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