AccueilDernières imagesRechercherS'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 du moment :
AliExpress : Nouveaux codes promo (8€, 20€, ...
Voir le deal

    Profil avec rotation en hover

    Alumine
    Alumine
    FémininAge : 27Messages : 487

    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 4 Profil14 Profil avec rotation en hover - Page 4 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 4 Rang_c11 ou Profil avec rotation en hover - Page 4 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 ^^
    Chadeauw
    Chadeauw
    FémininAge : 23Messages : 9

    Sam 5 Sep 2015 - 21:43

    Merci beaucoup, ils sont splendides *^*
    Ayamira
    Ayamira
    MasculinAge : 34Messages : 10

    Dim 6 Déc 2015 - 1:07

    Merci également, c'est vraiment le truc bien classe qui m’intéresse Very Happy
    Sasha57
    Sasha57
    FémininAge : 30Messages : 35

    Sam 6 Fév 2016 - 16:20

    Merci <3
    Ari
    Ari
    FémininAge : 23Messages : 109

    Dim 28 Fév 2016 - 19:57

    Merci! C'est trop beau!!
    miss69
    miss69
    FémininAge : 40Messages : 40

    Dim 6 Mar 2016 - 2:54

    Merci c'est gentil
    Scratpub
    Scratpub
    FémininAge : 39Messages : 145

    Jeu 14 Juil 2016 - 13:33

    Merci beaucoup !
    Tchii
    Tchii
    FémininAge : 38Messages : 285

    Dim 16 Oct 2016 - 11:52

    Coucou!
    Merci pour ce petit code, je vais aller le tester.
    A trés vite!
    Tchii.
    alsayed
    alsayed
    MasculinAge : 51Messages : 75

    Ven 19 Mai 2017 - 10:29

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 4 Oct 2024 - 7:18