Rappel du premier message :
Qui est en ligne réalisé suite à la demande de Cecile362.
Les couleurs sont modifiables, merci de ne pas retirer le crédit. Le code a été fait avec la version de forum phpBB2
Voici un aperçu :
lien direct : www
Dans le template index-body, remplacer les lignes 173 à 221 par :
Dans la feuille de style (CSS) ajouter le code :
Les couleurs sont modifiables, merci de ne pas retirer le crédit. Le code a été fait avec la version de forum phpBB2
Voici un aperçu :
lien direct : www
Dans le template index-body, remplacer les lignes 173 à 221 par :
- Code:
<!-- BEGIN disable_viewonline -->
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<!-- TITRE -->
<div class="titreQEEL">
<a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
</div>
<div class="QEEL">
<!-- 24H -->
<div class="dernierQEEL"><table>{L_CONNECTED_MEMBERS}</table>
</div>
<div class="GroupeQEEL">
<div id="groupe">
<div class="h3">Les Groupes</div>
<div class="ha">
<div class="square d1"><span>INTJ</span></div>
<div class="square d2"><span>INTP</span></div>
<div class="square d3"><span>ENTJ</span></div>
<div class="square d4" ><span>ENTP</span></div>
<div class="square d5 "><span>INFJ</span></div>
<div class="square d6"><span>INFP</span></div>
<div class="square d7 "><span>ENFJ</span></div>
<div class="square d8 "><span>ENFP</span></div>
<div class="square d9"><span>ISTJ</span></div>
<div class="square d10"><span>ISFJ</span></div>
<div class="square d11"><span>ESTJ</span></div>
<div class="square d12"><span>ESFJ</span></div>
<div class="square d13"><span>ISTP</span></div>
<div class="square d14"><span>ISFP</span></div>
<div class="square d15"><span>ESTP</span></div>
<div class="square d16 "><span>ESFP</span></div>
</div>
</div>
</div>
<!-- MESSAGES / MEMBRES / CONNECTES / DERNIER INSCRIT -->
<div class="boxQEEL">
<!-- TOTAL UTILISATEURS CONNECTES -->
<span id="UsersOnline">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">document.getElementById('UsersOnline').innerHTML=document.getElementById('UsersOnline').innerHTML.replace(/Il y a en tout/,"");</script>
<div class="boxQEEL">
<!-- TOTAL MESSAGES -->
<div class="TotalPosts">
<span id="tPOSTS"><b>{TOTAL_POSTS}</b></span>
<script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/messages/," ");</script> messages
</div>
<!-- TOTAL MEMBRES -->
<div class="TotalUsers">
<span id="tUSERS"><b>{TOTAL_USERS}</b></span>
<script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre enregistré/," ");</script> membres
</div>
</div>
<!-- MEMBRES CONNECTES -->
<div class="online" id="onLINE">
<table>{LOGGED_IN_USERS_LIST}</table>
</div>
<!-- DERNIER UTILISATEUR ENREGISTRE -->
<div class="lstQEEL">New Player :
<span id="nUSER">{NEWEST_USER}</span>
<script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script>
</div>
<div class="creditQEEL">CREDITS : QEEL réalisé par Nemalus</div>
</div>
</div>
<div class="FinQEEL"></div>
</td>
</tr>
</table>
<!-- END disable_viewonline -->
Dans la feuille de style (CSS) ajouter le code :
- Code:
/****************************************
QEEL par Nemalus sur Never-Utopia
(Amphibole sur Exquisite
Nemalus sur Cap-RPG
Andramas sur Somewhere)
*****************************************/
/* BLOC TITRE QEEL */
.titreQEEL {
margin:auto;
width:900px; height:55px; padding-top:40px;
background:#000; /* MODIFIABLE */
font-family:Oswald; letter-spacing:2px; text-transform:uppercase; text-align:right; color:#fff;
}
/* TITRE QEEL */
.titreQEEL a{
font-size:40px; padding-right:35px;
color:white; text-shadow:1px 1px 0 #cad78e; /* MODIFIABLE */
}
/* QEEL */
.QEEL {
margin:auto; width:900px; text-align:center; background:#fff; padding:12px 0;
}
/* 24H QEEL */
.dernierQEEL {
display:inline-block; vertical-align:top; margin:0 10px;
width:200px; height:300px; padding:5px; overflow:auto;
font-size:12px; text-align:justify;
background:#dedede;; /* MODIFIABLE */
}
.dernierQEEL .row1 {
background:none; padding:0 !important;
}
/* COULEUR TEXTE 24H QEEL */
.dernierQEEL .gensmall {
font-size:12px; color:black; /* MODIFIABLE */
}
/* Groupe QEEL */
.GroupeQEEL {
display:inline-block; vertical-align:top; margin:0 10px;
width:250px; padding:5px;
font-size:12px; text-align:justify;
}
#groupe .h3{
margin:-5px -5px 5px;
color:black;
font:20px oswald;
text-transform:uppercase;
padding:10px 0;
border-bottom:3px solid #333;
}
#groupe .square span{
font:8px arial narrow;
text-transform:uppercase;
letter-spacing:1px;
background:#333;
text-shadow:1px 1px 0px black;
color:#efefef;
display:block;
width:50px;
padding:4px 0;
-webkit-transition:ease-in-out 0.5s;
transition:ease-in-out 0.5s;
position:relative;
left:50px;
}
#groupe a{color:transparent;text-decoration:none;}
#groupe{text-align:center;width:250px;margin: 0 auto;background:rgba(0,0,0,0.05);padding:5px 5px 0;}
#groupe .square{
width:50px;
height:50px;
box-sizing:border-box;
padding-top:17px;
text-align:center;
display:inline-block;
vertical-align:top;
overflow:hidden;
margin-bottom:5px;
}
#groupe .square:nth-child(odd){
margin-right:5px;
}
#groupe .square:hover span{
left:0px;
}
/* COULEURS DES GROUPES */
#groupe .d1{background:#B891C4;}
#groupe .d2{background:#B36A8E;}
#groupe .d3{background:#80405C;}
#groupe .d4{background:#917277;}
#groupe .d5{background:#9AC59A;}
#groupe .d6{background:#ADC56B;}
#groupe .d7{background:#7F9D58;}
#groupe .d8{background:#698D4D;}
#groupe .d9{background:#90E7E5;}
#groupe .d10{background:#A7BCC7;}
#groupe .d11{background:#5CC7C8;}
#groupe .d12{background:#5DAFE6;}
#groupe .d13{background:#CB4C3B;}
#groupe .d14{background:#A20812;}
#groupe .d15{background:#E17257;}
#groupe .d16{background:#DD2B45;}
/* BLOC POSITIONNEMENT */
.boxQEEL {
display:inline-block; vertical-align:top;
}
/* TOTAL MESSAGES QEEL */
.TotalPosts {
margin-bottom:10px;
width:120px; height:50px; padding-top:13px;
text-align:center; font-size:16px; line-height:normal;
background:#dedede; color:black; /* MODIFIABLE */
}
/* TOTAL MEMBRES QEEL */
.TotalUsers {
width:120px; height:50px; padding-top:13px;
text-align:center; font-size:16px; line-height:normal;
background:#dedede; color:black; /* MODIFIABLE */
}
/* MEMBRES CONNECTES */
.online {
display:inline-block; vertical-align:top; margin-left:10px;
width:235px; height:120px; padding:10px; overflow:auto;
font-size:12px; text-align:justify;
background:#dedede;; color:black; /* MODIFIABLE */
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
margin-top:10px;
width:385px; height:40px; padding-top:20px;
background:#dedede;; color:white; /* MODIFIABLE */
text-align:center; font-size:18px;
}
/* NOMBRE UTILISATEURS EN LIGNE */
#UsersOnline {
display:block; margin-top:10px;
width:385px; height:15px; padding:5px 0;
font-size:11px; text-align:center;
background:white; color:black; /* MODIFIABLE */
}
/* CREDITS */
.creditQEEL {
margin-top:10px;
width:385px; height:40px; padding-top:20px;
color:black;font-family:Oswald;text-transform:Uppercase; text-align:left; /* MODIFIABLE */
text-align:center; font-size:18px; font-style:italic;text-shadow:1px 1px 0 #dedede;
}
/* BLOC FIN QEEL */
.FinQEEL {
margin:auto;
width:900px; height:35px; padding-top:40px;
background:#000; /* MODIFIABLE */
}
Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
Dernière édition par Nemalus le Ven 23 Déc 2016 - 0:29, édité 1 fois
★