Personnalisation des titres des groupes (CSS)

[BarcaMaroc]

bonsoire voila une petite astuce pour personnaliser ses group d'utilisateurs

je sais pas trop explique mais je trouve que les images parlle mieu que moi français :blush2:


Exemples


Demo

http://www.mediteo.com/vb

http://mediteo.free.fr/up/uploads/0405c500e1.gif (http://mediteo.free.fr/up)

http://mediteo.free.fr/up/uploads/ecfc07d112.gif (http://mediteo.free.fr/up)

http://mediteo.free.fr/up/uploads/c9b817d0dc.gif (http://mediteo.free.fr/up)


Comment fair

Admincp => Styles & Templates => Gestionnaire de styles

http://mediteo.free.fr/up/uploads/e397f25470.jpg (http://mediteo.free.fr/up)

CSS Principal

http://mediteo.free.fr/up/uploads/53f034339a.jpg (http://mediteo.free.fr/up)

Tout en bas Définitions des CSS supplémentaires

http://mediteo.free.fr/up/uploads/35fc1d3957.jpg (http://mediteo.free.fr/up)

vous collez ce code

padding-bottom:0;
background-color:#FFFFFF;
background-image: url('images/members/red.gif');
text-align:center;
}

.Mod
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #0000FF;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#0000E6;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFFFFF;
background-image: url('images/members/blue.gif');
text-align:center;
}

.Membres
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #000000;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#000000;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFFFFF;
background-image: url('images/members/gray.gif');
text-align:center;
}

.Banni
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #6633CC;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#6633CC;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFFFFF;
background-image: url('images/members/fushia.gif');
text-align:center;
}

http://mediteo.free.fr/up/uploads/de27c16e60.jpg (http://mediteo.free.fr/up)

Après Groupes d'utilisateurs => Gestionnaire de groupes

http://mediteo.free.fr/up/uploads/9f9b1dbd62.jpg (http://mediteo.free.fr/up)

Vous choisissez un group

http://mediteo.free.fr/up/uploads/a360844d7f.jpg (http://mediteo.free.fr/up)

Mise en forme HTML du nom d'utilisateur

J'ai Donné pour les group


Administrateurs la couleure Rouge

N°1
<input type="text" name="T1" size="17" class="Admin" value="
N°2
" readonly style="border-style:dotted; border-width:1px; width: 90">


Moderateurs Bleu

N°1
<input type="text" name="T1" size="17" class="Mod" value="
N°2
" readonly style="border-style:dotted; border-width:1px; width: 90">



Members Noir

N°1
<input type="text" name="T1" size="17" class="Membres" value="
N°2
" readonly style="border-style:dotted; border-width:1px; width: 90">

Banni Blanc

N°1
<input type="text" name="T1" size="17" class="Banni" value="
N°2
" readonly style="border-style:dotted; border-width:1px; width: 90">

Après tout ça vous ete fatigué je crois :yahoo:

Il nous reste que transférer les images (http://www.vbulletin-ressources.com/forum/attachment.php?attachmentid=4972&stc=1&d=1190605374) par FTP au chemin
Forum/images/members


Modification


_____________________
------------------------
.Admin <=== Nom du group
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #FF1515; <=== cadre
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#E30000; <=== couleure du nom
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFFFFF; <=== arriere plan
background-image: url('images/members/blue.gif'); <=== images sous le nom
text-align:center;
}

_____________________
------------------------

:blush2: un merci tué pas llol

[Ombre]

Merci pour cette modification :) et surtout du partage :p

par contre je deplace car ce n'est pas un hack :)

[Allan]

Ha pas mal, merci de cette astuce Barcamaroc ;)

PS: j'ai renomer ton titre pour qu'il soit plus explicite et facile de recherche ^^

[BarcaMaroc]

Merci pour cette modification :) et surtout du partage :p

par contre je deplace car ce n'est pas un hack :)

merci je savait vraiment pas ou le mètre

Ha pas mal, merci de cette astuce Barcamaroc ;)

PS: j'ai renomer ton titre pour qu'il soit plus explicite et facile de recherche ^^

merci c'est gentil

[sony]

