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 : 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)


    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
    Luuny
    FémininAge : 21Messages : 43

    le Mer 24 Déc 2014 - 15:30

    J'adore !
    avatar
    Little angel
    FémininAge : 26Messages : 45

    le Jeu 25 Déc 2014 - 16:16

    Super joli merci :)
    Catblack
    FémininAge : 22Messages : 85

    le Jeu 25 Déc 2014 - 16:18

    merci
    avatar
    petit lu
    FémininAge : 26Messages : 177

    le Jeu 25 Déc 2014 - 21:24

    Merci :-)
    avatar
    Xenala
    FémininAge : 35Messages : 28

    le Ven 26 Déc 2014 - 20:52

    Merci ^^
    avatar
    Écu
    FémininAge : 21Messages : 27

    le Dim 28 Déc 2014 - 16:28

    Ouah, merci ! *-*
    avatar
    Monaka
    FémininAge : 26Messages : 132

    le Dim 28 Déc 2014 - 18:02

    merci du partage
    avatar
    Invité

    le Dim 28 Déc 2014 - 19:01

    Very Happy
    avatar
    louha
    FémininAge : 30Messages : 213

    le Mar 30 Déc 2014 - 16:12

    merci !
    avatar
    Haniwa
    FémininAge : 23Messages : 206

    le Mer 31 Déc 2014 - 17:41

    Merci
    Garunzo
    MasculinAge : 19Messages : 38

    le Jeu 1 Jan 2015 - 16:42

    Merci
    avatar
    Souky Mitsu
    FémininAge : 28Messages : 124

    le Jeu 1 Jan 2015 - 16:58

    Super ! Merci du partage ! =D
    avatar
    James K. Lindley
    MasculinAge : 27Messages : 45

    le Jeu 1 Jan 2015 - 18:57

    J'aime beaucoup ! merci du partage !
    avatar
    Romann
    FémininAge : 24Messages : 183

    le Jeu 1 Jan 2015 - 19:50

    j'adooore ! Very Happy



    avatar
    Synny
    FémininAge : 17Messages : 55

    le Ven 2 Jan 2015 - 15:47

    Joli rendu ! Merci du partage !
    avatar
    ☮ mistletoe
    FémininAge : 19Messages : 28

    le Ven 2 Jan 2015 - 16:53

    merci beaucoup!
    avatar
    Screen
    FémininAge : 26Messages : 92

    le Ven 2 Jan 2015 - 20:19

    Merchioii je vais tester ça :3
    avatar
    Arc-En-Ciela
    FémininAge : 23Messages : 37

    le Sam 3 Jan 2015 - 8:21

    Marchie beaucoup !
    avatar
    Akina-chan
    FémininAge : 25Messages : 138

    le Sam 3 Jan 2015 - 12:26

    J'adoooore *o*
    Un énorme merci <3
    avatar
    Evil Queen 4ever
    FémininAge : 26Messages : 63

    le Sam 3 Jan 2015 - 16:27

    super Very Happy





    avatar
    yukitg
    FémininAge : 29Messages : 18

    le Dim 4 Jan 2015 - 4:45

    Merci!
    avatar
    JEG Elo
    FémininAge : 27Messages : 42

    le Lun 5 Jan 2015 - 20:08

    C'est magnifique bravo à toi pour ta création et surtout merci de nous le faire partager =)
    avatar
    Myfanwi
    FémininAge : 21Messages : 91

    le Lun 5 Jan 2015 - 21:23

    Merci beaucoup Very Happy
    avatar
    MxPrime2
    MasculinAge : 24Messages : 81

    le Mar 6 Jan 2015 - 13:39

    Merci !
    avatar
    Isy
    FémininAge : 32Messages : 27

    le Mer 7 Jan 2015 - 21:51

    Superbe! Merci encore
    Contenu sponsorisé


      La date/heure actuelle est Lun 24 Sep 2018 - 0:07