Catégories
FCS FCS3-exos

Personnaliser le thème Massively

L’un des thèmes de Bludit les plus impactants visuellement, se nomme “Massively”. Il s’agit d’un thème adapté pour le CMS Bludit mais qui, initialement, a été créé pour HTML5UP.

➜ Je vous propose dans ce cours d’activer Massively puis d’apprendre à le personnaliser pour créer une maquette de site pour le client pour lequel vous avez déjà travaillé lors du TP2 de PAO et Com-Créa.

Vous pourrez mentionner ce site dans votre portfolio, preuve de votre maîtrise de la publication en ligne à l’aide d’un système de gestion de contenus (couramment nommé CMS).

Analyser le thème Massively

Identifier les qualités de Massively

L’ambiance générale de votre site reposera essentiellement sur l’image de fond et sur la qualité des images d’accroche que vous associerez à chacun de vos articles.

L’image de fond, disposée en arrière plan, permet de plonger d’emblée le lecteur dans une atmosphère prégnante. En la choisissant avec soin, il est possible de créer un site extrèmement séduisant !

Le thème massively affiche les pages dynamiques en mettant en avant l’image d’accroche de chaque article. Le dernier article publiée occupe toute la largeur de la page d’accueil, sous le menu. Les autres se répartissent sur une grille de 2 colonne, sous le dernier article publié (… ou l’article épinglé).

