Des trucs et des astuces

Alors amusons -nous ;)

29 juillet 2007

Un bouton à la place d'une "Catégories"

n préambule
J'ai essayé pas mal de choses, mais le plus important est de se souvenir que:

-1) Les Catégories ne doivent comporter ni accent, ni espace*
-2) Ne pas commencer par un chiffre... (dans les cas d'un ordre spécifique, si les catégories commencent par 01, 02 etc il faudra ajouter une lettre devant - genre C01, C02 etc)
dans la plupart des cas il suffit de renommer les catégories afin qu'elles correspondent plus à un
objet Class.
*: Encore que, pour les espaces le cas échéant, ils peuvent être remplacés dans à la définition de la class dans le CSS par un point.

Ceci étant, tout est encore en mode avancé.

Donc la première des choses est d'avoir bien sûr des messages dans des catégories.
Pour la bonne forme et faciliter la compréhension de tous, j'ai créé un blog avec une colonne à gauche

01_I_cr_ation
j'y ai juste mis les blocs "Catégories" et "Liens"
02_I_blocs

et me suis dit que ce serait bien de mettre mon modèle en mode avancé

03_mode_avanc_

La dessus j'ai créé 3 messages et 3 catégories, il faut bien partir sur une bonne base
05_creation_message

Comme je le disais en préambule les catégories ne doivent pas comporter d'accent, d'espace ou commencer par un chiffre. (Sinon la "Class" ne sera pas comprise)
06_modifcategroie

Fort de nos trois messages, et de nos trois catégories, occupons donc de nos boutons :)

J'ai donc créé 3 boutons que j'ai chargés dans un post qui reste en mode brouillon
09_creatbouton

ainsi il n'est pas visible sur le blog et ça me permet de récupérer les adresses de stockage en appuyant sur le bouton <>
10_recupurlboutons

A partir de là, le plus gros a été effectué, il nous suffit de définir les class et modifier un peu l'html des pages.
Commençons par créer les Class dans la feuille de style générale, Une Class par Catégorie , ajoutant un point devant le nom de la catégorie là nous en avons trois
11_creatclassboutons

ensuite, repérons le bloc qui affiche les catégories dans la page d'accueil
12_repererbloccategorie

on repère précisément la balise <$BlogCategoryName$>
13_reperercategorie

et on va l'insérer dans <div class="<$BlogCategoryName$>"></div>
14_apr_sinsererclass

on supprime les balises <ul> et </ul> les <li> et </li> et on recopie tout notre bloc aunsi modifié

  <CBCategories>   <a href="<$BlogCategoryURL$>"><div class="<$BlogCategoryName$>"></div></a>  </CBCategories>

sur toutes les pages

et on regarde le résultat

15_lesimages


