BiOMECHANiK
05/05/2006, 17h55
Bonjour à tous...
Cet après-midi il m'a pris l'envie de modifier quelques templates de mon forum, alors je me suis dit pourquoi pas vous en faire profiter.
Je vous explique un peu avant ce que j'ai fais, j'ai installé le hack vBShout 2.0 et le fameux TopXStats sur mon forum depuis un bon moment maintenant et dernièrement j'ai décidé de m'offrir le thème ARIA qui entre parenthèse est vraiment de toute beauté :delicious:
Par contre niveau design les 2 hacks précédents faisaient tâches au milieu... Donc je vais vous expliquer un peu comment j'ai modifié mes templates pour intègrer le tout dans le thème ARIA... Bien sûr c'est un exemple vous pourrez tout aussi bien réutiliser et adapter le code suivant pour n'importe quel thème vBulletin à condition de changer quelques variables.
C'est parti... J'ai edité le template "forumhome_vbshout"
La partie supérieur du tableau de la shoutbox était par défaut considerée comme une TCAT, vous savez le gradient bleu par défaut de vbulletin au dessus des catégories... Mon but était de modifier le code pour rendre le design identique à celui de ARIA
Ce code correspondait à la partie supérieure de la fenêtre de la Shoutbox
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" align="center">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_vbshout')"><img id="collapseimg_forumhome_vbshout" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_vbshout].gif" alt="" border="0" /></a>
<a href='$vboptions[bburl]/vbshout.php?{$session['sessionurl_q']}do=archive'>Shoutbox</a>
</td>
</tr>
</thead>
<tbody id="collapseobj_forumhome_vbshout" style="$vbcollapse[collapseobj_forumhome_vbshout]">
Je l'ai donc modifié de cette façon
<table border="0" cellpadding="0" cellspacing="0" width="$stylevar[tablewidth]" align="center">
<tr>
<td width="21" height="31" align="left" valign="top" style="background-image: url($stylevar[imgdir_misc]/top_bg.gif)"><img border="0" src="$stylevar[imgdir_misc]/top_left.gif" width="21" height="31" alt="" /></td>
<td height="31" align="left" valign="middle" style="background-image: url($stylevar[imgdir_misc]/top_bg.gif)"><a href="$vboptions[bburl]/vbshout.php?{$session['sessionurl_q']}do=archive" class="aria_category">Shoutbox</a></td>
<td width="19" align="left" valign="top"><img src="$stylevar[imgdir_misc]/top_end.gif" alt="" width="19" height="31" border="0" /></td>
<td width="60%" align="right" valign="top" style="background-image: url($stylevar[imgdir_misc]/top_center.gif)"><a style="float:$stylevar[right]; padding-top: 9px;" href="#top" onclick="return toggle_collapse('forumhome_vbshout')"><img id="collapseimg_forumhome_vbshout" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_vbshout}.gif" alt="" border="0" /></a></td>
<td width="14" height="31" align="right" valign="top"><img border="0" src="$stylevar[imgdir_misc]/top_right.gif" width="14" height="31" alt="" /></td>
</tr>
</table>
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tbody id="collapseobj_forumhome_vbshout" style="$vbcollapse[collapseobj_forumhome_vbshout]">
Résultat ? Un design bien plus complexe pour le haut du tableau de ma shoutbox
http://img20.imageshack.us/img20/8017/tcatshoutaria9rn.jpg
Ensuite je me suis occupé de la partie inférieure de la shoutbox, qui à l'origine était moche car ce n'etait en fait que le bas d'un tableau... La modification suivante ne m'a donc pas poser le moindre problème car c'etait un vulgaire '/table' qui cloturait la shoubox.
Juste avant ces 2 lignes
</form>
<br />
J'ai ajouté le code suivant
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="12" align="left" valign="top"><img src="$stylevar[imgdir_misc]/blc.gif" width="12" height="13" alt="" border="0" /></td>
<td width="100%" style="background-image:url($stylevar[imgdir_misc]/bottom.gif)"><img src="$stylevar[imgdir_misc]/clear.gif" width="100%" height="13" alt="" border="0" /></td>
<td width="12" align="right" valign="top"><img src="$stylevar[imgdir_misc]/brc.gif" width="12" height="13" alt="" border="0" /></td>
</tr>
</table>
Résultat
http://img410.imageshack.us/img410/9632/tcatshoutaria16hu.jpg
Et au final ma shoutbox etait completement intègrée au design du forum
http://img410.imageshack.us/img410/7097/shoutaria1ir.jpg
J'ai fais de même pour le TopXStats sans la moindre difficulté en adaptant ce code, je pense que vous pourrez vous en inspirer en crééant vos propres images et en modifiant quelques variables de ci de là...
Si vous êtes intéressé par la modification du TopXStats, faites le moi savoir, je me ferais un plaisir de vous macher le travail en vous balancant le code.
byby BiO
Cet après-midi il m'a pris l'envie de modifier quelques templates de mon forum, alors je me suis dit pourquoi pas vous en faire profiter.
Je vous explique un peu avant ce que j'ai fais, j'ai installé le hack vBShout 2.0 et le fameux TopXStats sur mon forum depuis un bon moment maintenant et dernièrement j'ai décidé de m'offrir le thème ARIA qui entre parenthèse est vraiment de toute beauté :delicious:
Par contre niveau design les 2 hacks précédents faisaient tâches au milieu... Donc je vais vous expliquer un peu comment j'ai modifié mes templates pour intègrer le tout dans le thème ARIA... Bien sûr c'est un exemple vous pourrez tout aussi bien réutiliser et adapter le code suivant pour n'importe quel thème vBulletin à condition de changer quelques variables.
C'est parti... J'ai edité le template "forumhome_vbshout"
La partie supérieur du tableau de la shoutbox était par défaut considerée comme une TCAT, vous savez le gradient bleu par défaut de vbulletin au dessus des catégories... Mon but était de modifier le code pour rendre le design identique à celui de ARIA
Ce code correspondait à la partie supérieure de la fenêtre de la Shoutbox
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" align="center">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_vbshout')"><img id="collapseimg_forumhome_vbshout" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_vbshout].gif" alt="" border="0" /></a>
<a href='$vboptions[bburl]/vbshout.php?{$session['sessionurl_q']}do=archive'>Shoutbox</a>
</td>
</tr>
</thead>
<tbody id="collapseobj_forumhome_vbshout" style="$vbcollapse[collapseobj_forumhome_vbshout]">
Je l'ai donc modifié de cette façon
<table border="0" cellpadding="0" cellspacing="0" width="$stylevar[tablewidth]" align="center">
<tr>
<td width="21" height="31" align="left" valign="top" style="background-image: url($stylevar[imgdir_misc]/top_bg.gif)"><img border="0" src="$stylevar[imgdir_misc]/top_left.gif" width="21" height="31" alt="" /></td>
<td height="31" align="left" valign="middle" style="background-image: url($stylevar[imgdir_misc]/top_bg.gif)"><a href="$vboptions[bburl]/vbshout.php?{$session['sessionurl_q']}do=archive" class="aria_category">Shoutbox</a></td>
<td width="19" align="left" valign="top"><img src="$stylevar[imgdir_misc]/top_end.gif" alt="" width="19" height="31" border="0" /></td>
<td width="60%" align="right" valign="top" style="background-image: url($stylevar[imgdir_misc]/top_center.gif)"><a style="float:$stylevar[right]; padding-top: 9px;" href="#top" onclick="return toggle_collapse('forumhome_vbshout')"><img id="collapseimg_forumhome_vbshout" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_vbshout}.gif" alt="" border="0" /></a></td>
<td width="14" height="31" align="right" valign="top"><img border="0" src="$stylevar[imgdir_misc]/top_right.gif" width="14" height="31" alt="" /></td>
</tr>
</table>
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tbody id="collapseobj_forumhome_vbshout" style="$vbcollapse[collapseobj_forumhome_vbshout]">
Résultat ? Un design bien plus complexe pour le haut du tableau de ma shoutbox
http://img20.imageshack.us/img20/8017/tcatshoutaria9rn.jpg
Ensuite je me suis occupé de la partie inférieure de la shoutbox, qui à l'origine était moche car ce n'etait en fait que le bas d'un tableau... La modification suivante ne m'a donc pas poser le moindre problème car c'etait un vulgaire '/table' qui cloturait la shoubox.
Juste avant ces 2 lignes
</form>
<br />
J'ai ajouté le code suivant
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="12" align="left" valign="top"><img src="$stylevar[imgdir_misc]/blc.gif" width="12" height="13" alt="" border="0" /></td>
<td width="100%" style="background-image:url($stylevar[imgdir_misc]/bottom.gif)"><img src="$stylevar[imgdir_misc]/clear.gif" width="100%" height="13" alt="" border="0" /></td>
<td width="12" align="right" valign="top"><img src="$stylevar[imgdir_misc]/brc.gif" width="12" height="13" alt="" border="0" /></td>
</tr>
</table>
Résultat
http://img410.imageshack.us/img410/9632/tcatshoutaria16hu.jpg
Et au final ma shoutbox etait completement intègrée au design du forum
http://img410.imageshack.us/img410/7097/shoutaria1ir.jpg
J'ai fais de même pour le TopXStats sans la moindre difficulté en adaptant ce code, je pense que vous pourrez vous en inspirer en crééant vos propres images et en modifiant quelques variables de ci de là...
Si vous êtes intéressé par la modification du TopXStats, faites le moi savoir, je me ferais un plaisir de vous macher le travail en vous balancant le code.
byby BiO