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 du moment : -87%
HETP [Noire et Rouge HX-Y8] Batterie Externe 25800mah
Voir le deal
19.20 €

    Profil "moderne" avec effet hover

    Alumine
    Alumine
    FémininAge : 22Messages : 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)
    Profil "moderne" avec effet hover - Page 3 14130310 Profil "moderne" avec effet hover - Page 3 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
    Hanako-chan
    Hanako-chan
    FémininAge : 19Messages : 33

    le Lun 24 Nov 2014 - 17:41

    Merci !
    Dydy
    Dydy
    FémininAge : 29Messages : 493

    le Lun 24 Nov 2014 - 21:36

    merci du partage!



    Profil "moderne" avec effet hover - Page 3 27978_signature_never_utopia_dydy_2
    Ouat
    Ouat
    FémininAge : 36Messages : 74

    le Mer 26 Nov 2014 - 9:37

    Merci beaucoup ! Très beau travail !
    Gladou
    Gladou
    MasculinAge : 25Messages : 114

    le Jeu 27 Nov 2014 - 21:48

    merci



    Profil "moderne" avec effet hover - Page 3 Sans_t14
    Costati
    Costati
    FémininAge : 20Messages : 52

    le Ven 28 Nov 2014 - 5:56

    Merci
    sica3
    sica3
    MasculinAge : 46Messages : 135

    le Ven 28 Nov 2014 - 9:48

    thank's
    Strawberry-Swan
    Strawberry-Swan
    FémininAge : 28Messages : 195

    le Ven 28 Nov 2014 - 11:55

    Très beau code, merci du partage !



      x_Titia
      x_Titia
      FémininAge : 29Messages : 92

      le Sam 29 Nov 2014 - 12:39

      waouh j'aime merci! Very Happy
      Neymar
      Neymar
      MasculinAge : 21Messages : 139

      le Sam 29 Nov 2014 - 17:18

      J'aime vraiment ! Bravo pour ton travail *-*
      Neko Mimi
      Neko Mimi
      FémininAge : 29Messages : 165

      le Sam 29 Nov 2014 - 17:27

      Love it



      Profil "moderne" avec effet hover - Page 3 Tumblr_me5uxaCZuJ1qj73e2o1_500
      Iguolta
      Iguolta
      MasculinAge : 20Messages : 198

      le Sam 29 Nov 2014 - 22:10

      Merci ^^



      damon w salvatore
      damon w salvatore
      FémininAge : 32Messages : 109

      le Dim 30 Nov 2014 - 4:40

      merci
      P'tit loup
      P'tit loup
      MasculinAge : 37Messages : 448

      le Mar 2 Déc 2014 - 10:39

      Merci ^^



      Profil "moderne" avec effet hover - Page 3 30xivrd
      wonderfuling
      wonderfuling
      FémininAge : 20Messages : 26

      le Mar 2 Déc 2014 - 19:11

      Magnifique, décidément, j'aime beaucoup tes créations. :)
      BloodyMoony
      BloodyMoony
      FémininAge : 27Messages : 76

      le Mar 2 Déc 2014 - 19:51

      J'aime beaucoup ce que tu proposes :)
      Kinjiro
      Kinjiro
      MasculinAge : 21Messages : 80

      le Mer 3 Déc 2014 - 14:33

      Merci :)



      Profil "moderne" avec effet hover - Page 3 Signau11
      Hyuna
      Hyuna
      FémininAge : 23Messages : 98

      le Mer 3 Déc 2014 - 21:44

      Marchi :3
      AwenWolf
      AwenWolf
      FémininAge : 32Messages : 76

      le Jeu 4 Déc 2014 - 12:07

      Merci *_*
      Edana
      Edana
      FémininAge : 29Messages : 173

      le Jeu 4 Déc 2014 - 13:39

      C'est vraiment joli! Merci! =D
      catinaphone
      catinaphone
      FémininAge : 28Messages : 93

      le Jeu 4 Déc 2014 - 15:01

      Ca a l'air super, merci !
      Xona
      Xona
      FémininAge : 31Messages : 32

      le Jeu 4 Déc 2014 - 23:38

      Magnifique ! Merci :)
      AMIANTE
      AMIANTE
      FémininAge : 24Messages : 36

      le Ven 5 Déc 2014 - 0:16

      merci !



      uc
      Doctor Who
      Doctor Who
      MasculinAge : 27Messages : 160

      le Sam 6 Déc 2014 - 12:50

      Sympa, merci :)





      DOCTOR WHO ☼
      ©️ Yamashita d'épicode
      Jawilsia
      Jawilsia
      FémininAge : 28Messages : 143

      le Sam 6 Déc 2014 - 14:53

      C'est super beau <3
      Heine
      Heine
      MasculinAge : 25Messages : 169

      le Sam 6 Déc 2014 - 18:32

      Merchi o/



      Profil "moderne" avec effet hover - Page 3 110407104459204818
      Contenu sponsorisé


        La date/heure actuelle est Ven 5 Juin 2020 - 8:53