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
    Alumine
    FémininAge : 19Messages : 486

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

    le Lun 6 Oct 2014 - 17:58

    Merci !
    petit lu
    FémininAge : 24Messages : 162

    le Lun 6 Oct 2014 - 23:21

    merci
    Doctor Who
    MasculinAge : 23Messages : 160

    le Mar 7 Oct 2014 - 16:23

    Merci beaucoup x)





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

    le Mar 7 Oct 2014 - 17:54

    merci



    Daph
    FémininAge : 23Messages : 65

    le Mer 8 Oct 2014 - 14:48

    Merci du partage :3



    Mikasa
    FémininAge : 19Messages : 152

    le Lun 13 Oct 2014 - 2:49

    merci !



    [center]
    Kaleb32
    MasculinAge : 35Messages : 33

    le Ven 17 Oct 2014 - 18:53

    Merci
    Sweet Angel
    FémininAge : 33Messages : 125

    le Sam 18 Oct 2014 - 13:21

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

    le Dim 19 Oct 2014 - 17:11

    Merci ^^



    Just want to be yours.
    Cruelly
    FémininAge : 23Messages : 2444

    le Mar 21 Oct 2014 - 4:32

    Merci beaucoup :)



    Construction d'un forum en cours ! Vous pouvez me donner votre avis ou m'apporter votre soutiens dans mon WIP :hug:
    reshiram44
    MasculinAge : 18Messages : 304

    le Mar 21 Oct 2014 - 23:33

    merci



    Layla4
    FémininAge : 17Messages : 149

    le Jeu 23 Oct 2014 - 15:00

    Thanks *-*
    Zahil
    MasculinAge : 23Messages : 29

    le Jeu 23 Oct 2014 - 15:57

    Merci !
    Insanys
    FémininAge : 15Messages : 13

    le Jeu 23 Oct 2014 - 17:50

    merci beaucoup ♥
    Sekai
    FémininAge : 18Messages : 20

    le Jeu 23 Oct 2014 - 21:25

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

    le Ven 24 Oct 2014 - 16:54

    Meci



    - Je signe Marabout -
    Jull421
    FémininAge : 22Messages : 137

    le Ven 24 Oct 2014 - 18:24

    Merci <3



    Millaby
    FémininAge : 21Messages : 40

    le Sam 25 Oct 2014 - 13:38

    Merci bien ^-^
    Kjellska
    FémininAge : 28Messages : 40

    le Dim 26 Oct 2014 - 13:15

    Merci!



    Heartfilia
    FémininAge : 16Messages : 98

    le Dim 26 Oct 2014 - 23:08

    Joli, merki



    YOU HELLA SAVED MY LIFE
    - chloe price
    Madras
    FémininAge : 31Messages : 239

    le Lun 27 Oct 2014 - 10:09

    Merci
    skyfighter
    MasculinAge : 33Messages : 339

    le Lun 27 Oct 2014 - 22:01

    merci





    Pelezinho
    MasculinAge : 17Messages : 72

    le Mer 29 Oct 2014 - 3:29

    merci



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

    le Mer 29 Oct 2014 - 13:37

    merci
    Sinon
    FémininAge : 17Messages : 68

    le Mer 29 Oct 2014 - 18:19

    Merci !
    Contenu sponsorisé

    Aujourd'hui à 13:41


      La date/heure actuelle est Sam 10 Déc 2016 - 13:41