phpBB2
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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cousine&family=Montserrat:wght@900&family=Roboto&display=swap" rel="stylesheet">
<div class="qeelFlat">
<div class="qeelFlat-titre"><h2>Qui est en ligne ?</h2></div>
<div class="qeelFlat-content">
<div class="qeelFlat-connectes24" id="qeel-connectes24"><table>{L_CONNECTED_MEMBERS}</table></div>
<div class="qeelFlat-mid">
<div class="qeelFlat-dernier" id="qeel-dernier"><h3>Bienvenue sur Lorem ipsum</h3><div>{NEWEST_USER}</div></div>
<div class="qeelFlat-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 class="qeelFlat-right">
<div class="qeelFlat-stats" id="qeel-stats">{TOTAL_USERS_ONLINE}</div>
<div class="qeelFlat-right-middle">
<div class="qeelFlat-connectes" id="qeel-connectes"><div>{LOGGED_IN_USER_LIST}</div></div>
<div class="qeelFlat-stats2" id="qeel-stats2"><div>{TOTAL_POSTS}</div><div>{TOTAL_USERS}</div></div>
</div>
<div class="qeelFlat-credits">Crédits : xxx - codage by <a href="https://terrible.forumactif.org/" target="_blank">awful</a></div>
</div></div>
</div>
<div class="qeelFlat-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*/
.qeelFlat {
background: #e9e9e9;
font-family: 'Cousine', monospace;
margin: auto;
position: relative;
width: 900px;
}
.qeelFlat-content {
display: flex;
max-height: 250px;
padding: 20px;
}
.qeelFlat a,
.qeelFlat a:hover,
.qeelFlat a:active,
.qeelFlat-index-links a,
.qeelFlat-index-links a:hover,
.qeelFlat-index-links a:active {
text-decoration: none!important;
}
/* Titre du QEEL */
.qeelFlat-titre {
align-items: flex-end;
background: #3e3e3e;
display: flex;
flex: 100%;
height: 130px;
justify-content: flex-end;
}
.qeelFlat-titre h2 {
color: #fff;
font: 900 30px 'Montserrat', sans-serif;
padding-right: 20px;
text-transform: uppercase;
}
/* Case dernières 24 heures */
.qeelFlat-connectes24 {
background: #f3f3f3;
box-sizing: border-box;
margin-right: 20px;
overflow: auto;
width: 140px;
}
.qeelFlat-connectes24 td.row1 {
background-color: transparent;
font-family: 'Roboto', sans-serif;
padding: 5px;
}
.qeelFlat-mid {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-right: 20px;
width: 300px;
}
/* Dernier inscrit */
.qeelFlat-dernier {
display: flex;
flex: 1;
flex-direction: column;
}
.qeelFlat-dernier h3 {
font-family: "Montserrat", sans-serif;
font-size: 12px;
margin: 0;
text-align: center;
text-transform: uppercase;
}
.qeelFlat-dernier div {
align-items: center;
background: #f3f3f3;
display: flex;
flex: 1;
justify-content: center;
margin-top: 5px;
min-height: 50px;
width: 100%;
}
.qeelFlat-dernier div a strong {
color: #7b7b7b;
font-size: 20px;
font-weight: 300;
text-transform: uppercase;
}
/* Case liste des connectés */
.qeelFlat-connectes {
background: #f3f3f3;
box-sizing: border-box;
flex: 1;
font-family: 'Roboto', sans-serif;
font-size: 11px;
overflow: hidden;
margin-right: 10px;
padding: 5px;
position: relative;
}
.qeelFlat-connectes>div {
height: 100%;
overflow: auto;
position: relative;
z-index: 2;
}
.qeelFlat-connectes::after {
bottom: -14px;
content: "En ligne";
font-family: 'Montserrat';
font-style: italic;
font-size: 4em;
font-weight: 900;
opacity: .1;
pointer-events: none;
position: absolute;
right: 0;
text-transform: uppercase;
}
/* Les groupes */
.qeelFlat-groupes {
display: flex;
flex-wrap: wrap;
gap: 3px;
justify-content: space-between;
margin-top: 10px;
}
.qeelFlat-groupes a {
font-family: 'Montserrat';
font-weight: bold;
text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
}
.qeelFlat-groupes div {
align-items: center;
border: 1px solid #c5c5c5;
box-shadow: 0 0 0 3px #dddada inset;
box-sizing: border-box;
color: #a7a7a7;
display: flex;
font-size: 8px;
height: 35px;
justify-content: center;
min-width: calc(100% / 2 - 2px);
text-align: center;
text-transform: uppercase;
}
.qeelFlat-groupes div:nth-child(1) a {
color: #ed7171;
}
.qeelFlat-groupes div:nth-child(2) a {
color: #c785d1;
}
.qeelFlat-groupes div:nth-child(3) a {
color: #8ec5c9;
}
.qeelFlat-groupes div:nth-child(4) a {
color: #78c69a;
}
.qeelFlat-groupes div:nth-child(5) a {
color: #d2c853;
}
.qeelFlat-groupes div:nth-child(6) a {
color: #dab15e;
}
.qeelFlat-right {
display: flex;
flex: 1;
flex-direction: column;
}
.qeelFlat-right-middle {
display: flex;
flex: 1;
height: 0;
margin: 10px 0;
}
/* Statistiques messages et membres */
.qeelFlat-stats2 {
display: flex;
flex-direction: column;
}
.qeelFlat-stats2 div {
background: #f3f3f3;
display: flex;
flex: 1;
flex-direction: column;
font-size: 10px;
font-weight: 300;
justify-content: center;
margin-bottom: 9px;
text-align: center;
text-transform: uppercase;
width: 80px;
}
.qeelFlat-stats2 div:last-child {
margin-bottom: 0px;
}
/* Statistique des membres en lignes (x membres, x invités, x invisibles) */
.qeelFlat-stats {
color: #aeaeae;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
}
.qeelFlat-stats b {
color: #bbb657;
}
.qeelFlat-stats i {
color: #000000;
font-style: inherit;
font-weight: 300!important;
}
.qeelFlat-stats u {
color: #000;
font-weight: 300;
text-decoration: none;
}
/* Crédits du QEEL */
.qeelFlat-credits {
color: #7a7a7a;
font-size: 9px;
margin-top: auto;
text-align: right;
text-transform: uppercase;
}
/*Les liens en dessous du QEEL */
.qeelFlat-index-links {
display: flex;
justify-content: space-between;
margin: auto;
margin-top: 10px;
width: 900px;
}
.qeelFlat-index-links a {
align-items: center;
border: 1px solid #c5c5c5;
background: #fff;
box-shadow: 0 0 0 3px #edecec inset;
color: #ababab;
display: flex;
flex: 1;
font-family: 'Cousine', monospace;
font-size: 9px;
height: 30px;
margin-right: 10px;
justify-content: center;
text-transform: uppercase;
transition: color 0.3s;
}
.qeelFlat-index-links a:hover {
color: #ccc;
}
.qeelFlat-index-links a:last-child {
margin-right: 0px;
}
En bas, dans les options du CSS, à "Optimiser votre CSS", cochez "non".
|
|
|