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

Le deal à ne pas rater :
Pompe à air électrique et portable Xiaomi Mi Pump
29.99 €
Voir le deal

    Profil "moderne" avec effet hover

    Alumine
    Alumine
    FémininAge : 23Messages : 488

    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 22 14130310 Profil "moderne" avec effet hover - Page 22 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
    NyxBanana
    NyxBanana
    FémininAge : 27Messages : 19

    Jeu 24 Sep 2015 - 15:31

    merci :)
    Eshon
    Eshon
    FémininAge : 39Messages : 196

    Ven 25 Sep 2015 - 17:06

    Merci ! :)
    Anselm
    Anselm
    MasculinAge : 29Messages : 151

    Ven 25 Sep 2015 - 17:48

    Merci !
    Kraken
    Kraken
    FémininAge : 28Messages : 137

    Dim 27 Sep 2015 - 13:40

    merci du partage. ♥
    Orange Sanguine
    Orange Sanguine
    FémininAge : 24Messages : 86

    Lun 28 Sep 2015 - 4:18

    Merci Very Happy



    Profil "moderne" avec effet hover - Page 22 Sans_t11
    RaisedByWolves
    RaisedByWolves
    FémininAge : 22Messages : 39

    Mar 29 Sep 2015 - 16:44

    merci
    Aynam
    Aynam
    FémininAge : 24Messages : 73

    Mar 29 Sep 2015 - 23:08

    Merci !




    Sleyah
    Sleyah
    FémininAge : 30Messages : 19

    Sam 3 Oct 2015 - 11:43

    Merci
    Baylee Hamilton
    Baylee Hamilton
    FémininAge : 25Messages : 67

    Sam 3 Oct 2015 - 18:07

    wow c'est magnifique et simple j'adore ^^
    Ciel H.
    Ciel H.
    FémininAge : 23Messages : 50

    Dim 4 Oct 2015 - 17:28

    Merciiii
    Raclaw Leonheart
    Raclaw Leonheart
    MasculinAge : 23Messages : 11

    Mar 6 Oct 2015 - 18:50

    vachement sympa , simple et sobre
    Ju08
    Ju08
    FémininAge : 31Messages : 26

    Mer 7 Oct 2015 - 23:05

    Très jolie =)
    Sasha57
    Sasha57
    FémininAge : 26Messages : 35

    Ven 9 Oct 2015 - 10:25

    Ce profil est super joli, merci du partage *o*
    Kanra
    Kanra
    FémininAge : 20Messages : 113

    Lun 12 Oct 2015 - 12:18

    Merci!
    Mello
    Mello
    FémininAge : 23Messages : 52

    Mar 13 Oct 2015 - 19:06

    Merci
    Demowee
    Demowee
    MasculinAge : 24Messages : 43

    Mer 14 Oct 2015 - 2:05

    Merci Wink
    AMYROSSLEDGER
    AMYROSSLEDGER
    FémininAge : 27Messages : 37

    Mer 14 Oct 2015 - 13:17

    fantastique ! :bave:
    merci du partage, magnifique travail !
    athenais
    athenais
    FémininAge : 33Messages : 98

    Jeu 15 Oct 2015 - 18:20

    Merci Wink
    сhampi
    сhampi
    FémininAge : 22Messages : 150

    Jeu 15 Oct 2015 - 18:28

    Il est magnifique OMG !

    Merci beaucoup pour le codage, je te l'emprunte pour mon forum !
    Aksss
    Aksss
    MasculinAge : 24Messages : 26

    Jeu 15 Oct 2015 - 18:35

    merci du partage :)



    Profil "moderne" avec effet hover - Page 22 13012207000434786
    Rubis-Hope
    Rubis-Hope
    FémininAge : 28Messages : 46

    Jeu 15 Oct 2015 - 20:19

    Sublime, merci du partage.
    Pavlover
    Pavlover
    FémininAge : 24Messages : 24

    Ven 16 Oct 2015 - 4:38

    Rah c'est beau x) merci!
    Kobye
    Kobye
    FémininAge : 24Messages : 38

    Sam 17 Oct 2015 - 2:16

    thanks
    Lilie
    Lilie
    FémininAge : 37Messages : 188

    Mer 21 Oct 2015 - 22:36

    Merci :)
    ~Nodoka~
    ~Nodoka~
    FémininAge : 23Messages : 185

    Jeu 22 Oct 2015 - 19:07

    mercii
    Contenu sponsorisé


      La date/heure actuelle est Mar 9 Mar 2021 - 2:00