Terrible

Bienvenue sur Terrible, le forum de libre-service pour vos codages de forums. Venez trouver ici toutes sortes de codes pour agrémenter aussi bien vos templates que vos messages, sans avoir besoin d'inscription !


Terrible :: Code forum :: QEEL
avatar
le Lun 5 Mar - 0:57


Optimisé pour l'affichage de 6 groupes. N'hésitez pas à demander de l'aide pour en ajouter / retirer.
Dans votre panneau d'administration, Affichage > Templates > Général > index_body, trouvez le code suivant :

Code:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <td class="catHead" colspan="2" height="28">
 <!-- BEGIN switch_viewonline_link -->
 <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
 <!-- END switch_viewonline_link -->

 <!-- BEGIN switch_viewonline_nolink -->
 <span class="cattitle">{L_WHO_IS_ONLINE}</span>
 <!-- END switch_viewonline_nolink -->
 </td>
 </tr>
 <tr>
 <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
 <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
 {TOTAL_USERS}<br />
 {NEWEST_USER}</span></td>
 </tr>
 <tr>
 <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}<br />
 <br />
 {LOGGED_IN_USER_LIST}</span></td>
 </tr>
 {L_CONNECTED_MEMBERS}
 {L_WHOSBIRTHDAY_TODAY}
 {L_WHOSBIRTHDAY_WEEK}
 <tr>
 <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
 </tr>
 <!-- BEGIN switch_chatbox_activate -->
 <tr>
 <td class="row1">
 <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :&nbsp; {CHATTERS_LIST}<br />
 <!-- BEGIN switch_chatbox_popup -->
 <div id="chatbox_popup"></div>
 <script type="text/javascript">
 //<![CDATA[
 insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 //]]>
 </script>
 <!-- END switch_chatbox_popup -->
 </span>
 </td>
 </tr>
 <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

Remplacez-le par :

Code:
<!-- BEGIN disable_viewonline -->
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400|Montserrat:900|Roboto" rel="stylesheet">
<div id="qeel">
  <div id="qeel-titre"><h2>Qui est en ligne ?</h2></div>
  <div id="qeel-connectes24"><table>{L_CONNECTED_MEMBERS}</table></div>
  <div id="qeel-mid">
  <div id="qeel-dernier"><h3>Bienvenue sur Lorem ipsum</h3><div>{NEWEST_USER}</div></div>
  <div id="qeel-groupes">
    <div><a href="">Groupe 1</a></div>
    <div><a href="">Groupe 2</a></div>
      <div><a href="">Groupe 3</a></div>
    <div><a href="">Groupe 4</a></div>
    <div><a href="">Groupe 5</a></div>
    <div><a href="">Groupe 6</a></div>
  </div>
  </div>
  <div id="qeel-right">
  <div id="qeel-stats">{TOTAL_USERS_ONLINE}</div>
  <div id="qeel-connectes">{LOGGED_IN_USER_LIST}</div>
  <div id="qeel-stats2"><div>{TOTAL_POSTS}</div><div>{TOTAL_USERS}</div></div>
  
    <div id="qeel-credits">Crédits : xxx - codage by <a href="http://terrible.forumactif.org/" target="_blank">awful</a></div>
  </div>
</div>
<div id="index-links">
  <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a>
 <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
 <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
 <a href="/?mode=delete_cookies" rel="nofollow">Supprimer les cookies du forum</a>
</div>
<script type="text/javascript">
  $('#qeel-stats2').html($('#qeel-stats2').html().replace(/Nos membres ont posté un total de|Nous avons /ig," ").replace(/membre enregistré/,"membre").replace(/membres enregistrés/,"membres"));
  $('#qeel-dernier').html($('#qeel-dernier').html().replace(/L'utilisateur enregistré le plus récent est/ig," "));
  $('#qeel-connectes').html($('#qeel-connectes').html().replace(/Utilisateurs enregistrés : /ig," "));
  $('#qeel-connectes24').html($('#qeel-connectes24').html().replace(/Membres connectés au cours des 24 dernières heures : /ig," "));
  $('#qeel-stats').html($('#qeel-stats').html().replace(/Il y a en tout| :: /ig," ").replace(/utilisateur en ligne/,"<i>utilisateur en ligne</i> <u>>></u>").replace(/utilisateurs en ligne/,"<i>utilisateurs en ligne</i> <u>>></u>").replace(/Enregistré,/,"<i>Enregistré</i> <u>|</u>").replace(/Enregistrés,/,"<i>Enregistrés</i> <u>|</u>").replace(/Invisible et/,"<i>Invisible</i> <u>|</u>").replace(/Invisibles et /,"<i>Invisibles</i> <u>|</u>").replace(/Invité/,"<i>Invité</i>").replace(/Invités/,"<i>Invités</i>"));
</script>
<!-- END disable_viewonline -->


Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:
/* QEEL PAR AWFUL */
 #qeel {
     font-family: 'Oswald', sans-serif;
     width: 900px;
     margin:auto;
     position: relative;
     display: flex;
     flex-wrap: wrap;
     padding-bottom: 20px;
     background: #e9e9e9;
}
 #qeel a, #qeel a:hover, #qeel a:active, #index-links a, #index-links a:hover, #index-links a:active {
     text-decoration: none!important;
}
/* Titre du QEEL */
 #qeel-titre {
     height: 113px;
     background: #000;
     flex: 100%;
     margin-bottom: 20px;
}
 #qeel-titre h2 {
     color: #fff;
     font: 900 30px 'Montserrat', sans-serif;
     text-transform: uppercase;
     text-align: right;
     line-height: 100px;
     padding-right: 20px;
}
/* Case dernières 24 heures */
 #qeel-connectes24 {
     width: 140px;
     border: 1px solid #e0e0e0;
     background:#f9f9f9;
     margin-left: 20px;
     margin-right: 20px;
     box-sizing: border-box;
     height: 152px;
     overflow: auto;
}
 #qeel-connectes24 td.row1 {
     background-color: transparent;
     font-family: 'Roboto', sans-serif;
     padding: 5px;
}
 #qeel-mid {
     width: 300px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     margin-right: 20px;
}
/* Dernier inscrit */
 #qeel-dernier h3 {
     text-align: center;
     text-transform: uppercase;
     font-size: 12px;
     margin: 0;
     font-family: "Montserrat", sans-serif;
}
 #qeel-dernier div {
     text-align: center;
     width: 100%;
     background: #dddada;
     height: 50px;
     margin-top: 5px;
}
 #qeel-dernier div a strong {
     font-weight: 300;
     text-transform: uppercase;
     font-size: 20px;
     line-height: 50px;
     color: #7b7b7b;
}
/* Case liste des connectés */
 #qeel-connectes {
     background: #dddada;
     overflow: auto;
     padding: 5px;
     font-size: 11px;
     flex: 1;
     margin-right: 10px;
     height: 110px;
     box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
/* Les groupes */
 #qeel-groupes {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
}
 #qeel-groupes div {
     border: 1px solid #c5c5c5;
     width: calc(100% / 3 - 2px);
     text-transform: uppercase;
     font-size: 8px;
     text-align: center;
     height: 35px;
     margin-top: 3px;
     line-height: 35px;
     color: #a7a7a7;
     box-sizing: border-box;
     background: #fff;
     box-shadow: 3px 0 0 #edecec inset,-3px 0 0 #edecec inset,0 3px 0 #edecec inset,0 -3px 0 #edecec inset;
}
 #qeel-groupes div:nth-child(1) a {
     color: #ed7171;
}
 #qeel-groupes div:nth-child(2) a {
     color: #c785d1;
}
 #qeel-groupes div:nth-child(3) a {
     color: #8ec5c9;
}
 #qeel-groupes div:nth-child(4) a {
     color: #78c69a;
}
 #qeel-groupes div:nth-child(5) a {
     color: #d2c853;
}
 #qeel-groupes div:nth-child(6) a {
     color: #dab15e;
}
 #qeel-right {
     flex: 1;
     margin-right: 20px;
     display: flex;
     flex-wrap: wrap;
}
/* Statistiques messages et membres */
 #qeel-stats2 {
     display: flex;
     flex-direction: column;
     height: 110px;
}
 #qeel-stats2 div{
     background: #dddada;
     width: 80px;
     margin-bottom: 9px;
     text-transform: uppercase;
     font-size: 10px;
     text-align: center;
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     font-weight: 300;
}
 #qeel-stats2 div:last-child {
     margin-bottom: 0px;
}
/* Statistique des membres en lignes (x membres, x invités, x invisibles) */
 #qeel-stats {
     text-transform: uppercase;
     font-size: 10px;
     font-weight: bold;
     color: #aeaeae;
     flex: 100%;
     align-self: start;
}
 #qeel-stats b {
     color: #bbb657;
}
 #qeel-stats i {
     font-weight: 300!important;
     font-style: inherit;
     color: #000000;
}
 #qeel-stats u {
     text-decoration: none;
  font-weight: 300;
color: #000;
}
/* Crédits du QEEL */
 #qeel-credits {
     font-size: 9px;
     text-transform: uppercase;
     color: #7a7a7a;
     text-align: right;
     flex: 100%;
     align-self: end;
}
/*Les liens en dessous du QEEL */
 #index-links {
     width: 900px;
     margin: auto;
     display: flex;
     justify-content: space-between;
     margin-top: 10px;
}
 #index-links a {
     border: 1px solid #c5c5c5;
     background: #fff;
     flex: 1;
     margin-right: 3px;
     text-align: center;
     text-transform: uppercase;
     font-size: 9px;
     padding: 10px 0;
     font-family: "Oswald", sans-serif;
     box-shadow: 3px 0 0 #edecec inset,-3px 0 0 #edecec inset,0 3px 0 #edecec inset,0 -3px 0 #edecec inset;
     color: #ababab;
     transition: color 0.3s;
}
 #index-links a:hover {
     color: #ccc;
}
 #index-links a:last-child {
     margin-right: 0px;
}
En bas, dans les options du CSS, à "Optimiser votre CSS", cochez "non".
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum