Welcome

Halloween Index complets

Magical State

Halloween, LS codage Forumactif Index complets Index complet Magical State

ModernBB

Optimisé Staff sous forme d'onglet. Une liste des sujets, une navigation et un message & Profil sont également disponibles. Le lien du forum sera disponible à son ouverture. La maquette complète

Retour

Codage index complet Magical State accueil Halloween Forumactif

L'image de bienvenue est fixe, ce n'est pas un diaporama. Les partenaires sont sous forme de liste textuelle.

CSS

/********************************************************* PAGE ACCUEIL *********************************************************/
.page_accueil {
        background: url(https://imgur.com/TQd7K29.png);
        font-family: Arial, sans-serif;
        font-size: 10px;
        height: 270px;
        margin: -6rem auto 0;
        padding: 1rem;
        position: relative;
        width: 796px;
        z-index: 2;
        color: #8f8a9e;
}

.page_accueil .pa_content {
        display: flex;
        justify-content: space-around;
}

.pa_left {
    	width: 38%;
}

.pa_middle {
        width: 35%;
        margin: 0 .8rem;
}

.pa_right {
    	width: 27%;
}

.pa_bloc {
        border: 1px solid #ededed;
        padding: .5rem;
}

.pa_bloc p {
        background: #fdfdfd;
        border: 1px solid #ededed;
        color: #8f8a9e;
        text-align: justify;
        padding: .5rem;
  	font-size: 10px;
}

/* LIENS */
.page_accueil .pa_liens {
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        margin: 0 0 1rem;
}

.page_accueil .pa_liens a {
    	color: #8f8a9e;
}

/* CONTEXTE */
.page_accueil #contexte p {
        width: 100%;
        height: 215px;
        overflow: auto;
        line-height: 1.5;
}

/* NEWS */
.page_accueil #news {
    	margin: .5rem 0 0;
}

.page_accueil #news p {
        width: 100%;
        height: 113px;
        overflow: auto;
        line-height: 1.3;
        letter-spacing: 1px;
}

.page_accueil #news p span {
    	color: #b88749;
}

/* STAFF */
.paonglets {
    	text-align: center;
}

.paonglet img {
        width: 37px;
        height: 37px;
        object-fit: cover;
        border-radius: 100px;
        margin: 0 .5rem;
}
          
.contenu_paonglet {
        display: none;
        background: #fdfdfd;
        border: 1px solid #ededed;
        color: #8f8a9e;
        font-size: 10px;
        padding: .5rem;
        text-align: center;
}

/* Pseudo */
.page_accueil .contenu_paonglet h2 {
        color: #4296a1;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: bold;
        border-bottom: 1px solid #429679;
}

/* Rang */
.page_accueil .contenu_paonglet h3 {
        font-size: 10px;
        color: #8f8a9e;
        border: 0;
        margin: 0;
        padding: 0;
}

/* Liens */
.page_accueil .contenu_paonglet a {
        color: #fdfdfd;
        font-size: 8px;
        background: #b88749;
        padding: .2rem .4rem;
        text-transform: uppercase;
}

/* Partenaires */
.page_accueil #partenaires {
        margin: .5rem 0 0;
        line-height: 1;
        text-align: justify;
        font-family: Arial;
}

.page_accueil #partenaires select {
        color: #8f8a9e;
        background: #fdfdfd;
        border: 1px solid #ededed;
        width: 100%;
        text-transform: uppercase;
        font-size: 10px;
        padding: .2rem .5rem;
        margin: .7rem auto;
}

.pa_liens_partenaires a {
        color: #8f8a9e;
}

.pa_liens_partenaires {
        border-bottom: 1px solid #429679;
        margin: 0 0 .7rem;
        padding: 0 0 .7rem;
        text-align: center;
        text-transform: uppercase;
}

Affichage > Généralités

<div class="page_accueil">
	               
	<div class="pa_liens">
		        •• <a href="#">Règlement</a> • <a href="#">Contexte</a> • <a href="#">Annexes</a> • <a href="#">Groupes</a> • <a href="#">Invités</a> • <a href="#">Partenariats</a> ••        
	</div>
	               
	<div class="pa_content">
		               
		<div class="pa_left">
			               
			<div id="contexte" class="pa_bloc">
				               
				<p>
					        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ultricies sapien, sit amet posuere mauris. Suspendisse potenti. Nulla risus turpis, venenatis a enim nec, auctor iaculis eros. Aliquam ultrices venenatis odio, ac vulputate ante pulvinar nec. Phasellus non est vitae mauris faucibus interdum. Quisque lacinia dictum est, lobortis gravida nunc pharetra id. Pellentesque vestibulum risus lacus, non scelerisque magna tincidunt id. In cursus eu nunc lacinia scelerisque. Donec in malesuada lorem. Aenean efficitur quam magna, ac ornare ex lacinia sed. Cras finibus vestibulum lacus, nec viverra velit auctor ac. Duis vehicula metus vel nunc sollicitudin, quis bibendum erat luctus. Sed quis nulla ac ligula feugiat tincidunt. Donec massa est, congue eu laoreet sed, consectetur vel turpis. Sed tempus consectetur nibh, eget dapibus tortor ullamcorper at. Vivamus euismod eros in mi molestie tempus. Aliquam rutrum diam mi, eget gravida magna condimentum quis. Donec ultrices arcu eu sollicitudin imperdiet. In vel viverra mauris. Cras sit amet commodo nibh, non porta urna. Etiam ac ante non orci condimentum venenatis. Duis vel lacinia risus. Fusce mauris nisl, euismod consequat suscipit sit amet, finibus a eros. Pellentesque fringilla urna nec arcu hendrerit, sit amet malesuada lectus mattis. Cras eleifend mi eget sapien scelerisque, nec maximus ligula cursus. Etiam sagittis ante in leo luctus, ut sollicitudin arcu eleifend. Ut ultrices lacinia dui, vel mollis tellus. Aliquam lobortis diam in tristique fermentum. Donec id est sodales, sagittis velit id, finibus dui. Sed est justo, placerat quis posuere eu, dignissim placerat libero. Donec a mauris sed quam ultricies laoreet in ac dui. In hac habitasse platea dictumst. Donec lobortis in mauris vel imperdiet.<a href="#">En savoir plus</a>        
				</p>
				               
			</div>
			               
		</div>
		               
		<div class="pa_middle">
			               
			<div id="bienvenue" class="pa_bloc">
				        <img alt="" src="https://i.imgur.com/dmO4Uba.png" />        
			</div>
			               
			<div id="news" class="pa_bloc">
				               
				<p>
					        <span>01/10/2019</span> Ici une nouveauté<br /><span>01/10/2019</span> Ici une nouveauté<br /><span>01/10/2019</span> Ici une nouveauté<br /><span>01/10/2019</span> Ici une nouveauté<br /><span>01/10/2019</span> Ici une nouveauté<br /><span>01/10/2019</span> Ici une nouveauté<br /><span>01/10/2019</span> Ici une nouveauté        
				</p>
				               
			</div>
			               
		</div>
		               
		<div class="pa_right">
			               
			<div id="staff" class="pa_bloc">
				         <script type="text/javascript">
            	//
            	</script>                              
				<div class="paonglets">
					                         <span onmouseover="javascript:change_paonglet('staff1');" id="paonglet_staff1" class="paonglet_0 paonglet">                           <img alt="" src="https://i.imgur.com/kPUcEq4.png" />                   </span>                                    <span onmouseover="javascript:change_paonglet('staff2');" id="paonglet_staff2" class="paonglet_0 paonglet">                           <img alt="" src="https://i.imgur.com/kPUcEq4.png" />                   </span>         
				</div>
				                              
				<div class="contenu_paonglets">
					                                 
					<div id="contenu_paonglet_staff1" class="contenu_paonglet">
						                 
						<h2>
							        Nom du perso        
						</h2>
						               
						<h3>
							        Administrateur | Présent        
						</h3><a href="#">Voir mon profil</a> <a href="#">Harceler de MP</a>         
					</div>
					                                  
					<div id="contenu_paonglet_staff2" class="contenu_paonglet">
						                 
						<h2>
							        Nom du perso        
						</h2>
						               
						<h3>
							        Modérateur | Absent        
						</h3><a href="#">Voir mon profil</a> <a href="#">Harceler de MP</a>         
					</div>
					                           
				</div>
				                            <script type="text/javascript">
            	//
            	</script>         
			</div>
			             
			<div id="partenaires" class="pa_bloc">
				        Pour découvrir nos partenaires, cliquez sur le lien ci-dessous.<br /><select onchange="location = this.value">
  <option class="partenaires" selected="selected">>> Nos partenaires</option>
  <option value="http://ls-halloween.fr">Halloween</option>
  <option value="http://ls-halloween.fr">Halloween</option>
