Welcome

Halloween Qui est en ligne

Mutatis

Halloween, LS codage Forumactif Templates & Eléments Qui est en ligne Qui est en ligne Mutatis

PHPBB2

Optimisé Le pseudo du dernier inscrit s'affiche au survol de son avatar. Une page d'accueil est également disponible.
Réalisé pour le forum Mutatis Mutandis.

Retour

Codage qui est en ligne Mutatis Halloween Forumactif

CSS

a, a:hover {
  	text-decoration: none !important;
}

::-webkit-scrollbar {
        height: 4px;
        width: 4px;
}
::-webkit-scrollbar-thumb {
        background: #667583;
        height: 4px!important;
        position: absolute;
        width: 4px;
}
::-webkit-scrollbar-track {
    	background: #b9bbbd;
}

/************************************************* QUI EST EN LIGNE *************************************************/

.qui_est_en_ligne {
        background: url('https://i.imgur.com/vu8JwjT.jpg') no-repeat bottom #e8ebf5;
        color: #b9bbbd;
        font-family: Georgia, sans-serif;
        font-size: 12px;
        margin: auto;
        width: 800px;
  	padding: 0 0 1%;
}

.qui_est_en_ligne h2 {
        background: url('https://i.imgur.com/JSlbVXm.jpg') no-repeat;
        border-bottom: 7px solid;
        box-sizing: border-box;
        color: #b9bbbd;
        font-family: UnifrakturMaguntia, cursive;
        font-size: 60px;
        font-weight: 400;
        height: 107px;
        margin: 0;
        overflow: hidden;
        padding: 3% 0 0;
        text-align: center;
}

.qeel_content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 5% 0 0;
        width: 100%;
}

.qeel_bloc {
    	width: 33%;
}

.qeel_bloc:nth-child(2) {
        margin: 0 2%;
        width: 25%;
}

.qeel_fond {
        background: rgba(0,0,0,.8);
        width: 100%;
        padding: 8% 8%;
        box-sizing: border-box;
        overflow: auto;
}

/* MEMBRES CONNECTES INVISIBLES ET VISITEURS */
.qeel_fond.enligne {
    	height: 81px;
}

/* GROUPES */
.qeel_groupes {
    	margin: 15% 0;
}

.qeel_groupes a {
        display: block;
        font-family: UnifrakturMaguntia, cursive;
        font-size: 24px;
        text-align: center;
  	text-shadow: 1px 1px #2e2f31;
}

