oOo KARIM oOo
12/05/2008, 22h13
Salut Membres de vBulletin-Ressources !
Je vous propose une petite modification de templates simple et qui s'avère parfois très utile.
Vous voulez passer un message rapide dans votre forum et bien visible, alors vous êtes au bon endroit :
Pour info, c'est bien moi qui à crée le Code HTML de cette modification.
P.S : Cette modification est 100 % Valid xHTML.
Installation
I) Tout d'abord créez un fichier que vous nommerez "info.css"
Ouvrez le avec votre éditeur de texte (par exemple le Bloc Notes
Windows) et écrivez ce code :
/* Barre d'infos par oOo KARIM oOo */
body
{
padding: 0;
margin: 0;
}
#info
{
overflow: visible;
width: 100%;
position: fixed;
z-index:2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
}
#infobar a, #infobar a:link, #infobar a:visited, #infobar a:active
{
display: block;
float: left;
width:100%;
clear: both;
color: InfoText;
background: InfoBackground url(images/misc/info.gif) no-repeat fixed .3em .3em;
padding: .45em .3em .45em 2em;
border-bottom: .16em outset;
text-decoration: none;
cursor: default;
}
#infobar a:hover
{
color: HighlightText;
background: Highlight url(images/misc/info.gif) no-repeat fixed .3em .3em;
}
#viewplot
{
width: 100%;
height: expression(this.parentNode.offsetHeight - this.offsetTop);
overflow-x: hidden;
overflow-y: scroll;
padding: 1em;
}Mettez ce fichier à la racine de votre forum et mettez l'image ci jointe dans le répertoire suivant : images/misc/info.gif
II) Maintenant, allez à votre administration vBulletin et ouvrez le Template "header" depuis le gestionnaire de templates, puis entrez le code suivant à l'entête :
<!-- Début de la barre de oOo KARIM oOO -->
<body>
<link rel="stylesheet" href="info.css" type="text/css" />
<div id="infobar"><div id="info" align="left">
<a href="Lien de la barre">Votre Texte ici !</a>
</div></div><br />
</body>
<!-- Fin de la barre de oOo KARIM oOO -->
Valeurs à modifier : Lien de la barre et Votre texte ici !
ATTENTION !! N'enlevez pas la balise </br> à la fin de ce code.
Si vous l'enlevez, vous risquez d'avoir des problèmes d'affichage !
__________________________________________________ ____________
Vous avez aussi à votre disposition l'archive qui contient les fichiers utilisés dans ce tutoriel et l'image : "info.gif"
P.S : Si vous appréciez, votez !
__________________________________________________ ____________
Screenshots
Je vous propose une petite modification de templates simple et qui s'avère parfois très utile.
Vous voulez passer un message rapide dans votre forum et bien visible, alors vous êtes au bon endroit :
Pour info, c'est bien moi qui à crée le Code HTML de cette modification.
P.S : Cette modification est 100 % Valid xHTML.
Installation
I) Tout d'abord créez un fichier que vous nommerez "info.css"
Ouvrez le avec votre éditeur de texte (par exemple le Bloc Notes
Windows) et écrivez ce code :
/* Barre d'infos par oOo KARIM oOo */
body
{
padding: 0;
margin: 0;
}
#info
{
overflow: visible;
width: 100%;
position: fixed;
z-index:2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
}
#infobar a, #infobar a:link, #infobar a:visited, #infobar a:active
{
display: block;
float: left;
width:100%;
clear: both;
color: InfoText;
background: InfoBackground url(images/misc/info.gif) no-repeat fixed .3em .3em;
padding: .45em .3em .45em 2em;
border-bottom: .16em outset;
text-decoration: none;
cursor: default;
}
#infobar a:hover
{
color: HighlightText;
background: Highlight url(images/misc/info.gif) no-repeat fixed .3em .3em;
}
#viewplot
{
width: 100%;
height: expression(this.parentNode.offsetHeight - this.offsetTop);
overflow-x: hidden;
overflow-y: scroll;
padding: 1em;
}Mettez ce fichier à la racine de votre forum et mettez l'image ci jointe dans le répertoire suivant : images/misc/info.gif
II) Maintenant, allez à votre administration vBulletin et ouvrez le Template "header" depuis le gestionnaire de templates, puis entrez le code suivant à l'entête :
<!-- Début de la barre de oOo KARIM oOO -->
<body>
<link rel="stylesheet" href="info.css" type="text/css" />
<div id="infobar"><div id="info" align="left">
<a href="Lien de la barre">Votre Texte ici !</a>
</div></div><br />
</body>
<!-- Fin de la barre de oOo KARIM oOO -->
Valeurs à modifier : Lien de la barre et Votre texte ici !
ATTENTION !! N'enlevez pas la balise </br> à la fin de ce code.
Si vous l'enlevez, vous risquez d'avoir des problèmes d'affichage !
__________________________________________________ ____________
Vous avez aussi à votre disposition l'archive qui contient les fichiers utilisés dans ce tutoriel et l'image : "info.gif"
P.S : Si vous appréciez, votez !
__________________________________________________ ____________
Screenshots