Configuration du design général du blog

Par : Benoit - Catégories : Tutoriels
star
star
star
star
star

Dans PrestaBlog, la personnalisation du design est pensée pour être durable et compatible avec les mises à jour du module.

Il est fortement recommandé d'utiliser les options de configuration prévues à cet effet plutôt que de modifier ou surcharger directement les templates ou les fichiers CSS. Les overrides de templates compliquent les mises à jour futures, obligent à comparer les fichiers après chaque évolution du module et sont une source fréquente de dysfonctionnements.

La section Configuration > Design permet d'ajuster l'apparence du blog tout en conservant une structure propre et évolutive.

Elle repose principalement sur deux éléments :

  • les réglages de couleurs des différents éléments du blog
  • les règles CSS personnalisées (CSS custom), qui permettent d'ajouter des styles sans impacter les fichiers du module

Les réglages de couleurs permettent d'affiner visuellement :

  • le menu du blog
  • la pagination
  • les listings de catégories
  • les contenus des articles
  • les contenus des blocs

Ces réglages concernent uniquement l'aspect visuel (couleurs, arrière-plans, survols) et s'appliquent de manière globale.

Rappel sur la configuration des catégories

La configuration des catégories permet d'ajuster de nombreux paramètres d'affichage liés aux contenus (titre, description, auteur, date...). Ces paramètres n'agissent pas directement sur les couleurs, mais influencent le rendu final du blog.

Repères visuels

Repères visuels pour la configuration du design

Pour certains éléments plus complexes, PrestaBlog affiche une image explicative à côté des champs de configuration. Ces images servent de repères visuels afin de comprendre rapidement à quelle partie de l'affichage correspond chaque champ de couleur.

  • chaque champ de configuration est associé à un numéro
  • ce numéro est affiché à côté du champ
  • le même numéro apparaît sur l'image de prévisualisation
  • le repère visuel permet d'identifier précisément l'élément graphique concerné

Ce système permet d'ajuster le design de manière claire et intuitive, sans modifier le code ni risquer de conflits lors des mises à jour.

CSS custom

PrestaBlog met à disposition un champ CSS custom permettant d'ajouter des règles CSS personnalisées sans modifier les fichiers du module ou du thème.

Les règles ajoutées via ce champ sont conservées lors des mises à jour de PrestaBlog. C'est la méthode recommandée pour effectuer des ajustements CSS spécifiques au blog.

Après toute modification du CSS custom, il est important de prendre en compte la gestion du cache. Les navigateurs peuvent conserver les feuilles de style en cache, ce qui empêche parfois de voir immédiatement les changements.

Pour forcer le rechargement du cache navigateur :

  • sous Windows : CTRL + SHIFT + R
  • sous macOS : CMD + SHIFT + R

Si les changements ne sont pas visibles, il peut être nécessaire de vider le cache PrestaShop ou de désactiver temporairement la minification CSS afin de vérifier le rendu. Rendez-vous dans paramètres avancés > performances.

Personnaliser l'affichage des catégories

L'apparence de vos catégories peut être ajustée à deux niveaux distincts, ce qui offre une grande souplesse selon que vous souhaitez une cohérence globale ou une mise en scène spécifique pour chaque catégorie.

Options globales dans la configuration

La section Paramètres d'affichage des listes d'articles regroupe l'ensemble des réglages qui s'appliquent à toutes vos catégories par défaut : nombre d'articles par page, affichage de l'image de couverture, du résumé, de la date, de l'auteur, etc. C'est le point de départ logique pour définir une charte d'affichage cohérente sur l'ensemble de votre blog.

Personnalisation par catégorie

Pour aller plus loin, chaque catégorie dispose de ses propres options d'affichage, accessibles directement depuis la création ou l'édition d'une catégorie. Vous pouvez ainsi, catégorie par catégorie, surcharger les paramètres globaux : choisir une mise en page différente, afficher ou masquer certains éléments, ou encore définir une image de couverture spécifique.

Ce fonctionnement en deux niveaux — global puis local — vous permet de gérer efficacement un blog avec de nombreuses catégories aux identités visuelles distinctes.

Et pour le thème ?

L'affichage du blog est également conditionné par la disposition choisie dans les paramètres du thème : nombre de colonnes, largeur du contenu, présence d'une sidebar… Ces réglages interagissent directement avec l'apparence de vos catégories. Pensez à les consulter si vous cherchez à ajuster la structure générale de votre blog.

Partager ce contenu

Benoit

A propos de l'auteur

Benoit

orem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat felis in risus pulvinar vehicula. Cras eget ornare nibh. Suspendisse [...]

search En savoir plus sur cet auteur

Veuillez vous connecter pour noter cet article

Articles en relation

Ajouter un commentaire