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éé par HTML5UP sous la forme d’un site statique HTML-CSS

➜ Pour ce cours, je vous invite à activer Massively sur votre site Bludit. Vous allez ensuite apprendre à le personnaliser pour créer soit votre portfolio, soit une maquette de site pour le client pour lequel vous avez déjà travaillé lors du TP2.

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 (CCP-3 du Titre Pro IMeP).

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. Cette image s’accroche est associée à un lien vers l’article concerné. Le lien vers le dernier article publié occupe toute la largeur de la page d’accueil, avec son image d’accroche bien visible, sous le menu. Les liens vers les autres articles se répartissent sur une grille de 2 colonnes, sous le dernier article publié (ou l’article épinglé…).

Une couleur de focus est visible au survol des boutons et des titres d’article. Cette couleur de focus doit permettre la lisibilité des textes sur fond sombre (l’image de fond) et sur blanc (contenant des articles). Cette couleur et l’image de fond fondent le style visuel d’un site utilisant le thème Massively.

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) du 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 est 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

Optimiser l’effet produit par la première 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.

Épingler un article et modifier sa 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.

Dans notre cas, je vous propose d’épingler l’article dont l’image d’accroche est une reprise de l’image de fond (avec ou sans logo superposé).

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

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.

Le cas se présente par exemple si vous copiez du faux texte à partir du site https://hipsum.co/.

Cela vient du fait qu’en copiant le texte dans le presse-papier, vous copiez 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 de la symbolique du thème traité. Vous devez surtout veiller à ce que cette couleur autorise la lecture des textes sur fond sombre ou sur fond clair.

Choisir une couleur de valeur moyenne

Le moyen le plus simple pour sélectionner une couleur de valeur moyenne est d’utiliser le site hsluv.org. En effet, le sélecteur de couleur s’ouvre par défaut sur un rouge avec une luminosité de 50%. Il suffit donc de déplacer le petit cercle blanc situé sur le côté droit du trapèze des couleurs pour modifier la teinte et la saturation de la couleur recherchée.

D’autres priorités que l’optimisation du contraste de luminosité peuvent vous amener à choisir des couleurs plus claires ou plus foncées. Veillez toutefois à ce que le ratio de contraste sur le blanc ou le noir soit au moins supérieur à 3 (norme d’accessibilité AA-Large).

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.

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.

Personnaliser le thème Massively (niveau avancé)

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 constatez que Massively permet l’usage d’une grille adaptative. Vous constatez aussi que le CMS propose une classe pour améliorer le comportement des images sur petits écrans. Bludit met également à notre disposition des boutons de toutes sortes, 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…

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"

Changer l’ordre des onglets du menu

Le titre des pages statiques est automatiquement utilisé en tant qu’intitulé d’onglet dans le menu du site. L’ordre des pages peut être modifié en attribuant une position à chacune d’entre elles. Pour cela, il suffit de paramétrer le champ “Position” dans les options de la page (onglet “avancé”).

Modifier les icônes des réseaux sociaux dans le menu du site

Pour modifier les icônes de lien vers les réseaux sociaux, il est nécessaire de se rendre dans les réglages généraux du site. Personnalisez les adresses des différents réseaux proposés. L’icône du réseau disposant d’une adresse valide s’affichera automatiquement.

Il manque la plateforme Pinterest dans la liste des réseaux proposé par Bludit et Massively.

Un plugin payant à 1 dollar permet de remédier à cette absence : Social Media Suite.

Dans un portfolio, il est possible de créer un bouton (voir plus bas), dans le corps d’une page, pour conduire les lecteurs vers vos tableaux Pinterest. Cela a du sens, dans un contexte de conception graphique !

Modifier la favicon du site

Pour modifier la favicon du site, créez un dossier « img » dans le dossier du thème. Placer dans le dossier « img » le fichier « favicon.png ».

La favicon du CMS Bludit fait 32 x 32 pixels.