<option value="http://ls-halloween.fr">Halloween</option>
<option value="http://ls-halloween.fr">Halloween</option>
</select>                                                    
				<div class="pa_liens_partenaires">
					        ( <a href="#">Nos partenaires</a> | <a href="#">Le devenir</a> )        
				</div>
				         Codage réalisé par <a target="_blank" style="color: #b88749;" href="http://ls-halloween.fr">Halloween</a>. Toute reproduction est interdite. Graphisme par.         
			</div>
			               
		</div>
		               
	</div>
</div>

Index_body

Il faut ensuite modifier le template Index_body. Remplacer les lignes 27 à 37 :

Par :

Codage index complet Magical State catégories Halloween Forumactif PHPBB2

Les liens qui apparaissent à droite de la description sont des liens à ajouter manuellement et non des sous-forum. Les images "New", "No new" et "Lock" sont en 135*30px.
Dans "Affichage", "Structure et hiérarchie", cocher "Moyen" de "Séparer les catégories sur l'index". Penser à activer l'avatar des derniers messages. Dans "Général", "Forum", "Configuration", choisir le format de date en "XX.XX.XX 00:00".

CSS

/********************************************************* CATEGORIES *********************************************************/
.forabg {
        background: none;
        box-shadow: inherit;
  	width: 99%;
  	margin: auto;
  	font-family: Arial, sans-serif;
        color: #8f8a9e;
}

/* LIENS HEADER */
.linklist.top a {
        font-family: 'Arial', sans-serif;
        font-size: 10px;
        color: #8f8a9e;
}

/* TITRE CATEGORIES */
.table-title h2 {
        background: url('https://imgur.com/ImeTTRT.png');
        color: #8f8a9e;
        display: block;
        font-size: 20px;
        font-weight: 700;
        margin: 1.5rem 0 0;
        padding: 3rem 0;
        text-align: center;
        text-transform: uppercase;
        width: 100%;
}

/* FORUM */
ul.forums {
        background: none;
        border-radius: 0;
        max-height: 3000px;
        overflow: hidden;
        transition-duration: 360ms;
}

li.cate_row {
        display: flex!important;
        padding: 1rem;
        position: relative;
  	margin: .5rem 0 !important;
        background: #fdfdfd;
  	font-family: Arial, sans-serif;
        color: #8f8a9e;
}

.cate_bloc:nth-child(1) {
        width: 18%;
        margin: 0 3rem 0 0;
}

.cate_bloc:nth-child(2) {
    	width: 55%;
}

.cate_bloc:nth-child(3) {
    	width: 20%;
}

/* Image */
.statut_forum {
        text-align: center;
}

.statut_forum img {
        background: #f4f4f4;
        border: 1px solid #ededed;
        padding: .2rem;
}

/* Dernier message */
.cate_bloc_dernier {
        background: #f4f4f4;
        border: 1px solid #ededed;
        padding: .5rem;
        text-align: center;
  	font-family: Arial, sans-serif;
        color: #8f8a9e;
  	font-size: 10px;
        margin: .5rem 0 0;
}

