Barre Spéciale Facebook

[Ali]

Cette modification permet d'affiche une barre ressemblant à facebook qui s'adapte à votre style.
Remerciements et support


Ce Hack a été traduit en français pour vBulletin-Ressources avec l'autorisation explicite de son auteur. / This Hack was translated into French for vBulletin-Ressources with the explicit authorization of its author.



vBulletin-Ressources et son équipe offrira du support vis à vis des hacks traduits, bien sûr, dans la mesure du possible de chacun, autant en terme de temps que de connaissances/ vBulletin-Ressources and its team will offer support for the translated hacks, of course, as far as possible for everyone, as much in term of time that knowledge.



vBulletin-Ressources remercie l'auteur du hack pour avoir fourni son autorisation. / vBulletin-Ressources thanks the author for the hack to have provided its authorization.


Conception


Auteur du Hack / Author Of Hack : BlackThorn (http://www.vbulletin.org/forum/member.php?u=344957)
Source / Link of Thread : BT - Spécial Facebook userbar! (http://www.vbulletin.org/forum/showthread.php?t=239833)
Version du hack / Hack version : 1.00
Version vBulletin Requise / Version vBulletin Required : vB 4.x
Testé / Tested : oui sur 4.0 beta 3

Traducteur / Translator : Ali



Copyright © 2006-2010 vBulletin-Ressources.com - Tous droits réservés Uniquement pour nos traductions/ Copyright © 2006-2010 vBulletin-Ressources.com - All Rights Reserved Only For Ours Translations


Installation


Aller dans l'Admincp ==> Modules & Produits ==> Télécharger et importer ==> Importer le fichier XML des modules (importer le modules dans l'archive)


Dans la template Footer, chercher :


{vb:raw ad_location.ad_footer_end}
</div>et rajouter tout le contenue du fichier 'bt_fcbar_fr.txt' en dessous

Ensuite :

Aller dans la template vbulletin.css, chercher :


.clear {
clear: both;
} et rajouté en dessous ceci :


#bt_bottom {
position: fixed;
bottom: 0px;
left: 90px;
right: 90px;
}
#bt_bottom .blockhead {
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
Merci à Ombre et Simon pour le corrigé !


Démonstration/Captures

[Allan]

Bravo et merci pour ta première traduction sur vBr :)

[jasoncounter]

Merci beaucoup sa peut etre sympa ^^

[Simon]

Merci pour la traduction :)

[Ombre]

Bonjour, merci pour cette traduction, un bon début :)

Par contre je ne comprend pas l'installation de ce hack, pourquoi l'auteur demande de mettre un class qui pointe vers une ID à un endroit spécifique de ce template CSS...

On attend les captures :)

[Ali]

Bonjour,
Voilà, screen rajouté :)

[Ombre]

On ne vois pas la capture, mais elles doivent être en PJ :)

[Ali]

Désole ^^
C'est fait j'ai rajouté un deuxième screen lorsqu'on est pas connecté ;)

[Ombre]

Sur la capture des non connecté c'est moi ou la barre ne touche pas le bas de l'écran?

[Simon]

Sur la capture des non connecté c'est moi ou la barre ne touche pas le bas de l'écran?Vive les dimensions en dur dans le CSS meoui

[Ombre]

Je viens de regarder le CSS, et le bottom est à 0 donc je vois pas trop ta remarque, quelque chose m'échappe je pense :)

[Ali]

Je viens de regarder le CSS, et le bottom est à 0 donc je vois pas trop ta remarque, quelque chose m'échappe je pense :)

Tu ne rêve pas ^^
Elle ne touche pas lorsqu'on est pas connecté ;)

[sunray]

Bonjour Ali,

Merci pour la trad ;)

[Simon]

Je viens de regarder le CSS, et le bottom est à 0 donc je vois pas trop ta remarque, quelque chose m'échappe je pense :)Dans le code à insérer:
#bt_bottom {
position: fixed;
bottom: 0px;
left: 90px;
right: 90px;
height: 45px;
background-image:;
border-left:0px solid #000000;
border-right:0px solid #000000;
}Il suffit de faire sauter la ligne pour que tout fonctionne (!) !

[Ombre]

J'avais pas vu qu'il y avais un code à placé dans le template footer, il serait bien de l'indiquer, la démarche d'installation doit-être complète dans le sujet ;)

