QEEL pour Hebi

In this example below you will see how to do a QEEL pour Hebi with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by noelierx, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright noelierx ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>QEEL pour Hebi</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- BEGIN disable_viewonline -->
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
  <td>
    <div id="QEEL">
      <div class="titreQEEL">
        <a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
        <br />
        <span id="totalonline">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Il y a en tout /,"L'île comporte actuellement");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne ::/,"pions dont");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne ::/,"pions dont");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"Habitants");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"Habitants");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible/,"Espions");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisibles/,"Espions");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité/,"Perdus");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités/,"Perdus");
 </script>
      </div>
      <div class="QEEL">
        <!-- GROUPES -->
        <div class="groupeQEEL">
          <div class="dernier">
            <b>Bienvenue</b>
            <span id="nouveau">{NEWEST_USER}</span>
            <script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nouveau').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script>
          </div>
          {GROUP_LEGEND}
        </div>
        <div class="boxQEEL">
          <!-- TOTAL MESSAGES -->
          <div class="messages">
            <p><span id="totalposts"><b>{TOTAL_POSTS}</b></span><script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById('totalposts').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('totalposts').innerHTML=document.getElementById('totalposts').innerHTML.replace(/messages/," ");</script><br/>messages</p>
          </div>
          <!-- TOTAL MEMBRES -->
          <div class="membres">
            <p><span id="totalusers"><b>{TOTAL_USERS}</b></span>
              <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById('totalusers').innerHTML.replace(/Nous avons /," "); document.getElementById('totalusers').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," "); document.getElementById('totalusers').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre enregistré/," ");</script><br/>membres</p>
          </div>
          <!-- TOP-SITES -->
          <div class="topsites">
            <a href="lien" target="_blank"><img src="http://placehold.it/113x20" /></a>
            <a href="lien" target="_blank"><img src="http://placehold.it/113x20" /></a>
            <a href="lien" target="_blank"><img src="http://placehold.it/113x20" /></a>
            <a href="lien" target="_blank"><img src="http://placehold.it/113x20" /></a>
            <a href="lien" target="_blank"><img src="http://placehold.it/113x20" /></a>
          </div>
        </div>
        <!-- MEMBRES CONNECTES -->
        <div class="boxQEEL">
          <!-- MEMBRES CONNECTES -->
          <div class="QEELonline">
            <div id="co">
              <br/>
              <br/>
              {LOGGED_IN_USERS_LIST}
            </div>
            <script type="text/javascript">document.getElementById('onLINE').innerHTML=document.getElementById('co').innerHTML.replace(/Utilisateurs enregistrés :/," ")</script>
          </div>
          <!-- 24H -->
          <div class="aujourdhui">
            <div>
              <table>{L_CONNECTED_MEMBERS}</table>
            </div>
          </div>
        </div>
        <div class="boxQEEL">
<iframe src="http://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=122236" width="200" height="300" frameborder="0" allowtransparency="true" style="margin-left:15px;" >Votre navigateur semble incompatible, essayez d'ouvrir le <a href="http://www.i-tchat.com" title="tchat" onClick="window.open(this.href+'?122236');">tchat</a>, ou rencontrez le webmaster pour plus d'informations.</iframe>
<br />Agrandir le <a href="http://www.i-tchat.com/?122236" onClick="window.open(this.href);return false;">chat</a> .
  <!-- Fin shoutbox --></div>
      </div>
    </div>
