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.

-20%
Le deal à ne pas rater :
-20% sur le Lot de 2 écrans PC GIGABYTE 27″ LED M27Q
429 € 539 €
Voir le deal

    Profil "moderne" avec effet hover

    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Sam 8 Nov 2014 - 17:56



    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 - Profil "moderne" avec effet hover 14130310 profil - Profil "moderne" avec effet hover 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
    Anonymous
    Invité

    Dim 9 Nov 2014 - 15:05

    Hey !

    Ouh, j'aime beaucoup *-*

    Merci du partage (encore) l'Aluminium Razz
    Scavenger
    Scavenger
    MasculinAge : 31Messages : 1501

    Dim 9 Nov 2014 - 15:13

    Merci Alu, c'est super sympa =)



    Heartfilia
    Heartfilia
    FémininAge : 24Messages : 98

    Dim 9 Nov 2014 - 16:22

    Merci, c'est superbe ! ♥



    YOU HELLA SAVED MY LIFE
    - chloe price
    JasLo
    JasLo
    FémininAge : 22Messages : 76

    Dim 9 Nov 2014 - 19:51

    Trop bow ! Merciiii ♥
    .SaKou.
    .SaKou.
    FémininAge : 28Messages : 57

    Dim 9 Nov 2014 - 19:56

    Merci !



    profil - Profil "moderne" avec effet hover 1351184429-smile
    Cruelly
    Cruelly
    FémininAge : 30Messages : 2605

    Dim 9 Nov 2014 - 20:28

    Magnifique merci beaucoup :)



    :heart: :heart:
    Fayzl4D
    Fayzl4D
    MasculinAge : 27Messages : 84

    Dim 9 Nov 2014 - 20:41

    merci
    Storminder
    Storminder
    MasculinAge : 27Messages : 56

    Dim 9 Nov 2014 - 20:55

    C'est sublime ! Un grand merci Very Happy
    Clarisse
    Clarisse
    FémininAge : 24Messages : 3960

    Lun 10 Nov 2014 - 0:54

    Re re re re merci et c'est vrai que c'est joli ! ^^
    Dahlia
    Dahlia
    FémininAge : 27Messages : 33

    Lun 10 Nov 2014 - 2:09

    merci beaucoup :hug2:
    erika02
    erika02
    FémininAge : 27Messages : 278

    Lun 10 Nov 2014 - 4:38

    Merchi :)



    profil - Profil "moderne" avec effet hover 45054210
    Tatia38
    Tatia38
    FémininAge : 34Messages : 316

    Lun 10 Nov 2014 - 8:51

    Merci beaucoup Very Happy
    Emelyne
    Emelyne
    FémininAge : 42Messages : 77

    Lun 10 Nov 2014 - 12:13

    merci
    avatar
    SinoJak
    MasculinAge : 22Messages : 44

    Lun 10 Nov 2014 - 15:50

    Merci
    Ishyyn
    Ishyyn
    FémininAge : 28Messages : 90

    Lun 10 Nov 2014 - 23:06

    Merchii
    Tropik
    Tropik
    MasculinAge : 30Messages : 58

    Mar 11 Nov 2014 - 0:13

    Merci!!




    lovedesign

    Louchita
    Louchita
    FémininAge : 30Messages : 132

    Mar 11 Nov 2014 - 0:40

    Merci =)



    profil - Profil "moderne" avec effet hover 1466018025-loulousign
    Alonely
    Alonely
    MasculinAge : 29Messages : 43

    Mar 11 Nov 2014 - 4:54

    Merci
    GleekOut!
    GleekOut!
    MasculinAge : 27Messages : 33

    Mar 11 Nov 2014 - 11:06

    C'est sympa, merci du partage. ♥
    Skylighty
    Skylighty
    FémininAge : 94Messages : 100

    Mar 11 Nov 2014 - 14:00

    merciii
    Hagel
    Hagel
    FémininAge : 37Messages : 79

    Mar 11 Nov 2014 - 16:44

    héhé superbe idée, merci!
    Jibunnie
    Jibunnie
    FémininAge : 26Messages : 106

    Ven 14 Nov 2014 - 23:12

    Merci Minemine
    Milka
    Milka
    FémininAge : 35Messages : 112

    Sam 15 Nov 2014 - 8:54

    J'aime beaucoup, merci du partage :)
    EAVENN
    EAVENN
    FémininAge : 27Messages : 162

    Sam 15 Nov 2014 - 18:27

    merci
    Contenu sponsorisé


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