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.

-20%
Le deal à ne pas rater :
-20% sur le Lot de 2 écrans PC GIGABYTE 27″ LED M27Q
429 € 539 €
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 6 14130310 Profil "moderne" avec effet hover - Page 6 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
    Luuny
    Luuny
    FémininAge : 26Messages : 43

    Mer 24 Déc 2014 - 15:30

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

    Jeu 25 Déc 2014 - 16:16

    Super joli merci :)
    avatar
    Catblack
    FémininAge : 28Messages : 85

    Jeu 25 Déc 2014 - 16:18

    merci
    petit lu
    petit lu
    FémininAge : 31Messages : 184

    Jeu 25 Déc 2014 - 21:24

    Merci :-)
    Xenala
    Xenala
    FémininAge : 41Messages : 28

    Ven 26 Déc 2014 - 20:52

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

    Dim 28 Déc 2014 - 16:28

    Ouah, merci ! *-*
    Monaka
    Monaka
    FémininAge : 31Messages : 137

    Dim 28 Déc 2014 - 18:02

    merci du partage
    Anonymous
    Invité

    Dim 28 Déc 2014 - 19:01

    Very Happy
    louha
    louha
    FémininAge : 36Messages : 219

    Mar 30 Déc 2014 - 16:12

    merci !
    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Mer 31 Déc 2014 - 17:41

    Merci
    avatar
    Garunzo
    MasculinAge : 25Messages : 38

    Jeu 1 Jan 2015 - 16:42

    Merci
    Souky Mitsu
    Souky Mitsu
    FémininAge : 33Messages : 124

    Jeu 1 Jan 2015 - 16:58

    Super ! Merci du partage ! =D
    James K. Lindley
    James K. Lindley
    MasculinAge : 33Messages : 46

    Jeu 1 Jan 2015 - 18:57

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

    Jeu 1 Jan 2015 - 19:50

    j'adooore ! Very Happy



    Profil "moderne" avec effet hover - Page 6 Unicor11
    Synny
    Synny
    FémininAge : 22Messages : 55

    Ven 2 Jan 2015 - 15:47

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

    Ven 2 Jan 2015 - 16:53

    merci beaucoup!
    Screen
    Screen
    FémininAge : 31Messages : 92

    Ven 2 Jan 2015 - 20:19

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

    Sam 3 Jan 2015 - 8:21

    Marchie beaucoup !
    Akina-chan
    Akina-chan
    FémininAge : 30Messages : 140

    Sam 3 Jan 2015 - 12:26

    J'adoooore *o*
    Un énorme merci <3
    Evil Queen 4ever
    Evil Queen 4ever
    FémininAge : 31Messages : 64

    Sam 3 Jan 2015 - 16:27

    super Very Happy




    Profil "moderne" avec effet hover - Page 6 478753Chantal
    yukitg
    yukitg
    FémininAge : 34Messages : 18

    Dim 4 Jan 2015 - 4:45

    Merci!
    JEG Elo
    JEG Elo
    FémininAge : 33Messages : 42

    Lun 5 Jan 2015 - 20:08

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

    Lun 5 Jan 2015 - 21:23

    Merci beaucoup Very Happy
    MxPrime2
    MxPrime2
    MasculinAge : 29Messages : 81

    Mar 6 Jan 2015 - 13:39

    Merci !
    Isy
    Isy
    FémininAge : 37Messages : 27

    Mer 7 Jan 2015 - 21:51

    Superbe! Merci encore
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 21:55