Modifications diverses Barre "rose", comme : vBStyles.com [Archives]

Afficher la version complète : Modifications diverses Barre "rose", comme : vBStyles.com

oOo KARIM oOo

16/06/2008, 23h53

Description

Affiche une barre en dessous des liens de navigation, en rose, comme dans : http://www.vBStyles.com

Installation

1) Uploadez les fichiers contenus dans l'archive ci-joint.

2) Copiez ce code html en haut du template navbar :


<head>

<style type="text/css" id="css">

a:link, body_alink
{
color: #4D528C;
text-decoration: none;
}
a:visited, body_avisited
{
color: #4D528C;
text-decoration: none;
}
a:hover, a:active, body_ahover
{
color: #4D528C;
text-decoration: underline;
}
.page
{
background: #FFFFFF;
color: #4D528A;
}

.navbar
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

.nav1_border_out {
background-color: transparent;
border: 1px dotted #f2a0f9;
}
.nav1_border_in {
background-color: #ffdbf9;
border: 1px solid #FFFFFF;
padding: 4px;
}

.inlineimg {
vertical-align: middle;
}

.style1 {
color: #4D528C;
}

</style>

</head><body>

<div align="center">
<div class="page" style="width: 100%; text-align: left;">
<div style="padding: 0px 15px;" align="left">

<div class="nav1_border_out">
<div class="nav1_border_in">

<center> <table align="center" border="0" cellpadding="7" cellspacing="0" style="width: 91%">
<tbody><tr>
<td width="100%"><center><span class="navbar"><img src="images/misc/navbar/status_online.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<a href="index.php"><span class="style1">Accueil</span></a> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/folder.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1">Lien 2</span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/trackback.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1">Lien 3</span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/key.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1">Lien 4</span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/comments.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<a href="index.php">Forums</a> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/cog.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1">Lien 5</span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/markread.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1"><a href="showgroups.php">L'Équipe</a></span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/user_comment.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1"><a href="usercp.php">Espace membres</a></span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/userfield_edit.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<a href="sendmessage.php">Nous contacter</a></span></center></td>
</tr>
</tbody></table>
</center>

</div>
</div>

</div>
</div>
</div>

</body>

3) Personnalisez les liens de la barre. Ils se trouvent au milieu du code et correspondent à :

<center> <table align="center" border="0" cellpadding="7" cellspacing="0" style="width: 91%">
<tbody><tr>
<td width="100%"><center><span class="navbar"><img src="images/misc/navbar/status_online.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<a href="index.php"><span class="style1">Accueil</span></a> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/folder.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1">Lien 2</span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/trackback.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1">Lien 3</span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/key.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1">Lien 4</span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/comments.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<a href="index.php">Forums</a> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/cog.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1">Lien 5</span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/markread.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1"><a href="shwogroups.php">L'Équipe</a></span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/user_comment.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<span class="style1"><a href="usercp.php">Espace membres</a></span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/userfield_edit.gif" class="inlineimg" alt="" border="0" height="16" width="16">
<a href="sendmessage.php">Nous contacter</a></span></center></td>
</tr>
</tbody></table>
</center>4) Enregistrez.

5) Vous pouvez admirer la barre sur toutes vos pages du forum ;)

Screenshot :

Ombre

17/06/2008, 00h03

Merci pour le partage Karim :)

OlijO

17/06/2008, 07h49

Vraiment très bien, merci ^^

oOo KARIM oOo

23/06/2008, 00h26

