Sujet Précédent Sujet Suivant

Modification format liste a puces Template Blogger

Fermé
alainbib - 27 juin 2020 à 20:14
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 - 1 juil. 2020 à 16:01
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

Réponse 1 / 7
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
28 juin 2020 à 06:31
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>

0
Réponse 2 / 7
Alainbib
28 juin 2020 à 17:11
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!
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
28 juin 2020 à 17:35
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 ?
0
Réponse 3 / 7
Alainbib
28 juin 2020 à 18:03
Nous avons déjà communiqué ensemble antérieurement...je te redonne l’adresse de mon site: https://voyagesaloisir.blogspot.com/
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
28 juin 2020 à 18:39
Essaie d'ajouter ce code au CSS : 

.post-body ul { list-style-type: square; }
0
Réponse 4 / 7
Alainbib
28 juin 2020 à 19:00
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+
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
28 juin 2020 à 19:52
Si ma première suggestion ne fonctionne pas, essaie ce code, à la place : 

.post-body ul li:before{content:"\f0c8";font-family:FontAwesome;font-size:13px;font-weight:900;margin:0 5px 0 0}
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451 > dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021
29 juin 2020 à 07:15
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.
0
Alainbib > dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021
Modifié le 29 juin 2020 à 17:01
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à!
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451 > Alainbib
29 juin 2020 à 17:46
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.
0
Alainbib > dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021
Modifié le 29 juin 2020 à 21:03
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?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
alainbib
29 juin 2020 à 21:38
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???
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
29 juin 2020 à 22:11
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 ?
0
Réponse 6 / 7
alainbib
Modifié le 29 juin 2020 à 22:17
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!
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
30 juin 2020 à 08:17
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/fontawesome/

Au préalable, il faut faire une sauvegarde des fichiers de ton thème.
0
Réponse 7 / 7
Alainbib
30 juin 2020 à 14:03
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 !
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
30 juin 2020 à 14:47
Quand tu as acheté ton thème, tu as obtenu un dossier contenant des fichiers, je suppose. Si oui, il doit y avoir des fichiers avec l'extension .css, ce sont les feuilles de styles à modifier.

Si ça ne se présente pas sous cette forme, je ne sais pas comment tu peux faire et si c'est possible de les modifier.
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451 > dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021
30 juin 2020 à 14:58
Quand je sauvegarde le thème de mon blog, ça me génère un fichier .xml, c'est aussi ce même fichier .xml qui me sert à le restaurer.

Je suppose que le thème que tu as acheté se présente sous cette forme. Si oui, c'est ce fichier qu'il faudrait modifier, après en avoir fait une sauvegarde.
0
Alainbib > dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021
30 juin 2020 à 15:23
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
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451 > Alainbib
30 juin 2020 à 15:31
En effet, ils ont dû mettre en place un système pour empêcher les modifications.
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451 > dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021
1 juil. 2020 à 06:47
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.
0