Bouton du style Afficher / Cacher
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
Bouton du style Afficher / Cacher
Bonjour !
Je cherche comment pouvoir mettre ceci sous mon cadre de profil => https://i.servimg.com/u/f76/15/30/73/42/ex_bmp11.jpg
Et lorsque on survole le "Contact & Infos " il y ait les infos qui s'affichent. En effet sur l'image on n'arrive pas à voir le curseur sur le "Contact & Infos" mais c'est seulement en le survolant que les trois onglets s'affichent. Comme vous le verrez à la page du forum (ci-dessous) j'ai déjà une " infobulle coulissante " mais ce n'est pas ce que je recherche et je n'ai pas assez de connaissances là dedans... On m'a dit que ça touchait le java ? /:
Merci !!
Je cherche comment pouvoir mettre ceci sous mon cadre de profil => https://i.servimg.com/u/f76/15/30/73/42/ex_bmp11.jpg
Et lorsque on survole le "Contact & Infos " il y ait les infos qui s'affichent. En effet sur l'image on n'arrive pas à voir le curseur sur le "Contact & Infos" mais c'est seulement en le survolant que les trois onglets s'affichent. Comme vous le verrez à la page du forum (ci-dessous) j'ai déjà une " infobulle coulissante " mais ce n'est pas ce que je recherche et je n'ai pas assez de connaissances là dedans... On m'a dit que ça touchait le java ? /:
Merci !!
Dernière édition par LadyRaven le Sam 9 Mar 2013 - 11:23, édité 2 fois
Re: Bouton du style Afficher / Cacher
bonjour,
Voir cette explication https://forum.forumactif.com/t281090-contour-avatar-et-afficher-masque-partie-du-profil
Voir cette explication https://forum.forumactif.com/t281090-contour-avatar-et-afficher-masque-partie-du-profil
Re: Bouton du style Afficher / Cacher
Merci j'ai bien suivi le tuto mais ce n'est pas ça que je recherche /:
Comme je l'ai dit plus haut ce n'est pas les informations âge, localisation & cie que je veux masquer mais le lien Profil, le lien MP et le lien WWW (s'il y a).
Si on va sur le lien que j'ai donné menant au forum test, on voit qu'il y a un tiroir coulissant sous l'avatar avec : MP, Profil, WWW. C'est ça que je veux Cacher / Afficher. De plus ce n'est pas un bouton à proprement parler (le fait de cliquer quoi) mais un bouton que l'on survole /:
J'espère avoir été claire :S
Comme je l'ai dit plus haut ce n'est pas les informations âge, localisation & cie que je veux masquer mais le lien Profil, le lien MP et le lien WWW (s'il y a).
Si on va sur le lien que j'ai donné menant au forum test, on voit qu'il y a un tiroir coulissant sous l'avatar avec : MP, Profil, WWW. C'est ça que je veux Cacher / Afficher. De plus ce n'est pas un bouton à proprement parler (le fait de cliquer quoi) mais un bouton que l'on survole /:
J'espère avoir été claire :S
Re: Bouton du style Afficher / Cacher
Bonjour,
J'avais compris votre demande.
Dans le lien que je vous est donné, il y a le code du bouton pour afficher/masquer des infos sous le profil. Il suffit de faire un petit effort et de reprendre le code pour l'adapter a votre forum.
Les boutons que vous citez se trouvent dans le template viewtopic_body
Rechercher dans le template :
{postrow.displayed.PROFILE_IMG} << bouton profil
{postrow.displayed.PM_IMG} << bouton mp
{postrow.displayed.EMAIL_IMG} << bouton email
<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> << site www
{postrow.displayed.ONLINE_IMG} << bouton en ligne
Ensuite il suffit de mettre votre code bouton sous le profil entre <img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
ICI VOTRE CODE BOUTON ET INFO A MASQUER
</td>
Pour le survol au lieu du clic, il suffit de changer dans le code bouton <div onClick par <div onmouseout (au survol mais reste actif)
LadyRaven a écrit:
J'espère avoir été claire :S
J'avais compris votre demande.
Dans le lien que je vous est donné, il y a le code du bouton pour afficher/masquer des infos sous le profil. Il suffit de faire un petit effort et de reprendre le code pour l'adapter a votre forum.
- Code:
<div onClick="this.firstChild.value=(this.firstChild.value=='Afficher')?'Masquer':'Afficher';this.lastChild.style.display=(this.firstChild.value=='Afficher')?'none':'block';" style="text-align: center;"><input type="button" value="Afficher"/><div style="display: none; text-align: left;">CE QU'IL Y A CACHER</div></div>
Les boutons que vous citez se trouvent dans le template viewtopic_body
Rechercher dans le template :
- 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>
{postrow.displayed.PROFILE_IMG} << bouton profil
{postrow.displayed.PM_IMG} << bouton mp
{postrow.displayed.EMAIL_IMG} << bouton email
<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> << site www
{postrow.displayed.ONLINE_IMG} << bouton en ligne
Ensuite il suffit de mettre votre code bouton sous le profil entre <img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
ICI VOTRE CODE BOUTON ET INFO A MASQUER
</td>
Pour le survol au lieu du clic, il suffit de changer dans le code bouton <div onClick par <div onmouseout (au survol mais reste actif)
Re: Bouton du style Afficher / Cacher
Merci de votre aide (:
Il reste un problème => http://forum---test.creationforum.net/t1-votre-1er-sujet#1
En touchant j'ai peur de tout gâcher :S
J'ai enlevé le CSS de l'onglet coulissant mais dans le template je ne trouve pas ce qui correspond aux boutons annexes qui s'affichent (bug)
Voici donc le template actuel :
Mon CSS :
Il reste un problème => http://forum---test.creationforum.net/t1-votre-1er-sujet#1
En touchant j'ai peur de tout gâcher :S
J'ai enlevé le CSS de l'onglet coulissant mais dans le template je ne trouve pas ce qui correspond aux boutons annexes qui s'affichent (bug)
Voici donc le template actuel :
- Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div><br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
<div class="blocProfil"> <!-- OUVERTURE DU DIV .blocProfil -->
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br/><br/>
<center><!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field --></center>
{postrow.displayed.POSTER_RPG}
</span><br />
</div> <!-- FERMETURE DU DIV .blocProfil -->
<div id="div_contact">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</div>
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
<div onmouseout="this.firstChild.value=(this.firstChild.value=='contact & infos')?'contact & infos':'contact & infos';this.lastChild.style.display=(this.firstChild.value=='contact & infos')?'none':'block';" style="text-align: center;"><input type="button" value="contact & infos"/><div style="display: none; text-align: left;">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}</div></div>
</td>
Mon CSS :
- Code:
a.forumlink:link, a.forumlink:visited {
background-image: url("");
font-family: Georgia;
text-transform : uppercase;
text-align: center;
font-size: 100%;
border-bottom: 4px dotted #FFFFFF;
color: #FFFFFF;
letter-spacing: 3px;
display: block;
-moz-border-radius:10px;
}
a.forumlink:hover, a.forumlink:hover:visited {
background-image: url("");
color: #ffffff;
letter-spacing: 4px;
text-align: center;
display: block;
border-bottom: 4px dotted #ffffff;
-moz-border-radius:10px;
}
body { background-attachment: no-fixed; background-repeat: no-repeat; background-position: top center;}
.name /* centrer le pseudo */ {text-align:center;}
.name {font-size:30px; /*taille et police du pseudo*/
font-family: 'Patrick Hand', cursive;
}
.name:hover {font-size:30px!important;}/*enlever le zoom du pseudo*/
a { text-decoration: none; } /*enlever le soulignement des pseudos*/
.bodyline{ -moz-border-radius: 10px;}
a { text-decoration: none; }
.statistiques{
border:0px;
background-image: url("");
background-repeat: no-repeat;
background-position: center;
height:270px;}
.groupes{
background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}
u {
text-decoration: none;
border-bottom: 2px #000000 solid;
-moz-border-radius: 6px;
}
.code{
font-family: Georgia;
font-size: 12px;
color: #000000;
line-height: 125%;
background-color: #6699CC;
border: #FFFFFF;
border-style: solid;
border: 3px #FFFFFF dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px}
.blocProfil { /*code Profil*/
padding:20px; /* une marge entre la bordure et l'intérieur du bloc */
margin:20px; /* une marge entre la bordure et l'extérieur du bloc */
border-radius:25px; /*la bordure */
border-color:#990000; /*couleur de la bordure*/
background:#EF7A7A; /*une couleur de fond */
}
.blocProfil {max-width:190px; /* largeur maximale */
min-width:190px; /* largeur minimale */}
.postdetails.poster-profile a img { /*centrer l'avatar dans le profil*/
margin: auto;
display: block;
margin-bottom: -10px;
}
.postbody { /*Justification du texte automatique*/
padding-left: 10 px;
padding-right: 10 px;
text-align:justify;
}
.ascenseur { /*boutons flèches permettant d'aller directement en haut ou en bas du forum*/
position: fixed; /*--- Cette ligne permet de toujours afficher l'ascenseur à l'écran ---*/
top: 50px; /*--- On le place à 50 px du haut de l'écran ---*/
right: 0px; /*--- On le place à 0px de la gauche de l'écran ---*/
background-color: #e7dfcf; /*--- On donne une couleur au fond ---*/
moz-border-radius: 0px 35px 35px 0px; /*--- On arrondit les bords ---*/
-webkit-border-radius: 0px 35px 35px 0px;
border-radius: 0px 35px 35px 0px;
}
/*CSS Page d'Accueil*/
/* Début de la feuille de style */
.onglet-content > div {
display : none ; /* permet de spécifier la manière dont un élément est affiché */
border : 5px; /* Bordure de la page d’accueil */
border-radius : 25px ; /* l'arrondi de l'encadrement, à retirer selon ce que tu veux */
padding : 02px ; /* correspond à la marge interne d'une boite, et permet de définir la distance */
margin-bottom : 02px ; /*correspond à la marge externe d'une boite, et permet de définir la distance */
width : 150px ; /* définit l'hauteur de la Page d'accueil */
height : 300px; /* définit la largeur de la Page d'accueil */
background: [img]http://i76.servimg.com/u/f76/15/30/73/42/1024x710.jpg[/img]; /* fond de la Page d'accueil */
}
.onglet-content > div.active{ display : block ; }
.onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; }
.onglet-table td {
style : top ;
vertical-align:middle ; /* permet de gérer l'alignement vertical du texte */
border : solid 05px ; /* Bordure de la page d’accueil (encadrement, voir tuto d'Illu) */
border-radius : 25px;
font-size: 15px;
padding : Xpx; /* taille en largeur des onglets */
width: Xpx; /* taille en hauteur des onglets */
text-align:center; /* permet de centré le nom des onglets */
opacity : 0.5 ; /* (entre 0,1 et 1) opacité de tes onglets inactifs (que tu n'as pas sélectionné ou que tu ne survole pas) */
font-size: Xpx; /* taille des titres de tes onglets */
background: X; /* fond de tes onglets */
}
.onglet-table td.active, .onglet-table td:hover {
opacity : 1 ; /* (entre 0,1 et 1) opacité d'un onglet survolé ou que tu as sélectionné */
}
/* Fin de la feuille de style */
Re: Bouton du style Afficher / Cacher
Bonjour,
Se qui touche au bouton de contact, profil, c'est ceci
Il suffit donc de le placer a l'endroit indiqué dans le code donné plus haut et de le supprimer de là ou il se trouve. Ensuite votre bouton ne fonctionne pas, car vous avez placé les même pour ouvrir et fermé. Il suffit d'une petite différence (par exemple deux majuscules) pour que le bouton marche.
Comme ceci cela fonctionne, après a vous d'ajouter du style (là j'ai mis une marge et centrer)
Se qui touche au bouton de contact, profil, c'est ceci
- Code:
<div id="div_contact">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</div>
Il suffit donc de le placer a l'endroit indiqué dans le code donné plus haut et de le supprimer de là ou il se trouve. Ensuite votre bouton ne fonctionne pas, car vous avez placé les même pour ouvrir et fermé. Il suffit d'une petite différence (par exemple deux majuscules) pour que le bouton marche.
Comme ceci cela fonctionne, après a vous d'ajouter du style (là j'ai mis une marge et centrer)
- Code:
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div><br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
<!-- OUVERTURE DU DIV .blocProfil -->
<div class="blocProfil">
{postrow.displayed.RANK_IMAGE}
{postrow.displayed.POSTER_AVATAR}<br/><br/>
<center><!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}
{postrow.displayed.profile_field.CONTENT}
{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field --></center>
{postrow.displayed.POSTER_RPG}
</div>
</span>
<!-- FERMETURE DU DIV .blocProfil -->
<br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
<div onmouseout="this.firstChild.value=(this.firstChild.value=='contact & infos')?'Contact & Infos':'contact & infos';this.lastChild.style.display=(this.firstChild.value=='contact & infos')?'none':'block';" style="text-align: center;"><input type="button" value="contact & infos"/>
<div style="display: none; text-align: center; margin-top:10px;">
<div id="div_contact">
{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>
</div>
</td>
Re: Bouton du style Afficher / Cacher
J'y suis arrivée => http://forum---test.creationforum.net/t1-votre-1er-sujet#1
Mais je recherche un effet plus fluide au moment de l'apparition des onglets, en effet quand on passe la souris dessus il y a un agrandissement du cadre en dessous qui est très direct, c'est possible de le faire plus lentement ?
Mais je recherche un effet plus fluide au moment de l'apparition des onglets, en effet quand on passe la souris dessus il y a un agrandissement du cadre en dessous qui est très direct, c'est possible de le faire plus lentement ?
Re: Bouton du style Afficher / Cacher
Bonsoir
Pourrait-on avoir des nouvelles ?
Cordialement.
Pourrait-on avoir des nouvelles ?
Cordialement.
Re: Bouton du style Afficher / Cacher
Je n'ai toujours pas réussi à trouver comment rendre plus fluide le survolage, quand on passe avec la souris ça continue de bugué...
Et puis quand on le survole, tout disparait : http://la-guerredesclans.forum-actif.net/
Et puis quand on le survole, tout disparait : http://la-guerredesclans.forum-actif.net/
Sujets similaires
» bouton afficher/cacher
» Bouton "Afficher" et "Cacher" les catégories
» cacher/afficher une partie du profil en cliquant sur un "bouton"
» Afficher/cacher Modérateurs
» cacher/afficher une partie du profil
» Bouton "Afficher" et "Cacher" les catégories
» cacher/afficher une partie du profil en cliquant sur un "bouton"
» Afficher/cacher Modérateurs
» cacher/afficher une partie du profil
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