Support » Plugin: Bucket List » Layout

  • Resolved LaurenceV

    (@laurencev)


    Hello,

    I just download your plug in and complete my bucket list. I liked the idea and the presentation on Corinne’s blog, that’s why I downloaded it. But, the presentation on my blog isn’t nice at all. It’s not clear. How can I do to change that ?

    That’s the link to the page I created.

    Can you help me to fix it please ? If it is not possible, i will do it one manually.

    Thanks in advance for your help,

    Laurence

    https://wordpress.org/plugins/bucket-list/

Viewing 7 replies - 16 through 22 (of 22 total)
  • Plugin Author Nicolas

    (@ncros)

    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 http://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(http://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

    Plugin Author Nicolas

    (@ncros)

    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(http://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(http://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

    Plugin Author Nicolas

    (@ncros)

    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

    MissDjiu

    (@missdjiu)

    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

    Plugin Author Nicolas

    (@ncros)

    Il n’y a pas de quoi Julie !

    Bonne continuation à toi aussi,

    Nicolas

Viewing 7 replies - 16 through 22 (of 22 total)
  • The topic ‘Layout’ is closed to new replies.