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 ! 

Commentaires (1)

Mayu

Bonjour, nous avons tenté de mettre votre QEEL sur notre forum, mais il semblerait que ça ne fonctionne pas très bien avec les dimensions de notre forum, nous avons tenté de bidouiller le tout, mais sans succès. Pourriez-vous nous aider sil vous plaît ?

Ajouter un commentaire

Vous utilisez un logiciel de type AdBlock, qui bloque le service de captchas publicitaires utilisé sur ce site. Pour pouvoir envoyer votre message, désactivez Adblock.

×