Avatar coulissant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Avatar coulissant

Message par Mlle'Graph' le Ven 30 Nov 2012 - 20:18

Bonsoir tout le monde !!
Maintenant c'est moi qui a besoin d'aide...
Ce que j'aimerais, c'est un avatar qui cache les informations du profil et quand on passe dessus sa se déroule vers la droite pour montrer les informations cachés.

Merci.

Cordialement.


Dernière édition par Mlle'Graph' le Sam 1 Déc 2012 - 13:24, édité 1 fois

Mlle'Graph'
***

Féminin
Messages : 195
Inscrit(e) le : 01/08/2011

http://creativ.lebonforum.com/
Mlle'Graph' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant

Message par bouhafs le Ven 30 Nov 2012 - 22:24

bonsoir,

alors tu recherche et tu supprime dans viewtopic-body :
Code:
  <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="middle">
                        {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}
                    </td>
                </tr>
            </table>

rechercher :
Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

Fait quelques retours a la ligne après ce code

maintenant tu recherche :
Code:
<img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />

et tu remplace tout ce qui ce trouve entre par :
Code:
<div id="post_onlin">{postrow.displayed.ONLINE_IMG}</div>
     
<div class="slide_profile_TFA">

<ul >
  <li >
            <div class="barre_TFA">
                                        <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>
                                           
                                        <span class="fleche_ouverture"></span>
            </div>

            <div class="contenu_TFA">
                    <div class="postdetails poster-profile"> 

                        <div  class="mini-avatar">{postrow.displayed.POSTER_AVATAR}
                        </div>
                        <div class="block_profile">
 
                              <div class="icones"{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
                                      <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
                                </div>
                             
                                <div class="voir_profil">
                                    <ul >
                                          <li >
                                            <span class="voir_info">Voir le profil</span>

                                              <div class="information">
                                                <!-- BEGIN profile_field -->
                                                {postrow.displayed.profile_field.LABEL}
                                                {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                                                <!-- END profile_field -->
                                            </div>
                                        </li>
                                    </ul>
                              </div>

                    </div>
                    <div style="clear: both;"></div>

                    <div class="autres_infos">
                        {postrow.displayed.POSTER_RPG}
                    </div>


                </div>
          </div>
    </li>
</ul>

</div>

<div style="margin-top: 40px;" class="postdetails poster-profile">{postrow.displayed.POSTER_AVATAR}

 
{postrow.displayed.POSTER_RANK}
 
{postrow.displayed.RANK_IMAGE}
</div>

enregistrer et publier

ensuite dans overall-footer-end : après :
Code:
</body>

coller :
Code:
<script type="text/javascript">
jQuery().ready(function(){
  $(".contenu_TFA").hide();
  $(".barre_TFA").click(function(){
      if($(this).next("div").is(":hidden")){               
        $(".contenu_TFA:visible").toggle("slow");
        $(this).next("div").toggle("slow");
      }else{
        $(this).next("div").toggle("slow");
      }
  });
});
</script>

<script type="text/javascript">
jQuery().ready(function(){
  $(".information").hide();
  $(".voir_info").click(function(){
      if($(this).next("div").is(":hidden")){               
        $(".information:visible").slideUp();
        $(this).next("div").slideDown();
      }else{
        $(this).next("div").slideUp();
      }
  });
});
</script>

pour le css:
Code:
/* icone en ligne-hors ligne */

#post_onlin{
background: url('http://i75.servimg.com/u/f75/11/95/30/70/m111.png') no-repeat;
position: absolute;
float: left;
width: 19px;
height: 127px;
margin-left: -22px;
margin-top: 30px;
padding: 0;
border: 0;
}


/* slide toggle profil */

.slide_profile_TFA{
position: absolute;
float: left;
width: 150px; /* mettre la largeur de la colonne profil */
margin: 0;
padding: 0;
text-align: left;
}

.slide_profile_TFA ul{
width: 150px; /* mettre la largeur de la colonne profil */
margin: 0;
padding: 0;
list-style-type: none;
}

.slide_profile_TFA li{
text-align: center;
}

.barre_TFA{
background: url(http://i75.servimg.com/u/f75/11/95/30/70/i110.png) repeat-x; /* est l'image de fond de la barre d'ouverture du slide toogle */
line-height: 30px;
height: 30px;
border: 1px solid #CC0000;
cursor : pointer;
font-family: Arial;
font-size:13px;
font-style: italic;
font-weight: bold;
vertical-align: middle;
}

.fleche_ouverture{
background: url('http://i35.servimg.com/u/f35/11/95/30/70/233.png') no-repeat;
width: 25px;
height: 22px;
border: 0;
float: right;
margin-top: 5px;
margin-right: 10px;
/margin-top: -25px; /* correction pour IE7 */
}

.contenu_TFA{ /* correspond au fond qui va contenir tous les éléments du slide toggle */
line-height: normal;
width: 350px;
height: 175px;
background-color: #928888;
color: #000;
border: 1px solid #CC0000;
text-align: center;
padding: 5px;
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}

.contenu_TFA a{
line-height: normal !important;
}

/* contenu slide toogle */

.mini-avatar{ /* correspond au bloc de l'avatar -gauche- */
float: left;
width: 20%; /* mini-avatar et bloc_profil doivent faire environ 90%, il faut aussi compter les marges, bordures */
height: 100px;
margin: 2px;
padding: 5px;
text-align: center;
background-color: #303030;
border: 1px solid #CD5C5C;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.mini-avatar img{ /* correspond au bloc de l'avatar -gauche- */
width: 60px !important;
margin: auto;
}

.block_profile{ /* correspond au bloc du profil -droite- */
float: right;
text-align: center;
width: 70%;
height: 100px;
padding: 5px;
margin: 2px;
background-color: #303030;
border: 1px solid #CD5C5C;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.autres_infos{ /* correspond au bloc de la feuille de personnage, à supprimer si non besoin */
text-align: left;
width: 95%;
height: 45px; overflow-y: auto; /* hauteur 45px, si plus grand il y aura une barre de defilement */
padding: 5px;
margin: 2px;
background-color: #303030;
border: 1px solid #CD5C5C;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}


/* CSS du slide voir le profil (bouton voir le profil) */


.icones{
height: 60px; /* hauteur allouée aux icones du profil */
}

.voir_profil ul{ /* correspond au bloc contenant le slide -voir le profil- */
width: 100%;
text-align: center;
margin: 0;
padding: 0;
border: 0 ;
list-style-type: none;
}

.voir_profil li{ /* correspond à l'image de la barre ou bouton qui va ouvrir le slide -voir le profil- */
font: 12px Arial #000 bold;
background: url('http://i75.servimg.com/u/f75/11/95/30/70/v10.png') transparent no-repeat;
width: 156px;
height: 38px;
border: 0;
margin-bottom :12px;
padding-top: 8px;
margin-left: auto;
margin-right: auto;
}

.voir_info{ /* correspond au texte du bouton */
color: #000;
font-family: Arial;
font-weight: bold;
font-size: 14px;
cursor : pointer;
}

.information{ /* correspond aux informations du profil */
text-align: left;
margin-top: 10px;
margin-left: 4px;
width: 250px;
height: 120px; overflow-y: auto; /* hauteur, au dessus de taille indiquée, apparaitra une barre de défilement */
background-color: #454545;
color: #000;
border: 1px solid #000;
padding: 6px;
position: relative;
}

voilà Mlle'Graph'
Cordialement.

bouhafs
****

Masculin
Messages : 362
Inscrit(e) le : 26/12/2011

http://www.air91-force-algerian.com/
bouhafs a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant

Message par Milouze14 le Sam 1 Déc 2012 - 6:26

Salut Mlle'Graph et bouhafs,

bouhafs le tuto de Quierra fonctionne à merveille sauf que le script
doit être placé dans le même template Wink .
Soit: viewtopic_body
De plus l'image en ligne doit être changée dans la gestion des images
Passes en mode avancé en cliquant sur :
Affichage/Images et couleurs/Gestion des images/Mode avançé

Onglet "Boutons"
par celui-ci:

https://i75.servimg.com/u/f75/11/95/30/70/m210.png

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant

Message par AenigmA le Sam 1 Déc 2012 - 7:55

Un peu facile de copier coller un tuto de Quierra sans la citer

http://www.themes-fa.com/t3387-profil-facon-invision-slide-toggle

Pas du tout ce que demande la personne en plus ...
Laurent

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant

Message par Mlle'Graph' le Sam 1 Déc 2012 - 13:23

Bonjouur !!

Merci pour vos réponses !! C'est résolu .

Mlle'Graph'
***

Féminin
Messages : 195
Inscrit(e) le : 01/08/2011

http://creativ.lebonforum.com/
Mlle'Graph' a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum