+- MyBB.support, le portail francophone de MyBB (http://mybb.fr)
+-- Forum : MyBB.fr (http://mybb.fr/forum-1.html)
+--- Forum : Tutoriels (http://mybb.fr/forum-19.html)
+--- Sujet : Un bonnet de Noël sur l'avatar (/thread-7474.html)
Un bonnet de Noël sur l'avatar - CrazyCat - 30-11-2015
Comme Noël approche, j'ai fait une petite modification pour mettre un bonnet de Noël sur tous les avatars des posteurs (dans la vue des fils).
C'est plutôt simple à faire, mais j'ai bien tâtonné pour trouver exactement quoi faire, alors je vous diffuse ce petit tuto ici.
template:
Il faut modifier le template postbit_avatar pour ajouter un span avec la classe helper.
Code :
<div class="author_avatar"><span class="helper"></span><a href="{$post['profilelink_plain']}"><img src="{$useravatar['image']}" alt="" {$useravatar['width_height']} /></a></div>Feuille de style:
J'ai créé (depuis l'interface MyBB) une css que j'ai appelée xmas.css. Elle fait une petite modification de author_avatar et la mise en page du span helper, en mode "classique" et en mode "normal":
Code :
div.author_avatar {
position: relative;
margin-top: 10px;
}
div.post.classic .helper {
right: 40px;
left: auto;
}
div.post .helper {
background: url("images/small_sh.png") no-repeat transparent;
display: block;
left: 35px;
right: auto;
top: -10px;
position: absolute;
z-index: 5;
width: 50px;
height: 55px;
}- Les valeurs (en px) des différents réglages right et left sont à ajuster en fonction de l'image que vous désirez afficher.
- Les valeurs de width et height sont celles de l'image.
Voici l'image que j'ai utilisée : [attachment=1586]
Pour le rendu, vous pouvez le voir sur http://ab-plugin.cc/Santa-hat-on-avatar-corners-or-whatever-you-want-t-22.html