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
    cali60
    FémininAge : 32Messages : 58

    le Sam 6 Déc 2014 - 20:18

    merci :)
    avatar
    Mika-chan
    FémininAge : 26Messages : 76

    le Dim 7 Déc 2014 - 14:04

    merci beaucoup :3
    avatar
    Kuro no Sora
    MasculinAge : 19Messages : 25

    le Dim 7 Déc 2014 - 14:11

    Merci. 'o'
    avatar
    Layla4
    FémininAge : 18Messages : 149

    le Dim 7 Déc 2014 - 16:33

    Magnifique, j'aime beaucoup, thanks a lot ♥
    avatar
    Daydream
    FémininAge : 20Messages : 44

    le Dim 7 Déc 2014 - 19:15

    Merci !
    avatar
    younessdu91
    MasculinAge : 20Messages : 96

    le Dim 7 Déc 2014 - 19:26

    Merci !
    avatar
    Toonsi
    MasculinAge : 19Messages : 40

    le Lun 8 Déc 2014 - 4:15

    MERCI MERCI
    avatar
    Noruenu
    FémininAge : 25Messages : 123

    le Lun 8 Déc 2014 - 15:08

      Merci ! :B
    avatar
    webs
    MasculinAge : 25Messages : 1097

    le Lun 8 Déc 2014 - 19:37

    merci



    avatar
    xpykaa
    FémininAge : 26Messages : 2

    le Mar 9 Déc 2014 - 13:59

    Magnifique codage merci du partage
    avatar
    Amber's
    FémininAge : 17Messages : 158

    le Mar 9 Déc 2014 - 22:14

    Merci ♥
    avatar
    りん
    FémininAge : 25Messages : 73

    le Mer 10 Déc 2014 - 10:14

    Merci beaucoup, c'est un joli rendu ! =)
    avatar
    Darksoul666
    MasculinAge : 34Messages : 10

    le Mer 10 Déc 2014 - 12:30

    merci
    avatar
    Carly
    FémininAge : 22Messages : 134

    le Mer 10 Déc 2014 - 16:25

    Merci
    avatar
    Dokigaygay
    MasculinAge : 19Messages : 29

    le Mer 10 Déc 2014 - 16:35

    Meeeerci c'est magnidiquuuue *-*
    avatar
    Moon Heart
    FémininAge : 18Messages : 37

    le Mer 10 Déc 2014 - 23:46

    Merci beaucoup c'est ce que je cherchais ^^
    avatar
    Yumi-chan
    FémininAge : 25Messages : 67

    le Jeu 11 Déc 2014 - 1:45

    Thanks ! *-*
    avatar
    Riten
    MasculinAge : 20Messages : 30

    le Jeu 11 Déc 2014 - 10:17

    Merci
    avatar
    Leelo
    FémininAge : 26Messages : 147

    le Jeu 11 Déc 2014 - 14:55

    j'aime bien
    avatar
    Angy38
    FémininAge : 48Messages : 212

    le Jeu 11 Déc 2014 - 17:39

    Merci !



    avatar
    Fallen Swallow
    FémininAge : 25Messages : 46

    le Jeu 11 Déc 2014 - 17:55

    Merciiiiiiiii ♥♥♥
    avatar
    Ysamar
    FémininAge : 38Messages : 37

    le Ven 12 Déc 2014 - 1:15

    merci
    avatar
    Euterpe
    FémininAge : 31Messages : 301

    le Ven 12 Déc 2014 - 12:54

    merci
    avatar
    0smose
    FémininAge : 22Messages : 165

    le Ven 12 Déc 2014 - 20:26

    Je vais tester, merci ! Very Happy





    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    avatar
    MissDream
    FémininAge : 22Messages : 144

    le Sam 13 Déc 2014 - 16:56

    merci :)

    Contenu sponsorisé


      La date/heure actuelle est Mar 22 Mai 2018 - 16:01