Profil avec rotation en hover

Rappel du premier message :

/!\Seconde version du code, plus besoin d'image de rang pour qu'il fonctionne ! /!\




Bonjour ! Alors ce LS vise à faire ceci, en PHPBB2: (cliquez pour agrandir)

Sachant que la deuxième image correspond à quand l'avatar est survolé (au hover, donc)
C'est un profil avec un avatar de 200 x 400 px, et l'image utilisée s'adapte automatiquement au format. Il y a également un lien "envoyer un MP", comme ici sur NU; et la feuille de personnage s'affiche également sous l'avatar, si tant est qu'elle soit activée bien sûr !






♠ Dans gestion des utilisateurs -> gestion des rangs, commencez par définir vos rangs en leur attribuant des images de ce format ( à présent le code fonctionne aussi sans que vous ayez défini d'image de rang)
ou
Si vous changez cette image il vous faudra adapter les marges dans le CSS.





♠Ensuite, dans le template viewtopic_body, cherchez cette partie de code: ( si vous n'avez rien modifié elle doit se trouver vers la ligne 139)

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
    <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
    <span class="postdetails poster-profile">
    {postrow.displayed.POSTER_RANK}<br />
    {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
    <!-- BEGIN profile_field -->
    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
    <!-- END profile_field -->
    {postrow.displayed.POSTER_RPG}
    </span><br />
    <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
    </td>

et remplacez-la par ceci:

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150" style="padding-right:10px;">
    <div style="position:relative;">
      <div id="profilmembre">
        <div class="avatars">{postrow.displayed.POSTER_AVATAR}</div>
        <div class="infoprofil">
          <!-- BEGIN profile_field -->
          {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
          <!-- END profile_field -->
          {postrow.displayed.POSTER_RPG}
          <span class="label" style="color:#3F2941;">Groupe:</span> {postrow.displayed.POSTER_RANK}<br />
          <span class="label"><a href="/privmsg?mode=post&u=1">Envoyer un MP</a></span>
        </div>
      </div><br />       
      <div class="postdetails poster-profile rang">{postrow.displayed.RANK_IMAGE}</div>
      <span class="name pseudo"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
    </div>
                      </td>

Fait ? Parfait, n'oubliez pas de valider le template.





♠Ensuite, ajoutez ceci au CSS, puis validez :

Code:

/*Profil avec rotation par
    Alumine pour Never-Utopia*/

    #profilmembre {
      position:relative;
      height: 400px;/*hauteur de l'avatar*/
      width: 200px;/*largeur de l'avatar*/
      margin: 10px auto;
    }

    .avatars {
      position: absolute;
      top: 0;
      left: 0;
      background:grey;
      width: 100%;
      height: 100%;
      z-index:3;
      -webkit-transform: rotate(-3deg);
      -webkit-transform-origin:100% 50%;
      -moz-transform: rotate(-3deg);
      -moz-transform-origin:50% 100%;
      -ms-transform: rotate(-3deg);
      -ms-transform-origin:50% 100%;
      transform: rotate (-3deg);
      transform-origin:50% 100%;
      -webkit-transition:all 1s;
      -moz-transition:all 1s;
      -o-transition:all 1s;
      -ms-transition:all 1s;
      transition:all 1s;
      -moz-box-shadow: 2px 2px 5px -2px #595959;
      -webkit-box-shadow: 2px 2px 5px -2px #595959;
      -o-box-shadow: 2px 2px 5px -2px #595959;
      box-shadow: 2px 2px 5px -2px #595959;
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
    }

    .avatar img: {width:100%; height: 100%;}

    .infoprofil {
      position: absolute;
      top: 0;
      left: 0;
      padding:15px;
      width: 170px;/* hauteur de l'avatar moins 2x 15px de padding*/
      height: 370px;/*idem largeur*/
      z-index:0;
      background-image:url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);/*image de fond des infos du profil*/
      color: grey;
      font-size: 13px;
      overflow: auto;
      -webkit-transform: rotate(-3deg);
      -webkit-transform-origin:100% 50%;
      -moz-transform: rotate(-3deg);
      -moz-transform-origin:50% 100%;
      -ms-transform: rotate(-3deg);
      -ms-transform-origin:50% 100%;
      transform: rotate (-3deg);
      transform-origin:50% 100%;
      -webkit-transition:all 1s;
      -moz-transition:all 1s;
      -o-transition:all 1s;
      -ms-transition:all 1s;
      transition:all 1s;
      -moz-box-shadow: 2px 2px 5px -2px #595959;
      -webkit-box-shadow: 2px 2px 5px -2px #595959;
      -o-box-shadow: 2px 2px 5px -2px #595959;
      box-shadow: 2px 2px 5px -2px #595959;
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
    }

    .infoprofil a {color: #3F2941;}/* couleur de "envoyer un mp"*/

    #profilmembre:hover > .avatars {
      opacity: 0;
      filter: alpha(opacity=0);
      visibility: hidden;
      z-index:1;
      -webkit-transform: rotate(0deg);
      -webkit-transform-origin: 100% 50%;
      transform: rotate (0deg);
      transform-origin: 100% 50%;
    }

    #profilmembre:hover > .infoprofil {
      -webkit-transform: rotate(0deg);
      -webkit-transform-origin: 100% 50%;
      transform: rotate (0deg);
      transform-origin: 100% 50%;
    }

    .pseudo{
      display: block;
      height: 1em;
      width: 150px;
      padding:10px;
      margin: auto;
      margin-top: -10px;
      font-size: 20px;/*taille du pseudo*/
      font-family: Georgia, cursive;
      border: 3px double grey;
      text-align:center;
      z-index: 2;
      position:absolute;
      top:420px; left:10px;
      background: lightgrey;
      background-image:url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);
      box-shadow: 2px 2px 5px -2px #595959;
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
    }
    .rang {
      position:relative;
      margin:-75px auto 0px;/* marges de l'image de rang (haut côtés bas)*/
      z-index:3;
      text-align:center;
    }
   

Et voilà, ça devrait être bon ! J'aimerais que vous laissiez le crédit s'il vous plaît, il ne prend que peu de place.
Un petit merci pour voir ~


MAJ le 09/11/14 by Halloween sur demande d'Alu' !

Merci beaucoup, ils sont splendides *^*

Merci également, c'est vraiment le truc bien classe qui m’intéresse

Merci <3

Merci! C'est trop beau!!

Merci c'est gentil

Merci beaucoup !

merci