Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Dim 20 Mai 2012 - 8:19
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 .





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

 
  • © PunBB | Signaler un abus