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 : 487

    le Mar 2 Sep 2014 - 15:51


    /!\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' !
    Araik
    FémininAge : 21Messages : 246

    le Sam 6 Sep 2014 - 18:54

    Merci pour se formidable travaille



    Okhmhaka
    FémininAge : 32Messages : 31823

    le Dim 7 Sep 2014 - 11:55

    Il ressemble un peu à l'un de mes LS... mais c'est une bonne alternative, merci du partage ^^



    Alumine
    FémininAge : 19Messages : 487

    le Dim 7 Sep 2014 - 19:39

    Je viens d'aller voir, et effectivement c'est très ressemblant ! D'ailleurs il est très probable que les forums dont je me suis inspirée aient utilisé ton LS... 
    Merci d'être passé voir en tout cas (=



    Alumine
    Halloween
    FémininAge : 22Messages : 9733

    le Dim 21 Sep 2014 - 19:29

    Je déplace :)



    Je mets les voiles, que le vent te soit favorable matelot !
    SooJaeHee
    FémininAge : 21Messages : 50

    le Lun 22 Sep 2014 - 3:09

    Merci ^^
    liliebia
    FémininAge : 29Messages : 64

    le Lun 22 Sep 2014 - 23:58

    merci
    picka234
    Age : 52Messages : 420

    le Mar 23 Sep 2014 - 14:45

    merci
    Makuro
    FémininAge : 24Messages : 74

    le Mer 24 Sep 2014 - 13:31

    Merci bien o/
    smily
    FémininAge : 18Messages : 63

    le Mer 24 Sep 2014 - 17:12

    Merci !
    Monaka
    FémininAge : 24Messages : 130

    le Jeu 25 Sep 2014 - 7:57

    Serait-ce possible de modifier en 200x320 ?
    Féhéla
    FémininAge : 43Messages : 232

    le Ven 26 Sep 2014 - 6:21

    merci
    Nanou0001
    FémininAge : 32Messages : 50

    le Ven 26 Sep 2014 - 12:11

    ça m'interesse merci
    plushmasters
    FémininAge : 24Messages : 69

    le Sam 27 Sep 2014 - 10:24

    sublime
    lala zhang
    FémininAge : 25Messages : 311

    le Sam 27 Sep 2014 - 14:31

    Merci pour le partage c'est super
    Nal Souclade
    MasculinAge : 18Messages : 163

    le Sam 27 Sep 2014 - 15:25

    C'est très beau ! Merci beaucoup !
    Miyoko
    FémininAge : 24Messages : 213

    le Sam 27 Sep 2014 - 16:53

    super sympa



    Storminder
    MasculinAge : 20Messages : 56

    le Dim 28 Sep 2014 - 13:40

    Merci !
    Afterglow.winter
    FémininAge : 21Messages : 135

    le Dim 28 Sep 2014 - 15:02

    J'aime beaucoup c'est super beau



    How do you get up from an all time low?
    Lady Doll
    FémininAge : 27Messages : 101

    le Lun 29 Sep 2014 - 14:38

    merci ♥
    Sentenza
    MasculinAge : 32Messages : 95

    le Ven 3 Oct 2014 - 16:45

    merci beaucoup!
    Milka
    FémininAge : 28Messages : 109

    le Sam 4 Oct 2014 - 9:19

    Merci pour le partage ^.^
    Piratress
    FémininAge : 19Messages : 190

    le Sam 4 Oct 2014 - 11:13

    Merci c'est super sympa !
    Lutine
    FémininAge : 29Messages : 101

    le Sam 4 Oct 2014 - 11:40

    Merci!
    Féery
    FémininAge : 16Messages : 23

    le Dim 5 Oct 2014 - 16:30

    Merci beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Sam 25 Fév 2017 - 3:12