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.


    Ajouter un slide à un profil déjà existant

    Partagez
    avatar
    Ombeline30
    FémininAge : 32Messages : 90

    le Sam 15 Juil 2017 - 13:12

    Ma demande



    Bonjour j'espère que je poste au bon endroit, j'ai réussi à faire quasi ce que je voulais mais au niveau des placements de "div" j'ai pataugé mon template étant modifié je ne savais plus où placer quoi c'est pourquoi je requiers votre d'aide et d'avance je m'excuse de vous déranger pour cela  Embarassed 


    En fait je souhaiterais que dans mon profil déjà existant, les infos soient sous l'avatar et qu'au passage de la souris l'avatar glisse vers le haut pour faire apparaître les infos du membre



    Schéma(s) et Eléments



    Schémas : Donc je vous fournis le screen de ce qui est déjà en place sur mon forum :


    Tailles des éléments :
    Effets voulus : juste le fait de placer les infos derrière l'avatar et qu'au passage de la souris ce dernier glisse vers le haut pour dévoiler les infos
    Version de votre forum :  mon fofo est en PHBB2


    Voici mes codes déjà en place :


    Viewtopic_body :



    Code:
    [color=#38b180]<!-- BEGIN displayed -->[/color]
    [color=#38b180]   <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">[/color]
    [color=#38b180]      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">[/color]
    [color=#38b180]      <table class="tableau_profil" cellpadding="0" cellspacing="0">[/color]
    [color=#38b180]                <tr>[/color]
    [color=#38b180]                  <td class="haut_tab"> </td>[/color]
    [color=#38b180]                </tr>[/color]
    [color=#38b180]                <tr>[/color]
    [color=#38b180]                  <td class="milieu_tab">[/color]
    [color=#38b180]                    <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><span class="pseudo_posteur">{postrow.displayed.POSTER_NAME}</span></span>[/color]
    [color=#38b180]              [/color]
    [color=#38b180]                      <span class="postdetails poster-profile"><br />[/color]
    [color=#38b180]                       <div class="place_rang"><span class="rang_posteur">{postrow.displayed.POSTER_RANK}</span></div>[/color]
    [color=#38b180]                      {postrow.displayed.RANK_IMAGE}<div class="cadreavatar">{postrow.displayed.POSTER_AVATAR}</div>[/color]
    [color=#38b180]                     [/color]
    [color=#38b180]                      <div class="infos_posteur"><!-- BEGIN profile_field -->[/color]
    [color=#38b180]                        {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}[/color]
    [color=#38b180]                        <!-- END profile_field -->[/color]
    [color=#38b180]                        {postrow.displayed.POSTER_RPG}[/color]
    [color=#38b180]                        </div>[/color]
    [color=#38b180]                      </span>[/color]
    [color=#38b180]<div class="icones_profil">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}</div>[/color]
    [color=#38b180]                  </td>[/color]
    [color=#38b180]                </tr>[/color]
    [color=#38b180]                <tr>[/color]
    [color=#38b180]                  <td class="bas_tab"> </td>[/color]
    [color=#38b180]                </tr>[/color]
    [color=#38b180]            </table>[/color]
    [color=#38b180]    <br />[/color]
    [color=#38b180]         <img src="https://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />[/color]
    [color=#38b180]      </td>[/color]
    [color=#38b180][/color][size=14]</div>[/size]

    CSS :



    Code:
    /*profil*/

    table.tableau_profil{
      width:230px;
      margin:auto;
      border:0;
      }
     
    table.tableau_profil td.haut_tab{
      width:230px;
      height:34px;
      background-image:url('http://zupimages.net/up/16/42/hzgi.png');
      background-repeat:no-repeat;
      }
     
    table.tableau_profil td.milieu_tab{
      width:230px;
      background-image:url('http://zupimages.net/up/16/42/ksj9.png');
      background-repeat:repeat-y;
      text-align:center;
      }
     
    table.tableau_profil td.bas_tab{
      width:230px;
      height:34px;
      background-image:url('http://zupimages.net/up/16/42/ly7s.png');
      background-repeat:no-repeat;
      }
     
    table.tableau_profil td.milieu_tab span.pseudo_posteur{
      font-family: "Berkshire Swash",cursive;
      font-size:20px;
       width:160px;
      margin: auto;
      padding:4px;
      text-align:center;
      background-color:#593927;
      border:2px solid #C49068;
      opacity:1; /* Transparence : 0 = transparent // 1 = opaque */
    -moz-opacity : 0.5; /* Transparence pour Firefox */
    -ms-filter: "alpha(opacity=50)"; /* Transparence pour IE 8 */
    filter : alpha(opacity=50); /* Transparence pour les versions IE antérieure à la 8 */
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 0 5px #000;
    }

    table.tableau_profil td.milieu_tab span.rang_posteur{
      font-family: "Berkshire Swash",cursive;
      font-size:20px;
      color:white;
      font-style:italic;
      text-align:center;
      }

    table.tableau_profil td.milieu_tab div.infos_posteur{
      width:160px;
      margin: auto;
      margin-bottom: 3px;
      margin-top: 3px;
      padding:4px;
      text-align:center;
      font-family: 'Lora', serif;
      font-style:italic;
      font-size:15px;
      color:#dbc0a7;
      background-color:#593927;
      border:2px solid #C49068;
      box-shadow: 0px 0px 5px #000;
      opacity:1; /* Transparence : 0 = transparent // 1 = opaque */
    -moz-opacity : 0.5; /* Transparence pour Firefox */
    -ms-filter: "alpha(opacity=50)"; /* Transparence pour IE 8 */
    filter : alpha(opacity=50); /* Transparence pour les versions IE antérieure à la 8 */
      border-radius: 15px;
      overflow: hidden; 
    }

    .postdetails .label span, .postdetails .label{
        color: #C77C36 !important;
      font-style:italic;
    }

    .postdetails.poster-profile a img{
    border : 0px solid #593927;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    max-width:160px !important;
    max-height:200px !important;
    }

    .place_rang{
    padding-top:7px;
    }

    .icones_profil {
      text-align:center;
    }


    /*Fin profil*/



    En vous remerciant beaucoup pour votre aide  :hug:

    Beau week-end,

    Ombeline.
    avatar
    Ombeline30
    FémininAge : 32Messages : 90

    Hier à 15:33

    Juste un petit up au passage ^^

    Et dire que je ne saurai pas donner de news avant dimanche soir car je dois m'absenter merci merci et belle fin de semaine  :hug:

      La date/heure actuelle est Ven 21 Juil 2017 - 6:33