La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -15%
(Adhérents Fnac) LEGO® Star Wars™ ...
Voir le deal
552.49 €

Aller en bas
Féli
Féli
Messages : 489
http://feli.forumactif.org

[Commande Codage] Sous catégorie au passage de la souris Empty [Commande Codage] Sous catégorie au passage de la souris

Ven 1 Nov 2019 - 11:44
Salut,

Type de commande (modification de templates, en-tête, qeel, mise en page de messages, pub, autres) : dans le CSS je pense... pour les sous catégories.
Pour quel forum : Chez Féli  http://feli.forumactif.org
Maquette graphique/schéma/croquis :  Je vais expliquer car je n'arriverai pas à faire un schéma de ma demande.

 Arrow  J'ai changé l'apparence de mes catégories aujourd'hui. Or, mes sous-catégories, je les ai mises les unes sous les autres comme je le souhaitais.
Le soucis ? c'est que cela prend de la place.
Donc, j'aimerai bien que mes sous catégories apparaissent uniquement au passage de la souris (sur la catégorie en question).

Capture écran de mes sous catégorie actuellement :
[Commande Codage] Sous catégorie au passage de la souris Captur25

Informations utiles (couleurs, images, etc, …) : pas besoin car je change cela avec le thème graphique, merci

Le code pourra-t-il être mis en libre service ensuite ? oui, avec grand plaisir pour que chacun puisse en bénéficier. Merci à vous.
Pêpêche
Pêpêche
Mascotte
Messages : 4428

[Commande Codage] Sous catégorie au passage de la souris Empty Re: [Commande Codage] Sous catégorie au passage de la souris

Ven 1 Nov 2019 - 16:01
Coucou Smile

Tu pourrais nous donner le template et la CSS ainsi que la version de ton forum stp ?
Féli
Féli
Messages : 489
http://feli.forumactif.org

[Commande Codage] Sous catégorie au passage de la souris Empty Re: [Commande Codage] Sous catégorie au passage de la souris

Ven 1 Nov 2019 - 18:09
en phpbb2


le CSS
Spoiler:

l'index box
Spoiler:
Pêpêche
Pêpêche
Mascotte
Messages : 4428

[Commande Codage] Sous catégorie au passage de la souris Empty Re: [Commande Codage] Sous catégorie au passage de la souris

Ven 1 Nov 2019 - 20:58
Un truc comme ça du coup ?
https://form-tamb-raleuses.forumactif.com/

Il y a des sous forum sur "Formations de Miettes" et "test miettes"
Féli
Féli
Messages : 489
http://feli.forumactif.org

[Commande Codage] Sous catégorie au passage de la souris Empty Re: [Commande Codage] Sous catégorie au passage de la souris

Sam 2 Nov 2019 - 9:31
Exactement ça ma Miettes, tu as tout à fait compris l'idée !
Pêpêche
Pêpêche
Mascotte
Messages : 4428

[Commande Codage] Sous catégorie au passage de la souris Empty Re: [Commande Codage] Sous catégorie au passage de la souris

Sam 2 Nov 2019 - 9:42
Ah top Smile

Du coup, j'ai modifié un peu le template "index_box" en ajouter une div autour de chaque catégorie
Code:
<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Dancing+Script' rel='stylesheet' type='text/css' />
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
<!-- BEGIN catrow --><div class="m-cate"><div class="title_category_artemis"><!-- BEGIN tablehead -->{catrow.tablehead.L_FORUM}
 <!-- END tablehead --></div>
 <!-- BEGIN forumrow -->
 <div class="category_ls_artemis1">
 <div class="avatar_member_ls">
 <!-- BEGIN avatar -->
 {catrow.forumrow.avatar.LAST_POST_AVATAR}
 <!-- END avatar -->
 </div>
 <div class="new_post_stats">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 <div class="stats_sujets_artemis">
 <span>{catrow.forumrow.TOPICS} {L_TOPICS}</span>
 <span>{catrow.forumrow.POSTS} {L_POSTS}</span>
 </div>
 <div class="last_post_link_a">
 {catrow.forumrow.LAST_POST}
 </div>
 </div>
 <div class="description_category_ls_arte">
 {catrow.forumrow.FORUM_DESC}
 </div>
 <div class="image_etat_category">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </div>
