BBCode à la Invision

[Simon]

Cette modification permet d'afficher les codes PHP et les citations de la même façon qu'avec les forums iPB.
Elle à été réalisé à la demande de Netsurfer

Pour les deux


Télécharger l'archive ci-jointe et décompresser son contenu dans le répertoire images/misc de vBulletin (le principal, pas celui de votre style).
Suivez les deux guides ci-dessous en fonction des BBCode souhaités.


Pour le BBCode PHP

Dans le gestionnaire de style de l'interface d'administration, éditer le CSS principal et ajouter à la fin dans le dernier tableau de la page:
/* Affichage améliorée de PHP inspirée de IPB - Téléchargé sur vBulletin-Ressources.com */
.bbphp1{
background: #FDDBCC url(images/misc/bbphp.gif) no-repeat right;
color: #000;
font-weight: bold;
margin: 0 auto 0 auto;
padding: 3px;
width: 98%;
}

.bbphp2{
background: #FAFCFE;
border: 1px dotted #000;
color: #465584;
font-family: Courier, Courier New, Verdana, Arial, Bitstream Vera Sans;
margin: 0 auto 0 auto;
padding: 2px;
width: 98%;
}
Dans le gestionnaire de style de l'interface d'administration toujours, éditer le template bbcode_php (groupe Mise en forme des BBCodes) et remplacer son contenu par:
<div style="margin:20px; margin-top:5px">
<div class="bbphp1">$vbphrase[php_code]:</div>
<div dir="ltr" class="bbphp2">
<code style="white-space:nowrap">
<!-- php buffer start -->$code<!-- php buffer end -->
</code>
</div>
</div>
Répétez les étapes 1 et 2 pour chacun de vos styles.
C'est tout !

Pour le BBCode Quote

Dans le gestionnaire de style de l'interface d'administration, éditer le CSS principal et ajouter à la fin dans le dernier tableau de la page:
/* Affichage améliorée de Quote inspirée de IPB - Téléchargé sur vBulletin-Ressources.com */
.bbquote1{
background: #E4EAF2 url(images/misc/bbquote.gif) no-repeat right;
border: 1px dotted #000;
border-bottom: 0;
border-left: 4px solid #5D84A9;
color: #000;
font-weight: bold;
font-size: 10px;
margin: 8px auto 0 auto;
padding: 3px;
}

.bbquote2{
background: #FAFCFE;
border: 1px dotted #000;
border-left: 4px solid #5D84A9;
border-top: 0;
color: #465584;
padding: 4px;
margin: 0 auto 8px auto;
}
Dans le gestionnaire de style de l'interface d'administration toujours, éditer le template bbcode_quote (groupe Mise en forme des BBCodes) et remplacer son contenu par:
<div class="bbquote1">$vbphrase[quote]
<if condition="$show['username']">:
<phrase 1="$username">$vbphrase[originally_posted_by_x]</phrase>
<if condition="$postid">
<a href="showthread.php?$session[sessionurl]p=$postid#post$postid" rel="nofollow">
<img class="inlineimg" src="$stylevar[imgdir_button]/viewpost.gif" border="0" alt="$vbphrase[view_post]" />
</a>
</if>
</if>
</div>
<div class="bbquote2">
<if condition="$show['username']">
<div style="font-style:italic">$message</div>
<else />
$message
</if>
</div>
Répétez les étapes 1 et 2 pour chacun de vos styles.
C'est tout !

Pour le BBCode HTML
Nécessite le BBCode PHP ci-dessus installé.


Dans le gestionnaire de style de l'interface d'administration, éditer le template bbcode_html (groupe Mise en forme des BBCodes) et remplacer son contenu par:
<div style="margin:20px; margin-top:5px">
<div class="bbphp1" style="margin-bottom:2px">$vbphrase[html_code]:</div>
<div class="bbphp2" dir="ltr"><pre>$code</pre></div>
</div>
Répétez la première étape pour chacun de vos styles.
C'est tout !

Pour le BBCode Code
Nécessite le BBCode PHP ci-dessus installé.


Dans le gestionnaire de style de l'interface d'administration, éditer le template bbcode_html (groupe Mise en forme des BBCodes) et remplacer son contenu par:
<div style="margin:20px; margin-top:5px">
<div class="bbphp1" style="margin-bottom:2px">$vbphrase[html_code]:</div>
<div class="bbphp2" dir="ltr"><pre>$code</pre></div>
</div>
Répétez la première étape pour chacun de vos styles.
C'est tout !

Capture d'écran et Archive

[Ombre]

Merci pour ce partage, mais il me semble que ce mode existe déjà sur vb.org :), a moins que je me trompe a force d'en voir :D

Par contre pourquoi ne pas réalisé toute la série de BBcode au lieu d'en faire qu'une partie?

Il y a ce hack qui me semble sympa: http://www.vbulletin.org/forum/showthread.php?t=120073&highlight=bbcode

[Netsurfer]

Je suis du même avis, il serait intéressant d'avoir la même chose pour le html et code pour un soucis de standardisation, mais c'est super comme modification.

J'avais vu des hacks moi aussi mais différents de celui-ci.

[Ombre]

Je viens de lire le topic ou tu as fait la demande, je pense que SD va te les faire, laisse lui le temps :)

Bon boulot, en tout cas.

[Simon]

Vœux exaucés :D

[Ombre]

Sur ton screen pour le html le code déborde a droite il me semble?

[Simon]

Oui c'était le problème que j'avais remarqué sur les forums IPB. Je l'ai corrigé en transformant <pre> en <div>.

[Ombre]

ok, par contre cela n'aura pas d'incidence dans la mise en page des codes? je sais que la balise PRE est différente d'une DIV, elle gère elle même les saut de ligne. Mais je ne l'utilise pas donc je ne pourrais pas confirmé :D

[Simon]

Aucun incident. En tout cas, je n'en ai eu aucun lors de mes tests :)

[Netsurfer]

Super. Merci beaucoup! :)

[Ombre]

Tout baigne alors :)

[Allan]

Encore du BBcode !!!!

Merci :p

[Simon]

Encore du BBcode !!!!

Merci :pOui, c'est la période. Il y a quelques semaines, les trad' de hacks pleuvaient, maintenant les BBCode et demain, mystère ;)