QEEL qui bug

[Wicked Apple]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 21/08/2022 mise en place du code de QEEL
Lien du forum : https://wicked-apple-test.forumactif.com/

Description du problème

Bonjour,

Nous avons installé un code LS trouvé sur le net pour notre QEEL mais celui ci réagit étrangement une fois mis en place. Il y a un hover qui disparait une fois qu'on survole le QEEL et qui apparait en bleu en plus de dépasser de l'ensemble du QEEL. Et ensuite le cadre dernier inscrit ne veut pas s'aligner. On a essayé de l'agrandir mais dans ce cas la plus part des blocs du QEEL sautent une ligne.

CSS:

TEMPLATE:

Merci de votre aide !

[MlleAlys]

Bonjour,

On va modifier les indications des largeurs pour mettre des % ou laisser la largeur automatique des blocs, et ainsi laisser le qeel s'adapter à la largeur du forum :

- Localisez le code suivant :

Code:

.QEEL {
  margin: auto;
  width: 980px;
  font-family: Arial;
}

- Supprimez la ligne width: 980px;
- Localisez :

Code:

#ondayQEEL {
  display: inline-block;
  vertical-align: top;
  width: 300px;
  background: #191919;
}

- Remplacez 300px par 33%;
- Localisez :

Code:

.dayQEEL {
  margin: 20px auto;
  width: 250px;
  height: 155px;
  padding: 5px;
  overflow: hidden;
  background-color: #E8E7E9;
  font-size: 10px;
}

ainsi que :

Code:

.onlineQEEL {
  margin: auto;
  margin-top: 20px;
  width: 250px;
  height: 95px;
  padding: 5px;
  overflow: hidden;
  background: #E8E7E9;
  color: #000;
  font-size: 10px;
}

- Remplacez dans les deux codes 250px par 80%;
- Localisez :

Code:

.blocQEEL {
  display: inline-block;
  vertical-align: top;
  width: 600px;
}

- Remplacez 600px par 67%;
- Localisez :

Code:

.tleQEEL {
  width: 607px;
  height: 85px;
  padding: 25px 25px 25px 0;
  background: #191919;
  text-shadow: 1px 1px 0 #000;
  text-transform: uppercase;
  text-align: right;
}

- Supprimez la ligne width: 607px;
- Localisez :

Code:

.blocGQEEL {
  display: inline-block;
  vertical-align: top;
  width: 400px;
  height: 125px;
}

- Remplacez 400px par 66%;
- Localisez :

Code:

.contenu_onglet {
  display: none;
  background-color: #DDD;
  color: #000;
  width: 400px;
  height: 175px;
  padding: 5px;
  overflow: auto;
  font-size: 10px;
  text-align: justify;
}

- Supprimez la ligne width: 400px;
- Localisez :

Code:

.stsQEEL {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: 175px;
  padding: 10px;
  background: #CCC;
  color: #000;
  text-align: center;
  font-size: 11px;
}

- Remplacez 200px par 34%;
- Localisez :

Code:

.anvQEEL {
  width: 607px;
  height: 50px;
  padding: 10px;
  background: #191919;
  color: #fff;
  font-family: Arial;
  text-transform: uppercase;
  text-align: left;
}

- Supprimez la ligne width: 607px;
- Localisez :

Code:

.GQEEL {
  margin-top: 15px;
  width: 907px;
  padding: 10px 0;
  padding-right: 5px;
  text-align: right;
  background: #191919;
}

- Supprimez la ligne width: 907px;




Pour ce qui est du hover bleu, c'est un effet de la version modernBB au survol des tableaux de type forumline.
Pour retirer cet effet (fond bleu comme survol), vous pouvez simplement dans votre template, retirer la class="forumline" de la balise table qui contient votre qeel.
En fait, à moins qu'elle ait un usage que je n'ai pas vu, je pense que vous pourriez retirer la table entière et ne garder que le bloc qeel...
Attention également, ce qeel a de toute évidence été codée pour un forum version phpbb2, il y a quelques erreurs d'encadrement de variables ici.

Code:

<!-- BEGIN disable_viewonline -->
<div class="QEEL">
 
  <!-- MEMBRES CONNECTES & 24 H -->
  <div id="ondayQEEL">
    <!-- MEMBRES CONNECTES --><div class="onlineQEEL">{LOGGED_IN_USER_LIST}</div>
    <!-- 24H --><div class="dayQEEL">{L_CONNECTED_MEMBERS}</div>
  </div>
 
 
  <div class="blocQEEL">
   
    <!-- TITRE -->
    <div class="tleQEEL">
      <a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
      <span id="TLUS" style="font-size:9px;">{TOTAL_USERS_ONLINE}</span>
      <script type="text/javascript">document.getElementById('TLUS').innerHTML=document.getElementById('TLUS').innerHTML.replace(/Il y a en tout/,"");</script>
    </div>
   
    <!-- DESCRIPTIFS GROUPES -->
    <div class="blocGQEEL">
      <script type="text/javascript" src="https://sd-1.archive-host.com/membres/up/211183412958130190/onglets.js"></script>
      <div class="contenu_onglets">
        <!-- CONTENU GROUPE 1 --><div class="contenu_onglet" id="contenu_onglet_eins">Contenu groupe 1.</div>
        <!-- CONTENU GROUPE 2 --><div class="contenu_onglet" id="contenu_onglet_zwei">Contenu groupe 2.</div>
        <!-- CONTENU GROUPE 3 --><div class="contenu_onglet" id="contenu_onglet_drei">Contenu groupe 3.</div>
        <!-- CONTENU GROUPE 4  --><div class="contenu_onglet" id="contenu_onglet_vier">Contenu groupe 4.</div>
        <!-- CONTENU GROUPE 5  --><div class="contenu_onglet" id="contenu_onglet_funf">Contenu groupe 5.</div>
        <!-- CONTENU GROUPE 6  --><div class="contenu_onglet" id="contenu_onglet_sechs">Contenu groupe 6.</div>
        <!-- CONTENU GROUPE 7  --><div class="contenu_onglet" id="contenu_onglet_sieben">Contenu groupe 7.</div>
      </div>
    </div>
   
    <!-- STATISTIQUES -->
    <div class="stsQEEL">
      <!-- DERNIER INSCRIT -->
      <div>Dernier inscrit :</div>
      <span id="nUSER">{NEWEST_USER}</span>
      <script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script>
      <br/>
      <!-- TOTAL MEMBRES -->
      <div>Membres :</div>
      <span id="tUSERS">{TOTAL_USERS}</span>
      <script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," ") .replace(/membres enregistrés/," ") .replace(/membre enregistré/," ");</script>
      <br/>
      <!-- TOTAL MESSAGES -->
      <div>Messages :</div>
      <span id="tPOSTS">{TOTAL_POSTS}</span>
      <script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," ") .replace(/messages/," ");</script>
    </div>
   
    <!-- ANNIVERSAIRES -->
    <div class="anvQEEL">
      Anniversaires
      <div>{L_WHOSBIRTHDAY_TODAY} {L_WHOSBIRTHDAY_WEEK}</div>
    </div>
 
  </div>
 
 
  <!-- GROUPES -->
  <div class="GQEEL">
    <div class="onglets">
      <!-- GROUPE 1 --><span class="onglet_0 onglet" id="onglet_eins" onmouseover="javascript:change_onglet('eins');" style="background:#FA5858;">Groupe I</span>
      <!-- GROUPE 2 --><span class="onglet_0 onglet" id="onglet_zwei" onmouseover="javascript:change_onglet('zwei');" style="background:#FF8000;">Groupe II</span>
      <!-- GROUPE 3 --><span class="onglet_0 onglet" id="onglet_drei" onmouseover="javascript:change_onglet('drei');" style="background:#FFFF00">Groupe III</span>
      <!-- GROUPE 4 --><span class="onglet_0 onglet" id="onglet_vier" onmouseover="javascript:change_onglet('vier');" style="background:#80FF00">Groupe IV</span>
      <!-- GROUPE 5 --><span class="onglet_0 onglet" id="onglet_funf" onmouseover="javascript:change_onglet('funf');" style="background:#0080FF;">Groupe V</span>
      <!-- GROUPE 6 --><span class="onglet_0 onglet" id="onglet_sechs" onmouseover="javascript:change_onglet('sechs');" style="background:#BF00FF;">Groupe VI</span>
      <!-- GROUPE 7 --><span class="onglet_0 onglet" id="onglet_sieben" onmouseover="javascript:change_onglet('sieben');" style="background:#FE2EF7;">Groupe VII</span>
    </div>
  </div>
 
  <script type="text/javascript">
        //<!--
                var anc_onglet = 'eins';
                change_onglet(anc_onglet);
        //-->
  </script>
 
 
  <!-- BEGIN switch_chatbox_activate -->
      <div class="block">
        <div class="h3">
            <a href="{S_JOIN_CHAT}" target="ChatBox"><i class="ion-ios-chatboxes-outline"></i>{CHATBOX_NAME}</a>
            <!-- BEGIN switch_chatbox_popup -->
              <div id="chatbox_popup"></div>
              <script type="text/javascript">
                  insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
              </script>
            <!-- END switch_chatbox_popup -->
        </div>
        {TOTAL_CHATTERS_ONLINE}:&nbsp;{CHATTERS_LIST}
      </div>
  <!-- END switch_chatbox_activate -->
 
 
 
</div>
<!-- END disable_viewonline -->

[Wicked Apple]

WOW ! Mille merci c'est parfait !

Tout est rentré dans l'ordre.