redimentionner les images des signatures et des avatars

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu redimentionner les images des signatures et des avatars

Message par justinenoisette le Dim 9 Mar 2014 - 16:47

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 http://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


Dernière édition par justinenoisette le Sam 15 Mar 2014 - 23:57, édité 2 fois

justinenoisette
Nouveau membre

Messages : 27
Inscrit(e) le : 27/10/2010

http://maison-forum.forumdediscussions.com
justinenoisette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par MlleAlys le Dim 9 Mar 2014 - 20:22

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 Wink

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par justinenoisette le Lun 10 Mar 2014 - 0:25

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

justinenoisette
Nouveau membre

Messages : 27
Inscrit(e) le : 27/10/2010

http://maison-forum.forumdediscussions.com
justinenoisette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par MlleAlys le Lun 10 Mar 2014 - 18:05

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 ^^)

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par FANCH 56 le Lun 10 Mar 2014 - 18:14

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;}

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par MlleAlys le Lun 10 Mar 2014 - 18:32

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 Wink

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par justinenoisette le Mar 11 Mar 2014 - 15:03

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?

justinenoisette
Nouveau membre

Messages : 27
Inscrit(e) le : 27/10/2010

http://maison-forum.forumdediscussions.com
justinenoisette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par MlleAlys le Mar 11 Mar 2014 - 19:36

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


Tout ce qui est entre /* ..... */ correspond à des commentaires qui n'agissent en rien sur les codes, mais permettent juste au lecteur de s'y retrouver, surtout quand il y en a beaucoup ^^

La signature est affichée dans un bloc html (div) de classe "signature_div" (un peu comme un nom de groupe ^^). En commençant le code par div.signature_div, le code ne concerne donc que ce bloc. Puis, à l'intérieur de ce bloc, on s'intéresse à l'image, d'où le img qui suit juste après.

Enfin, on attribue les propriétés de l'objet à l'intérieur des accolades : les propriétés sont séparées par des points virgule, et souvent on revient à la ligne entre chaque pour mieux les lire.

Code:
/*ceci est un commentaire*/
objet { propriété1: valeur; propriété2: valeur; propriété3: valeur; }

/*le code suivant est équivalent au premier*/
objet {
    propriété1: valeur;
    propriété2: valeur;
    propriété3: valeur;
}


On peut bien sur en mettre autant qu'on veut ^^

Donc, pour les avatars, il faut réussir à viser que ces images. Les images des avatars n'ont pas de class directe (au pire on peut cependant en ajouter une via les templates en phpbb2). Le bloc du profile en a cependant une : poster-profile
(pour les trouver, on peut utiliser des outils de développement des navigateurs, ou bien aller voir dans le template concerné ^^).

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 Wink(puisque les deux vont de paire bien sûr)

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par justinenoisette le Mar 11 Mar 2014 - 20:22

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?

justinenoisette
Nouveau membre

Messages : 27
Inscrit(e) le : 27/10/2010

http://maison-forum.forumdediscussions.com
justinenoisette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par MlleAlys le Mar 11 Mar 2014 - 20:32

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)

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par justinenoisette le Mar 11 Mar 2014 - 22:54

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

@MlleAlys a écrit: 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

justinenoisette
Nouveau membre

Messages : 27
Inscrit(e) le : 27/10/2010

http://maison-forum.forumdediscussions.com
justinenoisette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par MlleAlys le Mar 11 Mar 2014 - 23:33

non pas de problème, .posterprofile ne prend en compte que la partie profil des posts : http://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 :
http://forum.forumactif.com/t301866-le-css-comment-ca-marche
http://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 ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par justinenoisette le Mar 11 Mar 2014 - 23:59

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

justinenoisette
Nouveau membre

Messages : 27
Inscrit(e) le : 27/10/2010

http://maison-forum.forumdediscussions.com
justinenoisette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par MlleAlys le Mer 12 Mar 2014 - 0:13

.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 ? ^^")

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par justinenoisette le Sam 15 Mar 2014 - 23:52

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


Dernière édition par justinenoisette le Sam 15 Mar 2014 - 23:56, édité 1 fois

justinenoisette
Nouveau membre

Messages : 27
Inscrit(e) le : 27/10/2010

http://maison-forum.forumdediscussions.com
justinenoisette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par MlleAlys le Sam 15 Mar 2014 - 23:54

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 résolu en éditant votre premier message ! Wink

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: redimentionner les images des signatures et des avatars

Message par justinenoisette le Sam 15 Mar 2014 - 23:55

C'est fait merci encore

justinenoisette
Nouveau membre

Messages : 27
Inscrit(e) le : 27/10/2010

http://maison-forum.forumdediscussions.com
justinenoisette a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum