Masquer la légende sans la supprimer
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
Masquer la légende sans la supprimer
Bonsoir,
Je trouve assez inesthétique la légende qui permet aux membres de savoir quelle image illustre un nouveau message, quelle image illustre un sujet clos...etc. Or, elle n'est pas complètement inutile et j'aimerais la masquer proprement dans un "menu déroulant" en bas du forum. Afin qu'elle soit visible, je me suis dis qu'afficher uniquement le titre "Légende" juste avant ce "menu" serait préférable.
Il me semble que c'est alors la fonction hover qui entre en compte afin d'afficher quelque chose de dynamique, mais malheureusement, je n'ai jamais su me servir de cette dernière.
Merci d'avance pour votre aide.
Je trouve assez inesthétique la légende qui permet aux membres de savoir quelle image illustre un nouveau message, quelle image illustre un sujet clos...etc. Or, elle n'est pas complètement inutile et j'aimerais la masquer proprement dans un "menu déroulant" en bas du forum. Afin qu'elle soit visible, je me suis dis qu'afficher uniquement le titre "Légende" juste avant ce "menu" serait préférable.
Il me semble que c'est alors la fonction hover qui entre en compte afin d'afficher quelque chose de dynamique, mais malheureusement, je n'ai jamais su me servir de cette dernière.
Merci d'avance pour votre aide.
Dernière édition par Kynaeku le Jeu 22 Aoû 2013 - 10:59, édité 1 fois
Re: Masquer la légende sans la supprimer
Salut Kynaeku,
tu veux parler de la légende qui est positionnée en bas de la liste des sujets ?
a++
tu veux parler de la légende qui est positionnée en bas de la liste des sujets ?
a++
Invité- Invité
Re: Masquer la légende sans la supprimer
La liste des sujets? On peut dire ça comme ça oui, mais je ne suis pas certaine que tu m’ait comprise. Je parle de ceci :
Re: Masquer la légende sans la supprimer
Re,
si si j'ai bien comprit ,
je te donne tout çà demain car il est l'heure pour moi de débrayer .
Bonne soirée.
a++
si si j'ai bien comprit ,
je te donne tout çà demain car il est l'heure pour moi de débrayer .
Bonne soirée.
a++
Invité- Invité
Re: Masquer la légende sans la supprimer
Merci beaucoup ! Bonne route et bonne soirée !
Re: Masquer la légende sans la supprimer
Salut Kynaeku,
On va passer par un plugin Jquery pour afficher masquer la légende :
Dans le template viewforum_body:
Affichage/Templates/Général/viewforum_body
Recherches ceci:
Modifies la valeur 400 par un nombre plus important pour une fermeture plus lente:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Colle ceci:
En espérant avoir répondu à tes attentes .
a++
On va passer par un plugin Jquery pour afficher masquer la légende :
Dans le template viewforum_body:
Affichage/Templates/Général/viewforum_body
Recherches ceci:
- Code:
<!-- BEGIN switch_legend -->
<tr>
<td colspan="2">
<table border="0" cellpadding="6" cellspacing="2" align="center">
<tr>
<td>
<img src="{FOLDER_NEW_IMG}" alt="{L_FOLDER_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_NEW_IMG}</span><br />
<img src="{FOLDER_HOT_NEW_IMG}" alt="{L_FOLDER_HOT_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_HOT_NEW_IMG}</span><br />
<img src="{FOLDER_LOCKED_NEW_IMG}" alt="{L_FOLDER_LOCKED_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_LOCKED_NEW_IMG}</span>
</td>
<td>
<img src="{FOLDER_IMG}" alt="{L_FOLDER_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_IMG}</span><br />
<img src="{FOLDER_HOT_IMG}" alt="{L_FOLDER_HOT_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_HOT_IMG}</span><br />
<img src="{FOLDER_LOCKED_IMG}" alt="{L_FOLDER_LOCKED_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_LOCKED_IMG}</span>
</td>
<td valign="top">
<img src="{FOLDER_ANNOUNCE_IMG}" alt="{L_FOLDER_ANNOUNCE_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_ANNOUNCE_IMG}</span><br />
<img src="{FOLDER_GLOBAL_ANNOUNCE_IMG}" alt="{L_FOLDER_GLOBAL_ANNOUNCE_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_GLOBAL_ANNOUNCE_IMG}</span><br />
<img src="{FOLDER_STICKY_IMG}" alt="{L_FOLDER_STICKY_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_STICKY_IMG}</span><br />
</td>
</tr>
</table>
</td>
</tr>
<!-- END switch_legend -->
- Code:
<!-- BEGIN switch_legend -->
<tr > <td colspan="2">
<br /><center> <a href="#" id="M14_legende">Afficher/Masquer la légende</a></center>
<table border="0" cellpadding="6" cellspacing="2" align="center"id="toggle"style="display:none;">
<tr>
<td>
<img src="{FOLDER_NEW_IMG}" alt="{L_FOLDER_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_NEW_IMG}</span><br />
<img src="{FOLDER_HOT_NEW_IMG}" alt="{L_FOLDER_HOT_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_HOT_NEW_IMG}</span><br />
<img src="{FOLDER_LOCKED_NEW_IMG}" alt="{L_FOLDER_LOCKED_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_LOCKED_NEW_IMG}</span>
</td>
<td>
<img src="{FOLDER_IMG}" alt="{L_FOLDER_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_IMG}</span><br />
<img src="{FOLDER_HOT_IMG}" alt="{L_FOLDER_HOT_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_HOT_IMG}</span><br />
<img src="{FOLDER_LOCKED_IMG}" alt="{L_FOLDER_LOCKED_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_LOCKED_IMG}</span>
</td>
<td valign="top">
<img src="{FOLDER_ANNOUNCE_IMG}" alt="{L_FOLDER_ANNOUNCE_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_ANNOUNCE_IMG}</span><br />
<img src="{FOLDER_GLOBAL_ANNOUNCE_IMG}" alt="{L_FOLDER_GLOBAL_ANNOUNCE_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_GLOBAL_ANNOUNCE_IMG}</span><br />
<img src="{FOLDER_STICKY_IMG}" alt="{L_FOLDER_STICKY_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_STICKY_IMG}</span><br />
</td>
</tr>
</table>
</td>
</tr>
<!-- END switch_legend -->
<script type='text/javascript'>
jQuery(document).ready(function()
{
jQuery('#toggle').hide(400);
jQuery('a#M14_legende').click(function()
{
jQuery('#toggle').toggle(400);
return false;
});
});
</script>
Modifies la valeur 400 par un nombre plus important pour une fermeture plus lente:
- Code:
.hide(400);
- Code:
('#toggle').toggle(400);
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Colle ceci:
- Code:
/*L apparence de legende a l ouverture*/
#toggle
{
padding:5px;/*on donne un espace de 5px tout autour de la legende*/
margin-left:auto;/*ne pas toucher pour un affichage centre*/
margin-right:auto;/*ne pas toucher pour un affichage centre*/
width:80%;/*on donne une largeur*/*/
height:auto;/*on autorise n importe quelle hauteur*/
}
/*la couleur du titre*/
a#M14_legende
{
color:red;/*la couleur de police*/
font-size:12px;/*la taille de la police*/
text-decoration:none !important;
}
En espérant avoir répondu à tes attentes .
a++
Invité- Invité
Re: Masquer la légende sans la supprimer
Merci ! Ça m'aide énormément ! Juste une dernière petite question. Est-il possible d'appliquer cet effet de haut en bas plutôt que de gauche à droite?
De même, histoire de rendre ceci un peu plus esthétique (de mon point de vue xD), j'aimerais afficher un rectangle coloré lorsque le champ est fermé, quelque chose comme ceci:
https://i.servimg.com/u/f70/17/43/57/89/exempl10.png
J'aurais peut-être du faire un schéma en premier lieu...Désolée.
De même, histoire de rendre ceci un peu plus esthétique (de mon point de vue xD), j'aimerais afficher un rectangle coloré lorsque le champ est fermé, quelque chose comme ceci:
https://i.servimg.com/u/f70/17/43/57/89/exempl10.png
J'aurais peut-être du faire un schéma en premier lieu...Désolée.
Re: Masquer la légende sans la supprimer
Salut Kynaeku,
on ne pourra pas avec le plugin mais avec un hover,
On reprend tout ,
ici:
Elle est assez importante , mais bon quand on aime on compte pas
a++
on ne pourra pas avec le plugin mais avec un hover,
On reprend tout ,
ici:
- Code:
<!-- BEGIN switch_legend -->
<tr > <td colspan="2">
<br /><center> <a href="#" id="M14_legende">Afficher/Masquer la légende</a></center>
<table border="0" cellpadding="6" cellspacing="2" align="center"id="toggle"style="display:none;">
<tr>
<td>
<img src="{FOLDER_NEW_IMG}" alt="{L_FOLDER_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_NEW_IMG}</span><br />
<img src="{FOLDER_HOT_NEW_IMG}" alt="{L_FOLDER_HOT_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_HOT_NEW_IMG}</span><br />
<img src="{FOLDER_LOCKED_NEW_IMG}" alt="{L_FOLDER_LOCKED_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_LOCKED_NEW_IMG}</span>
</td>
<td>
<img src="{FOLDER_IMG}" alt="{L_FOLDER_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_IMG}</span><br />
<img src="{FOLDER_HOT_IMG}" alt="{L_FOLDER_HOT_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_HOT_IMG}</span><br />
<img src="{FOLDER_LOCKED_IMG}" alt="{L_FOLDER_LOCKED_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_LOCKED_IMG}</span>
</td>
<td valign="top">
<img src="{FOLDER_ANNOUNCE_IMG}" alt="{L_FOLDER_ANNOUNCE_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_ANNOUNCE_IMG}</span><br />
<img src="{FOLDER_GLOBAL_ANNOUNCE_IMG}" alt="{L_FOLDER_GLOBAL_ANNOUNCE_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_GLOBAL_ANNOUNCE_IMG}</span><br />
<img src="{FOLDER_STICKY_IMG}" alt="{L_FOLDER_STICKY_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_STICKY_IMG}</span><br />
</td>
</tr>
</table>
</td>
</tr>
<!-- END switch_legend -->
<script type='text/javascript'>
jQuery(document).ready(function()
{
jQuery('#toggle').hide(400);
jQuery('a#M14_legende').click(function()
{
jQuery('#toggle').toggle(400);
return false;
});
});
</script>
- Code:
<br />
<!-- BEGIN switch_legend -->
<div id="M14_legende"><center><a>Légende</a></center>
<div class="M14_legende">
<div class="gauche">
<img src="{FOLDER_NEW_IMG}" alt="{L_FOLDER_NEW_IMG}" border="0" /> <span class="intitule">{L_FOLDER_NEW_IMG}</span><br />
<img src="{FOLDER_HOT_NEW_IMG}" alt="{L_FOLDER_HOT_NEW_IMG}" border="0" /> <span class="intitule">{L_FOLDER_HOT_NEW_IMG}</span><br />
<img src="{FOLDER_LOCKED_NEW_IMG}" alt="{L_FOLDER_LOCKED_NEW_IMG}" border="0" /> <span class="intitule">{L_FOLDER_LOCKED_NEW_IMG}</span>
</div>
<div class="centre">
<img src="{FOLDER_IMG}" alt="{L_FOLDER_IMG}" border="0" /> <span class="intitule">{L_FOLDER_IMG}</span><br />
<img src="{FOLDER_HOT_IMG}" alt="{L_FOLDER_HOT_IMG}" border="0" /><span class="intitule">{L_FOLDER_HOT_IMG}</span><br />
<img src="{FOLDER_LOCKED_IMG}" alt="{L_FOLDER_LOCKED_IMG}" border="0" /> <span class="intitule">{L_FOLDER_LOCKED_IMG}</span>
</div>
<div class="droite">
<img src="{FOLDER_ANNOUNCE_IMG}" alt="{L_FOLDER_ANNOUNCE_IMG}" border="0" /> <span class="intitule">{L_FOLDER_ANNOUNCE_IMG}</span><br />
<img src="{FOLDER_GLOBAL_ANNOUNCE_IMG}" alt="{L_FOLDER_GLOBAL_ANNOUNCE_IMG}" border="0" /> <span class="intitule">{L_FOLDER_GLOBAL_ANNOUNCE_IMG}</span><br />
<img src="{FOLDER_STICKY_IMG}" alt="{L_FOLDER_STICKY_IMG}" border="0" /> <span class="intitule">{L_FOLDER_STICKY_IMG}</span><br />
</div>
</div>
<!-- END switch_legend -->
- Code:
/*L apparence de legende a l ouverture*/
#toggle
{
padding:5px;/*on donne un espace de 5px tout autour de la legende*/
margin-left:auto;/*ne pas toucher pour un affichage centre*/
margin-right:auto;/*ne pas toucher pour un affichage centre*/
width:80%;/*on donne une largeur*/*/
height:auto;/*on autorise n importe quelle hauteur*/
}
/*la couleur du titre*/
a#M14_legende
{
color:red;/*la couleur de police*/
font-size:12px;/*la taille de la police*/
text-decoration:none !important;
}
- Code:
/*le bloc dans sa totalite*/
#M14_legende
{
height:180px;/*la hauteur*/
}
/* les intitules des images*/
.intitule
{
color:#000000;/*la couleur*/
font-size:11px;/*la taille*/
/*transitions*/
-webkit-transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out;
-o-transition: color 1s ease-in-out;
transition: color 1s ease-in-out;
}
/* les intitules des images au survol*/
#M14_legende:hover .intitule
{
color:#800000;/*la couleur*/
}
/*le conteneur qui affichera les intitules et les images*/
.M14_legende
{
top:10px;/*on le place a 10px du titre*/
position:relative;/*ne pas toucher*/
width:900px;/*la largeur du conteneur*/
height:25px;/* la hauteur du conteneur*/
margin-left:auto;/*ne pas toucher*/
margin-right:auto;/*ne pas toucher*/
border:1px solid #ffffff;/*bordure de 1px avec un style solide et de couleur blanche*/
background:#A7A37E;/*la couleur de fond*/
/*les bordures arrondies*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*transitions*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*le bloc de droite avec une opacite a 0*/
div.gauche
{
position:absolute;/*ne pas toucher*/
top:5px;/*on le place a 5px du haut*/
width:300px;/*une largeur de 300px*/
left:5px;/*on le place a 5px du bord gauche*/
padding:5px;/*un espace de 5px */
/*l opacite a 0*/
-moz-opacity:0;
-khtml-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:alpha(opacity=0);
opacity:0;
zoom: 1;/* HACK POUR IE */
/*transitions*/
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
-o-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
/* le bloc du centre avec une opacite a 0*/
div.centre
{
position:absolute;/*ne pas toucher*/
top:5px;/*on le place a 5px du haut*/
width:300px;/*une largeur de 300px*/
left:305px;/*on le place a 305px du bord gauche*/
padding:5px;/*un espace de 5px */
/*l opacite a 0*/
-moz-opacity:0;
-khtml-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:alpha(opacity=0);
opacity:0;
zoom: 1;/* HACK POUR IE */
/*transitions*/
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
-o-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
/*le bloc de droite avec une opacite a 0*/
div.droite
{
position:absolute;/*ne pas toucher*/
top:5px;/*on le place a 5px du haut*/
width:300px;/*une largeur de 300px*/
left:605px;/*on le place a 605px du bord gauche*/
padding:5px;/*un espace de 5px */
/*l opacite a 0*/
-moz-opacity:0;
-khtml-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:alpha(opacity=0);
opacity:0;
zoom: 1;/* HACK POUR IE */
/*transitions*/
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
-o-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
/*le titre de la legende*/
#M14_legende a
{
color:#000000;/*la couleur*/
text-decoration:none !important;/*on supprime le soulignement*/
cursor:pointer;/*on donne un style au curseur*/
/*transitions*/
-webkit-transition: color 0.5s ease-in-out;
-moz-transition: color 0.5s ease-in-out;
-o-transition: color 0.5s ease-in-out;
transition: color 0.5s ease-in-out;
}
/*le titre de la legende au survol*/
#M14_legende a:hover
{
color:#800000;/*la couleur*/
}
/* on augmente la hauteur du conteneur au survol*/
#M14_legende:hover .M14_legende
{
height:100px;/*la hauteur*/
border:1px solid #800000;/*bordure de 1px avec un style solide et de couleur rouge*/
background:#EFECCA;/*la couleur de fond*/
/*les bordures arrondies*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* on affiche le contenu des trois blocs avec opacite a 1 */
#M14_legende:hover div.gauche , #M14_legende:hover div.centre , #M14_legende:hover div.droite
{
-moz-opacity:1;
-khtml-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(opacity=100);
opacity:1;
zoom: 1;/* HACK POUR IE */
}
Elle est assez importante , mais bon quand on aime on compte pas
a++
Invité- Invité
Re: Masquer la légende sans la supprimer
Merci beaucoup ! Et encore désolée de ne pas avoir été assez claire la première fois.
Ce sujet est donc résolu grâce à toi, encore merci.
Ce sujet est donc résolu grâce à toi, encore merci.
Sujets similaires
» Masquer la légende des groupes, pour un groupe
» Supprimer une legende.
» Supprimer la légende
» Supprimer la légende des rangs
» Supprimer la légende de la jauge
» Supprimer une legende.
» Supprimer la légende
» Supprimer la légende des rangs
» Supprimer la légende de la jauge
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