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.

Le Deal du moment : -46%
Oceanic OCEAB120W Batteur électrique – ...
Voir le deal
7.51 €

    Profil simple avec hover et feuille de rpg cachée

    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 24Messages : 304

    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://2img.net/i/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.
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    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.



    Jenova
    Jenova
    MasculinAge : 29Messages : 153

    Jeu 11 Mai 2017 - 16:24

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



    Profil simple avec hover et feuille de rpg cachée I3k3
    Anonymous
    Invité

    Jeu 11 Mai 2017 - 18:02

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

    Jeu 11 Jan 2018 - 20:29

    merci pour ce code
    Spikie
    Spikie
    FémininAge : 32Messages : 91

    Lun 1 Avr 2019 - 12:31

    Merci pour ce code ** il est super ♥

    Cependant j'ai une petite question ... Comment mettre le rang en dehors du cadre survoler ? Qu'il apparaisse en dessous du pseudo sans besoin de survoler l'avatar ??

    Merciiii ♥



    [Bientôt]
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 9:11