Masquer la légende sans la supprimer

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

Résolu Masquer la légende sans la supprimer

Message par Kynaeku le Mar 20 Aoû 2013 - 20:26


    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. Clin d\'oeil 


Dernière édition par Kynaeku le Jeu 22 Aoû 2013 - 10:59, édité 1 fois

Kynaeku
**

Féminin
Messages : 91
Inscrit(e) le : 20/08/2013

http://owrigine.forumactif.org/
Kynaeku a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Masquer la légende sans la supprimer

Message par Milouze14 le Mar 20 Aoû 2013 - 20:29

Salut Kynaeku,
tu veux parler de la légende qui est positionnée en bas de la liste des sujets ?

a++

Milouze14
+ Hyperactif +

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

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

Résolu Re: Masquer la légende sans la supprimer

Message par Kynaeku le Mar 20 Aoû 2013 - 20:39

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 Smile :

http://img11.hostingpics.net/pics/794527Lgende.png

Kynaeku
**

Féminin
Messages : 91
Inscrit(e) le : 20/08/2013

http://owrigine.forumactif.org/
Kynaeku a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Masquer la légende sans la supprimer

Message par Milouze14 le Mar 20 Aoû 2013 - 20:45

Re,
si si j'ai bien comprit Very Happy  ,
je te donne tout çà demain car il est l'heure pour moi de débrayer Wink  .

Bonne soirée.
a++

Milouze14
+ Hyperactif +

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

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

Résolu Re: Masquer la légende sans la supprimer

Message par Kynaeku le Mar 20 Aoû 2013 - 20:47

Merci beaucoup ! Bonne route et bonne soirée ! thumright 

Kynaeku
**

Féminin
Messages : 91
Inscrit(e) le : 20/08/2013

http://owrigine.forumactif.org/
Kynaeku a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Masquer la légende sans la supprimer

Message par Milouze14 le Mer 21 Aoû 2013 - 8:36

Salut Kynaeku,

On va passer par un plugin Jquery pour afficher masquer la légende Wink  :


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 -->
Supprimes et remplaces par ceci:
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>
Le plugin est pourvu d un effet pour l ouverture et la fermeture.
Modifies la valeur 400 par un nombre plus important pour une fermeture plus lente:
Code:
.hide(400);
Pour l'ouverture:
Code:
('#toggle').toggle(400);
Pense a enregistrer les modifications en cliquant respectivement sur et

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;
}
Pense à valider les modifications en cliquant sur le bouton "Valider".



En espérant avoir répondu à tes attentes Wink  .

a++

Milouze14
+ Hyperactif +

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

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

Résolu Re: Masquer la légende sans la supprimer

Message par Kynaeku le Mer 21 Aoû 2013 - 18:27

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:

http://i70.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. Embarassed  

Kynaeku
**

Féminin
Messages : 91
Inscrit(e) le : 20/08/2013

http://owrigine.forumactif.org/
Kynaeku a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Masquer la légende sans la supprimer

Message par Milouze14 le Jeu 22 Aoû 2013 - 5:30

Salut Kynaeku,
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>
Supprimes et remplaces par ceci:
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 -->
Supprimes cette partie dans ta feuille de style:
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;
        }

Et insères celle-ci:
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 Very Happy 



a++

Milouze14
+ Hyperactif +

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

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

Résolu Re: Masquer la légende sans la supprimer

Message par Kynaeku le Jeu 22 Aoû 2013 - 10:59

Merci beaucoup ! Et encore désolée de ne pas avoir été assez claire la première fois. thumright 

Ce sujet est donc résolu grâce à toi, encore merci.

Kynaeku
**

Féminin
Messages : 91
Inscrit(e) le : 20/08/2013

http://owrigine.forumactif.org/
Kynaeku 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