QEEL#1

<a href="https://tourmaline.forumactif.com/" target="_blank">QEEL réalisé par Loukoum</a>

/*----------------------------QEEL par Loukoum sur Tourmaline----------------------------*/

.qeelbloc {
  background-color: #E2D5F4;
  color: #000000;
  padding:10px;
  text-align: justify;
  font-size:12px;
  overflow:auto;
}

.qeeltitre {
  color:#7654A7;
  font-family: 'Love Ya Like A Sister', cursive;
  text-align:center;
  padding-bottom:5px;
  font-size:14px;
}

/* Permet de cacher les input (apparait sous forme radio sinon) */
      #slideshow input {
      display: none;
      }
    
      /* Création du slideshow (contour) */
      #slideshow {
      position: relative;
      width: 250px;
      height: 200px;
      }
    
      /* Conteneur de inner et de tous les slides, permet d'afficher un seul slide à la fois. */
      #slides {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 240px;
      height: 190px;
      background-position: center center;
      overflow: hidden;
      }
    
      /* Conteneur de tous les slides */
      #slides .inner {
      width: 500%;
      }
    
      /* Mise en forme des slides */
      #slides .a_slide {
      position: relative;
      width: 240px;
      height: 190px;
      float: left;
      }
    
      /* Déplacement des slides */
      #slide1:checked ~ #slides .inner { margin-left:0; }
      #slide2:checked ~ #slides .inner { margin-left:-100%; }
      #slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
    
      /* Mise en place de l'élément contenant les flèches */
      #controls {
      position: absolute;
      top: 45%;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 50px;
      }
    
      /* On met les labels à la bonne taille et on les cache */
      #controls label {
      display: none;
      width: 30px;
      height: 30px;
      opacity: 0.3;
      transition: all ease-out 0.2s;
      }
    
      /* Effet au passage de la souris sur les flèches */
      #controls label:hover {
      opacity: 0.8;
      transition: all ease-out 0.2s;
      }
    
      /* Mise en place de la flèche vers le slide suivant */
      #slide1:checked ~ #controls label:nth-child(2),
      #slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4){
      /*background: url('https://nsm08.casimages.com/img/2016/05/25//1605251158378388814254145.png') no-repeat;*/
  width:20px;
  height:20px;
  background-color:#7654A7;
  border-radius:100%;
      float: right;
      margin: -73px -10px 0px 0px;
      display: block;
      }
    
      /* Mise en place de la flèche vers le slide précédent */
      #slide2:checked ~ #controls label:nth-child(1),
      #slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3){
      /*background: url('https://nsm08.casimages.com/img/2016/05/25//1605251158388388814254146.png') no-repeat;*/
  width:20px;
  height:20px;
  background-color:#7654A7;
  border-radius:100%;
      float: left;
      margin: -73px 0px 0px -10px;
      display: block;
      }
    
      /* Animation slides */
      #slides .inner {
      -webkit-transform: translateZ(0);
      transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
      }
    
      .info {
      position: relative;
      z-index: 24;
      text-decoration: none;
      }
    
      c.info:hover {
      z-index: 25;
      }
    
      c.info span {
      display: none;
      }
    
      c.info:hover span {
      display: block;
      position: absolute;
      top: -140px;
      left: 0px;
      width: 240px;
      height: 150px;
      background-color: rgba(255,255,255,0.5);
      color: #000000;
      text-align: center;
      font-weight: none;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 5px 0px 5px;
      }

<!-- BEGIN disable_viewonline -->

<!-- END disable_viewonline -->

<!-- BEGIN disable_viewonline -->
<!-- BEGIN switch_viewonline_link -->
<center><span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><font size="24">{L_WHO_IS_ONLINE}</font></a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
</center>
<table align="center">
  <tr>
    <td>
      <div class="qeelbloc" style="width: 250px; height: 200px;">
        <div class="qeeltitre">Ils visitent Tourmaline</div><br/><br/>
      <span id="online">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Il y a en tout/,"Actuellement, il y a");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/utilisateur en ligne/,"petit curieux");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/utilisateurs en ligne/,"petits curieux");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Enregistrés/,"alimentent le site");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invisible/,"se cache");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invisibles/,"se cachent");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invité/,"qui se balade");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invités/,"qui se baladent");</script></span>.<br /><br/>
        <span id="enligne">{LOGGED_IN_USER_LIST}<script type="text/javascript">document.getElementById('enligne').innerHTML=document.getElementById('enligne').innerHTML.replace(/Utilisateurs enregistrés/,"Nos petits créateurs actuellement entrain de travailler");</script></span><br/>
      </div>
    </td>
    <td>
      <div class="qeelbloc" style="width: 250px; height: 200px;">
        <div id="slideshow">
      <input checked name="slideshow" id="slide1" type="radio" />
      <input name="slideshow" id="slide2" type="radio" />
      <input name="slideshow" id="slide3" type="radio" />
          <input name="slideshow" id="slide4" type="radio" />
      <div id="slides">
        <div class="inner">
          <div class="a_slide">
            <img class="center" src="https://nsm08.casimages.com/img/2016/05/27//1605271100358388814262792.png"/>
            <p style="text-align:justify;">Description du groupe</p>
          </div>
          <div class="a_slide">
            <img class="center" src="https://nsm08.casimages.com/img/2016/05/27//1605271100358388814262793.png"/>
            <p style="text-align:justify;">Description du groupe</p>
          </div>
          <div class="a_slide">
            <img class="center" src="https://nsm08.casimages.com/img/2016/05/27//1605271100368388814262794.png"/>
            <p style="text-align:justify;">Description du groupe</p>
          </div>
          <div class="a_slide">
            <img class="center" src="https://nsm08.casimages.com/img/2016/05/27//1605271100378388814262795.png"/>
            <p style="text-align:justify;">Description du groupe</p>
          </div>
        </div>
      </div>
      <div id="controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
      </div>
    </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="qeelbloc" style="width: 250px; height: 150px;">
        <c class="info"><img src="https://nsm08.casimages.com/img/2016/05/27//1605271140588388814262848.png" /><span><br /><br />
          <d style="color:#7654A7;  font-family: 'Love Ya Like A Sister', cursive;  text-align:center;  padding-bottom:5px;  font-size:14px;">Statistiques</d><br/><br/>
          <p style="text-align:justify">{TOTAL_POSTS}<br /><br />
      {TOTAL_USERS}<br /><br />
      {NEWEST_USER}<br /><br />
            {RECORD_USERS}<br /><br /></p></span></c>
      </div>
    </td>
    <td>
      <div class="qeelbloc" style="width: 250px; height: 150px;">
        <div class="qeeltitre">Ils sont passés dernièrement</div><br/>
        <table>{L_CONNECTED_MEMBERS}</table>
      </div>
    </td>
  </tr>
</table>
<!-- END disable_viewonline -->