Modification format liste a puces Template Blogger

Signaler
-
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
-
Bonjour,

J'ai un template Blogger acheté sur internet. J'essai désespéramment de modifier le style de mes listes à puces <ul> sur mon blog. J'ai consulté internet, et il semblait facile de modifier le code css ou html afin de changer le style de puces, comme par exemple mettre un carré au lieu d'un > qui apparaît par défaut devant le texte. Je ne sais pas pourquoi que çà ne fonctionne pas. Est-ce qu'il y a quelqu'un qui pourrait m'aider? Merci à l'avance

7 réponses

Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
1 243
Bonjour,

Je ne sais pas si ton thème le permet, mais dans le tableau de bord de Blogger, section "Thème" - "Personnaliser" - "Avancé" -"Ajouter le fichier CSS", il est possible d'ajouter du code CSS.

C'est dans cette section qu'il faudrait ajouter le code CSS concernant le style des listes à puces <ul>

Bonjour et merci de donner suite à ma question!

Effectivement, je peux modifier dans Blogger dans la personnalisation du thème avec «Ajouter le fichier CSS».

Comme je ne suis pas spécialiste de CSS, j’ai consulté dans divers sites internet le code à inscrire pour modifier le type de puces.

Après de multiples tentatives, il y a rien qui change! Peut-être que je n’ai pas le bon code ou la bonne syntaxe!

Pourriez-vous m’indiquer le code requis pour modifier mes listes à puces de telle sorte que j’ai un carré «square» au lieu de > devant mon texte ?

Merci bien de votre aide!
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
1 243
Peux-tu donner l'adresse de ton blog pour que je puisse voir comment les listes à puces sont déclarées dans ton thème ?
Nous avons déjà communiqué ensemble antérieurement...je te redonne l’adresse de mon site: https://voyagesaloisir.blogspot.com/
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
1 243
Essaie d'ajouter ce code au CSS :

.post-body ul { list-style-type: square; }    
Je dois m’absenter...j’essaie ça et je te reviens plus tard...probablement demain...merci encore pour le temps que tu me consacres!
A+
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
1 243 >
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020

Bonjour,

Troisième possibilité, si les deux précédentes ne fonctionnent pas :

.post-body ul li:before{ content:""; }
.post-body ul { list-style-type: square; }  


Ton thème utilise le pseudo élément before pour placer une icône font awesome devant la liste à puces.
>
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020

Petite précision technique avant que je procède ...Est-ce que je dois effacer les codes précédents quand je veux essayer les autres suggestions? J’ai essayé la première suggestion... rien ne se passe...je vois bien dans le fichier html de mon template bidon (le même qu’en réel), que j’utilise pour mes tests, le code nouveau avant le </b:skin>?
Je m’aperçois quand je veux essayer d’ajouter le fichier CSS un autre code dans le thème, le premier code que j’ai ajouté n’est plus là!
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
1 243 > Alainbib
Il faut effacer les codes que tu as testés sans succès.

Il faut penser à recharger la page avec Ctrl+R ou vider le cache du navigateur, pour que les changements soient pris en compte.
>
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020

J’ai essayé tes trois suggestions, avec tes instructions....rien ne change...Je vois bien les codes dans le fichier html avant la balise </b: skin> et aussi quand je regarde le code source dans le site affiché, juste avant </style >
<style>
/*———-Typographie and short codes————*/
Est-ce que ça peut que le template bloque tout changement demandé avec du code CSS?
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
1 243 > Alainbib
Je ne sais pas, il y a probablement autre chose à modifier. Je vais chercher.
J'essai de chercher aussi...Est-ce que le code: .post-body li{margin:5px 0;padding:0;line-height:1.5}.post-body ul li:before{content:"\f105";margin-right:5px;font-family:fontawesome} que l'on retrouve dans la section Typographie and short codes pourrait avoir une influence sur les résultats???
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
1 243
Oui, on retrouve ce code dans les deux feuilles de styles, mais en principe, le code placé dans la partie "Ajouter le fichier CSS" devrait l'annuler.

Tu as bien ré-actualisé la page, voire vidé le cache de ton navigateur ?
Oui, j'ai bien fait cela. J'ai également vérifié le résultat, après changement de codes, sur d'autres appareils que mon ordi (tablette, téléphone)! J'ai vérifié si les puces d'un des articles avaient changés de format...Rien n'a changé. J'ai même essayé de créer un nouveau message bidon avec des puces... toujours le > qui apparait!
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
1 243
Bonjour,

J'ai tout regardé à nouveau ce matin.

Il y a 4 feuilles de styles et seulement deux gèrent les listes à puces.

/*-- Reset CSS --*/

/*-------Typography and ShortCodes-------*/

Dans ces feuilles de styles, le CSS concernant les listes à puces de la class='post-body post-content'> est :

.post-body ul li:before{content:"\f105";font-family:FontAwesome;font-size:13px;font-weight:900;margin:0 5px 0 0}

.post-body ul li:before{content:"\f105";margin-right:5px;font-family:fontawesome}



Ton thème utilise le pseudo élément "before" pour placer une icône font awesome devant la liste à puces.

C'est pourquoi je vide d'abord l'élément "before" :

.post-body ul li:before{ content:""; }


avant de préciser le style "square" pour la liste à puce :

.post-body ul { list-style-type: square; }


J'ai aussi essayé de changer l'icône FontAwesome par "\f0c8" :

.post-body ul li:before{content:"\f0c8";font-family:FontAwesome;font-size:13px;font-weight:900;margin:0 5px 0 0}


C'est peut-être dans la syntaxe que je fais une erreur.

Il faudrait peut-être modifier directement le thème avant de l'intégrer à ton blog, soit en changeant l'icône "FontAwesome" ("\f105"), soit en retirant le code CSS concernant l'utilisation de cette icône "FontAwesome" et en le remplaçant par le CSS :

.post-body ul { list-style-type: square; }


La liste des icônes "FontAwesome" :
https://www.angularjswiki.com/fr/angular/font-awesome-icons-list-usage-css-content-values/

Au préalable, il faut faire une sauvegarde des fichiers de ton thème.
Re-bonjour,
Je pense que je comprends la logique que tu m’expliques et ce que tu m’a proposé avec les codes CSS suggérés.

Tu me parles de modifier directement le thème en changeant l’icône \"f105" (qui correspond au >)... ou en retirant le code CSS...

Je veux bien essayer mais comment je fais cela? Modifier le code HTML du thème? Où exactement ? Dans les feuilles de style? Peux-t-on changer le contenu des feuilles de style dans le fichier html du template?

J’apprends un peu sur le tas (expression québécoise ????) concernant le langage html ou css !
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
1 243 >
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020

Bonjour,

J'ai téléchargé la version gratuite du template Sorella, l'archive zip contient un fichier Sorella.xml qui semble modifiable. On y trouve les codes CSS :

.post-body ul li:before{content:"\f105";font-family:FontAwesome;font-size:13px;font-weight:900;margin:0 5px 0 0}


.post-body ul li {
    list-style: none;
}


Je pense que la version payante Premium contient également un fichier XML, c'est ce fichier qu'il faudrait modifier.
>
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020

Bonjour,
C’est gentil de ta part de poursuivre dans tes recherches pour m’aider.
A ton avis, je devrais modifier le fichier html dans le thème que l’on retrouve sur la plateforme de Blogger...juste les lignes de codes que tu me proposes? Je ne touche pas aux autres codes dans les différentes feuilles de styles qui ont peut-être aussi un lien ?Est-ce que c’est possible d’essayer de ton côté avec le même template, en utilisant un message bidon juste pour voir ? Merci bien

PS: j’ai déjà essayé antérieurement de changer Juste la taille de la police de caractère directement dans le fichier XML...sans succès!!!
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
1 243 > Alainbib
Je ne saurais te dire, je n'ai jamais modifié le fichier HTML, je ne sais pas ce que ça donne.
Personnellement, je tenterais de modifier le fichier XML, après avoir fait une sauvegarde.

Dans le tableau de bord de Blogger, fais une sauvegarde du thème. Tu obtiendras un fichier XML. Tu en fais une copie que tu mets de côté, elle te permettra de remettre le blog en état, en cas de besoin.

Sur l'autre fichier XML, fais les modifications voulues, enregistre les modifications et importe le fichier modifié.
Teste les résultats.

Si ça ne te convient pas, tu peux restaurer la copie.
>
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020

Malheureusement quand j’ai acheté le thème que j’utilise, d’un fournisseur sur internet, ça m’a pas coûté grand chose...je comprends maintenant pourquoi!!! Il n’y a pas de fichiers stylesheet ou .css qui sont livrés avec... Ce qui fait que je ne peux rien modifier par moi-même. Il compte probablement là-dessus pour faire de l’argent. Je dois faire appel à leurs services payants pour faire toute modification de style sur mon template ...comme la taille du caractère, les types le listes à puces...

J’en déduit que Le code est donc barré ou protégé de toutes modifications souhaitées...ce qui peut expliquer pourquoi les codes css proposés ne fonctionnent pas.

J’avais espéré que l’ajout de codes css pouvaient contrecarrer leurs codes. Si jamais tu trouves d’autres options ou solutions, ce serait sympa de me les partager.

Je te remercie beaucoup tout de même du temps que tu as consacré à essayer de régler mon problème.
Salutations
Messages postés
5850
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
2 juillet 2020
1 243 > Alainbib
En effet, ils ont dû mettre en place un système pour empêcher les modifications.