La couleur affichée au survol des titres (bleu #18bfef par défaut) pourra être modifiée en fonction de la charte graphique (ou planche de marque) de votre client.

Une des qualités cachées de Massively est le potentiel de sa feuille de style. Il est en effet possible d’insérer dans les pages des éléments typographiques et iconographiques stylisés nativement en plein accord avec le look du thème.

➜ Il sera nécessaire d’explorer le potentiel de cette feuille de style native pour appliquer ces styles sur les sites construits avec Bludit. Le sujet sera développé plus bas.

Identifier les défauts du thème

Massively présente toutefois des défaut, notamment concernant les réglages adaptatifs (responsives, en anglais…). En effet, ces réglages ne permettent pas, par défaut, de voir entièrement les images insérées dans les pages statiques ou dans les articles quand on navigue sur petit écran. Une solution a cependant été trouvée. Il en sera question dans le cours.

L’intitulé du premier onglet, “Page d’accueil”, ne semble pas modifiable dans les réglages du tableau de bord de Bludit. C’est en effet une caractéristique du thème qu’il faut modifier dans le fichier de traduction. Cet intitulé peut ne pas vous satisfaire pleinement. Sans doute le simple mot “Accueil” serait-il préférable.

Vous allez apprendre à corriger ces défaut et à personnaliser le thème en profondeur tout au long de ce cours.

Personnaliser l’image de fond

Comme nous venons de le voir, l’impact visuel de ce thème repose sur l’image utilisée en fond de page.

Choisir une image fonctionnelle

Elle devra être choisie avec soin et recadrée de manière à laisser voir en haut de l’image ce qui servira d’arrière-plan au titre du site.

Si vous choisissez une image très claire, il sera nécessaire de modifier la couleur d’affichage du titre (en blanc par défaut). Sur un fond photographique, seules deux couleurs sont utilisables : le blanc (sur photos claires) ou le noir (sur photos sombre).

L’image d’arrière plan du thème Massively se nomme “bg.jpg”. Elle fait 1680 x 2000 pixels. Pour en faciliter l’affichage, il est impératif de la compresser de manière à ce qu’elle soit la plus légère possible. Un enregistrement pour le Web, à partir de Photoshop, avec une compression JPEG moyenne, devrait être optimale.

Comment remplacer l’image de fond

Veillez à donner à votre nouvelle image le même nom que celui de l’image d’origine. Remplacez l’image originale nommée bg.jpeg par celle que vous souhaitez utiliser.

Voici dans quel dossier il faut remplacer l’image d’origine par celle de votre choix : `dossier-du-site/bl-themes/massively/images/`

Pour visualiser le changement d’image de fond, il est souvent nécessaire d’effacer les images placées en cache (mémoire temporaire) dans votre navigateur. Avec Chrome, cochez juste “Images et fichiers en cache” dans “Effacer les données de navigation”.

➜ Notez à quel point le changement d’image de fond modifie totalement la perception de la page 😉

Positionner une image d’accroche

Pour accentuer cet effet d’immersion, je vous propose d’illustrer la page “À propos” en choisissant comme image d’accroche une partie de l’image de fond.

Source de l’image utilisée : https://littlevisuals.co/

Vous pouvez envisager de superposer le logo de votre client à cette image d’accroche pour indiquer clairement le lien entre la marque et le contexte visuel de sa présentation.

Un effet semblable est utilisable sur la page d’accueil (page de présentation des articles), en effectuant les mêmes opérations et en épinglant l’article concerné. Cet article sera alors toujours positionné en tête de tous les autres articles et l’effet de plongée dans le cœur de l’image sera toujours visible pour vos visiteurs.

Copier et coller du texte

Identifier le problème des textes collés

Quand on réalise un site à l’aide d’un CMS, il arrive qu’au lieu de saisir le texte directement dans l’éditeur de texte du CMS, on aille récupérer du texte sur un document existant. Se pose alors un problème agaçant : en collant le texte copié, on s’aperçoit que ce texte ne s’affiche pas sur le site comme les autres textes saisis directement.

Cela vient du fait qu’en copiant le texte dans le presse-papier, vous avez copié aussi les styles CSS associés au texte. Vous pouvez vous en rendre compte en activant la fenêtre d’édition HTML de l’éditeur de Bludit (cliquez sur le bouton <>, à droite de la barre d’outils). Vous verrez alors les styles CSS associés au texte collé.

Convertir le texte copié en texte brut

La solution au problème posé consiste à convertir le texte copié en texte brut en utilisant un éditeur de texte comme TextEdit (sur mac) ou Notepad (sur PC). Collez le texte dans un nouveau document et convertissez-le au format Texte (.txt).

Conversion d’un texte avec TextEdit, sur macOs (le texte surligné n’est pas converti)

Utiliser du texte brut

Pour rectifier les problèmes rencontrés dans Bludit, il faut effacer le code comprenant les styles, revenir en mode d’édition visuelle et coller dans le champ de saisie le texte converti préalablement au format Texte.

➜ Pour éviter ces manipulations, les développeurs saississent directement leurs articles en texte brut, directement dans leur éditeur de code favori.

Modifier la couleur de survol des titres

Si la couleur de survol à utiliser n’est pas déjà identifiée dans une charte graphique, vous devez la déterminer en fonction des couleurs des images principales du site.

Choisir la couleur la plus appropriée

Pour trouver la couleur la plus adaptée à votre site, le plus simple est de faire une capture d’écran du site lorsque vous survolez le titre du dernier article. Ensuite, en utilisant Photoshop (Images > Réglages > Teinte/Saturation), modifier les paramètres de la couleur bleue jusqu’à l’obtention de la couleur voulue. Notez alors sa valeur hexadécimale.

Modifier le fichier CSS du thème

➜ Pour appliquer cette couleur aux liens du site il est nécessaire de modifier le fichier main.css (la principale feuille de style du thème) qui se trouve dans dossier-du-site/bl-themes/massively/assets/css.

Modifiez le fichier “main.css” avec un éditeur de code (Bracket), après l’avoir téléchargé sur votre poste de travail. Après modification il sera nécessaire de remplacer le fichier “main.css” situé sur le serveur. Vous utiliserez pour cela un client FTP (Filezilla).

Recharger les CSS de la page active

Pour que votre modification s’affiche sur la page de votre site il sera sans doute nécessaire de recharger les feuilles de style de la page active, dans votre navigateur. L’extension de Chrome “Web developer” permet cette manipulation.

Cette opération est à renouveller, dans un premier temps, chaque fois que vous allez sur une nouvelle page. Pensez-y car sinon vous douterez d’avoir effectué correctement les changements indiqués ! On peut aussi vérifier que nos modifications sont opérantes en changeant provisoirement de navigateur.

Épingler un article et modifier la description

Bludit vous offre la possibilité d’épingler un article en tête de la liste des articles publiés. Sur la page d’accueil, celui-ci est alors présenté en premier, même si d’autres articles sont publiés après. Cela vous permet de mettre en avant un contenu clé, que les lecteurs verront d’emblée en arrivant sur la page d’accueil.

➜ Profitez-en pour compléter la description de cet article. Dans Massively, celle-ci s’affiche sous le titre de l’article (en italique et en gris clair). Cette description sert d’accroche ou de châpo pour inciter le lecteur à lire l’article. Elle est utilisée comme extrait par les moteurs de recherche, il est donc recommandé de placer le mot clé de la page au début de la description.

Veiller aux intitulés de pages statiques

Utiliser des titres courts

Le paramétrage d’une page en page statique sort la page en question du flux des pages dynamiques. Cette page n’est plus considérée par le CMS comme faisant partie du blog. Bludit utilise le titre des pages statiques pour l’insérer dans le menu principal (afin que l’utilisateur accède à cette page).

Si vous utiliser un titre long, l’onglet du menu affichera le titre en entier et cela posera vite un problème d’ergonomie si vous avez plusieurs pages statiques. Bludit, et le thème massively montrent ici leurs limites. À moins de trouver une astuce pour modifier les intitulés des onglets, il vaut mieux donner à ses pages statiques des titres courts 😉

Notez qu’il est possible de réécrire les URL d’une page dans les options de la page. Cela ne modifie pas pour autant le nom des pages du menu.

Modifier l’intitulé “Page d’accueil”

Comme nous l’avons mentionné plus haut, l’impossibilité de changer l’intitulé de la page des articles en utilisant le tableau de bord de Bludit peut être perçu comme un défaut du thème… ou du CMS.

➜ Cette modification est cependant possible en modifiant le fichier de traduction du CMS. Ce fichier est nommé fr_FR.json et il est placé dans dossier-du-site/langages. Vous pouvez le modifier en utilisant Brakets.

Utiliser le potentiel des CSS de Massively

La feuille de style de Massively, non minifiée, fait 4653 lignes ! Il y a dans cette feuille de style des instructions nombreuses pour styliser toutes sortes de contenus.

Consulter les pages de démonstration

➜ La première chose à faire pour se rendre compte de ce qu’il est possible de faire est de consulter la page intitulée Elements reference sur la démo du thème Massively proposée par HTML5-up.

J’en propose une adaptation provisoire en français réalisée rapidement dans Bludit, sur mon compte de démo Alwaysdata.

Vous allez découvrir que Massively permet l’usage d’une grille adaptative, qu’il propose une classe pour améliorer le comportement des images sur petits écrans, qu’il met à notre disposition des boutons de toutes sortes, qu’il autorise l’usage des icônes de FontAwesome, … et plein d’autres choses !

Images en grille avec gouttières et habillage avec marges confortables

Examiner le code source des pages de démo

La prise en main d’un thème passe inévitablement par l’examen du code source des pages de démonstration. Il s’agit de repérer quelles sont les classes utilisées et à quelles balises elles ont été attribuées.

L’application des classes ne peut se faire, avec Bludit, qu’en modifiant le code source dans la fenêtre d’édition du code HTML.

Pour y voir plus clair et profiter de la colorisation du code dans Brakets, je vous propose de copier le code source de ma page de démonstration et de le coller dans une nouvelle page créée avec Brackets.

Code source de ma page de démonstration

Vous pouvez aussi demander à votre navigateur d’afficher le code source de la page…

Transformer des liens en boutons

Comme cela est suggéré sur la capture d’écran ci-dessus, l’attribution d’une classe « button » transforme un lien en bouton. En ajoutant d’autres classes il est possible de personnaliser l’apparence des boutons. Les classes disponibles pour cela sont :

  • « primary »
  • « fit »
  • « small »
  • « large »

En rajoutant les classes « icon » et « fa-icon-name » (remplacer « icon-name » par le nom de l’icone à afficher), il est possible d’intégrer une icône Font Awesome dans le bouton.

Résoudre le problème d’affichage “responsive” des images

Massively dispose de 2 classes qui, utilisées simultanément, permettent l’affichage correcte des images sur tous les écrans. Il s’agit des classes « image » et « fit ».

Pour qu’une image devienne “responsive”, il est donc nécessaire de lui attribuer, directement dans le code source (via l’éditeur de page de Bludit) les classes « image » et « fit ».

Le code à insérer dans chaque balise <img>, entre “img” et “src”, est le suivant : class="image fit"