Avatar coulissant
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Avatar coulissant
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.
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
Re: Avatar coulissant
bonsoir,
alors tu recherche et tu supprime dans viewtopic-body :
rechercher :
Fait quelques retours a la ligne après ce code
maintenant tu recherche :
et tu remplace tout ce qui ce trouve entre par :
enregistrer et publier
ensuite dans overall-footer-end : après :
coller :
pour le css:
voilà Mlle'Graph'
Cordialement.
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://2img.net/i/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.
Re: Avatar coulissant
Salut Mlle'Graph et bouhafs,
bouhafs le tuto de Quierra fonctionne à merveille sauf que le script
doit être placé dans le même template .
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://i.servimg.com/u/f75/11/95/30/70/m210.png
a++
bouhafs le tuto de Quierra fonctionne à merveille sauf que le script
doit être placé dans le même template .
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://i.servimg.com/u/f75/11/95/30/70/m210.png
a++
Invité- Invité
Re: Avatar coulissant
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
http://www.themes-fa.com/t3387-profil-facon-invision-slide-toggle
Pas du tout ce que demande la personne en plus ...
Laurent
Re: Avatar coulissant
Bonjouur !!
Merci pour vos réponses !! C'est .
Merci pour vos réponses !! C'est .
Sujets similaires
» Avatar coulissant vers le bas
» avatar coulissant sur phpBB3
» Avatar coulissant et affichage du rang
» Avatar coulissant via notification email
» Problème avec mon avatar coulissant;
» avatar coulissant sur phpBB3
» Avatar coulissant et affichage du rang
» Avatar coulissant via notification email
» Problème avec mon avatar coulissant;
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum