Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


  • Poster un nouveau sujet
  • Répondre au sujet

Profil avec rotation en hover

Partagez
FémininAge : 19Message(s) : 486

Les Guildes
Guilde des Conteurs:
0/10  (0/10)
Guilde des Illusionnistes:
0/10  (0/10)
Guilde des Architectes:
5/10  (5/10)
Alumine
le Mar 2 Sep 2014 - 15:51
Rappel du premier message :


/!\Seconde version du code, plus besoin d'image de rang pour qu'il fonctionne ! /!\
♠ Profil avec rotation en hover (Académie Mitsushima)♠




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 !





♠ Définir les rangs ♠

♠ 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.




♠ Le HTML ♠

♠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://illiweb.com/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. Very Happy




♠ Le CSS ♠

♠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%;
      -moz-transform: rotate(0deg);
      -moz-transform-origin: 100% 50%;
      -ms-transform: rotate(0deg);
      -ms-transform-origin: 100% 50%;
      transform: rotate (0deg);
      transform-origin: 100% 50%;
    }

    #profilmembre:hover > .infoprofil {
      -webkit-transform: rotate(0deg);
      -webkit-transform-origin: 100% 50%;
      -moz-transform: rotate(0deg);
      -moz-transform-origin: 100% 50%;
      -ms-transform: rotate(0deg);
      -ms-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);
      -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);
    }
    .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' !
MasculinAge : 21Message(s) : 13
tekeden
le Jeu 30 Oct 2014 - 14:22
thanks Very Happy
FémininAge : 24Message(s) : 89
lelie25
le Ven 31 Oct 2014 - 22:58
je vais tenter
FémininAge : 25Message(s) : 75

Les Guildes
Guilde des Conteurs:
0/0  (0/0)
Guilde des Illusionnistes:
0/0  (0/0)
Guilde des Architectes:
0/0  (0/0)
hoterion
le Sam 1 Nov 2014 - 17:51
merci pour l'astuce!
FémininAge : 28Message(s) : 177
o~°Passion HELL
le Sam 1 Nov 2014 - 18:00
Merci beaucoup !


....
FémininAge : 46Message(s) : 201
Angy38
le Sam 1 Nov 2014 - 19:32
Merci


FémininAge : 22Message(s) : 136
Shanyme Thibolt
le Sam 1 Nov 2014 - 21:10
C'est super comme idée
FémininAge : 16Message(s) : 248

Les Guildes
Guilde des Conteurs:
0/0  (0/0)
Guilde des Illusionnistes:
0/0  (0/0)
Guilde des Architectes:
0/0  (0/0)
Yuki Kaga
le Sam 1 Nov 2014 - 21:24
Thank you very much :3
FémininAge : 19Message(s) : 180

Les Guildes
Guilde des Conteurs:
0/0  (0/0)
Guilde des Illusionnistes:
0/0  (0/0)
Guilde des Architectes:
0/0  (0/0)
Sakura-chan
le Sam 1 Nov 2014 - 23:41
Merci beaucoup ! ^^
FémininAge : 18Message(s) : 46
Claclou02
le Sam 8 Nov 2014 - 23:03
Merci ! Very Happy
FémininAge : 25Message(s) : 92
x_Titia
le Dim 9 Nov 2014 - 12:06
Yay' je vais essayer, merci! Very Happy
MasculinAge : 43Message(s) : 135
sica3
le Mar 2 Déc 2014 - 7:09
thank's
FémininAge : 33Message(s) : 670

Les Guildes
Guilde des Conteurs:
0/0  (0/0)
Guilde des Illusionnistes:
0/0  (0/0)
Guilde des Architectes:
0/0  (0/0)
Angie H.-Carter
le Mar 30 Déc 2014 - 14:46
pas mal merci


Your my brillant! You shine into the darkness and you guide me in my  life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
FémininAge : 27Message(s) : 18
yukitg
le Sam 3 Jan 2015 - 6:08
Merci!
FémininAge : 35Message(s) : 163
Eshon
le Dim 4 Jan 2015 - 2:44
Merci
FémininAge : 53Message(s) : 240
patriciadpt30
le Dim 22 Mar 2015 - 9:48
merci pour voir :) Bon dimanche à vous tous et toutes .


Patricia :)
FémininAge : 27Message(s) : 27
Edgnima
le Mer 25 Mar 2015 - 16:34
Merci ! J'aime beaucoup ! (:
MasculinAge : 24Message(s) : 31
Mayendris
le Ven 10 Avr 2015 - 16:33
Merci beaucoup !
FémininAge : 22Message(s) : 57
Fuyuka
le Ven 8 Mai 2015 - 14:44
Merci beaucoup
FémininAge : 15Message(s) : 108
Damned
le Dim 14 Juin 2015 - 11:55
Merci
MasculinAge : 22Message(s) : 21
Mini007
le Mar 21 Juil 2015 - 9:22
merciii ='D
FémininAge : 26Message(s) : 185
rosebleudu10
le Mer 29 Juil 2015 - 16:32
MERCI
FémininAge : 41Message(s) : 250
Solitude
le Jeu 20 Aoû 2015 - 19:14
Merci


~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
FémininAge : 24Message(s) : 1399

Les Guildes
Guilde des Conteurs:
0/0  (0/0)
Guilde des Illusionnistes:
0/0  (0/0)
Guilde des Architectes:
0/0  (0/0)
Kelalin
le Jeu 20 Aoû 2015 - 22:39
Merci ! (*≧▽≦)
FémininAge : 23Message(s) : 117
Err0r
le Lun 31 Aoû 2015 - 14:04
je pique :3


MasculinAge : 32Message(s) : 95
Sentenza
le Mar 1 Sep 2015 - 19:46
merci !
Contenu sponsorisé
Aujourd'hui à 5:34
  • Poster un nouveau sujet
  • Répondre au sujet

La date/heure actuelle est Sam 3 Déc 2016 - 5:34