QEEL avec description des groupes au survol

Hello !

Moi et les noms de LS.... Si tu as une idée de titre plus approprié, n'hésite pas !

Voilà un aperçu de ce que je viens te proposer :
Au passage de la souris sur un bloc de couleur (un groupe) les cases du milieu en bas changent avec le nom du groupe + sa description.

L'image du milieu est l'image que tu installes dans Affichage > Images > QEEL

LS réalisé à partir de la commande de Galatée (et avec son accord)
Merci de créditer la Tambouille et/ou moi

Tu dois avoir accès aux templates
Ce LS avait été fait pour phpBB2 en priorité. Il a été adapté à toutes les versions SAUF AwesomeBB. Cependant, note bien qu'il change totalement la structure du QEEL des versions autres que phpBB2 (ou pbpBB3)


Ici, on a des petits différences selon la version. Mais voilà ce qui ne change pas : repère ces deux commentaires :

Code:

<!-- BEGIN disable_viewonline -->

et

Code:

<!-- END disable_viewonline -->

Supprime tout ce qu'il ya entre les 2 (oui oui, tout ) et remplace le par le HTML qui correspond à la version de ton forum :

Code:


<div id="QEEL">
  <div id="titreQEEL">
      {L_WHO_IS_ONLINE}
  </div>
  <div class="d-flex">
      <div class="colonne225">
        <div id="Online">
            {TOTAL_USERS_ONLINE}<br /><br />
            {LOGGED_IN_USER_LIST}
        </div>
        <div id="lastDay">
            <table>{L_CONNECTED_MEMBERS}</table>
        </div>
      </div>
      <div class="colonne75">
        <p onMouseOver="javascript:change_onglet('1');" id="groupe1"> </p>
        <p onMouseOver="javascript:change_onglet('2');" id="groupe2"> </p>
        <p onMouseOver="javascript:change_onglet('3');" id="groupe3"> </p>
        <p onMouseOver="javascript:change_onglet('4');" id="groupe4"> </p>
        <p onMouseOver="javascript:change_onglet('5');" id="groupe5"> </p>
      </div>
      <div id="colonne300">
        <div id="imageCentrale">
            <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
        </div>
        <div id="1">
            <div class="groupeName">
              Nom du groupe 1
            </div>
            <div class="groupeDesc">
              Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
            </div>
        </div>
        <div id="2">
            <div class="groupeName">
              Nom du groupe 2
            </div>
            <div class="groupeDesc">
              Description du groupe 2
            </div>
        </div>
        <div id="3">
            <div class="groupeName">
              Nom du groupe 3
            </div>
            <div class="groupeDesc">
              Description du groupe 3
            </div>
        </div>
        <div id="4">
            <div class="groupeName">
              Nom du groupe 4
            </div>
            <div class="groupeDesc">
              Description du groupe 4
            </div>
        </div>
        <div id="5">
            <div class="groupeName">
              Nom du groupe 5
            </div>
            <div class="groupeDesc">
              Description du groupe 5
            </div>
        </div>
        <div id="6">
            <div class="groupeName">
              Nom du groupe 6
            </div>
            <div class="groupeDesc">
              Description du groupe 6
            </div>
        </div>
        <div id="7">
            <div class="groupeName">
              Nom du groupe 7
            </div>
            <div class="groupeDesc">
              Description du groupe 7
            </div>
        </div>
        <div id="8">
            <div class="groupeName">
              Nom du groupe 8
            </div>
            <div class="groupeDesc">
              Description du groupe 8
            </div>
        </div>
        <div id="9">
            <div class="groupeName">
              Nom du groupe 9
            </div>
            <div class="groupeDesc">
              Description du groupe 9
            </div>
        </div>
        <div id="10">
            <div class="groupeName">
              Nom du groupe 10
            </div>
            <div class="groupeDesc">
              Description du groupe 10
            </div>
        </div>
      </div>
      <div class="colonne75">
        <p onMouseOver="javascript:change_onglet('6');" id="groupe6"> </p>
        <p onMouseOver="javascript:change_onglet('7');" id="groupe7"> </p>
        <p onMouseOver="javascript:change_onglet('8');" id="groupe8"> </p>
        <p onMouseOver="javascript:change_onglet('9');" id="groupe9"> </p>
        <p onMouseOver="javascript:change_onglet('10');" id="groupe10"> </p>
      </div>
      <div class="colonne225">
        <div id="lastSubscribe"> {NEWEST_USER}<br/><br />{RECORD_USERS}
        </div>
        <div class="d-flex" id="stats">
            <div class="totalUser">
              {TOTAL_USERS}
              <script type="text/javascript">document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
              replace(/Nous avons/,' ');
              document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
              replace(/enregistrés/,' ');
              document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
              replace(/enregistré/,' ');
            </script>
        </div>
        <div id="border">
        </div>
        <div class="totalPosts"> {TOTAL_POSTS}
            <script type="text/javascript">document.getElementsByClassName("totalPosts")[0].innerHTML = document.getElementsByClassName("totalPosts")[0].innerHTML.
            replace(/ Nos membres ont posté un total de/,' ');
        </script>
      </div>
  </div>
  <div id="birthday">
      <table>
        {L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}
      </table>
  </div>
</div>
</div>
</div>
<script type="text/javascript">
  document.getElementById(2).style.display = 'none';
  document.getElementById(3).style.display = 'none';
  document.getElementById(4).style.display = 'none';
  document.getElementById(5).style.display = 'none';
  document.getElementById(6).style.display = 'none';
  document.getElementById(7).style.display = 'none';
  document.getElementById(8).style.display = 'none';
  document.getElementById(9).style.display = 'none';
  document.getElementById(10).style.display = 'none';
  var anc_onglet=1;
  function change_onglet(name){document.getElementById(anc_onglet).style.display = 'none';document.getElementById(name).style.display = 'block'; anc_onglet = name;}
</script>


Code:


<div id="QEEL">
  <div id="titreQEEL">
      {L_WHO_IS_ONLINE}
  </div>
  <div class="d-flex">
      <div class="colonne225">
        <div id="Online">
            {TOTAL_USERS_ONLINE}<br /><br />
            {LOGGED_IN_USER_LIST}
        </div>
        <div id="lastDay">
            {L_CONNECTED_MEMBERS}
        </div>
      </div>
      <div class="colonne75">
        <p onMouseOver="javascript:change_onglet('1');" id="groupe1"> </p>
        <p onMouseOver="javascript:change_onglet('2');" id="groupe2"> </p>
        <p onMouseOver="javascript:change_onglet('3');" id="groupe3"> </p>
        <p onMouseOver="javascript:change_onglet('4');" id="groupe4"> </p>
        <p onMouseOver="javascript:change_onglet('5');" id="groupe5"> </p>
      </div>
      <div id="colonne300">
        <div id="imageCentrale">
            <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
        </div>
        <div id="1">
            <div class="groupeName">
              Nom du groupe 1
            </div>
            <div class="groupeDesc">
              Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
            </div>
        </div>
        <div id="2">
            <div class="groupeName">
              Nom du groupe 2
            </div>
            <div class="groupeDesc">
              Description du groupe 2
            </div>
        </div>
        <div id="3">
            <div class="groupeName">
              Nom du groupe 3
            </div>
            <div class="groupeDesc">
              Description du groupe 3
            </div>
        </div>
        <div id="4">
            <div class="groupeName">
              Nom du groupe 4
            </div>
            <div class="groupeDesc">
              Description du groupe 4
            </div>
        </div>
        <div id="5">
            <div class="groupeName">
              Nom du groupe 5
            </div>
            <div class="groupeDesc">
              Description du groupe 5
            </div>
        </div>
        <div id="6">
            <div class="groupeName">
              Nom du groupe 6
            </div>
            <div class="groupeDesc">
              Description du groupe 6
            </div>
        </div>
        <div id="7">
            <div class="groupeName">
              Nom du groupe 7
            </div>
            <div class="groupeDesc">
              Description du groupe 7
            </div>
        </div>
        <div id="8">
            <div class="groupeName">
              Nom du groupe 8
            </div>
            <div class="groupeDesc">
              Description du groupe 8
            </div>
        </div>
        <div id="9">
            <div class="groupeName">
              Nom du groupe 9
            </div>
            <div class="groupeDesc">
              Description du groupe 9
            </div>
        </div>
        <div id="10">
            <div class="groupeName">
              Nom du groupe 10
            </div>
            <div class="groupeDesc">
              Description du groupe 10
            </div>
        </div>
      </div>
      <div class="colonne75">
        <p onMouseOver="javascript:change_onglet('6');" id="groupe6"> </p>
        <p onMouseOver="javascript:change_onglet('7');" id="groupe7"> </p>
        <p onMouseOver="javascript:change_onglet('8');" id="groupe8"> </p>
        <p onMouseOver="javascript:change_onglet('9');" id="groupe9"> </p>
        <p onMouseOver="javascript:change_onglet('10');" id="groupe10"> </p>
      </div>
      <div class="colonne225">
        <div id="lastSubscribe"> {NEWEST_USER}<br/><br />{RECORD_USERS}
        </div>
        <div class="d-flex" id="stats">
            <div class="totalUser">
              {TOTAL_USERS}
              <script type="text/javascript">document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
              replace(/Nous avons/,' ');
              document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
              replace(/enregistrés/,' ');
              document.getElementsByClassName("totalUser")[0].innerHTML = document.getElementsByClassName("totalUser")[0].innerHTML.
              replace(/enregistré/,' ');
            </script>
        </div>
        <div id="border">
        </div>
        <div class="totalPosts"> {TOTAL_POSTS}
            <script type="text/javascript">document.getElementsByClassName("totalPosts")[0].innerHTML = document.getElementsByClassName("totalPosts")[0].innerHTML.
            replace(/ Nos membres ont posté un total de/,' ');
        </script>
      </div>
  </div>
  <div id="birthday">
        {L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}
  </div>