span.cate_dernier_mess {
    	line-height: 1.4;
}

span.cate_avatar img {
        border-radius: 50px;
        float: left;
        width: 35px;
        height: 35px;
        object-fit: cover;
}

.cate_dernier_mess a {
        color: #429679;
        font-weight: bold;
        text-transform: uppercase;
}

.cate_dernier_mess strong {
    	font-weight: normal;
}

/* Nom et statistiques */
.cate_forum {
        background: #f4f4f4;
        border: 1px solid #ededed;
        width: 100%;
        display: flex;
        justify-content: space-between;
        text-transform: uppercase;
        font-size: 8px;
        padding: .5rem;
}

.cate_forum_nom a.forumtitle {
        color: #8f8a9e;
        margin: 0;
  	font-size: 8px;
}

/* Description */
.forum_desc {
        background: #f4f4f4;
        border: 1px solid #ededed;
        color: #8f8a9e;
        font-size: 10px;
        height: 66px;
        margin: .5rem 0 0;
        overflow: auto;
        padding: .5rem;
        text-align: justify;
        width: 100%;
}

/* Sous forum */
.sous_forum {
        background: #f4f4f4;
        border: 1px solid #ededed;
        height: 95px;
        overflow: auto;
        padding: .5rem;
        position: absolute;
        right: 1rem;
        top: 1rem;
  	font-family: Arial, sans-serif;
        color: #8f8a9e;
  	font-size: 10px;
        width: 19%;
}

.sous_forum a {
        color: #8f8a9e;
        display: block;
        text-transform: uppercase;
}

.sous_forum a::before {
        content: ">> ";
        color: #b88749;
        font-weight: bold;
}

/* LIENS FOOTER */
.linklist.bottom a {
    	color: #8f8a9e;
}

.linklist li {
        float: none;
        display: inline-block;
}

.linklist.bottom {
        border-top: 5px solid #759dac;
        padding-top: 6px;
        color: #8f8a9e;
  	font-family: Arial, sans-serif;
  	font-size: 10px;
  	text-align: center;
}

/* CREDIT */
a.cate_credit {
        color: #8f8a9e;
        font-style: italic;
        font-size: 10px;
        font-family: 'Times New Roman', sans-serif;
        text-transform: lowercase;
        text-align: right;
        display: block;
        padding: 0 1rem 0 0;
}

Index_box

<ul class="linklist top">
	
	<li>
		<a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
	</li>
	<li>
		<a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
	</li>
	
	<li>
		<a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
	</li>
	
		<li class="rightside">
			<a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
		</li>
	
</ul>

<div class="forabg">
			<div class="topiclist">
				<div class="header">
					<div class="table-title">{catrow.tablehead.L_FORUM}</div>
				</div>
			</div>
			<ul class="topiclist forums">

<li class="cate_row">
                                  	<div class="cate_bloc">
                                          	<div class="statut_forum">
                                                  	<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="" />
                                          	</div>
                                          
                                          	<div class="cate_bloc_dernier">
                                                  	
                            					<span class="cate_avatar">
                                                                  	{catrow.forumrow.avatar.LAST_POST_AVATAR}
                                                  		</span>
                            				
                                                  
                                                  	<span class="cate_dernier_mess">
                                                                
                                                                	<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
                                                                          	{catrow.forumrow.LATEST_TOPIC_NAME}
                                                          		</a><br />
                                                                
                                                                {catrow.forumrow.USER_LAST_POST}
							</span>
                                          	</div>
                                  	</div>
                                  
                                  	<div class="cate_bloc">
                                          	<div class="cate_forum">
                                                  	<div class="cate_forum_nom">
                                                          	<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                                                  	</div>
                                                  
                                                  	<div class="forum_stats">
                                                          	{catrow.forumrow.TOPICS} sujets & {catrow.forumrow.POSTS} Messages
                                                  	</div>
                                          	</div>
                                          
                                          	<div class="forum_desc">
                                                  	{catrow.forumrow.FORUM_DESC}
                                          	</div>
                                  	</div>
                          	</li>

