Layout

Bonjour Julie,

Voilà je t’ai préparé le code CSS qui te sera utile pour faire ce que tu souhaites.

D’abord, il me / te faut savoir ou tu as mis l’image puce que tu veux utiliser pour la liste.
Idéalement (et dans l’exemple que je te met en dessous), il faut la placer dans ton thème actif.
Donc il te faut la déposer sur ton serveur dans le dossier du thème (wp-content/themes/[ton theme]/) et créer un dossier “images” si il n’existe pas pour placer le fichier image dedans.

Ensuite, dans ton fichier CSS, là ou tu as déjà mis les instructions précédente il te faut ajouter les instructions suivantes.

Pour la taille des titres (à régler selon tes besoins, tu réduits / augmentes les deux proportionnellement, p. ex. 20px = 2.0rem) :
.bucket h3 { font-size: 18px; font-size: 1.8rem; }

Pour s’assurer de faire dispara?tre la puce, mettre une image et ajouter le trait du bas pour séparer :

.bucket ul { list-style: none; }
.bucket ul li {
	border-bottom: 1px solid #d8d8d8;
	background: url(images/puceperso.png) no-repeat;
	padding: 4px 0 4px 25px;
}

Pour l’instruction “background” dans “url()” tu dois donc donner le chemin vers ton image. Ici la base c’est le dossier thèmes, on peut donc directement donner le dossier à partir de la, avec le nom de fichier (p. ex. images/puceperso.png).
Ici le “padding” n’est pas obligatoire, il faut voir selon ton image et la taille des lignes si ?a correspond a ce que tu souhaites !

Je suis conscient que je peux ne pas être très clair :D, donc excuse moi par avance !
Je reste a ta disposition si tu veux que je t’assiste, ou me montrer le résultats pour que j’adapte ou corrige d’éventuel problèmes.

N’hésite pas a me dire si tu t’en sors dans tous les cas,

A très vite,
Nicolas

Bonjour Nicolas,

Un grand merci pour toutes ces informations. C’est vraiment adorable.
Tu es très clair je te rassure. Je pense avoir tout fait comme tu me disais, par contre les puces standard noires n’ont pas disparues, du coup je me retrouve avec deux types de puce comme tu peux le voir https://happyculture-et-vous.fr/bucket-list-life-list/

J’ai mis le bout de code suivant :
}

.bucket {margin-top:55px;}
.bucket li {padding-top:1px;}
.bucket h3 { font-size: 18px; font-size: 1.8rem; }
.bucket ul { list-style: none; }
.bucket ul li {
border-bottom: 1px solid #d8d8d8;
background: url(https://happyculture-et-vous.fr/wp-content/uploads/2015/01/pink_folder.png) no-repeat;
padding: 4px 0 4px 25px;
}

Est ce que la dedans il y aurait l’explication de pourquoi les deux puces en même temps ?

Après je ne t’embête plus ??

Merci encore
Julie

Bonsoir Julie,

Non ne t’inquiètes pas ?? tu ne m’embêtes pas!
Donc j’ai regardé un peu et effectivement je pense que j’ai fait une petite erreur en te donnant le code, excuse moi.

Donc en fait il faut que tu mettes ceci, c’est quasiment identiques mais je l’ai un peu ajusté a ton site pour rendre la liste plus claire.
Donc à la place de :

.bucket ul { list-style: none; }
.bucket ul li {
border-bottom: 1px solid #d8d8d8;
background: url(https://happyculture-et-vous.fr/wp-content/uploads/2015/01/pink_folder.png) no-repeat;
padding: 4px 0 4px 25px;
}

Tu mets ces lignes :

.bucket ul li {
	border-bottom: 1px solid #d8d8d8;
	background: url(https://happyculture-et-vous.fr/wp-content/uploads/2015/01/pink_folder.png) no-repeat;
	padding: 7px 0 7px 40px;
	margin: 0;
	list-style: none;
}

Je pense que ?a correspond plus à ce que tu attends, et ?a corrige le problème des puces qui continuent d’appara?tre.

Si tu as besoin que je te commentes un peu plus en détails pour que tu puisses adapter, ou si tu as d’autres questions n’hésite pas au moindre soucis,

Nicolas

Ouiiiii ?a marche !!!! Le code est magique ?? Merci beaucoup Nicolas.

En l’état, la liste me va maintenant très bien, cependant si tu as des suggestions à me faire sur une meilleure mise en forme je suis preneuse !

J’ai vu qu’il y avait un peu trop d’espace entre mon texte de début de page et le début de la liste. Je ne sais pas s’il est possible de le modifier. Autrement, ce n’est pas dérangeant.

Merci encore merci ??
Julie

Bonjour Julie,

Je suis content que ?a marche et que ?a soit OK pour toi.

Je pense que ta liste est très bien comme ?a ! Je suis pas très doué pour le design :p tu vois là tu as eu les idées, ensuite j’ai simplement aidé a les mettre en place.
Mais je trouve que ?a va très bien comme ?a ??

Par contre, pour l’espace du dessus, tu peux rajouter ceci dans le fichier CSS.
J’ajoute aussi un peu d’espace sur le bloc “crédits” en bas de ta liste pour que ?a soit plus propre.

#exiledesigns-bucketlist { margin-top:-55px; }
#exiledesigns-bucketlist .credits { margin-top:25px; }

Voila en esperant que ?a réponde a tes questions!

Merci d’utiliser notre plugin encore une fois !

Nico

Et bien un grand grand merci Nicolas pour ton aide et ta patience.
Je suis heureuse que ton plugin vienne s’ajouter aux pages de mon blog ??

Très bonne continuation !!!
Julie

Il n’y a pas de quoi Julie !

Bonne continuation à toi aussi,

Nicolas