PDA

Afficher la version complète : Options de nouveau message Citations arrondies



Sofia
28/05/2009, 11h48
Cette modification vous permettra d'avoir des citations avec des coins arrondies. Eh oui. :p

-- Ceci fonctionne sur tous les navigateurs. --

Veuillez bien lire l'installation.






http://www.picdo.net/Fichiers/0e1d31c3824d0ebe5ed731cc396e55/pop.png




Conception

Auteur du Mod / Author Of Mod : Sofia (http://www.vbulletin.org/forum/member.php?u=168836)
Lien / Link : Better Quotes - Round Quotes (http://www.vbulletin.org/forum/showthread.php?t=214643)
Version vBulletin Requise / Version vBulletin Required :vB 3.8.x

Testé / Tested: oui



Copyright © 2009 vBulletin-Ressources.com / Copyright © 2009 vBulletin-Ressources.com


Installation


Installation

0. PSD

Vous devez modifier les fichiers PSD fournis ci-dessous avec PhotoShop. Il y a seulement deux images utilisées pour 4 coins arrondis, donc 2 PSD à modifier.
Les images de coins arrondis sont un peu complexes. C'est pourquoi j'ai colorié la zone à modifier en Rouge. Remplacez donc la zone en rouge dans les deux fichiers PSD par la couleur de fond de vos messages. Ne touchez pas aux zones grise et blanche.

Comment modifier l'image sous photoshop ?




Ouvrez le PSD avec PhotoShop.
Agrandissez l'image à 3200%
Entrez le code couleur de votre arrière-plan de la classe CSS alt1 dans le premier plan
Sélectionnez le calque avec les zones rouges (Shift + Click sur le calque)
Remplissez la zone sélectionnée avec cette couleur (clique droit sur la zone >> Remplir >> Couleur de premier plan)



Comment trouvez la couleur de fond de ses messages ?

ACP >> Styles & Templates >> Gérer les styles (Gestionnaire) >> Choisir un style >> Toutes les options de styles (Go) >> Trouvez la classe "CSS alt1" Première COuleur Alternative. Il s'agit alors du code couleur de l'arrière-plan (Background).

Si vous n'y arrivez pas, je ne pourrais pas le faire pour vous, par manque de temps. Cependant, un membre de l'équipe (Allan ou Ombre) pourra peut-être le faire, ou un autre membre s'il est sympa. :d



1. Upload

Uploadez les images dans le dossier "images/misc"


2. CSS

ACP >> Styles & Templates >> Gérer les styles (Gestionnaire) >> Choisissez un style >> Toutes les options de styles (Go) >> Vers le bas : Définitions des CSS supplémentaires, dans la seconde grande case :

Entrez :


.quote_body {
padding: 3px;
background-color: #F8F8F8;
color: #444;
}
.quote_global-quote { background: #FAFAFA url(images/misc/q_quote.png) top right no-repeat; }
.quote_global {
background-color: #FAFAFA;
margin: 3px 20px 3px 20px;
}

.quote_head, .quote_head div, .quote_head span, .quote_foot, .quote_foot div, .quote-foot span {
margin: 0;
padding: 0;
overflow: hidden;
line-height: 1px;
font-size: 1px;
height: 5px;
}
.quote_head, .quote_head div {
background: url(images/misc/bg_quote1.gif) top right no-repeat;
}
.quote_foot, .quote_foot div {
background: url(images/misc/bg_quote2.gif) top right no-repeat;
}
.quote_head div, .quote_foot div {
background-position: 0 -5px;
height: 5px;
padding: 0 5px;
}
.quote_head span {
display: block;
border-top: solid 1px #CCC;
height: 4px;
}
.quote_foot span {
display: block;
border-bottom: solid 1px #CCC;
height: 4px;
}
.quote_name, .quote_body {
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
padding: 4px;
}

Ne modifiez pas ces CSS. Chaque paramètre définit une position précise de la citation.




3. Template


Dans le template bbcode_quote,


Remplacez tout votre code par:



<table class="quote_global quote_global-quote" cellspacing="0">
<tr>
<td class="quote_head"><div><span></span></div></td>
</tr>
<tr>
<td class="quote_name">
<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>
<else />
<div class="smallfont">$vbphrase[quote]:</div>
</if>
</td>
</tr>
<tr>
<td class="quote_body">
$message
</td>
</tr>
<tr>
<td class="quote_foot"><div><span></span></div></td>
</tr>
</table>La largeur de la boite de citation s'adapte à la taille du message. Donc si le message est petit, la boite de citation sera petite.

Si vous souhaitez une boite uniforme et prenant toute la largeur du message, faites ceci :

Dans le template bbcode_quote, à la place de mettre cela (au début) :



<table class="quote_global quote_global-quote" cellspacing="0">

Remplacez par cela :


<table class="quote_global quote_global-quote" width="95%" cellspacing="0">




Ne mettez pas une largeur de 100%, la boite déformerait la mise en forme de votre forum !

Allan
28/05/2009, 11h49
Très beau résultat, bravo et merci du partage ma poule ;)

Simon
28/05/2009, 11h58
Merci pour le partage :)

Sofia
28/05/2009, 12h22
Avec plaisir ;)

ichiwow
28/05/2009, 16h42
Merci pour le partage , bon boulot :)

Ombre
28/05/2009, 17h59
Bonsoir, merci pour le partage :)

mistera
29/05/2009, 12h19
merci beaucoup, très sympa cette amélioration !

Agent Bauer 77
01/06/2009, 23h10
Bonsoir, et merci pour le hack !

6eO
14/12/2009, 12h28
génial j'adore !
en revanche, que faut-il modifier pour avoir le "<" en plus comme sur le fofo ?

Ombre
14/12/2009, 23h24
Bonsoir, je n'ai pas trop compris ta question.

6eO
17/12/2009, 20h23
Bonsoir, je n'ai pas trop compris ta question.

en fait je pensais que c'était les mêmes citations avec le "<" à gauche qui fait un effet bulle comme sur cette citation ;)

Emyn
15/03/2010, 23h17
merci :d2 "meziena" !!