Tag Code-PHP-HTML-Citation Plus Beau !

[The Fanopsis]

BBCodes Citation-Code-HTML-PHP
Temps : 2 Minutes

Difficulté: Facile !

Ça Change Quoi ? : Cette modification va rendre les Tag BBcode de PHP, HTML, Code and Quote plus jolie a voir :)



NB: Vous Pouvez L'utilité Aussi pour vB3.6.x ou même vB3.5.x


Dérigez Vous Comme Suivant :

Styles & Templates --> Gestionnaire de styles --> [Style Souhaité] --> CSS Principale --> Définitions des CSS supplémentaires



Ajoutez :





/* ***** Nouveau Style <- Code -> By The Fanopsis ***** */
.bbccode{
background: #FFF;
border: 1px solid #FFCC66;
border-top: 4px solid #FFCC66;
padding: 5px;
color: #996600;
font-size: 12px;
}

.bbccodetitle{
font-weight: bold;
font-size: 10px;
border: 0px;
border-bottom: 1px dashed #CC6600;
color: #CC6600;
padding-bottom: 3px;
margin-bottom: 5px;
}
/* ***** Nouveau Style <- HTML -> By The Fanopsis ***** */
.bbchtml{
background: #FFF;
border: 1px solid #c3ffa8;
border-top: 4px solid #c3ffa8;
padding: 5px;
color: #7fa66e;
font-size: 12px;
}

.bbchtmltitle{
font-weight: bold;
font-size: 10px;
border: 0px;
border-bottom: 1px dashed #82cc00;
color: #82cc00;
padding-bottom: 3px;
margin-bottom: 5px;
}
/* ***** Nouveau Style <- PHP -> By The Fanopsis ***** */
.bbcphp{
background: #FFF;
border: 1px solid #ffa8a8;
border-top: 4px solid #ffa8a8;
padding: 5px;
color: #990000;
font-size: 12px;
}

.bbcphptitle{
font-weight: bold;
font-size: 10px;
border: 0px;
border-bottom: 1px dashed #cc0000;
color: #cc0000;
padding-bottom: 3px;
margin-bottom: 5px;
}

/* ***** Nouveau Style <- Citation -> By The Fanopsis ***** */
.bbcquote{
background: #FFF;
border: 1px solid #C2CFDF;
border-top: 4px solid #C2CFDF;
color: #333366;
padding: 5px;
font-size: 9px;
}

.bbcquotetitle{
font-weight: bold;
font-size: 10px;
border: 0px;
border-bottom: 1px dashed #003366;
color: #003366;
padding-bottom: 3px;
margin-bottom: 5px;
}

Maintenant Dérigez Vous dans :



Styles & Templates --> Gestionnaire de styles --> [Style Souhaité] --> Modifié les Templates --> Templates Mises en forme des balises BB

Dans La Template < bbcode_code> :

Remplacez tous par :

<div class="bbccode">
<div class="bbccodetitle">$vbphrase[code]:</div>
<pre style="margin:0px; padding:$stylevar[cellpadding]px; width:$stylevar[codeblockwidth]; overflow:auto"><div dir="ltr">$code</div></pre>
</div>
<br />Mnt dans La Template < bbcode_html> :

Remplacez tous par :

<div class="bbchtml">
<div class="bbchtmltitle">$vbphrase[html_code]:</div>
<pre style="margin:0px; padding:$stylevar[cellpadding]px; width:$stylevar[codeblockwidth]; overflow:auto"><div dir="ltr">$code</div></pre>
</div>
<br />Mnt dans La Template < bbcode_php> :

Remplacez tous par :

<div class="bbcphp">
<div class="bbcphptitle">$vbphrase[php_code]:</div>
<pre style="margin:0px; padding:$stylevar[cellpadding]px; width:$stylevar[codeblockwidth]; overflow:auto"><div dir="ltr">
<code style="white-space:nowrap">
<!-- php buffer start -->$code<!-- php buffer end -->
</code>
</div></pre>
</div>
<br />Mnt dans La Template < bbcode_quote> :

Remplacez tous par :

<div class="bbcquote">
<if condition="$show['username']">
<div class="bbcquotetitle">$vbphrase[quote]: <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></div>
<div>$message</div>
<else />
<div class="bbcquotetitle">$vbphrase[quote]:</div>
<div>$message</div>
</if>
</div>
<br />Quelque Screens dans les pieces Jointes
Et Voila! c'est terminé !:)



Enjoy !

[mickmimi]

Bonjour...

C'est vrai que c'est pas mal....a essayer


Merci à toi

[The Fanopsis]

et en plus c'est facile de modifier les couleur de cette façon :)

[Allan]

Merci de ce hack, je le trouve bien sympa :)

[The Fanopsis]

Merci Allan c'est un grand plaisir que vous le ditent :)

[Ombre]

Merci pour le partage, ça va plaire a certain j'en suis sure ;)

[The Fanopsis]

Merci Ombre :)

[stradfred]

