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
    tekeden
    MasculinAge : 21Messages : 13

    le Jeu 30 Oct 2014 - 14:22

    thanks Very Happy
    avatar
    lelie25
    FémininAge : 25Messages : 89

    le Ven 31 Oct 2014 - 22:58

    je vais tenter
    avatar
    hoterion
    FémininAge : 25Messages : 75

    le Sam 1 Nov 2014 - 17:51

    merci pour l'astuce!
    avatar
    o~°Passion HELL
    FémininAge : 29Messages : 206

    le Sam 1 Nov 2014 - 18:00

    Merci beaucoup !



    ....
    avatar
    Angy38
    FémininAge : 47Messages : 206

    le Sam 1 Nov 2014 - 19:32

    Merci



    avatar
    Shanyme Thibolt
    FémininAge : 23Messages : 142

    le Sam 1 Nov 2014 - 21:10

    C'est super comme idée
    avatar
    Yuki Kaga
    FémininAge : 16Messages : 261

    le Sam 1 Nov 2014 - 21:24

    Thank you very much :3
    avatar
    Sakura-chan
    FémininAge : 20Messages : 180

    le Sam 1 Nov 2014 - 23:41

    Merci beaucoup ! ^^
    Claclou02
    FémininAge : 19Messages : 46

    le Sam 8 Nov 2014 - 23:03

    Merci ! Very Happy
    avatar
    x_Titia
    FémininAge : 26Messages : 92

    le Dim 9 Nov 2014 - 12:06

    Yay' je vais essayer, merci! Very Happy
    avatar
    sica3
    MasculinAge : 43Messages : 135

    le Mar 2 Déc 2014 - 7:09

    thank's
    avatar
    Angie H.-Carter
    FémininAge : 33Messages : 691

    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!
    avatar
    yukitg
    FémininAge : 27Messages : 18

    le Sam 3 Jan 2015 - 6:08

    Merci!
    avatar
    Eshon
    FémininAge : 36Messages : 191

    le Dim 4 Jan 2015 - 2:44

    Merci
    avatar
    patriciadpt30
    FémininAge : 54Messages : 240

    le Dim 22 Mar 2015 - 9:48

    merci pour voir :) Bon dimanche à vous tous et toutes .



    Patricia :)
    avatar
    Edgnima
    FémininAge : 27Messages : 27

    le Mer 25 Mar 2015 - 16:34

    Merci ! J'aime beaucoup ! (:
    avatar
    Mayendris
    MasculinAge : 24Messages : 31

    le Ven 10 Avr 2015 - 16:33

    Merci beaucoup !
    avatar
    Fuyuka
    FémininAge : 22Messages : 62

    le Ven 8 Mai 2015 - 14:44

    Merci beaucoup
    avatar
    Damned
    FémininAge : 15Messages : 108

    le Dim 14 Juin 2015 - 11:55

    Merci
    avatar
    Mini007
    MasculinAge : 23Messages : 21

    le Mar 21 Juil 2015 - 9:22

    merciii ='D
    avatar
    rosebleudu10
    FémininAge : 27Messages : 186

    le Mer 29 Juil 2015 - 16:32

    MERCI
    avatar
    Solitude
    FémininAge : 42Messages : 283

    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. ~
    avatar
    Kelalin
    FémininAge : 24Messages : 1516

    le Jeu 20 Aoû 2015 - 22:39

    Merci ! (*≧▽≦)
    avatar
    Err0r
    FémininAge : 23Messages : 133

    le Lun 31 Aoû 2015 - 14:04

    je pique :3



    avatar
    Sentenza
    MasculinAge : 32Messages : 95

    le Mar 1 Sep 2015 - 19:46

    merci !
    Contenu sponsorisé


      La date/heure actuelle est Mar 25 Juil 2017 - 22:45