Incliner l'avatar lors du survol

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

Incliner l'avatar lors du survol

Icône par defaut le Dim 20 Mai 2012 - 8:19
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou

afin d'avoir un rendu équivalent à celui du forum dans l'affichage d'un sujet,
lorsque que vous survolez l'avatar l'image s'incline vers la gauche avec une
temporisation afin de ne pas brusquer nos tites bêbettes moqueur .


Allez c'est parti hinhin .

Dans la template:
Affichage/Templates/Général/viewtopic_body

Recherche

Code:
{postrow.displayed.POSTER_AVATAR}

et remplace par:
Code:

<br><div class="img_avatar">{postrow.displayed.POSTER_AVATAR}</div></br>
On attribue une class à la variable.

Attention!!!!

Ne pas utiliser la class "avatar" car elle est déjà utilisée par défaut sur forumactif clin oeil .

Par exemple img_avatar,
on ajoute un saut de ligne avant et après pour de pas survolez les variables voisines hinhin
Code:

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

Valide les changements apportés dans la template en cliquant sur le bouton

Passons à la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Changez les valeurs selon vos envies

Code:

/*Le positionnement du bloc*/
.img_avatar 
{
margin-left:30px;
 -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/*Le positionnement de l'avatar et son apparence*/
.img_avatar img
{
box-shadow: 0px 0px 9px #000000;
border: 2px dotted #20aec8;
padding:2px;
background:#ffffff;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
opacity: 0.8;
}
/*Le positionnement de l'avatar et son apparence au survol*/
.img_avatar:hover
{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}


Valide ensuite les changements en cliquant sur le bouton
Voilà c'est tout pour le moment clin oeil .



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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