</div>
<div class="sous_forums_category_arte">
 <span data-elt="sousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div>

 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --></div><!-- END catrow -->

Au niveau de la CSS, j'ai juste supprimé la hauteur qui était mise sur les sous forum
Code:
/**ajout pour stat sur ligne message etc**/
.d-none{display: none;}

/****début du http://www.epicode-entraide.com/t2038-message-bouton-selectionner-le-contenu *****/
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }
/****fin du http://www.epicode-entraide.com/t2038-message-bouton-selectionner-le-contenu*****/



/****début image en fond transparent dans les messages*****/
td.row1, td.row2 {
      background: url('http://ekladata.com/9rqkfHdMTgbG_i6-fq3fCBD3gKs.png'); /* http://ekladata.com/lvUZWLnfQvzeAwJOcn47RlFTNk8.png*/
}
/****fin image en fond transparent dans les messages*****/



/****début http://www.epicode-entraide.com/t12547-liste-des-membres-2-batty*****/
.LSbatty_titre {
  margin:15px auto;
  width:100%;
}

.LSbatty_titre  th {
  margin-bottom:5px;
  padding:5px 0;
  text-transform:uppercase; /*texte en majuscule*/
  font-family:Arial; /*police du titre*/
  font-size:16px; /*taille du texte*/
  background:#f0eaea; /*couleur fond titre*/
  color:#fff; /* Couleur du texte */
  font-weight:normal; /*Retiré le gras du titre*/
}

.LSbatty_corp{
  position:relative;
  width:100%;
  height:120px;
  padding:10px 0;
  font-family: arial; /*Police général*/
}

.LSbatty_image{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  width:120px; /*Largeur de l'espace pour l'avatar*/
  height:120px; /*hautteur de l'espace pour l.avatar*/
  background: #ccc; /*couleur de fond s'il n'y a pas d'image*/
  border-radius:100px;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(68,74,115,0.5); /*ombre au tour de l'avatar*/
}

.LSbatty_image img{
  width:120px; /*Largeur de l'image avatar*/
}


.LSbatty_pseudo{
  position: absolute;
    top: 0;
    left: 60px;
    width: calc(100% - 60px);
    width: -webkit-calc(100% - 60px);
    width: -moz-calc(100% - 60px);
    height: 35px;
    background: #f0eaea;/*couleur de fond par défaut (membre non validé)*/
    padding: 5px 65px;
    font-size: 20px; /*Taille du texte*/
    text-align: left;
    margin: 10px 0;
    box-sizing: border-box;
}

.LSbatty_pseudo span strong{
  color:#fff; /*Couleur du pseudo (membre validé)*/
}

.LSbatty_pseudo a {
  font-size:14px;
  text-transform: uppercase; /*Pseudo en majuscule*/
  color:#fff; /*Couleur du pseudo (membre non validé)*/
}

.LSbatty_pseudo img{
  height:14px; /*Hauteur des images MP et site web*/
}

.LSbatty_pseudo a strong{
  font-weight:normal; /*Retiré le gras sur les pseudo*/
}

.LSbatty_infos{
    position: absolute;
    top: 40px;
    left: 120px;
    width: calc(100% - 120px);
    width: -webkit-calc(100% - 120px);
    width: -moz-calc(100% - 120px);
    height: 80px;
    padding: 10px 5px;
    font-size: 14px; /*taille du texte*/
    box-sizing: border-box;
}

.LSbatty_infos div{
  display: inline-block;
  vertical-align: top;
  width: 23%;
  height:50px;
  margin: 5px;
  background:#fff; /*couleur de fond des infos*/
}

.LSbatty_infos div span{
  display:block;
  background: #ccc; /*couleur de fond des titres infos*/
  margin-bottom: 5px;
  padding:3px;
}

.LSbatty_pagination{
    margin: auto;
    padding: 10px;
    width: 100%;
    background:#944141; /*couleur fond pagination*/
}

.LSbatty_pagination a {
  color:#fff; /*Couleur texte pagination*/
}

.LSbatty_pagination span{
  color:#fff; /*Couleur texte pagination*/
}

/*Mise en page du copyright (Lien)- NE PAS SUPRIMER-*/
.LSbatty_copyright {
  margin:5px auto; /*marge*/
  text-align: center; /*aligner le copyright*/
}

.LSbatty_copyright a{
font-size:11px;
text-decoration:none!important; /*suppression du soulignement par défaut*/
}

.LSbatty_copyright:hover a{
text-decoration:none!important; /*suppression du soulignement par défaut*/
color:#416e94!important; /*deuxième couleur*/
}
/****fin http://www.epicode-entraide.com/t12547-liste-des-membres-2-batty*****/


/****début soulignement liens*****/
a:link
{
text-decoration:none;
}
/****fin soulignement liens*****/


/***** DEBUT de la Limitation de signature pour les membres *****/
.signature_div img {
  max-height:198px;
  max-width:760px;
  text-align : center;
}

.signature_div
{
  max-height:198px;
 max-width:760px;
  text-align : center;
 overflow:auto;
}
/***** FIN de la Limitation de signature pour les membres  *****/

 /* --------------DEBUT https://forum.forumactif.com/t325685-ajouter-des-boutons-haut-bas ----------------*/
.boutonhautbas {
    bottom: 40px;
    right: 10px; /* remplacez right par left pour afficher les boutons à gauche */
    position: fixed;
    z-index: 100;
}
 /* --------------FIN https://forum.forumactif.com/t325685-ajouter-des-boutons-haut-bas ------------------*/


/*** DEBUT DU Qui est en ligne ***/
/**QEEL par Cheshire Cat**/
.qeel h1{
  margin-top:60px;
  margin-bottom:0px;
  background-color:#5e1717;
  text-align:center;
  font-family: 'BenchNine', sans-serif;
  font-size:35px;
  color:#E65353;
  text-transform:uppercase;
  letter-spacing:5px;
}
.qeel h2{
  text-align:center;
  font-size:20px;
  color:#E65353;
}
.qeel .bloc{
  font-size:12px;
  color:#E65353;
  display:block;
  overflow:auto;
  width:250px;
  height:350px;
  margin:auto;
  text-align:justify;
  border-left:2px solid #5e1717;
  border-right:2px solid #5e1717;
  background-color:#fff7f7;
  padding-left:6px;
  padding-right:6px;
  background-image:url(http://ekladata.com/qvqaNWcSUJj2ZUdolJjFuDZwfQE.png); /*ajout d'image de fond x3 bloc*/
}
.qeel .membresco24{
  margin-left:-5px;
  color:#5e1717;
  font-size:12px;
}
.qeel .legend{
  top:5px;
  margin-bottom:20px;
  margin-left:13px;
  margin-right:13px;
  padding-top:10px;
  padding-left:8px;
  padding-right:8px;
  border-top:2px solid #781a1a;
  background-color:#fff7f7;
  text-align:center;
  background-image:url(http://ekladata.com/qvqaNWcSUJj2ZUdolJjFuDZwfQE.png); /*ajout d'image de fond */
}
.qeel .credit{
  font-size:10px;
  float:right;


.bloc td.row1 {      /* neutre, sans fond bleu gris ou autre */
  background : none;
}

.legend .gensmall{      /* retrait des crochets entre groupes */
  font-size:0px;
}

.legend .gensmall a{
  font-size:16px;
  padding-right:10px;
}

/*** FIN DU Qui est en ligne ***/


.sous-forum a img{
position: absolute; margin-left: -20px;
}



/*********************** DÉBUT DES CATÉGORIES      http://libre-graph.forumperso.com/t16021-categories-azure *** ARTEMIS/AZURE EPICODE/LG  ***********/////

.title_category_artemis h2 {
  width: 900px;
  height: 60px;
  margin: auto;
  background: #E96666;
  font-family: 'Arial';
  text-transform: uppercase;
  font-size: 27px;
  text-align: right;
  padding: 16px 40px 0px 0px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #871E1E;
  font-style: oblique;
 
}

.category_ls_artemis1 {
  width: 900px;
  height: 160px;
  background: #780000;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 20px 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
 
}

.avatar_member_ls {
  width: 120px;
  height: 108px;
  box-sizing:  border-box;
  border: 4px solid #590000;
}

.avatar_member_ls img {
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
  object-fit: cover;
}

.new_post_stats {
  width: 320px;
  height: 108px;
  font-size: 24px;
  font-family: 'Arial Narrow';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: 40px;
 
 
 
}

.new_post_stats a {
  display: inline-block;
  width: 250px;
 text-decoration: none;
  color: #c94c4c !important;
  font-family: 'Pacifico';
  font-weight: normal;
  font-size: 25px;
  margin-bottom: 5px;
  border-bottom: 1px solid #C94C4C;
}

.new_post_stats a:hover {
  text-decoration: none !important;
 
}

.stats_sujets_artemis span {
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  padding-top: 4px;
  font-family: 'Calibri';
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 83px;
  height: 20px;
  background: #590000;
  font-size: 11px;
  margin-right: 4px;
}

.last_post_link_a {
  height: 70px;
  width: 200px;
  font-size: 11px;
  text-transform: uppercase;
  color: #E96666;
  margin-left: -20px;
  margin-top: 5px;
 
}

.last_post_link_a a {
  text-decoration: none;
  display: block;
  border: none;
  color: #E96666 !important;
  font-family: 'Sniglet';
  font-size: 14px;
    font-weight: normal;
  text-transform: lowercase;
  margin-bottom: -10px;
}

.last_post_link_a a:hover {
  text-decoration: none !important;
}


.description_category_ls_arte {
  width: 460px;
  height: 120px;
  text-align: justify;
  font-family:'Sniglet';
  overflow: auto;
  font-size: 13px;
  color: #f28888;
  position: relative;
  z-index: 2;
}

.image_etat_category {
  position: absolute;
  bottom: 0px;
  right: 0;
  z-index: 1;
}

.sous_forums_category_arte {
  width: 900px;
  background: #9C1D1D;
  color: #9C1D1D;
  margin: auto;
  padding: 1px 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 5px;
  font-size: 11px;
  display: none;
}

.sous_forums_category_arte a {
  display: inline-block;
  width: auto;
  height: 15px;
  padding: 0px 5px;
  background: #871E1E;
  color: #E96666;
  font-family: 'Sniglet'; /*Calibri*/
  font-size: 11px;
  text-decoration: none;
  margin-top: 3px;
  line-height: 15px;

}

.sous_forums_category_arte a:hover {
  text-decoration: none !important;
  color: #E96666;
}
/*********************** FIN DES CATÉGORIES  ************/////


    /*************************************** début PAGE ACCUEIL *************************************** */
    .titreh1, .titreh1 h2 {
    text-align : center;
    margin : 0 auto -16px;
    font-family: 'Pacifico', cursive;
    text-shadow: 0 0 5px #8f3e3e;   
    color : #ff7c85;
    font-weight : normal;
      font-size : 32px;
    }
   
    .titreh2 {
    margin : 0;
    text-align : center;
    font-family : Kalam;
    color : #831c1d;
    text-shadow : 1px 1px 1px white;
    background : #ff7c85;
    border-radius : 50px;
    box-shadow : 2px 2px 5px #8f3e3e;
    font-size : 18px;
    }
   
    #fond_cotm {
    width : 830px;
    padding : 10px;
    background : #730000;
    border-top : 5px solid #ff7c85;
      border-bottom : 5px solid #ff7c85;
    font-family : Calibri;
    font-size : 12px;
    color : red;
    margin : auto;
    }
   
    .colonnes {
    display : inline-block;
    vertical-align : top;
    }
   
    #contexte {
    width : 210px;
    padding : 5px;
    height : 410px;
    background : #730000;   
    border : 1px solid #caadad;
    font-size : 12px;
    color : #E96666;              /*white*/
    text-align : justify;
    margin-right : 6px;
    overflow : auto;
    }
   
    #contexte p:first-letter {
    float: left;
    font-size: 3em;
    line-height: 1;
    color : #ff7c85;
    text-shadow : 1px 1px 1px #8f3e3e;
    font-family : Kalam;
    }
   
    #staff {
    width : 404px;
    }
   
    #staff img {
    border : 2px solid #ff7c85;
    border-radius : 15px;
    }
   
    #staff h2 {
    margin-top : -30px;
    position : relative;
    border-radius : 0 0 15px 15px;
    width : 199px;
    box-shadow : none;
    }
   
    .infobulles, .infobulles1 {
    display : inline-block;
    vertical-align : top;
    height : 115px;
    width : 195px;
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition:all 1s;
    position : relative;
    }
   
    .infobulles1 {
    margin-top : 13px;
    }
   
    .infobulles div, .infobulles1 div {
    height : 87px;
    width : 195px;
    background : #cc5555;
    border-radius : 15px 15px 0 0;
    opacity: 0;
    position: absolute;
    top : 2px;
    left: 2px;
    -webkit-transform:scale(0) rotate(-0);
    -ms-transform:scale(0) rotate(-0);
    -o-transform:scale(0) rotate(-0);
    transform:scale(0) rotate(-0);
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition:all 1s;
    font-size : 12px;
    text-align : center;
    }
   
    .infobulles:hover div, .infobulles1:hover div {
    transform:scale(1) rotate(0);
    -webkit-transform:scale(1) rotate(0);
    -ms-transform:scale(1) rotate(0);
    -o-transform:scale(1) rotate(0);
    opacity:1;
    }
   
    .infobulles + .infobulles, .infobulles1 + .infobulles1 {
    margin-left : 10px;
    }
   
    #credits {
    width : 394px;
    padding : 5px;
    height : 50px;
    background : #730000; 
    border : 1px solid #fddbdb;
    font-size : 12px;
    color :  #E96666;              /*white*/
    text-align : justify;
    margin-top : 13px;
    }
   
    ul {
    padding : 0;
    margin : 0;
    list-style : none;
    }

    #votes {
    width : 394px;
    padding : 5px;
    height : 80px;
    background : #730000;
    border : 1px solid #fddbdb;
    font-size : 12px;
    color :  #E96666;
    text-align : justify;
    margin-top : 13px;
    }
   
    ul {
    padding : 0;
    margin : 0;
    list-style : none;
    }
   
    #liens {
    width : 184px;
    text-align : center;
      margin-left : 6px;
    }
   
    #partenaires {
    padding : 5px;
    background : #730000;
    border : 1px solid #ff7c85;
    font-size : 12px;
    color : red;
    text-align : center;
    margin-top : 8px;
    }
   
    #partenaires img {
    opacity : 0.3;
    margin-top : 2px;
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition:all 1s;
    }
   
    #partenaires img:hover {
    opacity : 1;
    }


 /****************************************  FIN PAGE ACCUEIL **************************************** /

Et enfin, il y a un javascript à ajouter et à n'afficher que sur l'index
Code:
$(function() {
    $('body').
        on('mouseenter', '.category_ls_artemis1', function(){
            var ssForum = $(this).next('.sous_forums_category_arte');
            if(ssForum.find('a').length){
                ssForum.slideDown();
            }
        })
        .on('mouseleave', '.m-cate', function(){
            var ssForum = $(this).find('.sous_forums_category_arte');
            if(ssForum.find('a').length){
                ssForum.slideUp();
            }
        });
});
Féli
Féli
Messages : 489
http://feli.forumactif.org

[Commande Codage] Sous catégorie au passage de la souris Empty Re: [Commande Codage] Sous catégorie au passage de la souris

Sam 2 Nov 2019 - 9:52
merci beaucoup Miettes !
C'est un magnifique travail et je t'en remercie beaucoup cheers
Pêpêche
Pêpêche
Mascotte
Messages : 4428

[Commande Codage] Sous catégorie au passage de la souris Empty Re: [Commande Codage] Sous catégorie au passage de la souris

Sam 2 Nov 2019 - 10:18
De rien Smile

On peut classer du coup ?
Féli
Féli
Messages : 489
http://feli.forumactif.org

[Commande Codage] Sous catégorie au passage de la souris Empty Re: [Commande Codage] Sous catégorie au passage de la souris

Sam 2 Nov 2019 - 10:28
Oui, un grand merci encore
Pêpêche
Pêpêche
Mascotte
Messages : 4428

[Commande Codage] Sous catégorie au passage de la souris Empty Re: [Commande Codage] Sous catégorie au passage de la souris

Sam 2 Nov 2019 - 10:33
Parfait Smile

N'hésite pas si tu as besoin d'autres choses Smile
Contenu sponsorisé

[Commande Codage] Sous catégorie au passage de la souris Empty Re: [Commande Codage] Sous catégorie au passage de la souris

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses

Post-It des Râleuses