Tu as raison Simon.

Voici le code corrigé:


<vb:if condition="$show['member']">
<div id="bt_bottom">
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<td class="blockhead" align="center" width="10%">
<vb:if condition="$bbuserinfo[avatarurl]"> <img src="{vb:raw bbuserinfo.avatarurl}" width="40px" height="40px" {vb:raw bbuserinfo.avatarsize} alt="{vb:raw bbuserinfo.username}" /></vb:if></td><td class="blockhead" align="left" width="60%">
<font color="white"><b>Bienvenue</b></font> <a href="member.php?{vb:raw session.sessionurl}u={vb:raw bbuserinfo.userid}">{vb:raw bbuserinfo.musername}</a>
<vb:if condition="$bbuserinfo[pmunread]"><blink><img class="inlineimg" src="images/statusicon/pm_new.png"> <a href="private.php" accesskey="2">{vb:raw bbuserinfo.pmunread} Nouveau MP! </a></blink></vb:if><br />
<a href="{vb:raw vboptions.bburl}/search.php?do=getnew">Nouveau posts</a> - <a href="usercp.php">Mon profil</a> - <a href="profile.php?do=editoptions">Options</a> - <a href="profile.php?do=editavatar">Changer l'avatar</a> - <a href="search.php?{vb:raw session.sessionurl}do=process&showposts=0&starteronly=1&exactname=1&searchuser={vb:raw bbuserinfo.username}" title="Voir tous mes sujets...">Mes sujets</a> - <a href="search.php">Recherche</a> - <a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></td><td class="blockhead" align="right" width="30%">
<small><vb:if condition="$bbuserinfo[pmunread]"><blink><a href="private.php" accesskey="2">{vb:raw bbuserinfo.pmunread} Nouveau MP!</a> <img class="inlineimg" src="images/statusicon/pm_new.png"></blink></vb:if> <a href="private.php">Voir mes MP(s)</a> <img class="inlineimg" src="images/statusicon/pm_old.png"> <br /> <a href="group.php">Groupes Social</a> - <a href="#" onclick="window.open('misc.php?{vb:raw session.sessionurl}do=buddylist&amp;focus=1','buddylis t','statusbar=no,menubar=no,toolbar=no,scrollbars =yes,resizable=yes,width=250,height=300'); return false;" title="Voir mes amis...">Mes amis</a></small> <img class="inlineimg" src="images/misc/users_online.png" height="11px" width="16px"></td></table></div><else /></vb:if>

<vb:if condition="$show['guest']">
<div id="bt_bottom">
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<td class="blockhead" align="center" width="10%">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<form action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
<fieldset id="logindetails" class="logindetails">
<div>
<div>Pseudo: <input type="text" class="textbox default-value" value="Pseudo" onblur="if(this.value=='') this.value='Username';" onfocus="if (this.value == 'Username') this.value = '';" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" onfocus="if (this.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'){this.value=''; this.style.color='black';}" onblur="if (this.value == '') {this.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; this.style.color='#828282';}"/> Mot de passe: <input type="password" class="textbox default-value" value="Password" onblur="if(this.value=='') this.value='Password';" onfocus="if (this.value == 'Password') this.value = '';" tabindex="101" name="vb_login_password" id="navbar_password" size="10" onfocus="this.style.color='black';" />
<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" /> <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" />{vb:rawphrase remember_me}</label> - Pas encore membre? <a href="register.php">Enregistrez-vous !</a></div></div></fieldset>

<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" /></form>
</td>
</table></div><else /></vb:if>Et la class corrigé, avec un ajout afin de supprimé la bordure, qui est horrible avec des coin arrondi vu que la bordure ne peu être arrondi car le mod utilise un tableau...



#bt_bottom {
position: fixed;
bottom: 0px;
left: 90px;
right: 90px;
}
#bt_bottom .blockhead {
border: none;
} Sinon on peu laisser la bordure et supprimé les arrondi dans le tableau:


#bt_bottom {
position: fixed;
bottom: 0px;
left: 90px;
right: 90px;
}
#bt_bottom .blockhead {
-moz-border-radius: 0;
-webkit-border-radius: 0;
} Le mieux serait d'utiliser une structure en DIV.

Par contre chez moi l'avatar n'apparait pas, malgré le module qui doit servir à ça non?

[Ali]

J'avais pas vu qu'il y avais un code à placé dans le template footer, il serait bien de l'indiquer, la démarche d'installation doit-être complète dans le sujet ;)

Tu as raison Simon.

Voici le code corrigé:


<vb:if condition="$show['member']">
<div id="bt_bottom">
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<td class="blockhead" align="center" width="10%">
<vb:if condition="$bbuserinfo[avatarurl]"> <img src="{vb:raw bbuserinfo.avatarurl}" width="40px" height="40px" {vb:raw bbuserinfo.avatarsize} alt="{vb:raw bbuserinfo.username}" /></vb:if></td><td class="blockhead" align="left" width="60%">
<font color="white"><b>Bienvenue</b></font> <a href="member.php?{vb:raw session.sessionurl}u={vb:raw bbuserinfo.userid}">{vb:raw bbuserinfo.musername}</a>
<vb:if condition="$bbuserinfo[pmunread]"><blink><img class="inlineimg" src="images/statusicon/pm_new.png"> <a href="private.php" accesskey="2">{vb:raw bbuserinfo.pmunread} Nouveau MP! </a></blink></vb:if><br />
<a href="{vb:raw vboptions.bburl}/search.php?do=getnew">Nouveau posts</a> - <a href="usercp.php">Mon profil</a> - <a href="profile.php?do=editoptions">Options</a> - <a href="profile.php?do=editavatar">Changer l'avatar</a> - <a href="search.php?{vb:raw session.sessionurl}do=process&showposts=0&starteronly=1&exactname=1&searchuser={vb:raw bbuserinfo.username}" title="Voir tous mes sujets...">Mes sujets</a> - <a href="search.php">Recherche</a> - <a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></td><td class="blockhead" align="right" width="30%">
<small><vb:if condition="$bbuserinfo[pmunread]"><blink><a href="private.php" accesskey="2">{vb:raw bbuserinfo.pmunread} Nouveau MP!</a> <img class="inlineimg" src="images/statusicon/pm_new.png"></blink></vb:if> <a href="private.php">Voir mes MP(s)</a> <img class="inlineimg" src="images/statusicon/pm_old.png"> <br /> <a href="group.php">Groupes Social</a> - <a href="#" onclick="window.open('misc.php?{vb:raw session.sessionurl}do=buddylist&amp;focus=1','buddylis t','statusbar=no,menubar=no,toolbar=no,scrollbars =yes,resizable=yes,width=250,height=300'); return false;" title="Voir mes amis...">Mes amis</a></small> <img class="inlineimg" src="images/misc/users_online.png" height="11px" width="16px"></td></table></div><else /></vb:if>

<vb:if condition="$show['guest']">
<div id="bt_bottom">
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<td class="blockhead" align="center" width="10%">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<form action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
<fieldset id="logindetails" class="logindetails">
<div>
<div>Pseudo: <input type="text" class="textbox default-value" value="Pseudo" onblur="if(this.value=='') this.value='Username';" onfocus="if (this.value == 'Username') this.value = '';" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" onfocus="if (this.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'){this.value=''; this.style.color='black';}" onblur="if (this.value == '') {this.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; this.style.color='#828282';}"/> Mot de passe: <input type="password" class="textbox default-value" value="Password" onblur="if(this.value=='') this.value='Password';" onfocus="if (this.value == 'Password') this.value = '';" tabindex="101" name="vb_login_password" id="navbar_password" size="10" onfocus="this.style.color='black';" />
<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" /> <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" />{vb:rawphrase remember_me}</label> - Pas encore membre? <a href="register.php">Enregistrez-vous !</a></div></div></fieldset>

<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" /></form>
</td>
</table></div><else /></vb:if>Et la class corrigé, avec un ajout afin de supprimé la bordure, qui est horrible avec des coin arrondi vu que la bordure ne peu être arrondi car le mod utilise un tableau...



#bt_bottom {
position: fixed;
bottom: 0px;
left: 90px;
right: 90px;
}
#bt_bottom .blockhead {
border: none;
} Sinon on peu laisser la bordure et supprimé les arrondi dans le tableau:


#bt_bottom {
position: fixed;
bottom: 0px;
left: 90px;
right: 90px;
}
#bt_bottom .blockhead {
-moz-border-radius: 0;
-webkit-border-radius: 0;
} Le mieux serait d'utiliser une structure en DIV.

