AccueilFAQRechercherMembresGroupesS'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.


    Profil "moderne" avec effet hover

    Alumine
    Alumine
    FémininAge : 21Messages : 488

    le 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 41 14130310 Profil "moderne" avec effet hover - Page 41 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://illiweb.com/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
    Old
    Old
    MasculinAge : 21Messages : 20

    le Jeu 15 Fév 2018 - 5:53

    merciiii
    Alys19
    Alys19
    FémininAge : 26Messages : 59

    le Lun 19 Fév 2018 - 19:35

    Merci beaucoup ! :love:
    Bunikkk
    Bunikkk
    MasculinAge : 24Messages : 41

    le Sam 3 Mar 2018 - 22:02

    Sublime merci !
    anthony1453
    anthony1453
    MasculinAge : 20Messages : 7

    le Mar 6 Mar 2018 - 20:52

    mairssi bcp merci
    Croque-Mou
    Croque-Mou
    FémininAge : 23Messages : 2

    le Lun 12 Mar 2018 - 17:52

    Merciii ! :)
    -Cobra-
    -Cobra-
    MasculinAge : 19Messages : 33

    le Jeu 15 Mar 2018 - 0:11

    merci
    Coccinelle
    Coccinelle
    FémininAge : 22Messages : 47

    le Sam 17 Mar 2018 - 9:42

    Merci
    Mirage1995
    Mirage1995
    FémininAge : 24Messages : 16

    le Sam 17 Mar 2018 - 14:52

    Merci :)
    RIPRO
    RIPRO
    MasculinAge : 29Messages : 7

    le Dim 18 Mar 2018 - 13:52

    merci
    Applauze
    Applauze
    MasculinAge : 23Messages : 167

    le Ven 23 Mar 2018 - 10:55

    Merkii
    Lynx
    Lynx
    MasculinAge : 27Messages : 4

    le Ven 23 Mar 2018 - 14:17

    Merci Very Happy
    InfiniKey
    InfiniKey
    FémininAge : 33Messages : 58

    le Sam 24 Mar 2018 - 14:05

    Allons tester cette beauté ! ♥ merciiiiiii
    Vintage Phonic
    Vintage Phonic
    FémininAge : 29Messages : 21

    le Sam 24 Mar 2018 - 14:21

    C'est superbe!
    Crystal ZA
    Crystal ZA
    FémininAge : 22Messages : 28

    le Lun 26 Mar 2018 - 2:26

    Merci !
    sunn-day
    sunn-day
    MasculinAge : 24Messages : 44

    le Jeu 29 Mar 2018 - 22:10

    merci
    YasmineH
    YasmineH
    FémininAge : 16Messages : 20

    le Sam 7 Avr 2018 - 18:45

    je te remercie pour ce partage
    LittleBlackCat13
    LittleBlackCat13
    FémininAge : 26Messages : 3

    le Lun 9 Avr 2018 - 19:12

    Merci pour ça ♥
    Toxinou
    Toxinou
    FémininAge : 27Messages : 39

    le Lun 9 Avr 2018 - 21:57

    merci :)
    Hakuna Patata
    Hakuna Patata
    FémininAge : 26Messages : 70

    le Ven 13 Avr 2018 - 14:04

    C'est top :)
    Noir Black
    Noir Black
    FémininAge : 33Messages : 42

    le Sam 14 Avr 2018 - 22:19

    merci
    GleeClub
    GleeClub
    FémininAge : 25Messages : 48

    le Dim 15 Avr 2018 - 23:28

    merci Very Happy
    Lancy Orca
    Lancy Orca
    FémininAge : 28Messages : 20

    le Mar 17 Avr 2018 - 14:49

    Magnifique merci beaucoup :)
    Fanel
    Fanel
    FémininAge : 29Messages : 23

    le Mar 31 Juil 2018 - 10:02

    Merci pour ça, c'est super !
    unbreakable.
    unbreakable.
    FémininAge : 25Messages : 10

    le Jeu 27 Déc 2018 - 12:58

    Merci beaucoup ! :love:
    Litalis
    Litalis
    MasculinAge : 23Messages : 27

    le Mar 28 Mai 2019 - 7:50

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 11:56