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 à ne pas rater :
Nike : Jusqu’à 50% sur les articles de fin de saison
Voir le deal

    Profil "moderne" avec effet hover

    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Sam 8 Nov 2014 - 17:56

    Rappel du premier message :



    Profil "moderne" avec effet hover


    Voici un petit LS à la demande de Clarisse; l'avatar est de taille 200x320px et les infos apparaissent au hover. Il n'y a pas de place prévue pour une image de rang mais seulement pour un texte.
    Alors ça donne ça (images faites par Clarisse) (la deuxième image est au survol)
    Profil "moderne" avec effet hover - Page 2 14130310 Profil "moderne" avec effet hover - Page 2 14130311

    Template

    Pour commencer rendez-vous dans votre panneau d'admin > affichage > Templates > général et dans Viewtopic_body, c'est la partie de HTML qui concerne l'affichage des messages.
    Vers la ligne 139 si vous n'avez rien changé, trouvez ceci
    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-le par ça :
    Code:
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                      <div class="profilmembre"><div class="pseudo"><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><div class="flecheprofil"></div></div>
     <span class="postdetails poster-profile">
     {postrow.displayed.POSTER_AVATAR}
                                      <div class="rang">{postrow.displayed.POSTER_RANK}</div>
     <div class="infoprofil"><!-- BEGIN profile_field -->
                                      {postrow.displayed.profile_field.LABEL} <span class="infoprofilrep">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}
                                      <!-- END profile_field --></div>
     {postrow.displayed.POSTER_RPG}
                        </span></div>
     </td>


    Ensuite, validez et n'oubliez pas de publier votre template (=

    CSS
    La suite se passe dans couleurs>feuille de style CSS !
    Ajoutez ceci
    Code:
    /*Profil et affichage de lavatar par Alu pour Never utopia */
    .profilmembre {
      border: 1px solid #a19388;
      position:relative;
      margin-right:10px;/*à adapter pour que la flèche noire ne morde pas le texte (augmenter)*/
      background-color:#ABABAB;
    }

    .pseudo{
          padding:4px 0;
          width:200px;
          background-color:#1C1C1C;
          position:relative;
          text-align:center;
          color:#949046;
          font:Josefin Slab, Georgia;
          text-transform:uppercase;
    }

    .pseudo .name a{font-size:24px; font-weight:300;color:#737373 !important;}

    .flecheprofil{
      width:0px;
      height:0px;
      border:8px solid transparent;
      border-left:25px solid #1C1C1C;
      position:absolute;
      top:10px;
      left:200px;
    }

    .rang {
      width:136px;
      height:19px;
      background-color: #1C1C1C;
      font: 10px Josefin Slab, Georgia;
      line-height:95%;
      text-transform: uppercase;
      color:#636363;
      margin:-15px auto 5px auto;
      padding:2px;
      text-align:center;  
      position:relative;
      z-index:2;
      -moz-box-shadow: 0px 0px 8px 0px #656565;
      -webkit-box-shadow: 0px 0px 8px 0px #656565;
      -o-box-shadow: 0px 0px 8px 0px #656565;
      box-shadow: 0px 0px 8px 0px #656565;
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=8);
    }
    .infoprofil{
      position:absolute;
      top:35px;
      left:0;
      background: rgba(0, 0, 0, 0.75);
      opacity:0;
      filter:alpha(opacity=0);
      height:320px;
      width:200px;
      text-align:center;
      font:13px sans-serif 500;
      text-transform:uppercase;
      color:#8A8A8A;
      -moz-transition: all 0.7s ease;
      -webkit-transition: all 0.7s ease;
      -o-transition: all 0.7s ease;
      transition: all 0.7s ease;
    }
    .infoprofil:hover{opacity:1; filter:alpha(opacity=100);}

    .infoprofil .label span {
      visibility:visible;
      text-decoration:underline;
      display:block;
      background-color:rgba(0, 0, 0, 0.65);
      color:#8A8A8A !important;
      padding:5px;
      margin: 5px 0 -5px 0;
    }
    .infoprofil .label{visibility:hidden;}
    .infoprofilrep {
      visibility:visible;
      display:block;
      background-color:rgba(0, 0, 0, 0.65);
      padding:3px;
      margin:-5px 0 -3px 0;
    }
    /*fin du profil ****************************************************/

    Puis validez, et c'est terminé ! Par contre il peut y avoir une petite modification à faire, pour que la petite flèche noire ne morde pas le texte du message, il faut éventuellement augmenter la marge de droite (margin-right) j'ai légendé l'endroit où le faire (=
    Voilà c'est tout ! Mettez un petit crédit à N-U s'il vous plaît ~

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.



    Alumine
    O'Daim
    O'Daim
    FémininAge : 28Messages : 116

    Sam 15 Nov 2014 - 23:12

    C'est super cool ! Génial
    Faraday
    Faraday
    FémininAge : 33Messages : 39

    Dim 16 Nov 2014 - 9:33

    Merci!
    Manouille
    Manouille
    FémininAge : 23Messages : 9

    Dim 16 Nov 2014 - 14:54

    Très joli ! Merci ^^
    GreenGage
    GreenGage
    FémininAge : 30Messages : 73

    Dim 16 Nov 2014 - 15:26

    C'est sympa, merci du partage.
    Vegvisir
    Vegvisir
    FémininAge : 24Messages : 411

    Dim 16 Nov 2014 - 15:53

    Très joli ! Merci !



    Profil "moderne" avec effet hover - Page 2 1
    Anonymous
    Invité

    Dim 16 Nov 2014 - 16:22

    Merci !
    Kianda
    Kianda
    MasculinAge : 23Messages : 88

    Dim 16 Nov 2014 - 21:36

    Merci beaucoup :)



    Profil "moderne" avec effet hover - Page 2 1416416855-kandiasigna
    Grande
    Grande
    FémininAge : 36Messages : 207

    Dim 16 Nov 2014 - 21:43

    Très joli



    Profil "moderne" avec effet hover - Page 2 171074gwenj10
    SEVAN
    SEVAN
    FémininAge : 31Messages : 46

    Lun 17 Nov 2014 - 0:29

    merci :)
    1charlotte
    1charlotte
    FémininAge : 22Messages : 196

    Lun 17 Nov 2014 - 1:09

    Superbe ! Merci ^^
    avatar
    Løve
    MasculinAge : 28Messages : 189

    Mer 19 Nov 2014 - 14:56

    Merci o/
    Alice Margatroid
    Alice Margatroid
    FémininAge : 28Messages : 38

    Mer 19 Nov 2014 - 15:35

    Merci beaucoup, c'est maginifique !



    Profil "moderne" avec effet hover - Page 2 Icon110
    hirondelle
    hirondelle
    FémininAge : 34Messages : 134

    Mer 19 Nov 2014 - 18:35

    Merci ♥
    Anonymous
    Invité

    Mer 19 Nov 2014 - 19:21

    Merci
    Azzuen
    Azzuen
    FémininAge : 25Messages : 61

    Jeu 20 Nov 2014 - 3:21

    Merci beaucoup!
    Depp
    Depp
    FémininAge : 32Messages : 300

    Jeu 20 Nov 2014 - 14:16

    Oh la vache, c'est superbe !!! un grand merci !! ça va faire trop bien sur mon forum **



    Profil "moderne" avec effet hover - Page 2 Tumblr_nenygwIlcz1s4u464o1_500
    Lutine
    Lutine
    FémininAge : 36Messages : 102

    Jeu 20 Nov 2014 - 21:17

    Merci!
    avatar
    AQW
    FémininAge : 29Messages : 225

    Jeu 20 Nov 2014 - 23:02

    Merci !
    Ceecemel
    Ceecemel
    FémininAge : 26Messages : 36

    Ven 21 Nov 2014 - 0:31

    merciiii
    Kau
    Kau
    FémininAge : 22Messages : 148

    Ven 21 Nov 2014 - 4:02

    Joli joli, merci beaucoup !
    Hiai
    Hiai
    MasculinAge : 33Messages : 31

    Ven 21 Nov 2014 - 17:23

    C'est beau *-*
    Alessea
    Alessea
    FémininAge : 26Messages : 74

    Sam 22 Nov 2014 - 22:44

    C'est magnifique *^* merci ♥
    Kimberlay *
    Kimberlay *
    FémininAge : 33Messages : 161

    Dim 23 Nov 2014 - 12:56

    Oh c'est vraiment joli ! J'aime beaucoup
    Sweet Angel
    Sweet Angel
    FémininAge : 41Messages : 153

    Lun 24 Nov 2014 - 8:06

    Super beau, merci
    HEAVEN.SPIRIT
    HEAVEN.SPIRIT
    MasculinAge : 29Messages : 37

    Lun 24 Nov 2014 - 15:11

    merci pour le partage
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 15:15