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 simple avec hover et feuille de rpg cachée

    Partagez
    avatar
    Merwyn Arehdel
    FémininAge : 18Messages : 298

    le Mer 10 Aoû 2016 - 16:44



    Bonjour, je viens vous proposer un profil à la bordure dorée, avec les informations qui apparaissent à la survol de l'avatar, comme ceci :

    ► Simple
    ► Au survol

    De plus, la feuille de rpg est cachée et s'affiche/se referme quand vous cliquez sur "Ouvrir".

    L'arrière plan sombre est celui de mon forum. L'avatar est en 200x400. Cela a été créé pour phpBB2.

    Il suffit de se rendre dans le template viewtopic_body et de remplacer 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>

    Par ceci :
    Code:
     <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
       <div class="namePOST"><a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div><div class="imgrankPOST">{postrow.displayed.RANK_IMAGE}</div><div class="avaPOST"><div>{postrow.displayed.POSTER_RANK}<br/><br/><!-- BEGIN profile_field --><font style="color:white;">{postrow.displayed.profile_field.LABEL}</font> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div><p>{postrow.displayed.POSTER_AVATAR}</p></div><div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="openPOST">Ouvrir</div><div class="rpgPOST" style="display:none;">{postrow.displayed.POSTER_RPG}</div>
     </td>

    Et le CSS :
    Code:
    /*****************PROFIL*****************/
    /* PSEUDONYME SUJET */
    .namePOST {
      font-family: 'Eagle Lake'; /**modifiable**/
      text-decoration:none;
      text-shadow: 0px 1px lightgrey;
    text-transform:uppercase; text-align:center;
    }
    .namePOST a {
      text-decoration:none;}
    /* AVATAR SUJET */
    .avaPOST {
    position:relative; z-index:5; width:200px; height:400px; overflow:hidden; border-radius:10px;
      border:2px groove DarkGoldenRod; /* MODIFIABLE */
    }
    .avaPOST p {
    position:relative; z-index:3; margin:0;
    }
    .avaPOST:hover p{
    z-index:-1; opacity:0;
    }
    /* INFORMATIONS JOUEUR SUJET */
    .avaPOST div{
    position:absolute;
    width:190px; height:390px; padding:5px; overflow:auto;
    background:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
    font-size:11px; text-align:center;
    }
    /* IMAGE RANG SUJET */
    .imgrankPOST {margin-top:-5px;
    }
    .imgrankPOST img{
    max-height:400px;
    }
    /* OUVRIR FEUILLE DE PERSONNAGE SUJET */
    .openPOST {
    position:relative; z-index:10; margin:auto; margin-top:-15px;
    cursor:pointer; width:175px; height:25px; color:rgba(0,0,0,0);
    background:url(http://image.noelshack.com/fichiers/2016/31/1470580990-sans-titre-2.png);  /* IMAGE 175*25 */
    }
    /* FEUILLE DE PERSONNAGE SUJET */
    .rpgPOST {
    margin-top:-10px;
    padding:08px 10px 10px; border-radius:0 0 15px 15px;
    background:#191919; /* MODIFIABLE */
    font-size:11px;
    }

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    Just want to be yours.
    avatar
    Onyx
    FémininAge : 24Messages : 3134

    le Jeu 22 Déc 2016 - 5:08

    Salut ~

    Merci de donner toutes les informations utiles quand tu donnes un code (version du forum, le truc avec la feuille de rpg, etc). Sur ce, cela me semble bon alors je valide!

    Merci de ton partage.



    avatar
    Jenova
    MasculinAge : 24Messages : 126

    le Jeu 11 Mai 2017 - 16:24

    Bonjour , merci pour votre code, je vais le tester!



    avatar
    Kelalin
    FémininAge : 26Messages : 1957

    le Jeu 11 Mai 2017 - 18:02

    Merci pour le partage !
    avatar
    Amakhaza
    FémininAge : 15Messages : 52

    le Jeu 11 Jan 2018 - 20:29

    merci pour ce code
    Contenu sponsorisé


      La date/heure actuelle est Mar 16 Oct 2018 - 5:12