</ul>
		</div>

<a href="http://ls-halloween.fr" target="_blank" class="cate_credit">Halloween</a>

<ul class="linklist bottom">
	<li>
		<a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
	</li>
	<li>
		<a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
	</li>
	<li>
		<a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
	</li>
	
		<li>
			<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
		</li>
	
</ul>

var btn_collapse_show = $('<i></i>', {
		class: 'ion-android-add-circle hidden',
		'data-tooltip': '{L_EXPEND_CAT}'
	}).appendTo(btn_collapse);

var btn_collapse_hide = $('<i></i>', {
		class: 'ion-android-remove-circle',
		'data-tooltip': '{L_HIDE_CAT}'
	}).appendTo(btn_collapse);

var collapsed = [];

if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
		collapsed = readCookie('collapsed').split(',');
	}

$(document).on('click', '.btn-collapse', function() {
		$(this).children('.ion-android-add-circle').toggleClass('hidden');
		$(this).children('.ion-android-remove-circle').toggleClass('hidden');
		$(this).parents('.forabg').toggleClass('hidden');

if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
			collapsed = readCookie('collapsed').split(',');
		}

if (!$(this).parents('.forabg').hasClass('hidden')) {
			removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

createCookie('collapsed', collapsed);
		} else {
			collapsed.push('' + $(this).parents('.forabg').data('cindex'));

createCookie('collapsed', collapsed);
		}
	});

$('.forabg').each(function(i) {
		$(this).data('cindex', '' + i);

$(btn_collapse)
			.clone()
			.attr('id', 'forabg' + i)
			.appendTo($(this).find('.header'));

if ($.inArray('' + i, collapsed) > -1) {
			$(this).toggleClass('hidden');
			$('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
			$('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
		}
	});
});

function removeFromArray(item, array) {
	var i = array.indexOf(item);

if (i > -1) {
		array = array.splice(i, 1);
	}
}

function createCookie(name, value, days) {
	var expires;

if (days) {
		var date = new Date();
		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
		expires = "; expires=" + date.toGMTString();
	} else {
		expires = "";
	}
	document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
	var nameEQ = encodeURIComponent(name) + "=";
	var ca = document.cookie.split(';');
	for (var i = 0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) === ' ') c = c.substring(1, c.length);
		if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
	}
	return null;
}
//]]>
</script>

Descriptions des forums

A insérer dans le champ "description" de tous vos forums :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus finibus quam sed tincidunt. Maecenas sodales tincidunt metus vel dapibus. Vestibulum ac lacinia nunc. Praesent pretium euismod lorem dapibus fringilla. Praesent non mauris sit amet tellus tincidunt auctor at ut velit. Ut eget rhoncus ipsum. Aenean sagittis dui eu lorem sodales, sit amet viverra arcu tincidunt. Praesent scelerisque rhoncus metus id aliquet. Sed eu ornare ligula. Integer ornare erat arcu, et consequat ex congue nec. Nam dui dolor, convallis eu tristique luctus, porttitor vel est. Curabitur a odio sed enim vehicula feugiat in quis lacus. Morbi ut ex cursus, facilisis sapien quis, bibendum leo. Cras eget diam vulputate, convallis ex maximus, pellentesque sapien. Mauris at velit id felis facilisis congue vel et magna. Donec id metus dapibus, feugiat augue laoreet, dictum augue. Suspendisse accumsan rutrum accumsan. Etiam id ligula enim. Fusce faucibus facilisis purus non suscipit. Maecenas iaculis, orci id finibus auctor, dolor odio bibendum nunc, at congue magna dolor eget lectus. Mauris dignissim diam non elementum blandit. Nunc cursus elit at placerat convallis. Maecenas maximus mattis nibh in pellentesque. Ut venenatis fringilla eleifend. Integer in nisi mollis, aliquet nisl et, volutpat metus. Praesent quis porta sem. Phasellus tempus, nulla quis lobortis rutrum, massa lectus dapibus mi, vel rhoncus velit neque eget tellus. Morbi eget porttitor felis.
<div class="sous_forum">
	<a href="#">blabla</a><a href="#">blabla</a><a href="#">blabla</a>