</div>
</div>
</div>
<script type="text/javascript">
  document.getElementById(2).style.display = 'none';
  document.getElementById(3).style.display = 'none';
  document.getElementById(4).style.display = 'none';
  document.getElementById(5).style.display = 'none';
  document.getElementById(6).style.display = 'none';
  document.getElementById(7).style.display = 'none';
  document.getElementById(8).style.display = 'none';
  document.getElementById(9).style.display = 'none';
  document.getElementById(10).style.display = 'none';
  var anc_onglet=1;
  function change_onglet(name){document.getElementById(anc_onglet).style.display = 'none';document.getElementById(name).style.display = 'block'; anc_onglet = name;}
</script>


On enregistre et on oublie pas de publier le template

Pour ModernBB, si tu souhaites retirer la bande avec les statistiques tout en bas du forum afin de ne pas avoir de doublon, tu peux aller dans le templates overall_footer_begin et supprimer cette partie :

Code:

<div class="statistics">
 <div class="wrap">
 <div class="statistics-item">
 {TOTAL_POSTS}
 </div>
 <div class="statistics-item">
 {TOTAL_USERS}
 </div>
 <div class="statistics-item">
 {NEWEST_USER}
 </div>
 </div>
</div>

Tu enregistres, et tu publies


Pour modifier le nombre de groupe ou pour les compléter, voilà ce qu'il faut savoir :
Ici se sont les ronds des groupes :

Code:

<p onMouseOver="javascript:change_onglet('1');" id="groupe1"> </p>
      <p onMouseOver="javascript:change_onglet('2');" id="groupe2"> </p>
      <p onMouseOver="javascript:change_onglet('3');" id="groupe3"> </p>
      <p onMouseOver="javascript:change_onglet('4');" id="groupe4"> </p>
      <p onMouseOver="javascript:change_onglet('5');" id="groupe5"> </p>

un p = un rond. Si tu veux en ajouter / en retirer, il te suffit de rajouter une ligne avec le bon chiffre entre parenthèse et avec le bon id ou alors de supprimer une ligne.

Ensuite, ceci correspond à un bloc "titre groupe" suivi de la description :

Code:

<div id="1">
        <div class="groupeName">
            Nom du groupe 1
        </div>
        <div class="groupeDesc">
            Vestibulum eu purus dictum, gravida felis vulputate, sollicitudin purus. Vivamus nec elit magna. Praesent maximus, tellus non scelerisque faucibus, risus velit ullamcorper eros, vitae mattis dui tortor sit amet orci. Pellentesque luctus a lacus id tincidunt. Vivamus scelerisque arcu eu dolor tempor, quis pulvinar dolor tempus. Etiam vel vestibulum risus, nec egestas sapien. Aenean ultrices elementum pretium. Sed elementum elementum rhoncus. Curabitur vel tristique leo. Proin convallis imperdiet risus vitae volutpat. Etiam mattis libero ut lacus ullamcorper tincidunt.
        </div>
      </div>

Les divs ne sont pas à enlever, seul le contenu est à changer.
Si tu veux en ajouter, copie / colle tout ça en changeant l'ID de la première div

Et ici c'est le script qui sert à gérer le affiché / masqué au passage de la souris :

Code:

<script type="text/javascript">
  document.getElementById(2).style.display = 'none';
  document.getElementById(3).style.display = 'none';
  document.getElementById(4).style.display = 'none';
  document.getElementById(5).style.display = 'none';
  document.getElementById(6).style.display = 'none';
  document.getElementById(7).style.display = 'none';
  document.getElementById(8).style.display = 'none';
  document.getElementById(9).style.display = 'none';
  document.getElementById(10).style.display = 'none';
  var anc_onglet=1;
  function change_onglet(name){document.getElementById(anc_onglet).style.display = 'none';document.getElementById(name).style.display = 'block'; anc_onglet = name;}
</script>

Si tu en rajoute : il faut rajouter une ligne comme celle-ci :

Code:

 document.getElementById(10).style.display = 'none';

en mettant à jour le nombre entre parenthèse
Si tu en supprime il suffit de supprimer la ligne qui correspond au nombre que tu as retiré.


Dans la CSS de ton forum (PA -> Affichage -> Couleurs -> Feuille de style CSS) colle la CSS qui correspond à ta version :

Au début de la CSS, pour toutes les versions, je te conseille d'ajouter ce code, qui va permettre, sur l'ensemble de ton forum, que toutes les marges et remplissages (padding et margin) soient pris en compte sans agrandir les tailles données (pour en savoir plus rendez-vous ici :

Code:

*{
  box-sizing:border-box;
}

La police utilisée pour les titres s'appelle "Playball" : tu la trouveras juste.
Pour l'installer, tu peux suivre ce tutoriel

Code:

/**************************DEBUT QEEL  ************************/
#QEEL #titreQEEL{
  width:100%;
  max-width:900px;
  margin:auto;
  text-align: center;
  font-size:30px;
  font-family: 'Playball', cursive;
}

#QEEL{
  text-align: center;
  width:100%;
  font-size:12px;
  margin: auto;
  max-width:900px;
  color: #5e4621;
  font-family:verdana;

}
#QEEL > .d-flex{
display:flex;
  border:1px solid #5e4621;
  width:100%;
  margin:0.5% auto;
  align-items: center;
  background:#eecb94;
}
#QEEL > .d-flex > div {
  padding:0;
  margin:0;

}
.colonne225{
  width:225px;
 
}

#colonne300,
#colonne300 #imageCentrale,
#colonne300 #imageCentrale img{
  width:300px;
}
#colonne300 #imageCentrale,
#colonne300 #imageCentrale img{
  height:200px;
}
#colonne300 > div{
  margin:5px 0;
}
.colonne75{
  width:75px;
}
.colonne75 p{
  width:60px;
  height:60px !important;
  border-radius: 100px;
  margin: 7px auto !important;
}
/* -------------- A mettre à jour pour chaque groupe ---------------- */
#groupe1{
  background:red;
}
#groupe2{
  background:green;
}
#groupe3{
  background:blue;
}
#groupe4{
  background:purple;
}
#groupe5{
  background:orange;
}
#groupe6{
  background:orange;
}
#groupe7{
  background:grey;
}
#groupe8{
  background:white;
}
#groupe9{
  background:black;
}
#groupe10{
  background:pink;
}

#Online,
#lastDay{
  border-right:1px solid #5e4621;
  height:200px;
  overflow:auto;
}
#Online{
  border-bottom:1px solid #5e4621;
}
#lastSubscribe,
#birthday,
#stats,
#stats div#border
{
  border-left:1px solid #5e4621;
  height:133px;
}
#birthday{
  overflow:auto;
}
#stats {
display:flex;
  padding: 0 2%;
  font-family: 'Playball', cursive;
  font-size: 28px;
  border-top: 1px solid #5e4621;
  border-bottom: 1px solid #5e4621;
  align-items: center;
}
#stats .totalUser,
#stats .totalPosts{
  flex:0 0 50%;
}
.groupeName,
.groupeDesc{
  border: 1px solid #5e4621;
}
.groupeName{
  font-family: 'Playball', cursive;
  font-size: 20px;
  line-height: 25px;
  margin-bottom:1%;
}
.groupeDesc{
  height:150px;
  overflow: auto;
}

/* ----------- gestion des parties gênantes sur FA :
les anniversaires et derniers connectés---------------- */
#QEEL table{
  margin: auto;
  text-align:center;
  font-size:12px;
  line-height:14px;

}
#QEEL table .row1{
  background:none;
}
#QEEL table .row1 span,
#QEEL a{
  font-size: 12px;
  color: #5e4621;
}

/**************************FIN QEEL  ************************/

Code:

/**************************DEBUT QEEL  ************************/
#QEEL #titreQEEL{
  width:100%;
  max-width:900px;
  margin:auto;
  text-align: center;
  font-size:30px;
  font-family: 'Playball', cursive;
}

#QEEL{
  text-align: center;
  width:100%;
  font-size:12px;
  margin: auto;
  max-width:900px;
  color: #5e4621;
  font-family:verdana;

}
#QEEL > .d-flex{
display:flex;
  border:1px solid #5e4621;
  width:100%;
  margin:0.5% auto;
  align-items: center;
  background:#eecb94;
}
#QEEL > .d-flex > div {
  padding:0;
  margin:0;

}
.colonne225{
  width:225px;
 
}

#colonne300,
#colonne300 #imageCentrale,
#colonne300 #imageCentrale img{
  width:300px;
}
#colonne300 #imageCentrale,
#colonne300 #imageCentrale img{
  height:200px;
}
#colonne300 > div{
  margin:5px 0;
}
.colonne75{
  width:75px;
}
.colonne75 p{
  width:60px;
  height:60px !important;
  border-radius: 100px;
  margin: 7px auto !important;
}
/* -------------- A mettre à jour pour chaque groupe ---------------- */
#groupe1{
  background:red;
}
#groupe2{
  background:green;
}
#groupe3{
  background:blue;
}
#groupe4{
  background:purple;
}
#groupe5{
  background:orange;
}
#groupe6{
  background:orange;
}
#groupe7{
  background:grey;
}
#groupe8{
  background:white;
}
#groupe9{
  background:black;
}
#groupe10{
  background:pink;
}

#Online,
#lastDay{
  border-right:1px solid #5e4621;
  height:200px;
  overflow:auto;
}
#Online{
  border-bottom:1px solid #5e4621;
}
#lastSubscribe,
#birthday,
#stats,
#stats div#border
{
  border-left:1px solid #5e4621;
  height:133px;
  background: #eecb94;
}
#birthday{
  overflow:auto;
}
#stats {
display:flex;
  padding: 0 2%;
  font-family: 'Playball', cursive;
  font-size: 28px;
  border-top: 1px solid #5e4621;
  border-bottom: 1px solid #5e4621;
  align-items: center;
}
#stats .totalUser,
#stats .totalPosts{
  flex:0 0 50%;
}
.groupeName,
.groupeDesc{
  border: 1px solid #5e4621;
}
.groupeName{
  font-family: 'Playball', cursive;
  font-size: 20px;
  line-height: 25px;
  margin-bottom:1%;
}
.groupeDesc{
  height:150px;
  overflow: auto;
}
/**************************FIN QEEL  ************************/

Aucun des codes n'est commenté, n'hésite pas à dire si tu es un peu perdu, j'en ajouterai. De même si tu as besoin d'aide pour la personnalisation n'hésite pas à le dire je t'assisterai

---

Et voilà le travail Si tu as un problème avec le code, que ça soit pour l'installation ou la personnalisation, n'hésites pas à demander !

Si tu te sers de ce code, merci de mettre un petit lien vers la tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )