AccueilRechercherS'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.

Le deal à ne pas rater :
Filtre à douche WinArrow WA550 avec cartouche remplaçable
25.79 €
Voir le deal

    Profil avec rotation en hover

    Alumine
    Alumine
    FémininAge : 23Messages : 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)
    Profil avec rotation en hover - Page 2 Profil14 Profil avec rotation en hover - Page 2 Profil15
    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)
    Profil avec rotation en hover - Page 2 Rang_c11 ou Profil avec rotation en hover - Page 2 Rang_f11
    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://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. 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%;
          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' !


    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
    Anonymous
    Invité

    le Lun 6 Oct 2014 - 17:58

    Merci !
    petit lu
    petit lu
    FémininAge : 28Messages : 184

    le Lun 6 Oct 2014 - 23:21

    merci
    Doctor Who
    Doctor Who
    MasculinAge : 27Messages : 160

    le Mar 7 Oct 2014 - 16:23

    Merci beaucoup x)





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

    le Mar 7 Oct 2014 - 17:54

    merci



    Profil avec rotation en hover - Page 2 Btqy
    Daph
    Daph
    FémininAge : 27Messages : 67

    le Mer 8 Oct 2014 - 14:48

    Merci du partage :3



    Mikasa
    Mikasa
    FémininAge : 23Messages : 162

    le Lun 13 Oct 2014 - 2:49

    merci !



    Profil avec rotation en hover - Page 2 Miksa210
    Signa:
    Profil avec rotation en hover - Page 2 Draco10
    Profil avec rotation en hover - Page 2 Mikasa11
    Kaleb32
    Kaleb32
    MasculinAge : 39Messages : 33

    le Ven 17 Oct 2014 - 18:53

    Merci
    Sweet Angel
    Sweet Angel
    FémininAge : 38Messages : 153

    le Sam 18 Oct 2014 - 13:21

    Très beau, merci
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 21Messages : 304

    le Dim 19 Oct 2014 - 17:11

    Merci ^^



    Just want to be yours.
    Cruelly
    Cruelly
    FémininAge : 27Messages : 2605

    le Mar 21 Oct 2014 - 4:32

    Merci beaucoup :)



    :heart: :heart:
    reshiram44
    reshiram44
    MasculinAge : 22Messages : 380

    le Mar 21 Oct 2014 - 23:33

    merci



    Layla4
    Layla4
    FémininAge : 21Messages : 149

    le Jeu 23 Oct 2014 - 15:00

    Thanks *-*
    avatar
    Zahil
    MasculinAge : 27Messages : 29

    le Jeu 23 Oct 2014 - 15:57

    Merci !
    Insanys
    Insanys
    FémininAge : 19Messages : 13

    le Jeu 23 Oct 2014 - 17:50

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

    le Jeu 23 Oct 2014 - 21:25

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

    le Ven 24 Oct 2014 - 16:54

    Meci



    - Je signe Marabout -
    Jull421
    Jull421
    FémininAge : 26Messages : 141

    le Ven 24 Oct 2014 - 18:24

    Merci <3



    Profil avec rotation en hover - Page 2 140228025614860943
    Millaby
    Millaby
    FémininAge : 25Messages : 44

    le Sam 25 Oct 2014 - 13:38

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

    le Dim 26 Oct 2014 - 13:15

    Merci!



    Profil avec rotation en hover - Page 2 1413982207-signg
    Heartfilia
    Heartfilia
    FémininAge : 20Messages : 98

    le Dim 26 Oct 2014 - 23:08

    Joli, merki



    YOU HELLA SAVED MY LIFE
    - chloe price
    Madras
    Madras
    FémininAge : 35Messages : 282

    le Lun 27 Oct 2014 - 10:09

    Merci
    skyfighter
    skyfighter
    MasculinAge : 37Messages : 352

    le Lun 27 Oct 2014 - 22:01

    merci




    Profil avec rotation en hover - Page 2 Signat10
    Pelezinho
    Pelezinho
    MasculinAge : 21Messages : 91

    le Mer 29 Oct 2014 - 3:29

    merci



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

    le Mer 29 Oct 2014 - 13:37

    merci
    Sinon
    Sinon
    FémininAge : 22Messages : 68

    le Mer 29 Oct 2014 - 18:19

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Jan 2021 - 11:48