Merci The Predator mais dit ou tu as trouvé la source (http://www.vbulletin.org/forum/showthread.php?t=154444&highlight=bbcode+color).

[The Fanopsis]

souvient toi bien que je suis pas mebre de vb.org et que j'ai pas une licence pour voir les code de vb.org
j'ai trouvé sur des site et j'ai essayé de faire le meme code !
je dit pas que c'est moi qui as eu l'idée de faire ceci mais j'ai pas copié sur vb.org !

[Sebasti1]

Merci ! Pas mal du tout ;)

[pichou]

Vraiment Superbe Merci Beaucoup Ca Fait Super Beau Sur Mon Forum Encore Merci

[SynthaxError]

Merci pour le partage

[Bandit59]

J'ai voulu installer ton code et voilà ce qui se passe :

- Alerte de securité -
LE systéme de securité du Forum vient de detecter une defaillance
Le Code Javascript utilisé Constitue un danger pour ce forum,
et concidéré comme une attaque.

Le Script utilisé vient d'etre bloqué.


Si vous voyez Ce message lors de l'installation d'un hack ou une modification ou
Si vous executez une activité normale sur ce site
Veuillez contacter L'administrateur pour pouvoir regler ce probléme.

CBACK CrackerTracker

[sony]

il est indiqué vB3.6.x ou même vB3.5.x, tu le met sous vB 3.7.1 c'est surement le problème

[Ombre]

Sony, ce mod est prévu pour 3.7.x ainsi que 3.6.x et 3.5.x ;)

[The Fanopsis]

oui ce code marche nickel avec 3.5 3.6 et bien avec 3.7 je l'utilise sur mon forum depuis tjr aucun probleme detécté !

[kevin2008]

bonjour, pour bandit59 le hack CBACK CrackerTracker ne fonctionne pas bien et pose des problémes à partir de la version 3.7.0, essaie de le désactiver et tout rentrera dans l'ordre, j'ai eu ce probléme aussi.

salutations

[danny]

fonctionne t'il pour la versio n 3.7.1 PL1

[Ombre]

Bonjour,

Il à était prévus a la base pour vb 3.7.x donc normalement oui, prend un peu le temps de lire l'énoncé ça peu servir comme dans ce cas :)

[pichou]

Merci pour se superbe boulot.
Mais comment fait-on pour réduire ça:


http://img93.imageshack.us/img93/3977/sanstitrexa1.jpg

Merci d'avance

[Ombre]

Bonsoir, tu as une solution assez simple en modifient les CSS je te donne un exemple sur le BBcode_code, à la place de ça:
.bbccode{
background: #FFF;
border: 1px solid #FFCC66;
border-top: 4px solid #FFCC66;
padding: 5px;
color: #996600;
font-size: 12px;
}Essaye ça:
/* ***** Nouveau Style <- Code -> By The Fanopsis ***** */
.bbccode{
width: 50%;
min-width: 500px;
background: #FFF;
border: 1px solid #FFCC66;
border-top: 4px solid #FFCC66;
padding: 5px;
color: #996600;
font-size: 12px;
}j'ai ajouter une taille en largeur avec une moyenne de 50% de la largeur du topic, et un minimum pour la largeur de façon à ne pas faire dépasser le texte contenus du décors, à toi de l'adapter selon tes besoin, modifies les valeur width et min-width ;)

Par contre je me rend compte d'une chose avec cette modification, il y a plus de barre de scrolle pour les long codes?

[pichou]

Merci Ombre super top ça a marcher pour BBcode Mais j'ai essayer pour les autre et la un souci comme tu dit il manque la barre de scrolle pour les long codes PHP HTML
Si ta une idée dout ça peut venir je tans remercie

[Ombre]

Oui j'ai vu d'où ça viens, mais le soucis c'est qu'il faudrait adapté cette modification avec le système d'origine.

Je vais essayer de voir cela dés que j'ai le temps en espèrent ne pas l'oublier :)

Je t'ai donner comme exemple le BBcode_code, si tu veux cette meme modification sur les autres BBcode de codage il te faut modifier de la même façon les autres CSS.

[pichou]

Oui Ombre c'est fait pour les autres code mais le souci c'est pas de la barre de scrolle mais que celle de bas en haut.
et ou on change la couleur de l'écriture du texte tout changer et pas réussi pas trouver quoi.
Merci pour ton aide

[Ombre]

Dans tes CSS modifies le code couleur hexa de cette class: color: #996600;

[pichou]

Merci l'ami
en espèrent que tu trouve pour le scrolle je cherche aussi

[Ombre]

Je viens de modifier le code, essaye ça:

place ça dans le template bbcode_code:
<div class="bbccode">
<div class="bbccodetitle">$vbphrase[code]:</div>
<pre style="margin:0px; padding:2px; width:500px; height: {$blockheight}px; overflow:auto;"><div dir="ltr">$code</div></pre>
</div>
<br />Et ça dans les class supplémentaires de ton style:
.bbccode{
width: 50%;
min-width: 500px;
background: #FFF;
border: 1px solid #FFCC66;
border-top: 4px solid #FFCC66;
padding: 5px;
color: #996600;
font-size: 12px;
}
Ce qui te donneras ça:

http://img266.imageshack.us/img266/1489/magicalsnap200810172244qi3.png

[Lo']

Merci Ombre pour cette contribution ;)

[pichou]

Merci l'ami ça fonctionne super bien tes un chef encore merci pour tout;)