Modification pour le style Aria [Archives]

Afficher la version complète : Modification pour le style Aria

BiOMECHANiK

05/05/2006, 18h55

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

Raphaël

05/05/2006, 19h02

Tu pourrai mettre la shoutbox directement modifiée stp ?! J'ai vB 3.5.4 ...

BiOMECHANiK

05/05/2006, 19h05

Tu pourrai mettre la shoutbox directement modifiée stp ?! J'ai vB 3.5.4 ...

Pourquoi pas mais il faut que je demande l'autorisation à l'auteur surement... A moins qu'une modification visuel ne soit pas vraiment considèrée comme illicite par Allan. Je vais attendre sa réponse avant ;)

Par contre j'en profite et je vous poste aussi une capture du TopXstats avec ces mêmes modifications

http://img262.imageshack.us/img262/7064/topxstatsaria9uc.th.jpg (http://img262.imageshack.us/my.php?image=topxstatsaria9uc.jpg)

Prochaine étape... Je m'attaque au template adv_portal_module_shell de Vbadvanced CMPS

BiOMECHANiK

05/05/2006, 20h48

Ca marche aussi avec le template module_shell de vBadvanced CMPS

Rom56

26/05/2006, 14h20

Ohhh !! trop bien :) j'utilise le théme aria en plus :) pourrait tu me donner ton msn ou prendre le mien afin de m'aider pour modifier le code du portail car c'est vraiment super le rendu qu'on peut voir sur les screens !

BiOMECHANiK

26/05/2006, 14h31

Pas de problème rom56, comme tu es modérateur peux-tu simplement changer le titre de ce topic en "modifications pour thème ARIA".

A ce moment là je vais faire de ce topic une centralisation de mes modifications pour ce thème.

Je te poste ça et prends mon MSN

Allan

26/05/2006, 15h12

Titre changer, merci du partage Biomechanik ;)

BiOMECHANiK

26/05/2006, 16h42

Merci Allan.

Bon et bien voilà comme promis voici le template adv_portal_module_shell (CMPS v2.1.0) modifié pour le thème ARIA.

Remplacer simplement le contenu du template par celui du fichier texte dans l'archive. Si vous n'avez pas les images qui s'affichent, pensez à les copier dans le repertoire 'images' du CMPS, généralement en racine du forum. (Attention : les images doivent être placées de cette façon, dans 'images/aria).

Rom56

26/05/2006, 17h12

ca marche impec :) super merci beaucoup !!! :) je pense qu'il serait intéressant que tu postes de la même façon ta modif pour la shoutbox et pour le topx ca m'intéresse et je suis sans doute pas le seul ! merci beaucoup super taff vraiment ca change mon forum :)

BiOMECHANiK

26/05/2006, 18h52

BiOMECHANiK

26/05/2006, 19h02

Et voici pour ceux qui n'aurait pas pigé grand chose à mon 1er post :D, les modifications du template 'forumhome_vbshout' pour le hack vBShout2.0 (http://www.vbulletin.org/forum/showthread.php?threadid=93097) de Zero Tolerance (http://www.vbulletin.org/forum/member.php?u=48782)

Comme d'hab remplacez le contenu du template par celui de l'archive ^^

Rom56

26/05/2006, 19h26

Un grand merci !! super super super :) merci bio ! :)

BiOMECHANiK

26/05/2006, 19h38

Rom56

26/05/2006, 20h58

Ca fait quelques semaines maintenant que j'ai attaqué la personnalisation du hack Geek Article System sur ma board... Là par contre j'ai encore pas mal de boulot à effectuer.

Je vous poste ça dès que possible ;) lol ca aussi je l'ai je serais peut etre intéressé :) mais qu'est que ta modification effectue ?

BiOMECHANiK

26/05/2006, 21h05

Principalement le design avec ces Gradients de catégorie basiques... Mon but étant de l'intègrer parfaitement au style ARIA.

MikE

20/07/2006, 13h34

Super Merci!

