Déplacement du logo ( bannière) vB4

[Ombre]

Ce mod vous permet de déplacé le logo (bannière) de votre forum sous la navbar, et ainsi réduire la hauteur du header et de la navbar et de pouvoir profité d'une bannière.
Il permet aussi d'une façon original d'avoir une bannière à un endroit plutôt insolite, mais vous permet en particulier d'avoir la possibilité de pouvoir mettre toutes sorte d'images sans que cela dénature le header.
Afin de vous faire gagner du temps j'ai inclus les class CSS dans le code html.
Conception


Auteur du mod : Ombre
Version vBulletin Requise : vB 4.0.1
Testé: oui sur 4.0.1
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



Dans le template header recherchez ce bout de code:


<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>Et remplacez le par ceci:


<div style="height:20px">&nbsp;</div>Et enregistrez les modifications de ce template.


Dans le template navbar recherchez ce bout de code:



<!-- closing div for above_body -->Et en-dessous ajouté cela:


<div class="body_wrapper" style="padding:10px;">
<div style=" height:100px; background-color:#ffffff; text-align:center"><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}"><img src="{vb:stylevar imgdir_misc}/logo.png" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>
</div>
<br />Modifiez la valeur en rouge selon la hauteur du logo (bannière) utilisé, et modifiée la valeur en bleu en y mettant le nom et l'extension de votre logo (bannière), et pour changer la couleur de fond modifiez la valeur en orange.

Et enregistrez.


<fieldset id="logindetails" class="logindetails">
<div>
<div>
<input type="text" class="textbox default-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';}"/>
<input type="password" class="textbox default-value" tabindex="102" 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" />
</div>
</div>
</fieldset>
<div id="remember" class="remember">
<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>
</div>

Et remplacez ce bout de code par ceci:


<fieldset id="logindetails" class="logindetails">
<div>
<div>
<input type="text" class="textbox default-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';}"/>
<input type="password" class="textbox default-value" tabindex="102" name="vb_login_password" id="navbar_password" size="10" onfocus="this.style.color='black';" />
<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>
<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
</div>
</div>
</fieldset>



Astuces

Pour ceux qui désires avoir une bannière avec un fond extensible il vous suffit après avoir créer votre image qui va se répété sous le logo (bannière) d'utiliser plutôt ce bout de code dans votre navbar.


<div class="body_wrapper" style="padding:10px;">
<div style=" height:100px; background-image:url({vb:stylevar imgdir_misc}/logo_bk.png); text-align:center"><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}"><img src="{vb:stylevar imgdir_misc}/logo.png" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>
</div>
<br />Modifiez la valeur en rouge selon la hauteur du logo (bannière) utilisé, et modifiée la valeur en bleu en y mettant le nom et l'extension de votre logo (bannière), et enfin modifier la valeur en vert et y indiqué le nom et l'extension de votre images qui doit se répété.

Et enregistrez.

Pour ceux qui ne désirent pas centrer leurs logo (bannière) il suffit de supprimé dans le bout de code à ajouter cette partie:


text-align:centerCapture

Effectué avec un fond extensible dont je vous fournis le code dans la partie "Astuces":

[patrice]

Merci pour l'astuce Ombre, Marche nickel :)

[Allan]

Merci de l'astuce ;)

[o0amir0o]

Super mercii Ombre ^^

[Billyboule]

Bien vu, merci Ombre.

[thom]

merci ombre http://emoticon.gregland.net/emoticon/Content/Content_26.gif

[astros]

merci ombre je prefere celui la , mais la vache ta mi 20px , sa bloque la case pour toujours se loger ( se souvenir de moi ) , j ai mi 40px sur beaucoup de theme sa le fait , moi qui suis pas un as j ai galerer a trouver la solution hihi

[Simon]

merci ombre je prefere celui la , mais la vache ta mi 20px , sa bloque la case pour toujours se loger ( se souvenir de moi ) , j ai mi 40px sur beaucoup de theme sa le fait , moi qui suis pas un as j ai galerer a trouver la solution hihiBonjour, et en mettant 45px ? C'est la hauteur du logo d'origine.

[Ombre]

Merci de m'avoir signalé cela, j'avais oublié de tester le mode non connecté :D

Augmenté la hauteur n'est pas une bonne solution, car je trouve que avoir un espace aussi important pour si peu n'est pas utile et défavorise le gain de place, j'ai donc mis à jour le mod et appliqué un modification dessus qui me semble plus judicieuse :)

Mise à jour du sujet initiale ;)

http://www.vbulletin-ressources.com/forum/attachment.php?attachmentid=12611&d=1266865064

[Simon]

Ce ne serait pas plus esthétique d'inverser la bannière et la barre d'identification / liens ? Ou d'intégrer la barre avec la navbar ?

[Ombre]

Le but du mode et le déplacement de la bannière, et non pas une modification ou refonte du header :)

Et je trouve que coté esthétique cela ne dérange en rien enfin c'est une question de gout, mais il suffit de prendre exemple sur la refonte que j'ai fait il y à peu pour déplacé les infos de login, les mettre ailleurs comme dans la partie des boutons ne serait pas non plus judicieux car cela dépend des résolutions d'écrans et du nombre de bouton dans la navtab.

[astros]

merci ombre de ta modif , j aime beaucoup