Je prépare une v2 avec comme nouveautée : la mise en place de conditions (ex : si l'utilisateur est logué, afficher le lien : Espace membre, sinon afficher le lien : S'inscrire ... Si c'est un admin afficher : AdminCp ...)

kevin2008

11/08/2008, 20h04

Merci beaucoup mais une erreur s'est glissée.

<span class="style1"><a href="shwogroups.php">L'Équipe</a></span> <span style="color:

remplacer par :

<span class="style1"><a href="showgroups.php">L'Équipe</a></span> <span style="color:

salutations

Ombre

11/08/2008, 20h12

Merci pour l'info corrigée ;)

kevin2008

12/08/2008, 11h08

Et pour les débutants comme moi vous pouvez aussi ajouter dans le tuto si vous le voulez,

les codes des liens s'insérent de cette façons pour s'ouvrir dans une nouvelle fenétre.

Par exemple pour le lien2:

<span class="style1">Lien 2</span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/trackback.gif" class="inlineimg" alt="" border="0" height="16" width="16">

Remplacer comme ceci!

<span class="style1"><a href="http://www.vbulletin-ressources.com/forum/faq.php"> Faq du forum</a></span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/trackback.gif" class="inlineimg" alt="" border="0" height="16" width="16">

Soit pour personaliser:

<a href="http://www.vbulletin-ressources.com/forum/faq.php"> Faq du forum</a>

http= url de votre lien
faq= texte de votre lien dans la barre

A savoir que cette barre est visible même pour les membres non connectés donc attention au contenu que vous y metteriez.

Salutations

Ombre

12/08/2008, 18h51

Et pour les débutants comme moi vous pouvez aussi ajouter dans le tuto si vous le voulez,

les codes des liens s'insérent de cette façons pour s'ouvrir dans une nouvelle fenétre.

Par exemple pour le lien2:

<span class="style1">Lien 2</span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/trackback.gif" class="inlineimg" alt="" border="0" height="16" width="16">
Remplacer comme ceci!

<span class="style1"><a href="http://www.vbulletin-ressources.com/forum/faq.php"> Faq du forum</a></span> <span style="color: rgb(242, 160, 249);">|</span> <img src="images/misc/navbar/trackback.gif" class="inlineimg" alt="" border="0" height="16" width="16">
Soit pour personaliser:

<a href="http://www.vbulletin-ressources.com/forum/faq.php"> Faq du forum</a>http= url de votre lien
faq= texte de votre lien dans la barre

A savoir que cette barre est visible même pour les membres non connectés donc attention au contenu que vous y metteriez.

SalutationsBonsoir, j'ai pas trop compris tes explications, et de quel tuto parles tu? pour ce qui est de la visibilité des visiteur cela ce gere via des conditions, regarde ma signature :)

kevin2008

12/08/2008, 20h42

kevin2008

12/08/2008, 20h46

Autre précision sur 3.7.2. PL1

{
background: #FFFFFF;
color: #4D528A;
}

Ajoute un background sur la page du forum et qu'il faut par conséquent changer sa valeur ici pour modifier les couleurs latérales du forum et non plus dans le css principal

Ombre

12/08/2008, 21h26

Bonsoir, ce n'est pas une demande mais une explication:

Car certain comme moi ne maîtrisent pas tout bien dans le code:

En fait l'explication de l'auteur sont impec, mais pour un newbies qui veut apprendre c'est tout de suite compliqué je m'explique.

- Installation du hack => tout bien
- On regarde On voit lien2, on remplace par ce notre lien perso par ex FAQ
- On clique sur FAQ et rien ne se passe? logique

Les 2 lignes suivantes expliquent comment faire pour ecrire la ligne de commande qui va remplacer FAQ et enfin le rendre cliquable et fonctionnel.

Si tu trouve mon explication top floue n'hésite pas à corriger ou effacer.

salutations

Encore bravo pour votre TAFOui il est sure que chacun à sa façon de comprendre ou d'expliquer, quoi qu'il en soit je n'ai jamais dis dans mon message précédent que tu faisait une demande... et si tu as des difficulté sur la compréhension de telle ou telle choses sur une de nos ressources, n'hésites pas à nous poser des questions, on est là pour ça ou tu peux aussi aller voir nos forums dans la partie tutoriels ;)

kevin2008

12/08/2008, 22h20

olalala déja et avant tout merci, j'ai tellement appris déja en vous lisant... Je dérangerais quand cela sera necessaire vraiment... Merci à vous tous. Mes mots sont surement moins assurés que les vôtres, mais ça viendra.. Et pour revenir au sujet merci à KARIM, c'est du plus bel effet.

salutations

facile

20/01/2011, 22h33

merci beaucoup pour sa ++1