Edit : j'ai essayé de faire le mien. J'ai créé une nouvelle template, appellée dans le FORUMHOME, jusque là pas de soucis, tout s'affiche bien, il y a juste un détail qui me tracasse. Quand on click sur la flèche qui permet de réduire/dévelloper, il ne se passe rien (à part le changement de l'image de la flèche vers le haut/bas).

Tout ce que j'ai fait c'est remplacer les "forumhome_vbshout" par le nom de la template créée.
Il y a quelque chose d'autre à faire?

BiOMECHANiK

20/07/2006, 14h33

<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_tontemplate')"><img id="collapseimg_forumhome_tontemplate" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_tontemplate}.gif" alt="" border="0" /></a></td>

La partie réduction/developpement se trouve sur cette ligne, tu as ces 3 éléments à modifier (en rouge dans le code).

MikE

20/07/2006, 15h57

Merci :yahoo:

MikE

30/07/2006, 11h25

http://img262.imageshack.us/img262/7064/topxstatsaria9uc.th.jpg (http://img262.imageshack.us/my.php?image=topxstatsaria9uc.jpg)

Remplacez le contenu du template 'topXstats_stats_bit' par celui du fichier de l'archive en pièce jointe.
Il faut changer

<img id="collapseimg_forumhome_vbshout"
Par

<img id="collapseimg_forumhome_statistics"
Non? Il me semble que je ne l'avais pas fait au début et qu'il y avait un bug :blush2:

Allan

30/07/2006, 16h41

pourquoi garde tu les encadrer blancs, sans cela, ca serais plus jolie, non ?

D3s3rT

01/08/2006, 15h40

et si je veux agrandir la shout je dois faire comment ?

Rom56

01/08/2006, 16h43

et si je veux agrandir la shout je dois faire comment ?

tu augmente le chiffre dans <table width=""> si il ya pas de chiffre tu met celui que tu veux, c'est à dire la taille de la shoutbox en pixels

D3s3rT

02/08/2006, 17h18

Marche pas tu peux etre plus précis stp :)

BiOMECHANiK

06/08/2006, 22h13

Essayes

<table width="80%" border="0" cellpadding="0" cellspacing="0">

il doit y avoir 2 autres lignes du même type à modifier.

rosebleu

27/08/2006, 11h03

moi j aimerait stp si possible le meme cadre sur mon welcom panel

merci d avance

Rysus

22/10/2006, 21h26

Très très joli taff Bio

Ca claque à mort

Eriatlan

30/10/2006, 23h03

il suffit juste d'aller dans ForumHome, de récupérer les 2 texte se trouvant entre Aria category bottom et Aria category top, le remplacer dans le template principal du mode que tu as ajouté, en supprimant ce qui se trouve entre les balise threads, et terminé par remplacer le onlick(je ne sais pas trop le nom) par celui que tu as avait dans ton template de départ, et en ajoutan ce que tu récupérer entre les commentaires Aria category bottom à la fin du script, le tour est joué, si tu veux que je te le fasse, je te le fais j'ai le template modifié ;) !

Sinon o@sis bravo à toi, tu as aidé beaucoup de gens mais j'aivais déjà trouvé :) !

airbesi

09/04/2007, 22h33

thanxxxx soooo

Kaleu

02/08/2007, 19h38

Je suis en train de bosser pour adapter la shoutbox de MtoR au style Aria ... mais il me manque un petit truc ! si qqun pouvait m'aider se serait vraiment cool :)

Voila sur les côtés de la shoutbox j'arrive pas à mettre une barre de ce style :

http://img175.imageshack.us/img175/7585/dsffsfsfsfafcx9.jpg

Parce que ça donne ça pour l'instant :

http://img520.imageshack.us/img520/60/aaaaaaaaarh6.jpg

voila merci d'avance ;)

David

02/12/2008, 23h46

Ombre

03/12/2008, 00h01

Bonsoir, effectivement on va regarder voir ce qu'on peu faire pour réparer le problème ;)