</td>
</tr>
</table>
<!-- END disable_viewonline -->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/noelierx/qeel-pour-hebi-PbVqzo */
/* CADRE QEEL */
#QEEL {
width:898px; padding:12px 0;
background:transparent; /* MODIFIABLE */
}
/* QEEL */
.QEEL {
margin:auto; width:870px; padding:10px 0 6px; text-align:center;
background:transparent; /* MODIFIABLE */
}
/* BLOC GROUPES QEEL */
.groupeQEEL {
display:inline-block; vertical-align:top; margin-right:10px;
width:155px; height:284px; overflow:auto;
background-color:#79A8AE;
color:rgba(0,0,0,0); text-align:center; text-transform:uppercase;
}
/* LIEN GROUPE QEEL */
.groupeQEEL a{
display:block; 
font-size:12px; /* MODIFIABLE */
}
/* BLOC POSITIONNEMENT */
.boxQEEL {
display:inline-block; vertical-align:top; 
}
/* CADRE MEMBRES CONNECTES */
.QEELonline {
width:280px; height:130px; 
background:#79A8AE; border:1px solid #79A8AE; color:black; /* MODIFIABLE */
 margin-bottom:15px;
 margin-left:15px;
 margin-right:5px;
}
/* MEMBRES CONNECTES */
.QEELonline div{
margin:10px auto 0; width:250px; height:98px; padding:5px; overflow:auto;
font-size:12px; text-align:justify; text-transform:uppercase;
background:white; border:1px solid lightgrey; /* MODIFIABLE */
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.dernier {
margin-top:0px;
width:155px; height:85px; padding-top:20px;
background:url('http://zupimages.net/up/16/13/mu41.png') no-repeat; /* MODIFIABLE */
text-transform:uppercase; text-align:center; font-size:14px; 
}
/* BIENVENUE DERNIER UTILISATEUR ENREGISTRE QEEL */
.dernier b{
display:block; 
font-size:20px; color:black; /* MODIFIABLE */
}
/* CADRE 24H QEEL */
.aujourdhui {
width:280px; height:130px; 
background:#79A8AE; border:1px solid #79A8AE; color:black; /* MODIFIABLE */
 margin-left:15px;
  margin-right:5px;
}
/* 24H QEEL */
.aujourdhui div{
margin:10px auto 0; width:250px; height:98px; padding:5px; overflow:auto;
font-size:12px; text-align:justify; text-transform:uppercase;
background:white; border:1px solid lightgrey; /* MODIFIABLE */
}
.aujourdhui .row1 {
background:none; padding:0 !important;
}
.aujourdhui .gensmall {
font-size:12px; color:black; /* MODIFIABLE */
}
/* CADRE TOTAL MESSAGES QEEL */
.messages {
margin-bottom:5px; 
width:113px; height:60px; padding:5px;
text-align:center; text-transform:uppercase; font-size:16px;
background:#79A8AE; border:1px solid #79A8AE; /* MODIFIABLE */
margin-left:15px;
}
/* TOTAL MESSAGES QEEL */
.messages p{
margin:0; height:48px; padding-top:10px;
background:white; border:1px solid lightgrey; color:black; /* MODIFIABLE */
}
/* CADRE TOTAL MEMBRES QEEL */
.membres {
width:113px; height:60px; padding:5px;
text-align:center; text-transform:uppercase; font-size:16px;
background:#79A8AE; border:1px solid #79A8AE;
  margin-left:15px;/* MODIFIABLE */
}
/* TOTAL MEMBRES QEEL */
.membres p{
margin:0; height:48px; padding-top:10px;
background:white; border:1px solid lightgrey; color:black; /* MODIFIABLE */
}
/* IMAGES TOP-SITES */
.topsites {
margin-top:10px; width:113px;margin-left:22px;
}
.topsites a:nth-child(2) {
margin-left:0px;
}
.topsites a:nth-child(3) {
margin-top:5px; 
}
.topsites a:nth-child(4) {
margin-top:5px; margin-left:0px;
}
.titreQEEL {
margin:auto;
width:900px; height:55px; padding-top:40px;
background:none; /* MODIFIABLE */
font-family:Arial;text-transform:uppercase; text-align:right; font-style:bold;
}
/* TITRE QEEL */
.titreQEEL a{
font-size:30px; padding-right:35px;
color:black; text-decoration:none;
}

Comments