Il se peut que le navigateur refuse d’afficher la favicon dans un premier temps. Testez le résultat avec un autre navigateur ou sur un autre appareil.

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.

Personnaliser la page d’erreur 404

Dans Bludit, pour modifier la page d’erreur 404 (page not found), il est nécessaire de créer une nouvelle page statique puis, dans les réglages généraux, de la paramétrer pour qu’elle devienne la page d’erreur de navigation du site.

Un problème surgit cependant dans la version 3 du CMS : cette nouvelle page statique apparaît dans le menu et Bludit 3 ne permet pas de masquer une page dans le menu via le tableau de bord.

Une astuce consiste à paramétrer cette page en tant que brouillon. Pour cela il suffit de cliquer sur “PUBLICATION”, à droite du bouton “Aperçu”, en tête de la page d’édition. Le mot “BROUILLON” s’affiche alors (voir ci-dessous).

Personnaliser davantage le thème Massively (niveau expert)

Utiliser les classes incluses dans les CSS du thème pour afficher une grille

Le thème Massively prévoit l’utilisation d’une grille Flexbox basée sur 12 colonnes. Plusieurs largeurs de fenêtre de navigation (avec points de ruptures correspondants) sont envisagées :

  • xlarge (entre 1141 px et 1680 px)
  • large (entre 981 et 1140 px)
  • medium (entre 737 et 980 px)
  • small (entre 481 et 736 px)
  • xsmall (entre 321 et 480 px)
  • xxsmall (entre 0 et 320 px)

Chaque rangée (row) est constituée de 12 colonnes. Les colonnes de la grille sont paramétrées pour occuper autant de colonnes que nécessaire (col-1 à col-12).

Les concepteurs du thème proposent de créer des grille en paramétrant une seule rangée globale puis de créer des rangées apparentes en utilisant le code suivant : <!-- break --> .

Voici un exemple de code pour mettre en place une grille de 2 rangées apparentes de 2 et 3 colonnes. Ce dimensionnement est valable sur tous les écrans sauf sur les petits écrans où chaque colonne est paramétrée pour occuper toute la place disponible (col-12-small).

<div class="row gtr-150 gtr-uniform" style="line-height: 1.4; min-height: 100px;">
<div class="col-6 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">1re rangée • 1re colonne 50% (100% sur petits écrans)</p>
</div>
<div class="col-6 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">1re rangée • 2e colonne 50% (100% sur petits écrans)</p>
</div>
<!-- break -->
<div class="col-4 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">2e rangée • 1re colonne 33,33% (100% sur petits écrans)</p>
</div>
<div class="col-4 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">2e rangée • 2e colonne 33,33% (100% sur petits écrans)</p>
</div>
<div class="col-4 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">2e rangée • 3e colonne 33,33% (100% sur petits écrans)</p>
</div>
</div>

➜ Vous pouvez visualisez cette grille à cette adresse : http://comptetestfpw.alwaysdata.net/bludit-massively/grilles-responsives#main

Attention, pour insérer les images dans la grille importée dans une page : cliquez sur le cadre gris puis sur le bouton “Images”, en haut à droite, sélectionner l’image et validez.

N’oubliez pas de rajouter class=“image-fit” dans le code de chaque image importée (Bludit retire cette classe au moment de la mise à jour du contenu).

Les classes contenant l’expression gtr concernent le paramétrage des gouttières (gutters, en anglais). Les largeurs de gouttières disponibles s’étagent ainsi : gtr-0, gtr-25, gtr-50, gtr-150 et gtr-200.


Vous disposez désormais de nombreux éléments pour personnaliser le thème Massively. Vous découvrirez certainement d’autres moyen d’optimiser votre site en appui sur ce thème. Je vous souhaite beaucoup de réussite dans votre projet éditorial 😉

La version 4 de Bludit apportera son lot de nouveauté courant 2022.