[Style CSS] Cadre Info utilisateur dans le Postbit Horizontal

[Elison]

Cette modification CSS va vous permettre de modifier l'apparence des informations utilisateur à droite du Postbit horizontal.

En final, vous aurez un cadre aux bordures arrondies avec un léger effet d'ombre sur les coté inférieur et droit (pour les navigateurs compatibles) et la possibilité d'avoir un arrière-plan.

Cette modification va emprunter 3 déclarations CSS du template "postbit.css" et une quatrième sera créée.
Chaque entrée précède une image de décoration.


Présentation visuelle
AVANT
Si vous êtes sur le style par défaut, levez juste un peu les yeux à droite :)

APRES
12828


Conception


Auteur du mod: Elison
Version vBulletin Requise: 4.0.0
Version testé: 4.0.2
Template(s) d'origine(s) modifiée(s): AUCUNE
Template personnalisé: Oui (additional.css)
Déclaration(s) CSS modifiée(s): 3
Déclaration(s) CSS crées(s): 1
Variable(s) de style modifiée(s): Non
Style utilisé: Style par défaut
Pièce(s) jointe(s): 1
Navigateurs testés et compatibles: (dernière version) Firefox 3.6 / Google Chrome 4 / Safari 4 (Windows)
Dernière mise à jour le: Pas encore


Installation
Envoyer le fichier userinfo_ap.gif contenu dans le fichier zip (en pièce jointe) dans le dossier images/misc.

Dans le template additional.css Menu Admin CP > Styles & Templates > Rechercher les templates

- coller dans ce template la déclaration suivante:


/* Origine: postbit.css - Infos membres */

.postbit .userinfo .userinfo_extra, .postbit .userinfo_noavatar .userinfo_extra {
margin:4px 25px 4px;
padding:3px 7px 3px 7px;
width: 250px;
border:1px solid #5a7f97;
text-align:center;
background-color:#8ba6b8;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

.postbit .userinfo .userinfo_extra dl, .postbit .userinfo_noavatar .userinfo_extra dl {
margin:0 auto;
float: none;
width: 180px;
text-align:left;
color: #ffffff;
}

.postbit .userinfo .userinfo_extra dl dt, .postbit .userinfo_noavatar .userinfo_extra dl dt {
padding-left:17px;
}

.postbit .userinfo .userinfo_extra dl dd, .postbit .userinfo_noavatar .userinfo_extra dl dd {
float: none !important;
padding-left:17px;
background: url({vb:stylevar imgdir_misc}/bullet_info.png) no-repeat left;
}Facultatif
Option 1 : Vous pouvez ajouter un léger ombrage sur le côté inférieur droit du cadre.

- dans la première déclaration (voir ci-dessus), ajouter propriétés & valeurs suivantes:


-moz-box-shadow:2px 2px 8px #87a6be;
-webkit-box-shadow:2px 2px 8px #87a6be;
12826

Option 2: Si vous souhaitez ajouter un arrière-plan à votre cadre:
- Envoyer le fichier bullet_info.png contenu dans le fichier zip (en pièce jointe) dans le dossier images/misc.
- Ensuite, dans la première déclaration (voir ci-dessus), remplacer propriété & valeur:


background-color:#8ba6b8;par:


background:url({vb:stylevar imgdir_misc}/userinfo_ap.gif) repeat #8ba6b8;12827


NOTE: Dans les captures, vous pouvez voir la présence d'un hack "Remercié 10 fois dans 10 messages". L'intérêt ici c'est que ce contenu est long. Selon la largeur de certaines informations, il vous faudra modifier la valeur de la propriété "width" dans la seconde déclaration (par défaut je l'ai mise sur 180px).Archive ZIP

[Allan]

Le genre de petites modifs que j'adore, merci du partage Elison, c'est pas mal du tout ;)

PS: Tu a oublié le v de vBulletin dans le titre de l'archive.

[Ombre]

Bonsoir, super sympa comme modification, je sais pas pourquoi mais ce qui attire la vue en premier c'est le bébé tout attendri :D

[Elison]

Nom de l'archive modifiée :)
Merci Allan ;)

Édité: (pense bête: faut que je pense à ajouter une propriété/valeur pour les liens dans le dd)

[patrice]

Assez cool comme modification :jiggy:Merci Elison et bravo

[Billyboule]

Merci Elison. Il est temps que IE change son fusil d'épaule car c'est triste d'avoir des modifs pareilles et de ne pas savoir en profiter sur ce navigateur.

[Lo']

Merci pour cette modification Elison :delicious:

[Simon]

Merci du partage ;)

[karymus]

Bonjour, je me permet de ressusciter ce post qui date quand même de Mars, mais c'est la la magie de sujets qui peuvent reveni a l'ordre du jour par un simple up :)

Bon voila, j'ai fais cette modification dont je suis entièrement satisfait, je suis adepte du postbit et non du postbit legacy, ma question est:
J'aimerais en adaptant la modification d'Elison, rajouter des infos sur la partie réservée a la signature, juste en dessous, pour pas surcharger mon postbit.

Je vous remercie d 'avance.

[karymus]

Salut a tous,

Je me permet un ti UP :)

[Ombre]

Bonjour, j'ai pas compris ta demande.

[karymus]

15336

Voici un exemple Ombre, mais moi j'ai l'intention de mettre dedans autre chose que ces infos déjà présente sur le postbit, pour pas le surcharger justement.

[Ombre]

Tu veux donc déplacé le bloc userinfo dans la partie signature?

[karymus]

Entre autres ! pas la totalité, disons que j'veux installer le hack de remerciement ainsi que le temps passé au forum, mais je voudrais les mettre sous le signature comme sur l'image.

[Ombre]

Le hack remerciement fonctionne pour le positionnement de ses infos dans le postbit/_legacy via un hook, soit tu déplace le hook vers la zone de la signature, ce qui n'est pas top car d'autres hacks peuvent utiliser se hook, soit tu copie le contenu du template du hack remerciement qui gère ses infos en effacent le contenu et le placent dans la zone voulu, pour l'autre hack c'est à voir ne l'utilisent pas.

[karymus]

Merci Ombre pour le temps que tu nous consacre a répondre, j'abuse encore, ne m'en tiens pas rigueur :)
Disons que je voudrais placer la réputation et le pouvoir de réputation :) et merci.

[facile]

merci bien