AVERTISSEMENT LOYAL
Si vous avez du mal avec le CSS, que vous vous évanouissez à la simple évocation d'un code source, et que vous ne savez pas comment avoir un arrière plan fixe, par exemple, allez sur le tuto du Site du Zér0, et revenez après. J'avoue sincèrement que j'aurai du mal à garder mon calme si vous ne comprenez rien du tout à ce que je vous raconte, mais que vous me demandez de l'aide. C'est pas méchant, comme remarque, vous êtes pas catalogués "nuls", mais sérieux, apprenez les bases avant de vous soucier des fioritures. 
Je suppose que vous avez tous remarqué que le template des blogs a changé lors du passage à la V3 de Bloxode.
Tous
les titres du menu de droite ont un class (qu'on peut trouver dans le code source - Ctrl+U ou bien Affichage > Source), ce qui permet de les remplacer par des images, de la façon suivante :
#menu h3.classdutitre {
background:url(imagedefond );
}
le class du titre est par exemple .aboutme, .madescription, etc.
---------
Ensuite,
les catégories sont toutes identifiées individuellement, donc vous pouvez leur associer une puce qui correspond au thème de la catégorie avec un
#menu li.rubXXXX {
background:url() no-repeat left;
height:hauteurdelapuce;
}
#menu li.rubXXXX span {
padding-left:largeur_de_la _puce_plus_quelques_pixels ;
}
(le deuxième paragraphe évite que le texte morde sur la puce
)
Plus intéressant, dans les catégories, les rubriques sous passe sont indentifiées par un .locked
Utilisez la même méthode qu'au dessus pour mettre une puce à toutes les catégories lockées (un cadenas, par exemple ^^)
-----------
La partie la plus rigolote à traiter reste la
liste des favoris :
Bidouillage 1
Pour faire une liste de favoris sous forme de mosaïque de miniatures de, par exemple, 40*40px (regardez sur mon blog pour vous faire une idée ^^- mais non c'est pas de la pub, c'est un exemple
), il suffit de faire ceci :
li.favblox {
height:40px;
width:40px;
margin:2px;
float:left;
}
(ça permet d'avoir des éléments de liste de la taille des miniatures, et en flottants. Le margin est là pour séparer les miniatures - j'aime pas quand c'est collé)
li.favblox a {
display:block;
height:40px;
width:40px;
}
(ça, ça permet d'avoir des miniatures cliquables sur l'ensemble de leur surface. Pour ceux que ça intéresse, le display:block permet de spécifier la hauteur et la largeur du lien, alors qu'à la base il s'agit d'une balise de type inline ^^)
li.favblox span { visibility:hidden; }
(ça, ça évite d'avoir le texte du lien en visible
)
h3.cpth3 {
clear:both;
}
(et ça, ça évite que la liste de liens en flottants bouffe sur le reste du menu. Certains peuvent avoir autre chose juste en dessous de leur liste de liens, de la pub, par exemple. Il suffit de mettre le class du titre de pub à la place du .cpth3 pour adapter
)
A ce stade là de la manip, si vous regardez votre blog, vous verrez rien du tout du côté des favs ^^
Mais passez votre souris sur la zone, vous verrez qu'il y a des liens.
Maintenant, la partie la plus saoulante commence : l'attribution des miniatures ^^
En fait, c'est simple. Vous prenez une image par favori, vous la réduisez en 40*40px, vous l'hébergez sur le oueb.
Ensuite, vous plongez le nez dans le code source de votre blog, vous trouvez la liste de liens, qui se présente sous la forme d'une colonne de trucs comme ça
<li class="
fav7183 favblox"><a href="urlcensuréeàcausedu filtreantipub" title="Laei"><span>Laei< /span></a></li>
Vous récupérez la partie en gras, en ensuite, vous tapez
/*Laei*/
li.fav7183 {
background:url(miniature_d e_laei);
}
dans votre CSS.
Bien sûr, vous adaptez le numéro et le commentaire, hein XD
Je vous suggère vivement de mettre en commentaire le nom du favori, parce que
1- sinon on se perd très vite quand on veut changer la miniature XD
2- si un jour vous vous fachez avec ce favori, ça sera plus facile de le supprimer de votre CSS ^^ (une bonne feuille de style est une feuille de style claire, et pas encombrée ^^)
Et une fois que vous avez fini tout ça, vous allez voir devant vos yeux étonnés une mosaïque de jolies miniatures à la place de la liste de noms ^^
Bien sûr, vous pouvez faire une liste de miniatures très hautes et étroites, ou bien très fines et très longues, ça pourrait rendre des effets sympa ^^
Adaptez le margin si vous rencontrez des problèmes de centrage, notamment
Bidouillage 2 (version mucca, voir sur son blog pour un exemple ^^)
Si vous avez tendance à oublier les blogs associés à chaque miniature, cette méthode est pour vous !
En effet, là, les liens se présentent sous la forme d'une colonne de miniatures (de 30*30px cette fois), avec le nom à côté, et l'initiale du nom en couleur.
Cette fois, il va falloir taper ça (ou le copier coller, si vous êtes flemmards ^^) :
ul.favliste li {
height:30px;
margin-top:1px;
}
(ben oui, 30px de hauteur pour voir la miniature en entier, et 1px de margin passke c'est moche quand c'est collé ^^)
ul.favliste li a {
display:block;
height:30px;
padding-left:30px;
}
(toujours pareil, évitons que le texte morde sur la miniature ^^)
(au passage, on met un padding et pas un margin passke comme ça, la miniature est cliquable
)
(Vous pouvez bien sûr ajouter un padding-top pour centrer verticalement votre texte, mais c'est une autre histoire ^^)
ul.favliste li a:first-letter {
color:#rosebonbon;
ça, ça sert à mettre la première lettre en rose bonbon ^^
Ben quoi, vous aimez pas le rose bonbon ?
Et puis après, pour attribuer les miniatures, on fait comme pour les rubriques et la première méthode pour les favs afin de récupérer le class de chaque fav, et un petit
ul.favliste li.favXXXXXX {
background:url(miniature) left no-repeat;
}
suffit ^^ (on n'omettra point le "left no-repeat", sinon ça peut rendre un effet très laid ^^
Bon, évidemment, on peut faire des variations sur le thème "une miniature à droite, une à gauche", mais le principe reste le même
-------------
Voilà voilà, bien évidemment je mets ça sur le forum juste pour dire que c'est moi qui ai eu l'idée en premier, et je vous interdis formellement de mettre ces tips en pratique, de demander de l'aide sur ce topic si vous avez le moindre problème avec, et de regarder ma CSS si vous comprenez pas pourquoi chez vous ça marche pas alors que chez moi si ^^
(ironie, j'précise, vous faites ce que vous voulez de mes bidouillages, même les utiliser sans me remercier ^^)
(En revanche, pensez à remercier dob pour son merveilleux/extraordinaire /époustouflant/miraculeux/ génial template, qui permet toutes ces combines affreuses ^^)
EDIT (important à lire ^^)
1- merci de me poser vos questions sur ces bouts de code sur ce topic, passke d'une je suis une grosse flemmarde et j'aime bien ne pas avoir à répéter 36 fois la même chose en MI ^^
2- quand je donne une méthode, faut mettre
tous les bouts de code de cette méthode dans le CSS, et pas que le premier fragment
Et bien sûr, comme pour n'importe quel bout de code CSS, vous le mettez
absolument où vous voulez dans la feuille de style ^^
Essayez juste de prendre en compte le fait que les feuilles de styles sont lues de haut en bas par le navigateur, donc essayez d'aller du plus général au plus particulier
(Je précise que j'ai donné mes bouts de code dans l'ordre dans lequel ils marchent chez moi, donc bon ^^)
Mettez les dans un endroit "logique", par exemple, pour les favoris, mettez le dans la partie "mise en forme du menu de droite" ^^ D'un strict point de vue de rendu, ça changera rien si vous les mettez tout à la fin, mais ça sera plus pratique pour vous retrouver dans la feuille
3-
EVIDEMMENT QUE VOUS POUVEZ REGARDER MA FEUILLE DE STYLE ! (oui, c'est mis en majuscules et en gras, mais comme ça y'a plus de chance que vous le lisiez, et donc moins de chance que vous me posiez la question ^^)
EDIT 2
JE NE RÉPONDRAI DORÉNAVANT PLUS AUX MESSAGES INTERNES À PROPOS DE CE TOPIC. MERCI DE NE PAS INONDER MA BOITE.
(Message édité le 28-08-2006 à 14h25 par missrayure)
(Message édité le 28-08-2006 à 14h30 par missrayure)
Actualité
Cinéma
Photos
Fonds d'écran
Vidéos
3B
Poèmes
Histoires
Séries TV
Musique
Sondages
Citations
Blagues
Jeux
Blogs
t'Chat
Forums
Aide
Favoris
Rss
