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 : -29%
DYSON V8 Origin – Aspirateur balai sans fil
Voir le deal
269.99 €

    Profil "moderne" avec effet hover

    Alumine
    Alumine
    FémininAge : 27Messages : 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 34 14130310 Profil "moderne" avec effet hover - Page 34 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
    Insane.
    Insane.
    FémininAge : 26Messages : 83

    Sam 8 Oct 2016 - 15:08

    J'adore !
    Noubil
    Noubil
    FémininAge : 36Messages : 59

    Jeu 13 Oct 2016 - 11:09

    C'est justement ce que je cherchais :love:
    FraiseChoco
    FraiseChoco
    FémininAge : 31Messages : 31

    Mer 19 Oct 2016 - 6:13

    Super joli, merci ! :)
    Bully
    Bully
    FémininAge : 22Messages : 39

    Mer 19 Oct 2016 - 17:35

    merchi
    Lilou O'Neill
    Lilou O'Neill
    FémininAge : 25Messages : 62

    Sam 22 Oct 2016 - 19:23

    Merci beaucoup !
    Mariana Greyson
    Mariana Greyson
    FémininAge : 26Messages : 78

    Mer 26 Oct 2016 - 11:21

    mrc
    Darouine Lius
    Darouine Lius
    MasculinAge : 35Messages : 77

    Mer 26 Oct 2016 - 15:01

    merci
    Bryan1997
    Bryan1997
    MasculinAge : 27Messages : 51

    Mer 26 Oct 2016 - 19:08

    Merci princesse :cute:
    FreakCreepyGirl
    FreakCreepyGirl
    FémininAge : 28Messages : 20

    Ven 28 Oct 2016 - 17:30

    Merci pour ce partage! ^^
    STL
    STL
    FémininAge : 49Messages : 12

    Dim 30 Oct 2016 - 0:14

    Merci beaucoup! Very Happy
    Mr. Shidokaz
    Mr. Shidokaz
    MasculinAge : 30Messages : 192

    Dim 30 Oct 2016 - 18:59

    Merci beaucoup pour le partage, c'est très sympa comme effet ! Very Happy
    Golden`Lies
    Golden`Lies
    FémininAge : 32Messages : 44

    Lun 31 Oct 2016 - 9:27

    merciii :love:
    Mordiern
    Mordiern
    FémininAge : 47Messages : 285

    Mar 1 Nov 2016 - 15:17

    Merci :)
    Wuun
    Wuun
    MasculinAge : 22Messages : 5

    Mer 2 Nov 2016 - 12:06

    merci
    Omys
    Omys
    FémininAge : 29Messages : 63

    Mer 2 Nov 2016 - 18:40

    merci :3
    Voyageur-B21E3
    Voyageur-B21E3
    MasculinAge : 30Messages : 35

    Sam 5 Nov 2016 - 17:30

    Merci !
    Deran
    Deran
    MasculinAge : 29Messages : 10

    Sam 5 Nov 2016 - 19:12

    merci
    Nyotengu
    Nyotengu
    FémininAge : 30Messages : 85

    Dim 6 Nov 2016 - 18:27

    Merci
    Paulind
    Paulind
    FémininAge : 23Messages : 24

    Lun 7 Nov 2016 - 10:21

    Sublime, merci!
    Gobierno
    Gobierno
    MasculinAge : 31Messages : 1

    Mar 8 Nov 2016 - 0:02

    Merci beaucoup !
    Domori
    Domori
    MasculinAge : 32Messages : 32

    Mer 9 Nov 2016 - 11:22

    Merci :)
    Waize
    Waize
    FémininAge : 26Messages : 34

    Mer 9 Nov 2016 - 22:58

    merci Very Happy
    thidabou
    thidabou
    FémininAge : 23Messages : 37

    Jeu 10 Nov 2016 - 22:44

    Merci !
    Spring
    Spring
    FémininAge : 23Messages : 113

    Ven 11 Nov 2016 - 19:41

    c'est superbe bravo !



    Profil "moderne" avec effet hover - Page 34 1469275904-1466279957-matae-sign
    Kush-Live
    Kush-Live
    MasculinAge : 30Messages : 12

    Mar 15 Nov 2016 - 4:43

    Vraiment stylez
    Contenu sponsorisé


      La date/heure actuelle est Lun 25 Nov 2024 - 1:09