Personnalisation du blog pour passer en 3 colonnes

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

Vous souhaitez modifier le template de votre module prestablog, l’affichage en deux colonnes n’est pas ce que vous souhaitez pour votre design, vous désirez afficher prestablog sur 3 colonnes ? ou même 1 colonne ?

Voici une méthode simple qui vous y aidera…

Comment afficher prestablog sur 3 colonnes

Prenons comme références la dernière version en date à l’heure ou j’écris ce tutoriel, version 4.0.0 de prestablog pour une version 1.7.

Tout d’abord, désactivez le cache et la compression de votre feuille css dans votre backoffice > Paramètres avancés > Performances >

Mettre l’option Cache sur « Non », et « recompiler les fichiers de templates s’ils ils ont été mis à jour ».
« Smart cache » pour les feuilles de style sur NON

Ouvrez votre navigateur afin d’afficher votre blog. Ouvrez ensuite votre outil de développement en utilisant chrome ou firefox à l’aide de la touche F12.

Une nouvelle fenêtre s’affiche. Cela peut paraitre compliqué au départ, mais vous allez voir que cet outil est très agréable et simple à utiliser, et il vous permettra aussi d'aller plus loin dans vos modifications.

Cliquez sur l’icône juste à gauche du bouton inspecteur (le bouton bleu que vous voyez sur la capture d’écran ci dessus.)
Ceci va vous permettre en survolant les zones de votre blog, de mettre en avant les différents styles associés. Repérez le bloc complet qui englobe, la photo, le titre etc.

Comme la capture d’écran ci-dessous :

Vous pourrez ainsi voir dans la fenêtre de votre outil de développement le code qui est en rapport avec cet affichage.

En occurrence, la balise

  • , ses règles css associées à droite. Celle qui nous intéresse est tout en haut de la liste et normalement présente à la ligne 379 dans la feuille de style située dans le dossier /modules/prestablog/views/css/grid-for-1-7-module.css. (infos indiquées par l’outil de dev)

Cliquez sur la ligne « width:50% » à l’endroit ou il y a 50%. Passez la valeur à 33%. Vous verrez en direct votre blog passer en 3 colonnes.

Attention, ce n’est pas fini. Maintenant que vous avez repéré la bonne ligne dans votre fichier css, il vous suffit d’utiliser votre éditeur html (dreamweaver, notepad ++, ou un simple éditeur de texte), ouvrir le fichier css dont nous avons retrouvé l’adresse précédemment, repérer la ligne 379 ou la class #blog_list li, et passer le width à 33%, enregistrer, et envoyer via votre ftp le fichier modifié.

Vérifiez en actualisant votre navigateur que votre design est bien modifié. (videz son cache si jamais la modification n’est pas prise en compte).

N’oubliez pas ensuite, de remettre les valeur à la normal dans votre backoffice > Paramètres avancés > Performances

Comment afficher prestablog sur 1 colonnes?

Il suffit de mettre 100% sur le width de la class #blog_list li au lieu de 33%, tout simplement.
L’image étant nettement plus grande, il vous faudra par contre revoir les dimensions des thumbs liés à l’article, en allant dans Prestablog > Options des listes d’articles. Repérez la largeur du bloc à l’aide de votre outil de dev, et inscrivez la nouvelle valeur dans la partie « Largeur de miniature d’un article ».

Et voila, vous avez toutes les clefs pour bien utiliser votre blog. Si vous avez des questions, n’hésitez pas à commenter cet article, cela pourrait servir à d’autres utilisateurs.

Partager ce contenu

Veuillez vous connecter pour noter cet article

Articles en relation

Ajouter un commentaire