redimentionner les images des signatures et des avatars

[justinenoisette]

Bonjour,

Je souhaiterais pouvoir imposer une taille maximum  (150*150) des images dans la signature car certaines sont vraiment trop grande.
Je suis aller voir ce tuto https://forum.forumactif.com/t253423-redimensionnement-automatique-des-images
mais il ne concernent que les images dans les messages.
Quelqu'un pour m'aider svp?

En vous remerciant de votre future réponse
Cordialement
Justine

Forum: http://maison-forum.forumdediscussions.com/forum
Thème: http://fr.hitskin.com/rechercher-un-theme/sky--clouds-159374.htm
Statut sur le forum: fondatrice
Modifié des templates: non

[MlleAlys]

Bonjour,
vous pouvez coller ce code dans votre feuille de style css :

Code:

/*redimensionnement images signatures*/
div.signature_div img {
    max-width: 100px; /*largeur maximale d'une image*/
    max-height: 100px;  /*hauteur maximale d'une image*/
}

Les valeurs ici 100px mises à titre d'exemples peuvent évidemment être modifiées

[justinenoisette]

Merci pour la réponse.
Je dois écrire ce code dans PA > Affichage > templates > profil > profile_edit_signature?
Vous allez me prendre pour une cruche mais je ne sais pas ou allez chercher la feuille de style CSS pour changer le code à partir du PA

[MlleAlys]

Non, la feuille se trouve dans affichage > couleurs > onglet "feuille de style css" ^^

Vous pouvez coller directement le code tel quel dans la zone de saisie, puis cliquer sur enregistrer.
(s'il y a déjà des codes dans la zone de saisie, descendez tout tout en bas, passer une ou deux lignes afin de bien séparer les codes, collez, enregistrez ^^)

[FANCH 56]

Bonsoir

Comme
s les images ne sont pas toujours "carrées", tu peux essayer avec ce CSS. Ici cela limite la hauteur

Code:

/*LIMITER LA TAILLE DES IMAGES DANS LES SIGNATURES  */

.signature_div img{
max-height: 150px !important;}

[MlleAlys]

Le code que j'ai donné ne déforme pas l'image puisque ce sont des dimensions maximales et non imposées ^^

(par exemple ici : http://jsfiddle.net/WYuEy/1/ les images ont été redimensionnées sans être déformées, les deux ont non pas une largeur et une hauteur de 200px exactement, mais bien inférieures ou égales à 200px ^^)

mais on peut ne laisser qu'un la ligne max-height si on ne veut pas redimensionner en largeur par exemple, ou inversement

[justinenoisette]

Donc si j'ai bien compris et en allant au même endroit et en mettant ce code
/*redimensionnement images avatar*/
div.avatar_div img {
max-width: 90px; /*largeur maximale d'une image*/
max-height: 90px; /*hauteur maximale d'une image*/
}
je peux aussi modifier la dimension des avatars rajoutée par les membres et non prit dans la librairie du choix des avatars?

[MlleAlys]

c'était bien essayé, mais en fait non, ça ne fonctionnera pas ^^

Pour les explications :

Si vous n'avez donc pas d'autre image dans le bloc du profil (sinon, toutes les images seront affectées, après ce n'est peut être pas gênant, à vous de voir ^^), vous pouvez utiliser le code suivant :

Code:

/*redimensionnement des avatars*/
.poster-profile img { /*on vise les images dans le bloc du profil*/
    max-width: 90px;  /*largeur max*/
    max-height: 90px;  /*hauteur max*/
}

Bref, n'hésitez pas à aller vous renseigner sur les nombreux sites internet qui proposent des initiations aux codes html et css (puisque les deux vont de paire bien sûr)

[justinenoisette]

Merci, je vais aller voir tout ça
Mais c'est toujours au même endroit affichage > couleurs > onglet "feuille de style css"
Ou bien cette fois ci dans les templates?

[MlleAlys]

non non, tous les codes de cette forme sont à mettre dans la feuille de style css ^^
(le css permet de travailler la mise en forme et les modalités d'affichages des objets qui sont dans la page html, cette dernière étant codée via les templates (les templates, c'est le squelette de la page, le css permet de l'habiler, ici ous faisons de l'habillage xP)

[justinenoisette]

OHhhh, ça viens de faire déclic la!! Mon zom avait essayé de me l'expliquer mais apparemment je n'avais pas compris.    
Vos explications sont beaucoup plus limpide que les siennes!!!! lol

Si vous n'avez donc pas d'autre image dans le bloc du profil (sinon, toutes les images seront affectées, après ce n'est peut être pas gênant, à vous de voir ^^)

Donc si je comprends bien le bloc profil correspond aussi aux images des messages? Cela risque donc de faire conflit avec la règle des dimensions que j'ai déjà imposées non?

Quel sites me proposez vous pour des initiations aux codes html et css

[MlleAlys]

non pas de problème, .posterprofile ne prend en compte que la partie profil des posts : https://nsa34.casimages.com/img/2014/03/11/140311111921812624.jpg

Et si un jour un code vous pose problème dans le css, il vous suffit de le retirer et d'enregistrer à nouveau sans problème ^^

Pour les sites... Je ne sais pas trop lesquels sont les meilleurs, mais vous devriez en trouver pas mal en faisant quelques recherches xP. Entre autres, vous trouverez sur ce forum des tutos sur le css et le html, avec quelques liens donnés à la fin :
https://forum.forumactif.com/t301866-le-css-comment-ca-marche
https://forum.forumactif.com/t301865-le-html-comment-ca-marche

vousp ouvez vous amuser à tester des extraits de codes via jsfiddle.net par exemple ^^
(par exemple : http://jsfiddle.net/MlleAlys/cb2Tc/ )

bref, google est votre ami ^^

[justinenoisette]

Lol, je m’aperçois que je n'avais pas compris et que je dois encore faire des progrets
Donc cela va modifier le cadre bleu de la photo mais pas forcement l'avatar s'il fait partie des dimensions, s'il est en dehors des dimensions imposées, il "disparait"
Merci pour toutes vos explications

[MlleAlys]

.poster-profile vise bien le cadre bleu, mais .poster-profile img (ce que j'ai écrit pour le code) vise l'image à l'intérieur de ce cadre bleu, donc bien l'avatar ^^

(mis à part toutes ces explications, les codes fonctionnent ils correctement ? ^^")

[justinenoisette]

oui merci tout fonctionne comme je souhaites.
Vous êtes un pro et vos explications sont faciles à comprendre pour une débutante comme moi

[MlleAlys]

je suis loin d'être une pro, mais de rien !xD

n'oubliez pas de modifier le statu du sujet et de le passer en en éditant votre premier message !

[justinenoisette]

C'est fait merci encore