Welcome

Halloween Index complets

Que la Nuit vienne

Halloween, LS codage Forumactif Index complets Index complet Que la Nuit vienne

PHPBB2

Optimisé Staff sous forme d'onglet. Redimensionnement automatique des images. Un module d'annonces défilantes précédant la page d'accueil, une liste des sujets, un message & profil ainsi qu'un profil sont également disponibles.
Réalisé pour le forum :
La maquette complète

Retour

Pour ajouter la police

Dans le template "Overall_header", coller la ligne suivante juste avant "{T_HEAD_STYLESHEET}".

Codage index complet Que la nuit vienne accueil Halloween Forumactif

Le staff est en onglet. Les images se redimensionnent automatiquement. Les prédéfinis sont en 100*50px, le staff en 148*90px et l'image d'event en 449*58px.

CSS

/************************************************ PAGE ACCUEIL ************************************************/
.page_accueil ::-webkit-scrollbar {
        width: 7px;
        height: 14px;
        background: #cccbcb;
        border: 1px solid #a9a6a6;
}

.page_accueil ::-webkit-scrollbar-thumb {
        border: solid 0 transparent;
        border-right-width: 2px;
        -webkit-border-radius: 5px;
        -webkit-border-top-right-radius: 9px 5px;
        -webkit-border-bottom-right-radius: 9px 5px;
        -webkit-box-shadow: inset 0 0 0 1px #556b5f, inset 0 0 0 6px #556b5f;
        border-left-width: 2px;
}

.page_accueil ::-webkit-scrollbar-track-piece {
        background: transparent none;
        border: solid 4px transparent;
        border-right-width: 8px;
        margin: 4px;
        -webkit-box-shadow: inset 1px 1px 0 0 rgb(137,131,117), inset -1px -1px 0 0 rgb(224,220,210);
}