</div>

Codage index complet Magical State qui est en ligne Halloween Forumactif PHPBB2

CSS

/********************************************************* QUI EST EN LIGNE ET FOOTER *********************************************************/
/* QUI EST EN LIGNE */
.qeel {
        background: url('https://i.imgur.com/ImeTTRT.jpg');
        margin: auto;
        padding: 2.5rem 2rem 1rem;
        width: 99%;
  	font-family: 'Arial', sans-serif;
  	font-size: 10px;
  	color: #8f8a9e;
}

.qeel_content {
        display: flex;
        background: #fdfdfd;
        padding: 1rem 2rem;
        border: 1px solid #ededed;
}

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

.qeel_bloc {
    	width: 35%;
}

/* Titres */
.qeel_content h2 {
        background: #b88749;
        color: #f3f3f3;
        font-family: Arial, asns;
        font-size: 12px;
        font-weight: 700;
        padding: .3rem 0;
        text-align: center;
        text-transform: uppercase;
}

/* Blocs texte */
.qeel_content p {
        background: #f4f4f4;
        border: 1px solid #ededed;
        font-size: 10px;
        padding: .5rem;
        text-align: justify;
        margin: .5rem 0;
  	font-size: 9px;
        color: #8f8a9e;
}

/* Dernier inscrit */
.qeel_dernier {
        background: #f4f4f4;
        border: 1px solid #ededed;
        font-size: 10px;
        padding: .5rem;
        text-align: center;
        margin: 0;
        color: #8f8a9e;
        text-transform: uppercase;
}

.qeel_dernier strong {
    	font-weight: normal;
}

/* Groupes */
.qeel_groupes a {
        color: #f3f3f3;
        display: block;
        font-weight: 700;
        margin: .8rem 0;
        padding: .5rem 0;
        text-align: center;
        text-transform: uppercase;
        transition: .5s all;
}

.qeel_groupes a:hover {
    	color: #fff !important;
}

a#q_basic {background: #5942a1;}
a#q_magic {background: #94a508;}
a#q_wizard {background: #b54d10;}

/* Derniers connectes */
p.qeel_derniers_co {
        width: 100%;
        height: 98px;
        overflow: auto;
}

p.qeel_derniers_co a span strong {
    	font-weight: normal;
}

/* En ligne */
span.scroll_online {
        width: 100%;
        height: 37px;
        display: block;
        overflow: auto;
}

span.scroll_online a span strong {
    	font-weight: normal;
}

/* CREDIT */
a.qeel_credit {
        color: #8f8a9e;
        font-family: 'Times New Roman', sans-serif;
        font-size: 10px;
        font-style: italic;
        text-transform: lowercase;
        display: block;
        text-align: right;
}

/* FOOTER */
.copyright a {
        color: #8f8a9e;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 10px;
        margin: 3rem 0 0;
        display: block;
}

Index_Body

Remplacer les lignes 43 à 80 :

<div class="block">
		
			<div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</a></div>

<div class="h3"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</div>

{TOTAL_USERS_ONLINE}<br />
		{RECORD_USERS}

