QEEL simple avec liens

Le Qeel

Bonjour ! Je vous mets aujourd'hui en LS un qeel fait pour mon forum 

Il est simple, avec une image de fond PLUS une image centrale qui correspond à celle de votre panneau d'administrateur. La typo des liens corresponds a celle que vous avez sur votre forum. Tout est personnalisable (en cas de soucis, me contacter par commentaire). 

 

Le code

/******************-QEEL PAR ELIA -****************************/
.qeel_t {width:100%;height:335px;background-image:url(http://zupimages.net/up/15/31/gytg.jpg);background-repeat: no-repeat;
    
    background-position: center; border :3px solid #292929} /*- Ici pour modifier l'image de fond ainsi que la taille de votre qeel et la bordure -*/
.qeel_st {width: 280px;  /*- Tout ce qui concerne le petit encadré avec les statistiques-*/
height: 220px;
margin-top: 75px;
margin-left: 20px;
font-size: 10px;
  padding-top:3px;
  margin-bot:5px;
  padding-left : 3px;
float: left;background-image:url(http://zupimages.net/up/15/31/utmv.png);background-repeat: repeat;}
.qeel_sts {font-size:11px !important; color: white ;}
.qeel_img {float: left;margin-top:25px;border-radius:200px;border : 2px solid white;} /*- Ce qui concerne l'image du milieu-*/
.qeel_groupe{width: 230px;  /*- Ce qui concerne l'encadré des groupes-*/
height: 260px;
margin-top: 20px;
margin-right: 20px;
font-size: 14px;
  padding-top:3px;
  float: right;text-align:center;background-image:url(http://zupimages.net/up/15/31/utmv.png);background-repeat: repeat;}

.qeel_ti {font-family: "acta-display",sans-serif; color: black; font-size:23px;} /*- Le titre "Qui est en ligne-*/
.qeel_ti:hover {color:#F8CBB6;} /*- Le titre au survol-*/


.premierg {font-family: "acta-display",sans-serif; color: #F0BA90; font-size:13px;-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ;
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
-ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ;letter-spacing:0px;}   /*- Le premier groupe -*/
.premierg:hover {letter-spacing:2px; 
-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ;
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
-ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ;}   /*- Le premier groupe survolé -*/

 


.deuxg {font-family: "acta-display",sans-serif; color: #9A8ACC; font-size:13px;-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ;
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
-ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ;letter-spacing:0px;} /*- Le second groupe -*/
.deuxg:hover {letter-spacing:2px;
-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ;
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
-ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ;}  /*- le second groupe survolé -*/


.troisg {font-family: "acta-display",sans-serif; color: #88CCD1; font-size:13px;-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ;
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
-ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ;letter-spacing:0px;} /*- troisième groupe-*/
.troisg:hover {letter-spacing:2px;
-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ;
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
-ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ;} /-* Troisième survolé -*/


.quatreg {font-family: "acta-display",sans-serif; color: #D19494; font-size:13px;-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ;
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
-ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ;letter-spacing:0px;} /-* Quatrième groupe-*/
.quatreg:hover {letter-spacing:2px;
-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ;
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
-ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ;} /*- quatrième survolé -*/

 

.cinqg {font-family: "acta-display",sans-serif; color: #9EC27C; font-size:13px;-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ;
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
-ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ;letter-spacing:0px;} /*- cinquième groupe-*/

.cing:hover {letter-spacing:2px;
-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ;
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
-ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ;}  /*- cinquième survolé-*/


.qeel_d {font-size:11px;} /*- La phrase de descritpion du groupe-*/ 


.qgroupe {font-family: "acta-display",sans-serif; color: #1292D6; font-size:19px;-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ;
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
-ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ;} /*- Tout ce qui concerne le lien "GROUPES" en bas de l'encadré-*/
.qgroupe:hover {-webkit-transition-property : letter-spacing; -webkit-transition-duration : 0.2s ; /*-  GROUPE au survol-*/
-moz-transition-property : letter-spacing; -moz-transition-duration : 0.2s ; 
  -ms-transition-property : letter-spacing; -ms-transition-duration : 0.2s ; letter-spacing:2px;}

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


Le template : Il est à insérer dans votre index_bodyjuste après <!-- BEGIN disable_viewonline -->. Enlever l'ancien qeel et remplacer le. 

<div class="qeel_t"><center><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><span class="qeel_ti">{L_WHO_IS_ONLINE}</span></a></center>
    <div class="qeel_st"><span class="qeel_sts">
      {TOTAL_POSTS}<br/>
 {TOTAL_USERS}<br/>
      {RECORD_USERS}<br/>
  {TOTAL_USERS_ONLINE}<br/>
      {LOGGED_IN_USER_LIST}<br/><br/>
 <table class="lcm">{L_CONNECTED_MEMBERS}</table>
      {NEWEST_USER}</span>
      
   </div><div><img src="{L_ONLINE_IMG}" class="qeel_img" alt="{L_WHO_IS_ONLINE}" /></div><div class="qeel_groupe"><a href="LIEN"><span class="premierg">Groupe 1</span></a><br/><span class="qeel_d">Phrase d'infos - Ouvert</span><br /><br />
   <a href="LIEN"> <span class="deuxg">Groupe 2</span></a><br/><span class="qeel_d">Phrase d'infos - Ouvert</span><br /><br />
   <a href="LIEN"><span class="troisg">Groupe 3</span></a><br/><span class="qeel_d">Phrase d'infos - Ouvert</span><br /><br />
   <a href="LIEN"><span class="quatreg">Groupe 4</span></a><br/><span class="qeel_d">Phrase d'infos - Ouvert</span><br /><br />
   <a href="LIEN"><span class="cinqg">Groupe 5</span></a><br/><span class="qeel_d">Phrase d'infos - Ouvert</span><br /><br /><center><a href="LIEN"><span class="qgroupe">Les Groupes</span></a></center></div></div>

 

    

Enfin

Vous remmarquerez qu'il n'y a pas de crédit sur le qeel, cependant je vais vous demander de bien vouloir en placer un sur votre forum ou site par respect par mon travail ! Prendre mon qeel sans crédit serait du vol de propriété intelectuelle.

Si vous ne parvenez pas à l'utiliser ou si vous désirez le personnaliser, vous pouvez me contacter !