Taille automatique et unique de l'avatar

[Leda]

Bonjour

Je souhaiterais forcer la taille de l'avatar de mes invités. Attention! Je ne souhaite pas limiter une taille maximum mais bien faire en sorte que TOUT les avatar aient la meme taille , c'est à dire 150 de largeur pour 300 de hauteur, et je voudrais que ca soit automatique.

Je sais que pour cela il faut toucher au CSS et aux templates. Pourriez vous m'eclairer dans l'affaire s'il vous plait?

Merci d'avance

[Invité]

Bonjour,

Pour commencer, il va falloir modifier les templates. Rendez vous sur votre Panneau d'administration, onglet Affichage » Templates » Général » éditez le template viewtopic_body. Cherchez maintenant la ligne suivante :

Code:

{postrow.displayed.POSTER_AVATAR}

Remplacez-là par cette ligne-ci :

Code:

<div class="avatar">{postrow.displayed.POSTER_AVATAR}</div>

Maintenant, enregistrez vos modifications et publiez votre template.


Il est temps maintenant d'éditer les CSS ! Rendez vous sur votre Panneau d'administration, onglet Affichage » Couleurs » Feuille de styles CSS et ajoutez-y l'un des codes suivants :
Pour avoir une taille maximale à ne pas dépasser :

Code:

.avatar img {
   max-width:150px;
   max-height:150px;
}

Pour avoir une taille fixe de tous les avatars :

Code:

.avatar img {
   width:150px;
   height:150px;
}

Modifiez les valeurs, sachant que width correspond à la largeur, et height correspond à la hauteur, puis enregistrez vos modifications.

Et grâce a cela tous les avatars seront aux dimensions données.

Bon amusement.

[Leda]

Tout d'abord merci.
Alors, le code marche a merveille, ca il n'y a aucun soucis. Donc rien que pour cela, je vous remercie .
Le soucis en revanche, c'est que maintenant l'avatar depasse sur la partie texte de la fenetre, mais aussi que tandis que j'avais imposer un cadre arrondis aux avatars, il y a a gauche deux petits coins blanc !


Voici l'image pour que ca soit plus clair




Edit: c'est le fait de changer le template qui a poser ce probleme, je vous donne ma solution trouvé dans le second post en dessous.

[Leda]

J'ai trouvé la solution grace au CSS que tu m'as donné.
J'ai modifié un autre CSS qui concernait l'avatar et du coup je n'ai plus eu besoin de modifier le template.
Voici donc mon CSS modifié!
Vous pouvez modifier le tout a votre guise a savoir que -moz-border-radius designe le contour que vous mettez autour de votre avatar. A vous de decider si vous en voulez ou non, et si vous voulez une autre couleur ou non .
Voila voila!

Code:


.postdetails.poster-profile a img {
  width:150px;
  height:300px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 6px solid #101A24;
}

[Marec]

tu n'as pas une proposition pour la taille maximale?

j'ai essayé en rajoutant "max-" avant les width et height, mais ca n'a pas fait son effet ^^"

je suis un peu novice dans le domaine, alors ....

[Leda]

Prend précisement le code que je t'ai donné... enleve juste toute la partie moz-border-radius si tu ne veux pas de contour.

Ca te donnera ca:

.postdetails.poster-profile a img {
width:150px;
height:300px;
}

Moi ca me redimensionne automatiquement tout les avatars aux tailles que je desire. Mais si tu veux juste une taille max autorisé (et non une taille obligatoire) alors fais

.postdetails.poster-profile a img {
max-width:150px;
max-height:300px;
}

et poste le dans ton CSS

Logiquement ca devrait marcher, sinon utilise l'astuce que Olivierscoop m'a donner. Il marche bien, mais a moi il m'ajouter une bordure blanche indesirable avec l'effet que je voulais.

Dis moi si c'est ok

[Leda]

Ho... j'oubliais. Ces effets ne marcheront sans doute pas avec IE.
Prefere lui d'autre navigateur comme Firefox

[Marec]

erf, merci quand même je préfère garder mon navigateur, et faire un redimensionnement de l'image manuel avec photofiltre

je suis admin tout de même ^^

bref merci encore