.page_accueil {
        background: url(https://www.zupimages.net/up/18/46/clr7.png);
        box-sizing: border-box;
        height: 550px;
        margin: 2% auto;
        padding: 4% 2% 0;
        width: 860px;
        font-family: 'Oswald', sans-serif;
        font-size: 13px;
        line-height: 1.5;
        color: #8e8f8d;
}

.page_accueil .predefinis, .page_accueil .contexte, .page_accueil .staff, .page_accueil .news, .page_accueil .event_bloc, .page_accueil .bloc_partenaires_tops {
    	float: left;
        background: rgba(0,0,0,.6);
        box-sizing: border-box;
}

.page_accueil .news, .page_accueil .event_bloc, .page_accueil .bloc_partenaires_tops {
    	margin: 2% 0 0 0;
}

.clear {
  	clear: both;
}

/* TITRES */
.page_accueil h2 {
        font-size: 20px;
        font-family: 'Berkshire Swash', cursive;
        color: #556b4d;
        font-weight: normal;
        margin: 10px auto;
  	text-align: center;
        transition: .5s all;
}

.page_accueil .predefinis:hover h2 {
        transform: rotate(-5deg);
}

/* PREDEFINIS */
.page_accueil .predefinis {
        width: 21%;
        text-align: center;
        padding: 0 1% 1%;
}

.predefinis img {
        width: 100px;
        height: 50px;
        object-fit: cover;
        margin: 0 0 5.6% 0;
        border: 1px solid #504e4e;
  	opacity: .5;
  	transition: .5s all;
}

.predefinis img:hover {
    	opacity: 1;
}

/* CONTEXTE */
.page_accueil .contexte {
        width: 55%;
        margin: 0 2%;
        padding: 0 2%;
        height: 240px;
}

.page_accueil .contexte p {
        box-sizing: border-box;
        height: 170px;
        overflow: auto;
        text-align: justify;
        width: 100%;
        padding: 0 3%;
}

.page_accueil .contexte p span {
    	color: #556b4d;
}

/* STAFF */
.page_accueil .staff {
        width: 20%;
        height: 240px;
}

.paonglets {
    	text-align: center;
}

.paonglet {
        display: inline-block;
        cursor: pointer;
}

.paonglet img {
        height: 50px;
        display: inline-block;
}
          
.contenu_paonglet {
        display: none;
        height: 160px;
}

.contenu_paonglet img {
        width: 90%;
        height: 90px;
        object-fit: cover;
        margin: 13% auto 0;
        display: block;
        border: 1px solid #504e4e;
}

/* Pseudo */
.contenu_paonglet h3 {
        font-family: 'Berkshire Swash', cursive;
        text-align: center;
        margin: 0;
        font-style: italic;
        font-size: 20px;
        font-weight: normal;
}

/* Dispo */
.contenu_paonglet h4 {
        margin: 0;
        text-align: center;
        font-weight: normal;
        font-family: 'Open Sans Condensed', sans-serif;
        letter-spacing: 2px;
        font-size: 10px;
}

/* NEWS */
.page_accueil .news {
        width: 21%;
        height: 200px;
        padding: 0 2%;
}

.page_accueil .news p {
        width: 100%;
        height: 126px;
        overflow: auto;
        padding: 0 2%;
}

.page_accueil .news p span {
        background: #556b4d;
        width: 30px;
        display: inline-block;
        text-align: center;
        margin: 0 0 3% 0;
        font-variant: all-small-caps;
        color: #e3e3e3;
}

/* EVENT */
.page_accueil .event_bloc {
        background: none;
        width: 55%;
        margin: 2%;
}

/* Image */
img.img_event {
        width: 100%;
        height: 60px;
        object-fit: cover;
        border: 1px solid #504e4e;
        box-sizing: border-box;
}

/* Bloc */
.page_accueil .event {
        background: rgba(0,0,0,.6);
        height: 131px;
        padding: 2%;
        box-sizing: border-box;
        margin: 2% 0 0 0;
}

.page_accueil .event p {
        width: 100%;
        box-sizing: border-box;
        padding: 0 2%;
        height: 112px;
        margin: 0;
        overflow: auto;
        text-align: justify;
}

.page_accueil .event p span {
    	color: #556b4d;
}

/* PARTENAIRES ET TOPS */
.page_accueil .bloc_partenaires_tops {
        width: 20%;
        height: 200px;
        text-align: center;
        background: none;
}

/* Partenaires */
.page_accueil .partenaires h2 {
    	margin: 0 0 2%;
}

.page_accueil .partenaires {
        background: rgba(0,0,0,.6);
        height: 140px;
        box-sizing: border-box;
        padding: 10px;
}

.page_accueil .partenaires img {
        width: 20px;
        margin: 2%;
}

/* Tops */
.page_accueil .tops {
        background: rgba(0,0,0,.6);
        width: 100%;
        height: 50px;
        margin: 7% 0 0;
        text-align: center;
        padding: 2%;
        box-sizing: border-box;
}

.page_accueil .tops img {
    	width: 40px;
}

a.pa_credits {
        display: block;
        font-size: 10px;
        text-align: right;
        text-transform: uppercase;
        color: #55602c;
}

Page d'accueil

<div class="page_accueil">
	             
	<div class="predefinis">
		             
		<h2>
			       Prédef       
		</h2><a href="#"><img src="https://imgur.com/7kOspyg.gif" alt="" /></a><a href="#"><img src="https://imgur.com/7kOspyg.gif" alt="" /></a><a href="#"><img src="https://imgur.com/7kOspyg.gif" alt="" /></a>       
	</div>
	             
	<div class="contexte">
		             
		<h2>
			       Contexte       
		</h2>
		             
		<p>
			       <span>Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Duis ut fringilla purus. Duis rutrum neque ut finibus fermentum. Ut sit amet finibus ligula, sit amet fringilla metus. Etiam sed nibh commodo, porttitor velit sit amet, sodales mauris. Praesent fringilla condimentum lacus, vitae sodales ligula mollis at. Fusce tempus orci vitae mollis scelerisque. Phasellus dictum nunc id laoreet sagittis. Morbi varius malesuada turpis quis tristique. Maecenas convallis tellus eros, id imperdiet risus ultrices eget.<br /><br /> Duis eleifend, nulla in scelerisque sodales, justo ex facilisis mauris, non rutrum purus sapien in nisi. Sed a rutrum tellus. Ut vitae ultricies ligula, vel consectetur libero. Praesent pulvinar dolor arcu, ac tempor purus dapibus vitae. Sed elit ligula, fermentum ac sollicitudin ac, pellentesque consequat mauris. Etiam vel odio eros. Pellentesque semper et turpis eget interdum. Etiam nec libero nec nisi mattis lobortis. Donec porttitor sit amet urna eget sagittis. Duis pretium imperdiet est lobortis aliquam. Pellentesque vel purus interdum, facilisis ante ac, dictum ipsum. Mauris placerat fermentum justo eu posuere. Nulla porttitor quam ut lectus feugiat laoreet.       
		</p>
		             
	</div>
	             
	<div class="staff">
		       <script type="text/javascript">
            	//
            	</script>                     
		<div class="contenu_paonglets">
			                               
			<div class="contenu_paonglet" id="contenu_paonglet_staff1">
				        <img src="https://imgur.com/7kOspyg.gif" alt="" />       
				<h3>
					       Pseudo       
				</h3>
				             
				<h4>
					       DC - Dispo       
				</h4>
				               
			</div>
			                                
			<div class="contenu_paonglet" id="contenu_paonglet_staff2">
				        <img src="https://imgur.com/qsSuNGN.gif" alt="" />       
				<h3>
					       Pseudo 2       
				</h3>
				             
				<h4>
					       DC - Dispo       
				</h4>
				               
			</div>
			                         
		</div>
		             
		<div class="paonglets">
			                        <span class="paonglet_0 paonglet" id="paonglet_staff1" onmouseover="javascript:change_paonglet('staff1');">                           <img src="https://www.zupimages.net/up/18/48/bdxo.png" alt="" />                   </span>                                    <span class="paonglet_0 paonglet" id="paonglet_staff2" onmouseover="javascript:change_paonglet('staff2');">                           <img src="https://www.zupimages.net/up/18/48/l5dh.png" alt="" />                   </span>        
		</div>
		                          <script type="text/javascript">
            	//
            	</script>       
	</div>
	             
	<div class="clear">
		             
	</div>
	             
	<div class="news">
		             
		<h2>
			       News       
		</h2>
		     
		<p>
			   <span>Date</span> Nouveauté<br /><br /> <span>Date</span> Nouveauté<br /><br /> <span>Date</span> Nouveauté<br /> <br />    
		</p>
		         
	</div>
	             
	<div class="event_bloc">
		       <img src="https://imgur.com/qbaD4Sv.gif" alt="" class="img_event" />       
		<div class="event">
			             
			<p>
				       <span>Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Duis ut fringilla purus. Duis rutrum neque ut finibus fermentum. Ut sit amet finibus ligula, sit amet fringilla metus. Etiam sed nibh commodo, porttitor velit sit amet, sodales mauris. Praesent fringilla condimentum lacus, vitae sodales ligula mollis at. Fusce tempus orci vitae mollis scelerisque. Phasellus dictum nunc id laoreet sagittis. Morbi varius malesuada turpis quis tristique. Maecenas convallis tellus eros, id imperdiet risus ultrices eget.<br /><br />Duis eleifend, nulla in scelerisque sodales, justo ex facilisis mauris, non rutrum purus sapien in nisi. Sed a rutrum tellus. Ut vitae ultricies ligula, vel consectetur libero. Praesent pulvinar dolor arcu, ac tempor purus dapibus vitae. Sed elit ligula, fermentum ac sollicitudin ac, pellentesque consequat mauris. Etiam vel odio eros. Pellentesque semper et turpis eget interdum. Etiam nec libero nec nisi mattis lobortis. Donec porttitor sit amet urna eget sagittis. Duis pretium imperdiet est lobortis aliquam. Pellentesque vel purus interdum, facilisis ante ac, dictum ipsum. Mauris placerat fermentum justo eu posuere. Nulla porttitor quam ut lectus feugiat laoreet.       
			</p>
			             
		</div>
		             
	</div>
	             
	<div class="bloc_partenaires_tops">
		             
		<div class="partenaires">
			             
			<h2>
				       Partenaires       
			</h2><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/48/nafg.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/48/nafg.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/48/nafg.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/48/nafg.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/48/nafg.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/48/nafg.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/48/nafg.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/48/nafg.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/48/nafg.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/48/nafg.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/48/nafg.png" alt="" /></a>       
		</div>
		             
		<div class="tops">
			       <a href="#" target="_blank"><img src="https://i.imgur.com/aRu6w4Y.png" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/aRu6w4Y.png" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/aRu6w4Y.png" alt="" /></a>       
		</div>
		             
	</div>
	<div class="clear">
	</div><a href="http://ls-halloween.fr/" target="_blank" class="pa_credits">Halloween</a>
</div>

Codage index complet Que la nuit vienne catégories Halloween Forumactif PHPBB2

Les images "New", "No new" et "Lock" sont en 155*35px.Les images à côté des sous-forum correspondent aux illustrations de forum. Ces dernières sont à insérer dans le champ image de chaque forum (au-dessus du bloc destiné à la description).

CSS

/************************************************ CATEGORIES ************************************************/
.categories ::-webkit-scrollbar {
        width: 7px;
        height: 14px;
        background: #cccbcb;
        border: 1px solid #a9a6a6;
}

.categories ::-webkit-scrollbar-thumb {
        border: solid 0 transparent;
        border-right-width: 2px;
        -webkit-border-radius: 5px;
        -webkit-border-top-right-radius: 9px 5px;
        -webkit-border-bottom-right-radius: 9px 5px;
        -webkit-box-shadow: inset 0 0 0 1px #556b5f, inset 0 0 0 6px #556b5f;
        border-left-width: 2px;
}

.categories ::-webkit-scrollbar-track-piece {
        background: transparent none;
        border: solid 4px transparent;
        border-right-width: 8px;
        margin: 4px;
        -webkit-box-shadow: inset 1px 1px 0 0 rgb(137,131,117), inset -1px -1px 0 0 rgb(224,220,210);
}

.categories {
        width: 850px;
        margin: 5% auto;
  	font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
        background: #151a15;  	
        border-radius: 50px 50px 25px 25px;
}

.header_categories {
        background: url(https://www.zupimages.net/up/18/46/s4po.png);
        width: 100%;
        height: 130px;
        text-align: center;
        border-radius: 50px 50px 0 0;
}

.cate_forum {
        background: rgba(0,0,0,.2);
        width: 95%;
        margin: 2% auto;
        box-sizing: border-box;
        padding: 2%;
        position: relative;
}

.cate_forum::after {
        display: block;
        content: "";
        clear: both;
}

.forum_gauche, .forum_milieu, .forum_droite {
    	float: left;
}
                        
/* LIENS SOUS CATEGORIES */
.liens_footer_cate {
        width: 850px;
        margin: auto;
  	font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
}

.lfc_bloc {
        float: left;
        width: 33.2%;
}

.lfc_bloc a {
        font-size: 11px;
        display: block;
        text-align: center;
        text-transform: uppercase;
}

.lfc_bloc a:hover {
    	color: #556b4d !important;
}

/* DERNIER MESSAGE STATUT */
.forum_gauche {
    	width: 20%;
}

.dernier_message {
        background: rgba(0,0,0,.2);
        margin: 0 0 5%;
        padding: 15% 5%;
        text-align: center;
        height: 110px;
        box-sizing: border-box;
}

.cate_forum:hover .dernier_message {
    	transform: rotate(-5deg);
}

/* TITRE DESCRIPTION STATISTIQUES */
.forum_milieu {
        width: 40%;
        margin: 0 2%;
}

.titre_desc {
        background: rgba(0,0,0,.2);
        padding: 2% 5%;
}

.titre_desc a.forumlink {
        text-align: center;
        display: block;
        font-family: 'Berkshire Swash', cursive;
        font-size: 24px;
        font-weight: normal;
        color: #556b4d;
}

.cate_forum:hover .titre_desc a.forumlink {
    	letter-spacing: 2px;
}

.titre_desc a.forumlink::after {
        display: block;
        content: "";
        border-bottom: 1px solid;
        width: 90%;
        margin: auto;
}

.forum_description {
    	height: 70px;
}

.forum_description p {
        width: 100%;
        box-sizing: border-box;
        padding: 0 2%;
        margin: 1% auto 0;
        text-align: justify;
        font-family: 'Open Sans Condensed', sans-serif;
        height: 65px;
        overflow: auto;
}

.forum_description p span {
        color: #556b4d;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
        font-size: 12px;
}

.forum_statistiques {
        float: left;
        display: block;
        width: 48%;
        margin: 2% 0 0;
        text-align: center;
        font-variant: small-caps;
        background: rgba(0,0,0,.2);
        font-size: 13px;
        padding: 1% 0;
}

.forum_statistiques:nth-child(0n+3) {
    	margin: 2% 0 0 4%;
}

.cate_forum:hover .forum_statistiques {
    	background: #556b4d;
}

.cate_forum:nth-child(2n+1):hover .forum_statistiques:nth-child(2n+2) {
    	background: #556b4d;
}

/* IMAGE DESCRIPTION */
.forum_description img {
        position: absolute;
        top: 9%;
        width: 130px;
        height: 153px;
        right: 20%;
        object-fit: cover;
        border-radius: 20px;
}

.cate_forum:hover .forum_description img {
    	filter: grayscale(1);
}

/* SOUS FORUM */
.forum_droite {
        float: right;
        width: 18%;
        height: 155px;
        overflow: auto;
        padding: 0 2%;
        box-sizing: border-box;
        text-align: center;
}

.forum_droite a {
        display: block;
        background: rgba(0,0,0,.2);
        margin: 0 0 4% 0;
        padding: 2%;
        text-transform: uppercase;
        letter-spacing: 1px;
}

.cate_forum:hover .forum_droite a {
        background: #556b4d;
        color: #fff;
}

.cate_forum .forum_droite a:hover {
    	color: #151c17 !important;
}

/* FOOTER */
.categories_footer {
        background: url(https://www.zupimages.net/up/18/46/lms2.png);
        width: 100%;
        height: 50px;
        border-radius: 0 0 25px 25px;
}

a.credits_cate {
        color: #636562;
        text-align: right;
        display: block;
        text-transform: uppercase;
        font-size: 10px;
        padding: 2%;
}

Index_box

<div class="categories">
          	
          	<div class="header_categories">
                  	{catrow.tablehead.L_FORUM}
          	</div>
	
          
	
	
          
	
          	<div class="cate_forum">
                  	<div class="forum_gauche">
                          	<div class="dernier_message">
                                  	{catrow.forumrow.LAST_POST}
                          	</div>
                          
                          	<img class="statut_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  	</div>
                  
                  	<div class="forum_milieu">
                          	<div class="titre_desc">
                                  	<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                                          	{catrow.forumrow.FORUM_NAME}
                                  	</a>
                                  
                                  	<div class="forum_description">
                                          	{catrow.forumrow.FORUM_DESC}
                                  	</div>
                          	</div>
                          
                          	<div class="forum_statistiques">
                                  	{catrow.forumrow.POSTS} mess
                          	</div>
                          
                          	<div class="forum_statistiques">
                                  	{catrow.forumrow.TOPICS} sujets
                          	</div>
                          
                          	<div class="clear">
                          	</div>
                  	</div>
                  
                  	<div class="forum_droite" id="subforums">
                          	{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                          	<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>
                  	</div>
          	</div>
	
          
	
	
	
        <div class="categories_footer">
          	<a href="http://ls-halloween.fr" target="_blank" class="credits_cate">
                  	Halloween
          	</a>
        </div>
</div>

Index_body

Remplacer les lignes 66 à 89 par :

<div class="liens_footer_cate">
  	<div class="lfc_bloc">
          	
			<a href="{U_SEARCH_NEW}">
                          	{L_SEARCH_NEW}
          		</a>
          	
          
          		<a href="{U_TODAY_ACTIVE}">
          			{L_TODAY_ACTIVE}
          		</a>
  	</div>
  
  	<div class="lfc_bloc">
          		<a href="{U_TODAY_POSTERS}">
                          	{L_TODAY_POSTERS}
          		</a>
          		
          		<a href="{U_OVERALL_POSTERS}">
                          	{L_OVERALL_POSTERS}
          		</a>
  	</div>
  
  	<div class="lfc_bloc">
          	
			<a href="{U_MARK_READ}">
                          	{L_MARK_FORUMS_READ}
          		</a>
		
			
          	
			<a href="{switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">
                          	{switch_delete_cookies.L_DELETE_COOKIES}
          		</a>
          	
          
          	
			
				<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">
                                  	{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
          			</a>
			
		
  	</div>
  
  	<div class="clear">
  	</div>
</div>

Illustration

Pour ajouter l'illustration de fond, il faut ajouter l'URL dans le bloc indiqué ci-dessous lorsque vous éditez votre forum :

Codage index complet Que la nuit vienne qui est en ligne Halloween Forumactif PHPBB2

CSS

/************************************************ QUI EST EN LIGNE ************************************************/
.qui_est_en_ligne_nuit ::-webkit-scrollbar {
        width: 7px;
        height: 14px;
        background: #cccbcb;
        border: 1px solid #a9a6a6;
}

.qui_est_en_ligne_nuit ::-webkit-scrollbar-thumb {
        border: solid 0 transparent;
        border-right-width: 2px;
        -webkit-border-radius: 5px;
        -webkit-border-top-right-radius: 9px 5px;
        -webkit-border-bottom-right-radius: 9px 5px;
        -webkit-box-shadow: inset 0 0 0 1px #556b5f, inset 0 0 0 6px #556b5f;
        border-left-width: 2px;
}

.qui_est_en_ligne_nuit ::-webkit-scrollbar-track-piece {
        background: transparent none;
        border: solid 4px transparent;
        border-right-width: 8px;
        margin: 4px;
        -webkit-box-shadow: inset 1px 1px 0 0 rgb(137,131,117), inset -1px -1px 0 0 rgb(224,220,210);
}

/* QEEL */
.qui_est_en_ligne_nuit {
        background: url(https://i.imgur.com/4EgZvBh.png);
        width: 850px;
        height: 400px;
        margin: 5% auto 0;
        box-sizing: border-box;
        padding: 2% 5% 0;
  	color: #8e8f8d;
  	font-family: Oswald, sans-serif;
        font-size: 14px;
        line-height: 1.5;
  	font-size: 13px;
}

.qeel_gauche, .qeel_milieu, .qeel_droite {
    	float: left;
}

.qeel_gauche, .qeel_droite {
    	width: 33%;
}

.qeel_milieu {
        width: 25%;
        margin: 0 4%;
        text-align: center;
        font-size: 0;
}

/* STATISTIQUES */
.qeel_stats {
        background: rgba(0,0,0,.6);
        width: 100%;
        padding: 5%;
        box-sizing: border-box;
        border-radius: 10px;
        line-height: 1.5;
}

/* EN LIGNE */
.qeel_online {
        background: rgba(0,0,0,.6);
        padding: 5%;
        border-radius: 10px;
        margin: 10% 0 0;
        width: 100%;
        box-sizing: border-box;
        height: 100px;
        overflow: auto;
}

/* GROUPES */
.qeel_milieu a {
        display: block;
        font-family: 'Berkshire Swash', cursive;
        font-size: 24px;
        background: rgba(0,0,0,.6);
        border-radius: 15px;
        margin: 0 0 5% 0;
        font-weight: normal;
}

/* 24H */
.qeel_liste_derniers_co {
        background: rgba(0,0,0,.6);
        border-radius: 10px;
        width: 100%;
        box-sizing: border-box;
        padding: 5%;
        height: 235px;
        overflow: auto;
}

table#disparait .row1 {
    	background: none;
}

table#disparait .row1 .gensmall {
        font-size: 13px;
        color: #8e8f8d;
}

/* CREDITS */
.qeel_credits {
        background: rgba(0,0,0,.6);
        border-radius: 10px;
        padding: 5%;
        width: 100%;
        height: 100px;
        margin: 10% 0 0;
        box-sizing: border-box;
}

Index_Body

Remplacer les lignes 136 à 184 par :

<div class="qui_est_en_ligne_nuit">
  	<div class="qeel_gauche">
          	<div class="qeel_stats">
                  	{TOTAL_POSTS}.<br />
                        {TOTAL_USERS}.<br />
                        {NEWEST_USER}.<br />
                        <br />
                        {TOTAL_USERS_ONLINE}<br /><br />
                        {RECORD_USERS}
          	</div>
          
          	<div class="qeel_online">
                  	{LOGGED_IN_USER_LIST}
          	</div>
  	</div>
  
  	<div class="qeel_milieu">
          	{GROUP_LEGEND}
  	</div>
  
  	<div class="qeel_droite">
          	<div class="qeel_liste_derniers_co">
                  	<table id="disparait">
                          	{L_CONNECTED_MEMBERS}
                  	</table>
          	</div>
          
          	<div class="qeel_credits">
                  	Codage par <a href="http://ls-halloween.fr" target="_blank">Halloween</a>, création et gestion du forum par UNTEL. <br />
                  	Avatars en xx*xx px, style apocalyptique, tout ça tout ça.
          	</div>
  	</div>
</div>

Télécharger le CSS complet

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

#nuit #indexcomplet #forumactif #codage #libreservice

Halloween