Template Améliorer les badges des utilisateurs (bannières de grade) [2.0]

Nous vous conseillons de vérifier au préalable le contenu que vous téléchargez.
Si un lien de téléchargement ne fonctionne plus, merci de signaler le topic en question !

MoDzCatZ

Donateur
Donateur
Messages
45
J'aime
65
Points
178
Hors ligne
#1
On se retrouve pour un nouveau tuto !

Comment améliorer les badges utilisateurs, comme ceci :



Dans EXTRA.less ,ajouter :
[class*="banner_"], .userBanner {
position: relative;
display: inline-block !important;
font-family: Monaco,Consolas,"Courier New",monospace !important;
margin: 4px 0 5px !important;
font-size: 10px !important;
color: #fff !important;
text-shadow: #111 0 0 1px !important;
border-radius: 5px !important;
border-color: transparent !important;
margin-bottom: 0px !important;
padding: 4px 8px !important;
letter-spacing: .5px !important;
border: 0 !important;
text-transform: uppercase !important;
/*width: 120px !important;*/
line-height: 15px !important;
}
.userBanner::before {
font-family: FontAwesome;
content: "\f007";
color: #fff;
position: absolute;
background-color: rgba(0,0,0,0.2);
top: 0;
bottom: 0;
left: 0;
line-height: 23px;
/*padding: 1px 4px 0 3px;*/
width: 20px;
text-align: center;
}
.userBanner strong {
min-width: 90px;
display: inline-block;
margin-left: 20px;
}

Voila ;)

 

Bl4z3r

Membre
Membre
Messages
23
J'aime
1
Points
68
Hors ligne
#3
Merci de ton partage ça peut me être utile :)
 

Squeakers

Ancien Staff
Ancien Staff
Messages
185
J'aime
36
Points
733
Hors ligne
#5
Salut, merci du partage ;)
 
M

Membre754

Visiteur
Hors ligne
#8
Ah sa ça va m'être utile, je le cherchai également merci ;)
*édit* Se n'est pas ce que je cherchais..
 

bobob10

Membre
Membre
Messages
15
J'aime
6
Points
73
Hors ligne
#12
j'aime bien le style sa peux être sympas merci
 

Court-circuit

Membre
Membre
Messages
11
J'aime
8
Points
73
Hors ligne
#13
Bonjour

Une fois de plus , je prends avec grand plaisir , c'est une fois de plus , une belle amélioration .
 

Tokio

Membre
Membre
Messages
6
J'aime
1
Points
583
Hors ligne
#14
C'est propre merci pour tous tes partages :P
 

titcrunch

Membre
Membre
Messages
17
J'aime
5
Points
73
Hors ligne
#19
merci pour la manip

Perso j'ai modifié :
CSS:
/*width: 120px !important;*/
en
CSS:
width: 100% !important;
pour qu'il soi compatible avec tous les thèmes et toutes les tailles de posbit et prenne toute la largeur et reste responsive
 
Dernière édition par un modérateur:
Haut Bas