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

    Partagez
    avatar
    Alumine
    FémininAge : 20Messages : 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)


    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
    avatar
    Alborio
    MasculinAge : 19Messages : 33

    le Sam 2 Sep 2017 - 15:41

    Merci !
    avatar
    Lénalee01
    FémininAge : 28Messages : 20

    le Mer 13 Sep 2017 - 14:08

    waouh
    avatar
    Exes
    MasculinAge : 20Messages : 17

    le Dim 17 Sep 2017 - 23:11

    merci
    avatar
    Bull
    FémininAge : 20Messages : 8

    le Lun 18 Sep 2017 - 17:22

    Coucou, merci beaucoup !
    avatar
    phenixia74
    FémininAge : 39Messages : 48

    le Mar 19 Sep 2017 - 18:27

    Merci pour les codes ♥
    avatar
    ¨Lame Spirit
    FémininAge : 20Messages : 28

    le Mar 19 Sep 2017 - 20:21

    merciiii
    avatar
    Soon
    FémininAge : 31Messages : 76

    le Mar 26 Sep 2017 - 18:08

    merci pour le partage
    avatar
    Arcanine
    FémininAge : 27Messages : 14

    le Jeu 28 Sep 2017 - 1:00

    oh génial que demandé de plus Very Happy
    avatar
    Titou2302
    MasculinAge : 15Messages : 95

    le Ven 29 Sep 2017 - 20:58

    Merci ^^

    avatar
    AryaS-
    FémininAge : 18Messages : 15

    le Mar 3 Oct 2017 - 17:26

    merci
    avatar
    ptite_perle
    FémininAge : 54Messages : 124

    le Lun 9 Oct 2017 - 18:31

    Merci



    avatar
    Reishi
    MasculinAge : 24Messages : 145

    le Mar 10 Oct 2017 - 16:54

    Merci !
    avatar
    Illeanëlia
    FémininAge : 32Messages : 88

    le Mar 10 Oct 2017 - 23:46

    très jolie merci
    avatar
    Mirony
    FémininAge : 30Messages : 39

    le Jeu 12 Oct 2017 - 22:33

    Merci pour ce partage, il est magnifique!
    avatar
    Sow_Oxalys
    FémininAge : 27Messages : 21

    le Mar 24 Oct 2017 - 22:08

    merci !
    avatar
    Cadmée
    FémininAge : 42Messages : 11

    le Ven 27 Oct 2017 - 0:15

    merci Very Happy
    avatar
    Karine96
    FémininAge : 22Messages : 1

    le Ven 27 Oct 2017 - 12:38

    Superbe ! Merci c:
    avatar
    Marelle
    FémininAge : 25Messages : 4

    le Sam 28 Oct 2017 - 12:44

    Merci beaucoup ! :omg: c'est génial !
    avatar
    alysszen
    FémininAge : 22Messages : 16

    le Jeu 2 Nov 2017 - 16:29

    Merci
    avatar
    Arkaline
    FémininAge : 27Messages : 186

    le Mer 8 Nov 2017 - 14:12

    Merci !



    Arkaline
    avatar
    ThunderTB
    MasculinAge : 34Messages : 13

    le Dim 12 Nov 2017 - 21:19

    Merci pour le partage !!!
    avatar
    Syler
    FémininAge : 18Messages : 31

    le Jeu 16 Nov 2017 - 12:12

    Mercii !
    avatar
    mrnlisa
    FémininAge : 22Messages : 7

    le Jeu 23 Nov 2017 - 14:40

    merci
    avatar
    Zackeyn
    MasculinAge : 27Messages : 7

    le Lun 4 Déc 2017 - 23:50

    Merci !
    avatar
    Colombe V
    FémininAge : 20Messages : 15

    le Mar 5 Déc 2017 - 9:35

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Juin 2018 - 2:56