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.

-17%
Le deal à ne pas rater :
Casque de réalité virtuelle Meta Quest 2 128 Go Blanc (+29,99€ ...
249.99 € 299.99 €
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 38 14130310 Profil "moderne" avec effet hover - Page 38 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
    Eetrop
    Eetrop
    MasculinAge : 28Messages : 6

    Jeu 22 Juin 2017 - 17:51

    merki
    DevilJeck
    DevilJeck
    MasculinAge : 29Messages : 6

    Mer 28 Juin 2017 - 14:58

    Super code, merci beaucoup !
    Asgardian
    Asgardian
    MasculinAge : 33Messages : 21

    Mer 28 Juin 2017 - 16:03

    Classe, merci !
    Sylphyde
    Sylphyde
    FémininAge : 32Messages : 18

    Mar 4 Juil 2017 - 20:21

    Merci :)
    saoune972
    saoune972
    FémininAge : 25Messages : 18

    Mer 5 Juil 2017 - 2:04

    Magnifique !!!
    LESIO
    LESIO
    MasculinAge : 26Messages : 10

    Dim 9 Juil 2017 - 20:42

    Mercii
    Jay K.
    Jay K.
    MasculinAge : 32Messages : 23

    Lun 10 Juil 2017 - 22:13

    Ca a l'air sympa ! Merci du partage ♥
    Melle Lena
    Melle Lena
    FémininAge : 49Messages : 308

    Lun 17 Juil 2017 - 20:15

    Merci.
    Mephitiques
    Mephitiques
    MasculinAge : 24Messages : 29

    Mar 18 Juil 2017 - 18:59

    merci
    San'ji
    San'ji
    FémininAge : 31Messages : 33

    Mar 18 Juil 2017 - 23:42

    Merci !



    Profil "moderne" avec effet hover - Page 38 RoseJEexplosion
    Tifastrife
    Tifastrife
    FémininAge : 31Messages : 259

    Mer 26 Juil 2017 - 15:21

    C'est sympa ♥ merci ^^



    Les êtres chèrs que nous avons perdus, et les rêves, qui se sont envolés... Ne les oubliez jamais...

    Profil "moderne" avec effet hover - Page 38 090911064129411932
    Sideris
    Sideris
    FémininAge : 28Messages : 113

    Sam 29 Juil 2017 - 23:07

    Merci pour le partage.









    Suncy
    Suncy
    FémininAge : 23Messages : 12

    Ven 4 Aoû 2017 - 14:29

    merci
    Lazulijune
    Lazulijune
    FémininAge : 25Messages : 14

    Sam 5 Aoû 2017 - 19:49

    Merci !
    Shiro Amakusa
    Shiro Amakusa
    MasculinAge : 28Messages : 47

    Mar 8 Aoû 2017 - 13:22

    Merci beaucoup, je trouve ça hyper beau Very Happy
    Jixdu
    Jixdu
    FémininAge : 22Messages : 40

    Mer 9 Aoû 2017 - 23:16

    J'aime beaucoup merci !
    Darth Bogus
    Darth Bogus
    MasculinAge : 34Messages : 46

    Sam 12 Aoû 2017 - 14:58

    thx
    Strabo
    Strabo
    FémininAge : 36Messages : 18

    Jeu 17 Aoû 2017 - 2:55

    Superbe ! Merci du partage
    blueberrybear
    blueberrybear
    FémininAge : 32Messages : 15

    Ven 18 Aoû 2017 - 18:11

    Bonjour, je trouve cela très joli.
    Merci beaucoup!
    Katorga
    Katorga
    MasculinAge : 26Messages : 7

    Ven 18 Aoû 2017 - 20:12

    Merci, beau travail à toi ! :ordi:
    harizon
    harizon
    FémininAge : 31Messages : 7

    Dim 20 Aoû 2017 - 22:19

    merci ! Very Happy
    Ahina
    Ahina
    FémininAge : 42Messages : 73

    Sam 26 Aoû 2017 - 2:03

    Merci beaucoup \o/
    Versatis35
    Versatis35
    MasculinAge : 23Messages : 6

    Lun 28 Aoû 2017 - 17:08

    merci
    Petite Bulle
    Petite Bulle
    FémininAge : 22Messages : 336

    Mar 29 Aoû 2017 - 19:41

    merci c:



    Profil "moderne" avec effet hover - Page 38 Pb210
    Cannelle Cannelle
    Cannelle Cannelle
    MasculinAge : 25Messages : 33

    Mar 29 Aoû 2017 - 21:23

    Ooh il est sympa !
    Contenu sponsorisé


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