bravo Barcamaroc, très bien trouvé, merci ;)

[BarcaMaroc]

de rien tres cher

[alois3]

j ai un ptit souci j ai un carrer blanc meme apres avoir transferer lesi mage dans image/membres

sinon merci pour ton ad

j ai trouver en fait ::

dans ton exemple tu as

.Banni
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #6633CC;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#6633CC;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFFFFF;
background-image: url('images/members/fushia.gif');
text-align:center;
}

tu cette ligne

background-image: url('images/members/fushia.gif');

members ne vas pas vu que mon ftp mon dossier et membres

donc evdement pas d image llol

donc ca doit donner ceci

background-image: url('images/membres/fushia.gif');

[BarcaMaroc]

j ai un ptit souci j ai un carrer blanc meme apres avoir transferer lesi mage dans image/membres

sinon merci pour ton ad

j ai trouver en fait ::

dans ton exemple tu as

.Banni
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #6633CC;
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#6633CC;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFFFFF;
background-image: url('images/members/fushia.gif');
text-align:center;
}

tu cette ligne

background-image: url('images/members/fushia.gif');

members ne vas pas vu que mon ftp mon dossier et membres

donc evdement pas d image llol

donc ca doit donner ceci

background-image: url('images/membres/fushia.gif');

s'il vous plait j'ai pas trop compris je peut avoire un images au bien le lien de vorte site web ??
je vous attend

[Ombre]

Le chemin relatif au fond d'ecran est en anglais dans ta modification, mais chez certaines personne le dossier member est nommé membres en français :) voila pourquoi son image n'apparaissait pas ;)

[alois3]

merci ombre oui exactement le "members" pour les anglais , mais pour les version francaises evidement c est "membres"

j ai un probleme de touche sur le clavier llol dsl

[mf.rub]

Modification
_____________________
------------------------
.Admin <=== Nom du group
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #FF1515; <=== cadre
cursor: pointer;
font-family:MS Sans Serif;
font-size:10px;
vertical-align:middle;
letter-spacing:0;
color:#E30000; <=== couleure du nom
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
background-color:#FFFFFF; <=== arriere plan
background-image: url('images/members/blue.gif'); <=== images sous le nom
text-align:center;
}
sorry l am turkish and l dont understand. please caps.

[rl0075]

J'ai beau le faire et le re-faire, sans succès

je copie bien les images dans images\members

je copie bien la partie dans css supplémentaires et dans le groupe utilisateur

je mets



<input type="text" name="T1" size="17" class="Admin" value="

et

" readonly style="border-style:dotted; border-width:1px; width: 90">

mais rien a faire, il affiche un rectangle blanc, de plus dans les css supplémentaires, la partie que l'on colle, dit de mettre le pseudo centré, mais moi il reste à gauche !!

donc ?? je ne sais pas

[neodenis]

j'ai le meme probleme !!! il doit avoir une erreur !

[neodenis]

ben personne c'est nous aider meme en renomé le dossier ca fonctionne pas

[lagrace]

Salut

merci pour ce mod

comment definir une largeur fixe pour l'image ou alors que l'image soit de la largeur du speudo merci pour la soluce

[aka999]

THANKS alot

[BarcaMaroc]

bonsoire désole pour le retarde

parce que je suis en traine de traduire le hack qui fait la faire en français ca va etre long

[BarcaMaroc]

et voila le Hack

http://www.vbulletin-ressources.com/forum/showthread.php?t=9879

[Oum Aïcha]

bonjour,

desole question qui est un peu hors sujet mais comment faire pour avoir un encadre comme sa pour les profils?

[Ombre]

Il te suffit d ajouter un fieldset sur le code voulu ;)

[Oum Aïcha]

oui c'est ce que j'ai fait mais je n'ai pas le petit mot qui se trouve en haut a gauche. je ne sais pas comment le mettre.

merci

[Ombre]

as tu veux un titre a ton fildset, alors ajoute en plus une legend ;)

<FIELDSET>
<LEGEND><b>Titre quis eras en gras grace au b</b></LEGEND>
Contenus du cadre
</FIELDSET>

[Oum Aïcha]

ah merci bien c'est sa que je cherchai justement