Vidéo et transcription : Création d'un thème et ajout d'un logo

La création de thème est la première étape du processus de création d'un nouveau site. Apprenez à créer un thème personnalisé avec un logo personnalisé en regardant une vidéo de démonstration ou en lisant la retranscription de la vidéo.

Vidéo

Pour regarder la vidéo de démonstration sur IBM MediaCenter, accédez à Création d'un thème et ajout d'un logo.
Remarque : La vidéo Création d'un thème et ajout d'un logo est la première de la série Création d'un site : utilisation de WebSphere Portal pour implémenter une conception.

Script de discussion

Remarque : Une légende décrit la narration. Une action illustrée à l'écran décrit le contenu affiché dans la vidéo.
Tableau 1. Création d'un thème personnalisé
Légende Action à l'écran
Bonjour, je m'appelle Rachel Amity et j'appartiens à l'équipe IBM Digital Experience. En tant que développeuse, je suis chargée de créer un nouveau thème Greenwheels afin de personnaliser l'impression générale du site. Je dois finaliser le thème Greenwheels pour permettre à mes créateurs de contenu de commencer à créer leur site Greenwheels. Une animation de bienvenue sur laquelle apparaît le titre de vidéo "Création d'une bibliothèque de conception" s'affiche.
Je peux créer un nouveau thème dans le gestionnaire de thème, accessible depuis le menu Applications. Click the Applications menu icon. Cliquez ensuite sur Développement de thème.
Dans le gestionnaire de thème, je peux voir les autres thèmes que j'ai créés. Je peux également créer un nouveau thème en cliquant sur Créer un thème. Click Create Theme.
Je commence par donner un nom au nouveau thème. Entrez le titre du nouveau thème, Greenwheels, dans la boîte de dialogue Créer un thème.
Ensuite, je choisis un modèle de thème. Lorsque je choisis le thème Simple, je peux rapidement personnaliser et copier mon thème en quelques clics.
  1. Dans le menu Modèle, sélectionnez Simple.
  2. Cliquez sur Créer.
  3. Cliquez sur Terminé.
Lorsque mon thème est prêt, je peux modifier ses propriétés dans le gestionnaire de thème. Cliquez sur Gérer les propriétés pour le nouveau thème Greenwheels.
Le gestionnaire de thème comprend des options de personnalisation pour des fonctions générales, telles que les présentations et les profils, les habillages, la localisation, les métadonnées, ainsi que des fonctions avancées, telles que la racine de contenu statique. Notre prototype HTML pour la page d'accueil Greenwheels nécessite une présentation sur une colonne. Pour personnaliser mon nouveau thème Greenwheels que je veux inclure dans cette présentation sur une colonne, je sélectionne 1Column dans l'onglet Général. Sélectionnez 1Column dans le menu Présentation par défaut de l'onglet Général.
Lorsque j'ai fini de modifier mon thème Greenwheels, je clique sur Terminé. Cliquez sur Terminé.
Tableau 2. Ajout d'un logo personnalisé
Légende Action à l'écran
Je sais que le thème Simple comprend un logo par défaut, par conséquent, maintenant que j'ai créé le thème Greenwheels, je veux remplacer le logo du thème par le logo Greenwheels. J'ai déjà un logo Greenwheels que je peux utiliser. Il s'agit d'un fichier image .PNG nommé logo.png. J'ai également déjà téléchargé mes fichiers de thème dans un dossier que j'ai nommé Theme Logo à l'aide de DXSync. Un bureau d'ordinateur sur lequel se trouvent un fichier image .PNG nommé logo.png et un dossier intitulé Theme Logo s'affiche.
Je télécharge mon nouveau logo dans un dossier au sein du thème, par exemple, css/images.
  1. Ouvrez le dossier Theme Logo.
  2. Accédez successivement aux dossiers css et images.
  3. Faites glisser le fichier image .PNG logo.png depuis le bureau dans le dossier css/images.
Ensuite, j'ouvre le modèle de thème theme.html dans un éditeur de texte.
  1. Accédez au dossier de thème racine.
  2. Ouvrez le fichier theme.html dans votre éditeur de texte favori.
Je trouve la chaîne de code SVG contenant le logo de thème par défaut et je la remplace par une chaîne de code IMG ALT faisant référence au fichier logo.png que j'ai téléchargé.
  1. Localisez et supprimez la chaîne de code SVG contenant le logo de thème par défaut.
  2. Remplacez la chaîne de code SVG supprimée par une chaîne de code IMG ALT faisant référence au fichier logo.png que vous avez chargé dans le dossier css/images.
Lorsque je sauvegarde la page, DXSync télécharge mes modifications, et mon nouveau logo est prêt à être utilisé.
  1. Dans l'éditeur de texte, cliquez sur Sauvegarder.
  2. Un message s'affiche pour confirmer que DXSync a téléchargé vos modifications.
Pour permettre à des créateurs de contenu de commencer à créer leur site, un développeur doit générer des modèles de page. Cette étape va vous être présentée par Tanya dans notre vidéo suivante. Le titre de la vidéo suivante de la série s'affiche : Création d'un modèle de site dans le générateur de site