Par contre chez moi l'avatar n'apparait pas, malgré le module qui doit servir à ça non?

L'avatar sera affiché seulement si tu as bien rajouter le module :)
Navbar ? Je comprend pas trop là lol

[Ombre]

J'ai ajouté le module et il est activé par défaut, mais rien du tout, mais ça peu provenir de mon forum test, c'ets pas un soucis, de quoi "Navbar"?

[Ombre]

Je viens de remarquer des erreurs je pense, groupes social >> Groupes sociaux et aussi Nouveau posts >> Nouveaux messages.

[Ali]

Merci Simon et Ombre, tout est corrigé dans le rar et sur le sujet :delicious:

[Billyboule]

Merci à toi ALi. :)

[REBEL]

salut a tous
moi mon soucie je ne trouve pas cet phrase

{vb:raw ad_location.ad_footer_end}
</div>
je fait quoi
merci

[Ombre]

Bonsoir, essaye de lancé une recherche générale sur ceci:
{vb:raw ad_location.ad_footer_end}

[REBEL]

salut ombre
sa ne fonctionne pas
merci

[Ombre]

Place ton bout de code tout à la fin du template footer, normalement ça devrait pas posé soucis, je suppose sans avoir tester ce mod que la barre est en position fixed bottom, donc l'emplacement du code dans ce template ne devrait pas interféré avec le fonctionnement de la barre.

[Neox]

Je vais essayer de coder une barre style facebook ou autres ( sans Bug )

[REBEL]

c'est bon j'ai suivi tes conseils ombre
mais j'ai un autre soucie
un fois mis il me cache le bas du forum
http://www.imagefacile.com/img/m17jo_capture.png

y a t'il une solution pour reglé sa pour voir le bas correctement
merci

[Ombre]

Oui, je te dirais comment ce soir à mon retour, rappel le moi si j'oublie.

[REBEL]

salut ombre
ok je te remercie
et bonne journee

[Emyn]

Salut merci mon frère pour le hack
SVP comment enlever définitivement le champ à gauche pour l'avatar ? car mon style est fluid (avec arrière plan noir = non compatible du tout)
Merci :)

[Ombre]

c'est bon j'ai suivi tes conseils ombre
mais j'ai un autre soucie
un fois mis il me cache le bas du forum
http://www.imagefacile.com/img/m17jo_capture.png

y a t'il une solution pour reglé sa pour voir le bas correctement
merci

Dans le template additional.css ajoute ceci tout en bas par exemple:


body {
margin-bottom: 40px;
}


Salut merci mon frère pour le hack
SVP comment enlever définitivement le champ à gauche pour l'avatar ? car mon style est fluid (avec arrière plan noir = non compatible du tout)
Merci :)

Pour retiré la partie de l'avatar dans le footer recherche et supprime ceci:


<td class="blockhead" align="center" width="10%">
<vb:if condition="$bbuserinfo[avatarurl]"> <img src="{vb:raw bbuserinfo.avatarurl}" width="40px" height="40px" {vb:raw bbuserinfo.avatarsize} alt="{vb:raw bbuserinfo.username}" /></vb:if></td>

Pour info ce mod est plutôt mal codé...

[Emyn]

merci Ombre
voila un autre bug
j'ai remarqué un ascenseur en bas du FF

http://img691.imageshack.us/img691/6868/sanstitreghz.png

[Ombre]

J'utilise FF et j'ai le style par défaut avec ce mod modifié comme toi, et rien de mon coté, il faudrait que je regarde directement sur ton forum pour voir ce qui produit cela.

[REBEL]

merci ombre
mais j'ai un autre soucie
j'ai mis se hack "Avatars des utilisateurs en ligne" de sunray http://www.vbulletin-ressources.com/forum/showthread.php?t=21326
qui fonctionne bien et depuis que je l'ai mis
je n'ai plus d'avatar dans ma barre facebook
donc que dois je faire pour que l'avatar revienne sans toucher a l'avatar des utilisateur en ligne
merci encore

[Ombre]

Je viens de test le mod et chez moi en local avec tout d'installer l'avatar n’apparait pas, sans que j'ai l'autre hack d'installer, donc difficile de jugé comme ça.

[Neox]

ce mod je l'ai tester plusieurs fois avec plusieurs Hacks et cette barre bugais souvent donc je pense qu'elle a mal été coder .