Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)
Le Deal du moment : -60%
Chargeur rapide sans Fil Universel 10 W – ...
Voir le deal
13.59 €

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

QEEL avec description des groupes au survol Empty QEEL avec description des groupes au survol

le Mar 18 Fév 2020 - 19:27

QEEL avec description des groupes au survol


Hello !

Moi et les noms de LS.... boulet 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 :
QEEL avec description des groupes au survol Qeel_g10
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.

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

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

Arrow Tu dois avoir accès aux templates Smile
Exclamation 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)

Partie HTML : modifions le template

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 Smile ) et remplace le par le HTML qui correspond à la version de ton forum :
PhpBB2

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>

phpBB3 - punBB - Invision - ModernBB

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 Smile

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

Modifier / compléter les groupes

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 Wink
Si tu en supprime il suffit de supprimer la ligne qui correspond au nombre que tu as retiré.

Partie CSS : attaquons la mise en page

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

PhpBB2

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  ************************/

PhpBB3 - PunBB - Invision - ModernBB

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  ************************/

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



Et voilà le travail Smile 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 : )


_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses