Faire pivoter/pencher des images

[Runa Moon]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://les-mondes-sauvages.forumsrpg.com/

Description du problème

Bonjour à toute la communauté !

Je viens vers vous avec un problème pointu : j'aimerais que les avatars de on forum apparaissent légèrement penchés, mais après moult recherches, je suis incapable de réaliser ça.

Je rappelle que je suis sur Chrome, et que je crois avoir lu que "rotate" n'opère pas sur ce navigateur. Dans l'idéal, j'aimerais un code qui soit valide sur les navigateurs les plus connus (parce que mes membres seront peut-être plus sur Explorer ou Mozilla).

Dans un second temps, j'aimerais aussi de l'aide pour adapter ce code dans une fiche de présentation, dans les mêmes conditions.

D'avance, je vous remercie :kissouille:

[*Splash*]

Hi,

Dans ton template tu entoure l'avatar d'une class, par exemple :

Code:

<div class="rotate">...</div>

Et tu ajoute ce code CSS :

Code:

.rotate {
  transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */
}

[*Splash*]

Hi,

Dans ton template tu entoure l'avatar d'une class, par exemple :

Code:

<div class="rotate">...</div>

Et tu ajoute ce code CSS :

Code:

.rotate {
  transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */
}

Je rappelle que je suis sur Chrome, et que je crois avoir lu que "rotate" n'opère pas sur ce navigateur.

Ah bon ?

Voici un screen de mon forum test en phpBB2, sous Chrome, avec la fonction rotate de 45 degré

[Runa Moon]

Juste une question : je suis une bille en codage, du coup est-ce que tu pourrais me dire où trouver la mention de l'avatar dans les Templates ?

[*Splash*]

Dans le template viewtopic_body recherche cette ligne :

Code:

{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />

Tu la supprime pour la remplacer par celle-ci :

Code:

  {postrow.displayed.RANK_IMAGE}<div class="rotate">{postrow.displayed.POSTER_AVATAR}</div><br /><br />

Tu enregistres et tu publies la modification, et tu ajoutes le code CSS donné plus haut

[Runa Moon]

Perfect ! Merci infiniment, en fait si ce que j'avais essayé ne marchait pas c'est tout simplement parce que je n'avais pas modifié le template XD

[*Splash*]

Super