a.qeel_pnj {color: #f5d225; text-transform: lowercase;}
a.qeel_inhumans {color: #66bd70;}
a.qeel_super {color: #33b8b8;}
a.qeel_elementalists {color: #a173e6;}
a.qeel_psychics {color: #e663e2;}
a.qeel_transformers {color: #fa2f2f;}
a.qeel_specifics {color: #ff8d29;}
a.qeel_legal {color: #9c8562;}

/* UTILISATEURS EN LIGNE */
.qeel_fond.connectes {
    	height: 150px;
}

/* DERNIER INSCRIT */
.qeel_dernier_bloc {
        width: 200px;
        height: 320px;
        overflow: hidden;
        position: relative;
}

.qeel_dernier_bloc:hover .qeel_dernier {
    	top: 0;
}

.qeel_dernier {
        position: absolute;
        top: -320px;
        background: rgba(0,0,0,.8);
        display: flex;
        justify-content: center;
        width: 200px;
        height: 320px;
        font-family: UnifrakturMaguntia, cursive;
        align-items: center;
        transition: .5s all;
        color: #8ba2b7;
        font-size: 30px;
        text-align: center;
}

.qeel_dernier a {
        font-size: 12px;
        font-family: Roboto, sans-serif;
        text-transform: uppercase;
}

/* STATISTIQUES */
.qeel_stats {
        margin: 8% 0;
        font-size: 18px;
        font-family: Roboto, sans-serif;
        text-transform: uppercase;
        color: #5b6b7a;
}

i.fas.fa-user-alt, i.fas.fa-envelope {
        color: #b9bbbd;
        margin: 0 5% 0;
}

.qeel_stats div:nth-child(2) {
    	color: #8ba2b7;
}

.qeel_stats div:nth-child(2) {
        color: #8ba2b7;
        display: flex;
        flex-direction: row-reverse;
        margin: 5% 0;
}

/* CONNECTES CES VINGT QUATRE DERNIERES HEURES */
.qeel_fond.dernieresheures {
    	height: 150px;
}

table.derniereshrs .row1, table.anniversaires .row1 {
    	background: transparent;
}

table.derniereshrs .row1 .gensmall, table.anniversaires .row1 .gensmall {
        font-family: Georgia, sans-serif;
        color: #b9bbbd;
        font-size: 12px;
}

/* ANNIVERSAIRES */
.qeel_fond.anniversaires {
    	height: 80px;
}

a.credits_hallow {
        text-align: right;
        display: block;
        margin: 2% 2% 0;
        color: #446278;
}

Index_body, remplacer le contenu entre les commentaires "Begin disable online" et "END disable online" par :

<div class="qui_est_en_ligne">
  	<h2>
          	Qui est en ligne ?
  	</h2>
  
  	<div class="qeel_content">
          	<div class="qeel_bloc">
                  	<div class="qeel_fond enligne">
                          	{TOTAL_USERS_ONLINE}
                  	</div>
                  
                  	<div class="qeel_groupes">
                          	<a href="http://mutatis-mutandis.forumactif.com/g10-pnj" class="qeel_pnj">
                                  	PNJ
                          	</a>
                          
                          	<a href="http://mutatis-mutandis.forumactif.com/g3-inhumans" class="qeel_inhumans">
                                  	Inhumans
                          	</a>
                          
                          	<a href="http://mutatis-mutandis.forumactif.com/g4-super-humans" class="qeel_super">
                                  	Super-humans
                          	</a>
                          
                          	<a href="http://mutatis-mutandis.forumactif.com/g6-elementalists" class="qeel_elementalists">
                                  	Elementalists
                          	</a>
                  	</div>
                  
                  	<div class="qeel_fond connectes">
                          	{LOGGED_IN_USER_LIST}
                  	</div>
          	</div>
          
          	<div class="qeel_bloc">
                  	<div class="qeel_dernier_bloc">
                          	<div class="qeel_avatar"><span id="avatar_dernier_membre"></span></div>
                          	<div class="qeel_dernier">
                                  	<span id="dernier_membre">
                              			{NEWEST_USER}
                  			</span>
                                  	<script type="text/javascript">document.getElementById('dernier_membre').innerHTML=document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Dernier inscrit");</script> 
                          	</div>
                  	</div>
                  
                  	<div class="qeel_stats">
                          	<div>
                                  	<i class="fas fa-user-alt"></i>
                                  	<span id="nmbre_membres">
                                          	{TOTAL_USERS}
                                  	</span>
                                  	<script type="text/javascript">document.getElementById('nmbre_membres').innerHTML=document.getElementById('nmbre_membres').innerHTML.replace(/Nous avons/,"").replace(/membre(s?) enregistré(s?)/,"membre$1");</script> 
                          	</div>
                          
                          	<div>
                                	<i class="fas fa-envelope"></i>
                                  	<span id="nmbre_messages">
                                          	{TOTAL_POSTS}
                                  	</span>
                                  	<script type="text/javascript">document.getElementById('nmbre_messages').innerHTML=document.getElementById('nmbre_messages').innerHTML.replace(/Nos membres ont posté un total de/,"");</script> 
                          	</div>
                  	</div>
            	</div>
          
          	<div class="qeel_bloc">
                  	<div class="qeel_fond anniversaires">
                          	<table class="anniversaires">
                                  	{L_WHOSBIRTHDAY_TODAY}
                          	</table>
                  	</div>
                  
                  	<div class="qeel_groupes">
                  		<a href="http://mutatis-mutandis.forumactif.com/g11-psychics" class="qeel_psychics">
                                  	Psychics
                          	</a>
                          
                          	<a href="http://mutatis-mutandis.forumactif.com/g7-transformers" class="qeel_transformers">
                                  	Transformers
                          	</a>
                          		
                          	<a href="http://mutatis-mutandis.forumactif.com/g8-specifics" class="qeel_specifics">
                                  	Specifics
                          	</a>
                          	
                          	<a href="http://mutatis-mutandis.forumactif.com/g9-legal-authority" class="qeel_legal">
                                  	Legal Authority
                          	</a>
                  	</div>
                  
                  	<div class="qeel_fond dernieresheures">
                          	<table class="derniereshrs">{L_CONNECTED_MEMBERS}</table>
                  	</div>
          	</div>
  	</div><a href="http://ls-halloween.fr/" target="_blank" class="credits_hallow">Halloween</a>
</div>

Ajout des polices

Dans le template Overall_header, coller ceci avant "T_HEAD_STYLESHEET" :

Créer une page Javascript

Template "Profile_view_body"

Remplacer ligne 20 :

Par :

Dernière modification : 25 April 2020 23 : 33.

#mutatis #quiestenligne #forumactif #codage #libreservice

Halloween