Commentaires

    HELP? je veux des photos pour illustrer les sous catégories

    Bonjour...
    Je risuqe d'etre un peu chiante et je m'en excuse.
    Voici l'adresse de mon blog: http://karine100705.canalblog.com/

    Ce que je voudrais faire c'est rajouter dans les sous catégories des photos comme par exemple: Apéros et entrée +"photo" juste en dessous , décor pour gâteaux +"photo"

    Comme sur ce blog par exemple: http://amesnuitsblanche.canalblog.com/

    Je t'avais prévenu, je suis chiante et je l'assume. Ce serait trop sympa si tu pouvais m'aider, j'en ai marre de me prendre la tete.
    Merci d'avance

    Posté par karine100705, 15 mai 2008 à 16:14
  • bien bien, fais-donc comme elle, tu définis une catégorie dans tes liens, et mets-y ton lien, qui est une copie de l'index de tes catégorie, au nom tu y mets ta petite vignette ;)

    Posté par Alérion, 15 mai 2008 à 22:05
  • Je crois que je suis bete car j'ai rien compris.
    Qu'est ce que je change comme code et où? (feuille de style général? page d'acceuil?)

    Posté par karine100705, 16 mai 2008 à 09:46
  • Bonjour ! j'ai fait comme tu as dis, et ça a marché, je voulais savoir cependant s'il était possible de créer un petit espace entre chaque vignette,pour ne pas qu'elles restent collées ?

    Merci !

    Posté par Althaéa, 23 juillet 2008 à 17:49
  • [Oui]

    oui, bien sûr, tu ajoute un [G]margin-top: xxpx;[/G] dans la déclaration de ta class dans ton CSS

    Posté par Alé rion, 23 juillet 2008 à 19:18
  • Bonsoir,

    Est -il possible de mettre une image de fond sous le bloc "catégories" en entier? (titre+toutes les catégories)

    Posté par Mattchry, 10 septembre 2008 à 23:11
  • Oui, bonsoir Mattchry ;)
    c'est exactement ce que tu retrouve dans ce blog: [G]titre, fond, pied, table des matières[/G] tout est en [G]fonction de la catégorie[/G]
    [I][Size='8pt':]:je n'ai pas encore eu le temps de finir ce tuto, mais [Sur col='#CCF':]:c'est le même principe que pour les boutons[/Sur][/Size][/I][Oui]

    Posté par Alérion, 11 septembre 2008 à 06:29
  • Bonjour Alérion [Danser] !!
    Tout d'abord je te souhaite mes meilleurs voeux pour cette nouvelle année, qu'elle soit remplie de petits et grands bonheurs quotidiens pour lutter efficacement contre la sinistrose [;)].

    Dans les résolutions 2009, je mets au code avec tes supers tutos [:D]. Sauf que là : je cale [la tu vois] !!

    J'ai tout fait comme dans ton article, et je n'arrive qu'à faire apparaitre les noms des catégories mais pas les images [Triste ouin] ...

    Dans la page de code de mon article brouillon j'ai deux adresses de stockage, j'ai essayé les deux mais rien n'y change [grrrmmmphffff]

    Je souhaiterais également changer ma bannière et enlever le google ad sens qui ne me rapporte mais alors rien de chez rien [mmm] ... parce qu'avec la nouvelle année, j'ai envie d'un nouveau blog, plus zen dans sa présentation.

    Aurais-tu la possibilité de m'aider une fois encore ? Tout du moins me dire ce qu'il faut faire parce que je voudrais bien apprendre

    Merci d'avance pour ta réponse [Bisou]

    A bientôt [Merci][Fee]

    Posté par Mariane S., 04 janvier 2009 à 19:14
  • meilleurs voeux à toi
    nous voici donc repartis pour una année supplémentaire ;)
    tu as erreur de codage Marianne:
    à chaque fin d'url des background tu as
    ... no-repeat 0% [Font col='#F00000':]:([/Font]
    padding: 0;
    ça bloque tout
    mets plutôt
    no-repeat [Font col='#F00000':]:0 0;[/Font]
    padding: 0;

    Posté par Alérion, 05 janvier 2009 à 06:08
  • Merci Alérion, je n'avais pas vu ta réponse ici [:s]...
    J'ai bien essayé mais ça marche toujours pô [Sais pas]...
    [Triste ouin][Triste ouin][Triste ouin] Faut-il que je regarde encore ailleurs ??
    Merci de ton aide Alerion[Ange]

    Posté par Mariane S., 15 janvier 2009 à 23:01
  • YYYYEEEEESSSSSS !!!!

    [Bisou][Bisou][Bisou]
    Merci Alerion, je viens de trouver la solution, et ça y est ça marche !!!!!!!![Cheese]
    Bon je file bidouiller un peu plus loin [Bisou]

    Posté par Mariane S., 16 janvier 2009 à 10:29
  • Au secours !

    Ca marche pas et ça fait 2h que je bidouille. PLease help ! Je craque

    Posté par sophie, 03 mars 2009 à 19:43
  • Galere!

    Je viens enfin de parvenir a faire "apparaitre" un semblant de catégorie, mais sans les images... Les liens fonctionnent pourtant! Je suis paumée et je n'ai plus aucune idée de quoi changer pour que ca marche... Si t'as 1mn j adorerais ton aide!!

    Sinon merci pour le tuto, c est super clair, ms je suis une vraie chevre......[Attend]

    Posté par Lennie, 17 avril 2009 à 23:15
  • Je suis allé fair un tour sur ton blog Lennie, mais je n'ai pas vu ce que tu as fait pour tes catégories, pour l'instant ce sont les "standarts"
    ...

    Posté par Alérion, 20 avril 2009 à 19:20
  • hum hum

    bonjour, je viens de tester ce tuto sur un blog d'essai que j'ai créé et je rame... je rame... je rame... j'ai réussi à faire apparaître une image titre de catégorie sur la page" d'accueil, c'est un début ! mais tout s'est remis dans la même colonne : mon image, mon message et ma colonne de droite... ke pasa ? kesako ?
    merci d'avance

    Posté par rauschy, 07 mai 2009 à 09:34
  • parce que, rauschy,
    dans tes catégories,
    tu as mis <div class="sel"</div>
    il manque le >
    donc mets <div class="sel"[G]>[/G]</div>

    Posté par Alérion, 07 mai 2009 à 18:58
  • merci alerion !

    Posté par rauschy, 13 mai 2009 à 22:10
  • Bonjour je découvre votre blog grâce à tricotinette ...... merci pour vos explications , je commnce à améliorer mon blog grâce à vous !!!
    Alors j'ai une questions bêtes...j'ai cherché mais je n'ai pas trouvé.....peut on faire ce que vous expliquez ici en mode "normal" ?
    et pour les titres de blocs, peut on aussi mettre des images en mode normal ???
    [:s][:s][:s]

    Posté par celine57, 16 novembre 2009 à 06:39
  • Bonjoue celine,

    [Non] on ne peut le faire en "Normal" puique le côté modification du CSS et HTML est inaccessible...

    Posté par Alérion, 16 novembre 2009 à 07:19
  • merci !!
    bon quand je maitriserai tout ça j'essaierai de passe en mode avancé !!

    Posté par celine57, 16 novembre 2009 à 11:06
  • où dans la feuille de style

    j'ai choisi mes photos , je les ai dimensionnées et mis dans un message...j'en suis donc à l'étape de création de class mais j'aimerais savoir où insérer les codes dans la feuille de style générale (ou peut-être que cela n'a pas d'importance?)
    merci d'avance

    Posté par chocoladdict, 20 juillet 2010 à 11:32
  • Bonjour chocoladdict,
    tu le mets où tu veux, au début à la fin ou au milieu... là où tu veux ;)

    Posté par Alérion, 21 juillet 2010 à 07:16
  • merci j'espère que ça va marcher !

    Posté par chocoladdict, 22 juillet 2010 à 12:54
  • ça marche pas

    bonsoir,
    oh désespoir cela ne marche pas.
    Est-ce parce que j'ai mis en texte "dès que le vent soufflera" (accent sur une image)
    ou fallait-il renommer toutes mes catégories en c01....
    du coup j'essaie de repatouiller les feuilles CSS dans l'autre sens
    merci d'avance pour la réponse
    Choco

    Posté par chocoladdict, 03 août 2010 à 20:59
  • Bonjour chocoladdict,
    d'après ce que je viens de voir, tu a mis toutes les catégories en co1 etc.., il faut qu'ils correspondent à tes catégories, les CO c'est pour l'exemple ici. Pour les espaces tu peux les remplacer par un [Sur col='#CCF':]:.[/Sur] dans ton CSS.
    --Ainsi pour ta catégorie
    "[Sur col='#CCF':]:Chez elle comme chez moi[/Sur]"
    --ta class serait:
    "[Sur col='#CCF':]:Chez.elle.comme.chez.moi[/Sur]"
    et ainsi de suite pour toutes tes catégories ;)

    Posté par Alérion, 04 août 2010 à 08:26
  • faut-il écrire quand même catégorie 1(2,3...) en la suite du nom de la catégorie? car cela ne marche toujours pas

    Posté par chocoladdict, 05 août 2010 à 09:32
  • non, pas du tout chocoladdict, il faut juste définir "exactement" les class pour les catégories correspondantes.

    Posté par Alérion, 11 août 2010 à 08:07
  • ca marche

    Coucou,
    Je voulais signaler que ce tuto marche^^ et je remercie beaucoup son concepteur.

    Posté par taabena, 14 décembre 2010 à 21:38
  • mais a quoi ça sert de faire des catégories???? comment par exemple on fait pour mettre une image pour les liens si on s'occuppe des categories? dsl mais j'ai riiien compris :'(

    Posté par Miimiko, 03 mars 2011 à 18:31
  • Ca marche (presque)

    Salut Alérion !

    Tout d'abord, merci beaucoup pour ce tuto. Cependant, je dois faire une erreur à un moment.

    Mes catégories sont bien là (quand on passe le curseur de la souris dessus, on voit qu'il y a un élément) mais les images n'apparaissent pas...

    As-tu une idée de mon erreur ?

    Je peux t'envoyer une capture d'écran de mes codes si tu veux.

    Delphine.

    Posté par Delphine, 26 juin 2011 à 10:16
  • Ca marche !

    Ca y'est j'ai trouvé !

    Merci beaucoup !

    Posté par Delphine, 26 juin 2011 à 10:31
  • stp tu peu jetter un oeil sur ma boite a outil je pige pas pk ca marche pas

    j'ai rater quoi comme virgule !!!
    please

    Posté par Perséphone, 29 juillet 2007 à 17:08
  • j'ai pas trouvé où tu avais défini les class ni l'affectation sur yenapas...[Non]
    bon il est tard je jette un oeil demain si j'ai le temps, en attendant bizzzzzz et bonne nuité[Oui]

    Posté par Alérion, 29 juillet 2007 à 23:17

Poster un commentaire