30-11-2015, 18:15
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.
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":
Cette feuille de style doit obligatoirement être dans les dernières, pour ne pas être écrasée par les CSS normales de MyBB.
- 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
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