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} : {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;
}
|
|
|