AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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.


    Profil avec rotation en hover

    Partagez
    avatar
    Alumine
    FémininAge : 19Messages : 488

    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' !
    avatar
    Invité

    le Lun 6 Oct 2014 - 17:58

    Merci !
    avatar
    petit lu
    FémininAge : 24Messages : 170

    le Lun 6 Oct 2014 - 23:21

    merci
    avatar
    Doctor Who
    MasculinAge : 24Messages : 160

    le Mar 7 Oct 2014 - 16:23

    Merci beaucoup x)





    DOCTOR WHO ☼
    © Yamashita d'épicode
    avatar
    Klemmeria
    FémininAge : 17Messages : 147

    le Mar 7 Oct 2014 - 17:54

    merci



    avatar
    Daph
    FémininAge : 24Messages : 66

    le Mer 8 Oct 2014 - 14:48

    Merci du partage :3



    avatar
    Mikasa
    FémininAge : 19Messages : 155

    le Lun 13 Oct 2014 - 2:49

    merci !




    Signa:


    avatar
    Kaleb32
    MasculinAge : 35Messages : 33

    le Ven 17 Oct 2014 - 18:53

    Merci
    avatar
    Sweet Angel
    FémininAge : 34Messages : 145

    le Sam 18 Oct 2014 - 13:21

    Très beau, merci
    avatar
    Merwyn Arehdel
    FémininAge : 17Messages : 298

    le Dim 19 Oct 2014 - 17:11

    Merci ^^



    Just want to be yours.
    avatar
    Cruelly
    FémininAge : 24Messages : 2543

    le Mar 21 Oct 2014 - 4:32

    Merci beaucoup :)




    avatar
    reshiram44
    MasculinAge : 18Messages : 335

    le Mar 21 Oct 2014 - 23:33

    merci



    avatar
    Layla4
    FémininAge : 18Messages : 149

    le Jeu 23 Oct 2014 - 15:00

    Thanks *-*
    Zahil
    MasculinAge : 23Messages : 29

    le Jeu 23 Oct 2014 - 15:57

    Merci !
    avatar
    Insanys
    FémininAge : 16Messages : 13

    le Jeu 23 Oct 2014 - 17:50

    merci beaucoup ♥
    avatar
    Sekai
    FémininAge : 19Messages : 20

    le Jeu 23 Oct 2014 - 21:25

    Template très sympa ** Merci !
    avatar
    Leoguillem
    MasculinAge : 17Messages : 137

    le Ven 24 Oct 2014 - 16:54

    Meci



    - Je signe Marabout -
    avatar
    Jull421
    FémininAge : 22Messages : 139

    le Ven 24 Oct 2014 - 18:24

    Merci <3



    avatar
    Millaby
    FémininAge : 22Messages : 43

    le Sam 25 Oct 2014 - 13:38

    Merci bien ^-^
    avatar
    Kjellska
    FémininAge : 29Messages : 40

    le Dim 26 Oct 2014 - 13:15

    Merci!



    avatar
    Heartfilia
    FémininAge : 17Messages : 98

    le Dim 26 Oct 2014 - 23:08

    Joli, merki



    YOU HELLA SAVED MY LIFE
    - chloe price
    avatar
    Madras
    FémininAge : 32Messages : 277

    le Lun 27 Oct 2014 - 10:09

    Merci
    avatar
    skyfighter
    MasculinAge : 34Messages : 350

    le Lun 27 Oct 2014 - 22:01

    merci





    avatar
    Pelezinho
    MasculinAge : 18Messages : 76

    le Mer 29 Oct 2014 - 3:29

    merci



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    avatar
    Riten
    MasculinAge : 19Messages : 30

    le Mer 29 Oct 2014 - 13:37

    merci
    avatar
    Sinon
    FémininAge : 18Messages : 68

    le Mer 29 Oct 2014 - 18:19

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Dim 23 Juil 2017 - 6:55