Modification format liste a puces Template Blogger
alainbib
-
dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention -
dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention -
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
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
A voir également:
- Modification format liste a puces Template Blogger
- Liste déroulante excel - Guide
- Format epub - Guide
- Format factory - Télécharger - Conversion & Codecs
- Suivi de modification word - Guide
- Hp usb disk storage format tool - Télécharger - Stockage
7 réponses
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>
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!
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!
Nous avons déjà communiqué ensemble antérieurement...je te redonne l’adresse de mon site: https://voyagesaloisir.blogspot.com/
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+
A+
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à!
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à!
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?
<style>
/*———-Typographie and short codes————*/
Est-ce que ça peut que le template bloque tout changement demandé avec du code CSS?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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???
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!
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 :
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" :
avant de préciser le style "square" pour la liste à puce :
J'ai aussi essayé de changer l'icône FontAwesome par "\f0c8" :
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 :
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.
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.
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 !
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 !
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.
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.
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
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
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 :
Je pense que la version payante Premium contient également un fichier XML, c'est ce fichier qu'il faudrait modifier.
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.