{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
		{L_CONNECTED_MEMBERS}<br />

{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<div class="block-footer"><strong>{LEGEND}:</strong> {GROUP_LEGEND}</div>
	</div>

<div class="block">
			<div class="h3">
				<a href="{S_JOIN_CHAT}" target="ChatBox"><i class="ion-ios-chatboxes-outline"></i>{CHATBOX_NAME}</a>
				
					<div id="chatbox_popup"></div>
					<script type="text/javascript">
						insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
					</script>
				
			</div>
			{TOTAL_CHATTERS_ONLINE}: {CHATTERS_LIST}
		</div>

Par :

<div class="qeel" id="fo_stat">
  	<div class="qeel_content">
          	<div class="qeel_bloc">
                  	<h2>
                          	Informations
                  	</h2>
                  
                  	<p>
                          	{TOTAL_POSTS}
                          
                          	{TOTAL_USERS}
                          
                          	<br />
                          	
                          	{TOTAL_USERS_ONLINE}
                          
                          	<br />
                          
                          	<span class="scroll_online">
                                  	{LOGGED_IN_USER_LIST}
                          	</span>
                  	</p>
          	</div>
          
          	<div class="qeel_bloc">
                  	<div class="qeel_dernier">
                          	{NEWEST_USER}
                  	</div>
                  
                  	<div class="qeel_groupes">
                          	<a href="#" id="q_basic">
                                  	( I am basic )
                          	</a>
                          
                          	<a href="#" id="q_magic">
                                  	( Power of magic )
                          	</a>
                          
                          	<a href="#" id="q_wizard">
                                  	( Wizard supremacy )
                          	</a>
                  	</div>
          	</div>
          
          	<div class="qeel_bloc">
                  	<h2>
                          	Ils étaient là
                  	</h2>
                  
                  	<p class="qeel_derniers_co">
                          	{L_CONNECTED_MEMBERS}
                  	</p>
          	</div>
  	</div>
  
  	<a href="http://ls-halloween.fr" target="_blank" class="qeel_credit">
          	Halloween
  	</a>
</div>

Overall_footer_begin

Overall_footer_end

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body><div id="top"></div>
<div>
	<div>
        <ul>
            <li>

            </li>
        </ul>
        
		<ul class="footerbar-user">
			<li><i class="ion-clock"></i>{CURRENT_TIME}</li>
            
				<li class="rightside">
					<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">
						{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}
					</a>
				</li>
            
        </ul>
        
    </div>
	
</div>
{PROTECT_FOOTER}

if (header_top.hasClass('w-toolbar')) {
			if ($(window).scrollTop() >= 42) {
				header_top.addClass('is-sticky');
			} else {
				header_top.removeClass('is-sticky');
			}
		} else {
			if ($(window).scrollTop() >= 1) {
				header_top.addClass('is-sticky');
			} else {
				header_top.removeClass('is-sticky');
			}
		}
	});
});
//]]>
</script>

<div id="fb-root"></div>
<script type="text/javascript">
    $(document).ready( function() {
        $('div.fb-login-button, span.fb-login-button').attr({
            "data-scope": "{switch_facebook_login.FB_SCOPE}",
            "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
            "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
            "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
            "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
        });
        $('div.fb-login-button, span.fb-login-button').each(function() {
            if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
                $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
            }
            if($(this).html() == '') {
                $(this).html('{switch_facebook_login.FB_LABEL}');
            }
        });
        
        FB.init({
            "appId"   : "{switch_facebook_login.FB_APP_ID}",
            "cookie"  : {switch_facebook_login.FB_COOKIE},
            "xfbml"   : {switch_facebook_login.FB_XFBML},
            "oauth"   : {switch_facebook_login.FB_OAUTH},
            "version" : "{switch_facebook_login.FB_VERSION}"
        });
        
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
    function onLoginFB() {
        window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
    }
</script>


<script type="text/javascript">
    $(document).ready( function() {
        $('div.ti-connect, span.ti-connect').attr({
            "data-loc": "{switch_topicit_connect.TOPICIT_URL}",
            "data-login": "{switch_topicit_connect.BOARD_LOGIN}",
            "data-version": "{switch_topicit_connect.TOPICIT_VERSION}",
            "data-lang": "{switch_topicit_connect.BOARD_LANG}"
        });

(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'topicit-connect'));
    });
</script>

<script type="text/javascript">
//<![CDATA[
	fa_endpage();
//]]>
</script>
</body>
</html>

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

#magicalstate #modernBB #indexcomplet #forumactif #codage #libreservice

Halloween