Welcome

Halloween Index complets

Morsmordre

Halloween, LS codage Forumactif Index complets Index complet Morsmordre

PHPBB2

Optimisé Une navigation, un footer, une liste des sujets, un profil, un profil & message, une liste des membres, une fiche administrative, un listing, une fiche publicité et une fiche de présentation sont également disponibles.
Plusieurs infobulles au survol de certaines images (araignée sur la PA, beuglante, balais etc.). 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 Morsmordre accueil Halloween Forumactif

L'image des news (sous le contexte) est en 249*136px, et le contenu s'affiche en hover. Les images du staff sont en 134*74px, contenu également en hover. Les prédéfinis sont en 81*81px.

CSS

/*********************************** PAGE ACCUEIL ***********************************/
.page_accueil {
        background: url(https://i.imgur.com/i0fawbD.png) no-repeat bottom left, url(https://i.imgur.com/q46je9p.jpg);
        font-size: 14px;
        padding: 1% 0 5%;
  	width: 100%;
        position: relative;
        z-index: 2;
  	font-family: 'Alegreya Sans SC', sans-serif;
  	color: #d9d9d9;
}

.page_accueil ::-webkit-scrollbar {
        background: #d9d9d9;
        width: 7px;
        height: 7px;
}

.page_accueil ::-webkit-scrollbar-thumb {
        background: #183d23;
        border-radius: 27px;
}

a, a:hover {
  	text-decoration: none !important;
  	transition: all .5s;
}

.clear {
  	clear: both;
}

/* ARAIGNEE */
.infobulle.araignee {
        position: absolute;
        top: -3%;
        left: -2%;
}

/* BULLE */
.infobulle > div {
        left: 80px;
        opacity: 0;
        position: absolute;
        top: 0;
        transform: scale(0.3) rotate(-45deg);
        transition: all .3s linear;
        visibility: hidden;
}

.infobulle:hover > div {
        opacity: 1;
        visibility: visible;
  	transform: scale(1) rotate(0deg);
}

.bouh {
        background: #183d23;
        border-radius: 5px;
        color: #d9d9d9;
        padding: 5%;
        text-align: center;
        width: 200px;
        margin-top: -33px;
}

.fleche {
        border: 5px solid transparent;
        border-bottom: 10px solid #183d23;
        margin-left: -5px;
        width: 0;
        transform: rotate(30deg);
        margin-top: 20px;
}

/* TITRES */
/* Periode */
.page_accueil h2 {
        background: url(https://i.imgur.com/Ly8c2Bh.png) no-repeat center;
        font-family: 'Alegreya Sans SC', sans-serif;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 1px;
        padding: 8% 0 1%;
        text-align: center;
  	color: #d9d9d9;
}

/* Titres PA */
.page_accueil h3 {
        font-family: 'Vollkorn', serif;
        text-transform: uppercase;
        font-weight: normal;
        font-size: 18px;
        text-align: center;
}

.page_accueil h3::before {
        content: "";
        background: url('https://i.imgur.com/Qa8l9aJ.png');
        width: 38px;
        height: 45px;
        display: inline-block;
}

h3.predef div {
        font-size: 11px;
        line-height: .5;
}

/* COLONNES */
.page_accueil .gauche {
        float: left;
        width: 26%;
        margin: 0 2.5% 0 5%;
}

.page_accueil .milieu {
        float: left;
        width: 32%;
}

.page_accueil .droite {
        float: left;
        width: 27%;
        margin: 0 5% 0 2.5%;
}

/* BLOC CONTEXTE */
.pa_contexte {
        background: rgba(0,0,0,.2);
        box-sizing: border-box;
        height: 335px;
        padding: 10%;
        width: 100%;
        line-height: 1.45;
        overflow: auto;
        text-align: justify;
        margin-top: -12%;
}

/* IMAGE ET DESCRIPTION */
.pa_bloc_img_new {
        position: relative;
        width: 249px;
        height: 136px;
        overflow: hidden;
        margin: 10% auto 0;
  	transition: .5s all;
}

img.pa_img_new {
    	transition: .5s all;
}

.pa_bloc_img_new:hover .pa_img_new {
        margin-top: -136px;
        
}

.pa_contenu_img_new {
        font-family: 'Volkhov', serif;
        font-size: 12px;
        line-height: 1.5;
        padding: 5%;
        box-sizing: border-box;
        background: rgba(0,0,0,.2);
        height: 136px;
        overflow: auto;
}

/* NEWS */
.pa_news {
        width: 100%;
        height: 150px;
        padding: 6%;
        box-sizing: border-box;
        overflow: auto;
        background: rgba(0,0,0,.2);
        margin-top: -9.5%;
}

.pa_news span {
        background: #183d23;
        padding: 2%;
        margin: 0 2% 2% 0;
        display: inline-block;
        width: 20%;
        text-align: center;
}

.pa_news img {
    	padding: 0 0 0 2%;
}

/* TEAMS */
.pa_teams {
        width: 100%;
        margin: 5% 0;
        text-align: center;
}

.pa_teams div {
        display: inline-block;
        margin: 0 4%;
}

.pa_teams div img {
    	display: block;
}

/* STAFF */
.pa_staff {
        width: 100%;
        text-align: center;
}

.bloc_staff {
        position: relative;
        width: 134px;
        height: 74px;
        overflow: hidden;
        display: inline-block;
        margin: 2%;
}

.pa_staff_img {
    	transition: .5s all;
}

.bloc_staff:hover .pa_staff_img {
    	margin-top: -74px;
}

.bloc_staff:hover .bloc_staff_contenu {
        background: rgba(0,0,0,.2);
        height: 54px;
        padding: 10px 0;
        width: 134px;
}

.bloc_staff_contenu h4 {
        margin: 0;
        letter-spacing: 1px;
        font-size: 18px;
        font-weight: normal;
}

.bloc_staff_contenu h5 {
        margin: 0;
        font-family: times new roman;
        text-transform: lowercase;
        font-style: italic;
        letter-spacing: -1px;
        font-size: 20px;
}

.bloc_staff_contenu h5::before {
        background: url(https://i.imgur.com/uvFlIUJ.png);
        content: "";
        width: 10px;
        height: 18px;
        display: inline-block;
}

.bloc_staff_contenu a {
        display: block;
        color: #d9d9d9;
        font-weight: bold;
        letter-spacing: -1px;
        text-shadow: 1px 1px #183d23;
}

/* PREDEFINIS */
.pa_predef img {
        border: 1px solid #d9d9d9;
        padding: .5%;
        margin: 1%;
}

/* VOTES */
.pa_votes {
    	margin: 10% 0;
}

/* LIENS UTILES */
.pa_liens {
    	text-align: left;
}

.pa_liens a {
        display: inline-block;
        width: 47%;
        margin: 0;
        line-height: 2.3;
  	color: #d9d9d9;
}

.pa_liens a::before {
        display: inline-block;
        content: "";
        background: url(https://i.imgur.com/uvFlIUJ.png);
        width: 10px;
        height: 18px;
        margin: 0 2% 0 0;
}

/* PARTENAIRES */
.pa_partenaires {
        margin: -2.5% 0 2%;
        text-align: center;
        width: 100%;
        z-index: 3;
        position: relative;
}

.pa_partenaires img {
    	margin: 0 .5%;
}

/* CREDIT */
a.pa_credits {
        color: #f3f3f3;
        font-size: 9px;
        position: absolute;
        right: 2%;
        bottom: 6%;
}

Affichage > Généralités

<div class="page_accueil">
	             
	<h2>
		       Période jouée : Janvier - Février 1970       
	</h2>
	             
	<div class="gauche">
		               
		<h3>
			       <span>Contexte </span>      
		</h3>
		             
		<div class="pa_contexte">
			       1970, le monde magique tremble de nouveau. Après la chute de Grindelwald, un nouveau mage noir du nom de Lord Voldemort a révélé au grand jour ses intentions de prise de pouvoir et causé un accident de train, tuant et blessant des moldus. Cet acte qui prit de court le ministère, n’est que le premier d’une sombre série... Quel rôle allez-vous choisir dans ce monde en ébullition ?         
		</div>
		             
		<div class="pa_bloc_img_new">
			      <img src="https://i.imgur.com/cY9fGNf.jpg" class="pa_img_new" alt="" />       
			<div class="pa_contenu_img_new">
				       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in dapibus ipsum. Etiam aliquet lorem ut varius tincidunt. Nulla facilisi. Praesent non vehicula nibh. Nunc consequat sapien arcu, in luctus arcu maximus nec. Integer risus dolor, blandit id neque eget, lacinia congue lorem. Nunc purus tortor, rutrum ut ullamcorper varius, accumsan eu justo. Phasellus vel nibh et ante interdum porttitor. Mauris a felis dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In at faucibus tellus. Quisque ut nibh pulvinar, dictum turpis at, sodales quam. Ut pharetra molestie sapien in sollicitudin. Nunc tristique eros vel purus volutpat, a facilisis lacus molestie. Suspendisse auctor sem in ipsum hendrerit sollicitudin. Nulla facilisi.       
			</div>
			             
		</div>
		             
	</div>
	             
	<div class="milieu">
		               
		<h3>
			       <span> Daily Prophet  </span>     
		</h3>
		             
		<div class="pa_news">
			       <span>XX <img src="https://i.imgur.com/uvFlIUJ.png" alt="" /> XX</span> Je suis une nouveauté<br /><span>XX <img src="https://i.imgur.com/uvFlIUJ.png" alt="" /> XX</span> Je suis de toute beauté       
		</div>
		             
		<div class="pa_teams">
			             
			<div>
				       <img src="https://i.imgur.com/rf6ZHrH.png" alt="" />XX pts       
			</div>
			             
			<div>
				       <img src="https://i.imgur.com/K68WkUv.png" alt="" />XX pts       
			</div>
			             
			<div>
				       <img src="https://i.imgur.com/DsNIUD4.png" alt="" />XX pts       
			</div>
			             
			<div>
				       <img src="https://i.imgur.com/oKqMKBr.png" alt="" />XX pts       
			</div>
			             
		</div>
		               
		<h3>
			       <span> Le ministère  </span>     
		</h3>
		             
		<div class="pa_staff">
			             
			<div class="bloc_staff">
				      <img src="https://i.imgur.com/1Q5TvDP.jpg" class="pa_staff_img" alt="" />       
				<div class="bloc_staff_contenu">
					             
					<h4>
						       Pseudo       
					</h4>
					             
					<h5>
						       Rôle       
					</h5><a href="#">Contacter</a>       
				</div>
				             
			</div>
			             
			<div class="bloc_staff">
				      <img src="https://i.imgur.com/1Q5TvDP.jpg" class="pa_staff_img" alt="" />       
				<div class="bloc_staff_contenu">
					             
					<h4>
						       Pseudo       
					</h4>
					             
					<h5>
						       Rôle       
					</h5><a href="#">Contacter</a>       
				</div>
				             
			</div>
			             
			<div class="bloc_staff">
				      <img src="https://i.imgur.com/1Q5TvDP.jpg" class="pa_staff_img" alt="" />       
				<div class="bloc_staff_contenu">
					             
					<h4>
						       Pseudo       
					</h4>
					             
					<h5>
						       Rôle       
					</h5><a href="#">Contacter</a>       
				</div>
				             
			</div>
			             
			<div class="bloc_staff">
				      <img src="https://i.imgur.com/1Q5TvDP.jpg" class="pa_staff_img" alt="" />       
				<div class="bloc_staff_contenu">
					             
					<h4>
						       Pseudo       
					</h4>
					             
					<h5>
						       Rôle       
					</h5><a href="#">Contacter</a>       
				</div>
				             
			</div>
			               
		</div>
		             
	</div>
	             
	<div class="droite">
		             
		<h3 class="predef">
			      <span>On les cherche</span>    
			<div>
				    Sur la map du maraudeur    
			</div>
			           
		</h3>
		             
		<div class="pa_predef">
			       <a href="#"><img src="https://i.imgur.com/hZd4Poh.jpg" alt="" /></a><a href="#"><img src="https://i.imgur.com/hZd4Poh.jpg" alt="" /></a><a href="#"><img src="https://i.imgur.com/hZd4Poh.jpg" alt="" /></a><a href="#"><img src="https://i.imgur.com/hZd4Poh.jpg" alt="" /></a><a href="#"><img src="https://i.imgur.com/hZd4Poh.jpg" alt="" /></a><a href="#"><img src="https://i.imgur.com/hZd4Poh.jpg" alt="" /></a>       
		</div>
		             
		<div class="pa_votes">
			       <a href="#" target="_blank"><img src="https://i.imgur.com/DrDZikH.png" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/JHQ30n0.png" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/DrDZikH.png" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/JHQ30n0.png" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/DrDZikH.png" alt="" /></a>       
		</div>
		               
		<h3>
			       <span> Le GPS du sorcier  </span>     
		</h3>
		             
		<div class="pa_liens">
			       <a href="#">Contexte</a> <a href="#">Guide</a> <a href="#">Annexes monde</a> <a href="#">Annexes Poudlard</a> <a href="#">Bottin avatars</a> <a href="#">Partenariats</a> <a href="#">Questions</a>       
		</div>
		             
	</div>
	             
	<div class="clear">
		             
	</div>
	   
	<div class="infobulle araignee">
		      <img alt="" src="https://i.imgur.com/1bzap3M.png" />       
		<div>
			            
			<div class="fleche">
				   
			</div>
			            
			<div class="bouh">
				              Chui le mouflet d'Aragog, baisse les yeux !           
			</div>
			        
		</div>
		   
	</div>
	    <a target="_blank" href="http://ls-halloween.fr" class="pa_credits">Halloween</a>
</div>
<div class="pa_partenaires">
	       <a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a><a href="#" target="_blank"><img src="https://i.imgur.com/U0PotTt.jpg" alt="" /></a>
</div>

Codage index complet Morsmordre catégories Halloween Forumactif PHPBB2

Catégories en onglets. Les noms de catégories sont en 264*61px. L'image "No new" doit être enlevée, les images "New" et "Lock" sont en 35*149px. Penser à activer l'affichage des avatars dans les derniers messages. La description du forum est en hover, son image est en 365*125px.

CSS

/*********************************** CATEGORIES ***********************************/
a, a:hover {
  	text-decoration: none !important;
  	transition: all .5s;
  	color: #d9d9d9;
}

.clear {
  	clear: both;
}

.categories ::-webkit-scrollbar {
        background: #d9d9d9;
        width: 7px;
        height: 7px;
}

.categories ::-webkit-scrollbar-thumb {
        background: #183d23;
        border-radius: 27px;
}

/* BALAIS */
.infobulle.balais div {
        top: 102%;
        left: 70%;
}

.infobulle.balais img {
   	transform: rotate(-30deg);
        transition: .5s all;
}

.infobulle.balais:hover .balais_img {
        transform: rotate(10deg);
        transition: .5s all;
}

.infobulle.balais {
        float: right;
        margin-top: -1%;
        transition: .5s all;
}

.infobulle > div {
        left: 80px;
        opacity: 0;
        position: absolute;
        top: 0;
        transform: scale(0.3) rotate(-45deg);
        transition: all .3s linear;
        visibility: hidden;
}

.infobulle:hover > div {
        opacity: 1;
        visibility: visible;
  	transform: scale(1) rotate(0deg);
}

.bouh {
        background: #183d23;
        border-radius: 5px;
        color: #d9d9d9;
        padding: 5%;
        text-align: center;
        width: 200px;
        margin-top: -33px;
}

/* BOUTONS */
.boutons_categories a {
        font-family: 'Alegreya Sans SC', sans-serif;
        margin: 0 2% 0 0;
  	color: #d9d9d9;
        font-size: 12px;
}

.boutons_categories a::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background: url(https://i.imgur.com/JMQCncn.png);
        margin: 0 .5% 0 0;
}

.boutons_categories {
    	margin: 2% 0;
  	width: 100%;
  	box-sizing: border-box;
}

.boutons_categories.right {
  	text-align: right !important;
}

/* CATEGORIES */
#categories {
    	width: 980px;
  	color: #d9d9d9;
  	margin: 0 auto;
}

/* Mise en forme onglets */
.ongleto {
    cursor: pointer;
    display: inline-block;
}

#conteneur_onglets {
        display: none;
        text-align: center;
  	position: relative;
  	z-index: 2;
}

/* Fond des catégories */
.categorie {
        background: url(https://i.imgur.com/q46je9p.jpg);
        margin: -2% auto 0;
        position: relative;
        z-index: 1;
        padding: 0 0 2% 0;
  	font-family: 'Vollkorn', serif;
}

/* Titre catégories */
.secondarytitle h2 {
        background: url(https://i.imgur.com/f2Gmrxf.png) center no-repeat;
        padding: 5% 0;
        text-align: center;
        font-size: 35px;
        margin: 2% auto;
        display: block;
        font-family: times new roman;
        font-style: italic;
        text-transform: lowercase;
        letter-spacing: -2px;
  	color: #d9d9d9;
}
  
/* Forum */
.forum {
        box-sizing: border-box;
        height: 240px;
        margin: 2% auto;
        padding: 2% 0 0;
        position: relative;
        width: 90%;
        background: url(https://i.imgur.com/HEdlhsJ.png) no-repeat bottom right, rgba(0,0,0,.2);
}

/* Nom forum */
a.forumlink {
        display: block;
        font-family: Vollkorn, serif;
        font-size: 30px;
        font-weight: 400;
        margin: 0 auto 2%;
        text-align: center;
        text-transform: uppercase;
        width: 100%;
  	color: #d9d9d9 !important;
}

a.forumlink::before {
        content: "";
        display: inline-block;
        background: url(https://i.imgur.com/uvFlIUJ.png);
        width: 10px;
        height: 18px;
        margin: 0 2% 0 0;
}

/* Statut forum */
img.statut_forum {
        position: absolute;
        left: -2.8%;
  	top: 20%;
}

/* Blocs */
.forum_dernier {
        float: left;
        margin: 0 2%;
        width: 25%;
}

/* Avatar dernier posteur */
.avatar_dernier img {
        border-radius: 100px;
        display: block;
        height: 80px;
        margin: 0 auto 5%;
        object-fit: cover;
        width: 80px;
}

/* Dernier message */
.forum_dernier {
        float: left;
        margin: 0 2%;
        width: 25%;
        font-family: 'Alegreya Sans SC', sans-serif;
        text-align: center;
        font-size: 12px;
}

/* Description forum */
.forum_desc {
        width: 23%;
        position: absolute;
        left: 29%;
}

.description_forum {
        width: 365px;
        height: 125px;
        overflow: hidden;
  	position: relative;
}

img.description_forum_img {
        position: relative;
        z-index: 3;
        transition: 1s all;
}

.description_forum:hover .description_forum_img {
        margin-left: -365px;
        transition: 1s all;
}

.description_forum_contenu {
        box-sizing: border-box;
        height: 125px;
        overflow: auto;
        padding: 5%;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;
        font-size: 12px;
        text-align: justify;
}

/* Sous forum */
.sous_forum {
        float: right;
        margin: 0 3% 0 0;
        width: 22%;
        height: 125px;
        overflow: auto;
}

.sous_forum a {
        font-family: 'Alegreya Sans SC', sans-serif;
        display: block;
        font-size: 14px;
  	color: #d9d9d9;
        line-height: 1.8;
}

.sous_forum a::before {
        content: "";
        float: left;
        background: url(https://i.imgur.com/uvFlIUJ.png);
        width: 10px;
        height: 18px;
        margin: 0 3% 0 0;
}

/* Statistiques */
.sujets_messages {
        text-align: right;
        font-family: 'Alegreya Sans SC', sans-serif;
        font-size: 11px;
        letter-spacing: 1px;
        margin: 0 2% 0 0;
}

/* CREDIT */
a.cate_credits {
    position: absolute;
    color: #f9f9f9;
    right: 9%;
    text-transform: lowercase;
    font-size: 9px;
}

Index_box

<div class="boutons_categories">
  	 
 		<a id="nouveauxmess" href="{U_SEARCH_NEW}">
                  	{L_SEARCH_NEW}
  		</a>
  
  		<a id="mesmessages" href="{U_SEARCH_SELF}">
                  	{L_SEARCH_SELF}
  		</a>
 	
 
  	<a id="sansrep" href="{U_SEARCH_UNANSWERED}">
          	{L_SEARCH_UNANSWERED}
  	</a>
</div>

<div id="conteneur_categories">
		
          		
				<div class="categorie">
                                  	<div class="secondarytitle">
                                              <br />
                                              {catrow.tablehead.L_FORUM}
                                  	</div>
 			
                                          
 			
 			
 				
                        
 				<div class="forum">
                                  	<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
						{catrow.forumrow.FORUM_NAME}
                                  	</a>
                                  
                                  	<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 class="bloc_forum_dernier"></div>
                                          <div class="forum_dernier">
                                          	
            						<div class="avatar_dernier">
                                                          	{catrow.forumrow.avatar.LAST_POST_AVATAR}
                                          		</div>
           					
                                          	{catrow.forumrow.LAST_POST}
                                  	</div>
                                  
                                  	<div class="forum_desc">
                                          	{catrow.forumrow.FORUM_DESC}
                                  	</div>	
                                  
                                  	<div class="sous_forum">	
                                          	<span id="subforums">
                                                  	{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                          	</span>
                                          	<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>
                                  	</div>
                                  
                                  	<div class="clear">
                                  	</div>
                                  
                                  	<div class="sujets_messages">
                                          	{catrow.forumrow.POSTS} messages &
                                          	{catrow.forumrow.TOPICS} sujets
                                  	</div>
                                </div>
 			
 			
                        
 			
 
                        
          			
                                  <a href="http://ls-halloween" target="_blank" class="cate_credits">
                                    	Halloween
                                  </a>
                                  
                                  <div class="infobulle balais">
					<img alt="" src="https://i.imgur.com/vllauZM.png" class="balais_img" />     
					<div>		        
						<div class="bouh">
				            		MWOUHAHAHA T'ES TOMBE !        
						</div>
					</div>
				</div>
          			</div>

  	</div>
</div>

Index_body

Remplacer les lignes 66 à 89 par :

<div class="boutons_categories right">
  	
		<a id="marquerlus" href="{U_MARK_READ}">
                          {L_MARK_FORUMS_READ}
                </a>
	
  	
	<br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
	
  
  	<a href="{U_TODAY_ACTIVE}">
          	{L_TODAY_ACTIVE}
	</a>
  
  	<a id="posteursjour" href="{U_TODAY_POSTERS}">
          	{L_TODAY_POSTERS}
  	</a>
  
  	<a id="posteurs" href="{U_OVERALL_POSTERS}">
          	{L_OVERALL_POSTERS}
  	</a>
		
 	
		
			<a id="cookies" href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">
                          	{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
  			</a>
		
	
</div>

Descriptions des forums

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

Javascript

Dans Modules > Gestion des pages Javascript, commencer par activer le JS ("Activer le javascript > Oui"). Ensuite créer un nouveau code intitulé "Jeu d'onglets catégories" par exemple, et l'activer sur toutes les pages. On colle le code suivant (merci à Vic_le_faucheur de Never-Utopia pour l'explication) :

Codage index complet Morsmordre qui est en ligne Halloween Forumactif PHPBB2

CSS

/*********************************** QUI EST EN LIGNE ***********************************/
a, a:hover {
  	text-decoration: none !important;
  	transition: all .5s;
}

.clear {
  	clear: both;
}

.qui_est_en_ligne ::-webkit-scrollbar {
        background: #d9d9d9;
        width: 7px;
        height: 7px;
}

.qui_est_en_ligne ::-webkit-scrollbar-thumb {
        background: #183d23;
        border-radius: 27px;
}

.qui_est_en_ligne {
        background: url(https://i.imgur.com/6Xbjapd.png) no-repeat bottom left, url(https://i.imgur.com/q46je9p.jpg);
        font-family: 'Alegreya Sans SC', sans-serif;
        font-size: 14px;
        width: 100%;
  	color: #d9d9d9;
  	position: relative;
        padding: 0 0 5% 0;
}

.qui_est_en_ligne h2 {
        background: url(https://zupimages.net/up/18/17/dqnw.png) no-repeat center;
        display: block;
        margin: auto;
  	color: #d9d9d9;
        width: 367px;
        height: 122px;
}

/* GROUPES */
.groupes {
        width: 100%;
        text-align: center;
        margin: 2% 0;
}

.contenu_groupe {
        display: inline-block;
        position: relative;
        width: 130px;
        height: 52px;
  	margin: 0 .5%;
        overflow: hidden;
}

.bloc_groupes {
    	position: absolute;
}

.gryffondor_image, .serdaigle_image, .serpentard_image,  .poufsouffle_image, .poudlard_image, .ministere_image, .sorciers_image {
        width: 130px;
        height: 52px;
        position: absolute;
        content: "";
        margin: auto;
}

.gryffondor_image {background: url('https://zupimages.net/up/18/17/tohn.png');}
.serdaigle_image {background: url('https://zupimages.net/up/18/17/tpmg.png');}
.serpentard_image {background: url('https://zupimages.net/up/18/17/pmlv.png');}
.poufsouffle_image {background: url('https://zupimages.net/up/18/17/8soj.png');}
.poudlard_image {background: url('https://zupimages.net/up/18/17/3iv9.png');}
.ministere_image {background: url('https://zupimages.net/up/18/17/c7bx.png');}
.sorciers_image {background: url('https://zupimages.net/up/18/17/cptm.png');}

.gryffondor_couleur, .serdaigle_couleur, .serpentard_couleur, .poufsouffle_couleur, .poudlard_couleur, .ministere_couleur, .sorciers_couleur {
        content: "";
        height: 52px;
        margin-left: -130px;
        position: absolute;
        transition: .5s all;
        width: 130px;
}

.gryffondor_couleur {background: #AB2D29;}
.serdaigle_couleur {background: #5067ae;}
.serpentard_couleur {background: #568A25;}
.poufsouffle_couleur {background: #BFAF00;}
.poudlard_couleur {background: #1697A8;}
.ministere_couleur {background: #DB9214;}
.sorciers_couleur {background: #693B94;}

.contenu_groupe:hover .gryffondor_couleur, .contenu_groupe:hover .serdaigle_couleur, .contenu_groupe:hover .serpentard_couleur, .contenu_groupe:hover .poufsouffle_couleur, .contenu_groupe:hover .poudlard_couleur, .contenu_groupe:hover .ministere_couleur, .contenu_groupe:hover .sorciers_couleur {
        margin-left: 0;
        z-index: 2;
        position: relative;
        transition: .5s all;
}

.contenu_groupe a {
        position: relative;
        z-index: 4;
  	color: #d9d9d9;
        padding-top: 13%;
  	text-shadow: 1px 1px #000;
        display: block;
}

/* STATISTIQUES */
.statistiques {
        background: url(https://zupimages.net/up/18/17/f9m9.png);
        width: 100%;
        height: 245px;
        box-sizing: border-box;
        margin: 8% 0 0;
        font-size: 30px;
        text-align: center;
        padding: 5% 0;
  	text-shadow: 1px 1px #183d23;
}

.qeel_messages {
        float: left;
        width: 33%;
        font-family: 'times new roman'; sans-serif;
        font-size: 44px;
        font-style: italic;
        letter-spacing: -2px;
}

.qeel_dernier {
        float: left;
        width: 33.5%;
        font-family: 'times new roman'; sans-serif;
        font-size: 44px;
        font-style: italic;
        letter-spacing: -2px;
}

.qeel_dernier a {
    	display: block;
}

.qeel_sujets {
        width: 33%;
        float: left;
        font-family: 'times new roman'; sans-serif;
        font-size: 44px;
        font-style: italic;
        letter-spacing: -2px;
}

/* 24H */
.qeel_24 td.row1 {
    	background: transparent;
}

.qeel_24 td.row1 .gensmall {
    	font-size: 12px;
  	color: #d9d9d9;
}

.qeel_24 {
        width: 26%;
        background: rgba(0,0,0,.2);
        padding: 2%;
        height: 100px;
        overflow: auto;
        text-align: justify;
        float: left;
        font-size: 30px !important;
        margin: 2% 2% 2% 2.8%;
}

/* CONNECTES */
.qeel_en_ligne {
        float: left;
        width: 26%;
        margin: 2% 0;
        background: rgba(0,0,0,.2);
        padding: 2%;
        height: 100px;
        overflow: auto;
        font-size: 12px;
}

/* ANNIVERSAIRES */
.qeel_anniv {
        width: 26%;
        margin: 2%;
        padding: 2%;
        height: 100px;
        overflow: auto;
        font-size: 12px;
        text-align: justify;
  	float: left;
        background: rgba(0,0,0,.2);
}

.qeel_anniv td.row1 {
    	background: transparent;
}

.qeel_anniv td.row1 .gensmall {
    	font-size: 12px;
}

/* CREDIT */
a.qeel_credit {
        color: #d9d9d9;
        position: absolute;
        bottom: 2%;
        right: 2%;
        font-size: 9px;
}

Index_Body

Remplacer les lignes 136 à 184 par :

<div class="qui_est_en_ligne">
  	<h2>
  	</h2>
  
  	<div class="groupes">
          
          	<div class="contenu_groupe">
                  	<div class="bloc_groupes">
                          	<div class="gryffondor_image">
                  		</div>
                  		<div class="gryffondor_couleur">
                  		</div>
                  	</div>
                  	<a href="#">
                          	Gryffondor
                  	</a>
          	</div>
          
          	<div class="contenu_groupe">
                  	<div class="bloc_groupes">
                          	<div class="serdaigle_image">
                  		</div>
                  		<div class="serdaigle_couleur">
                  		</div>
                  	</div>
                  	<a href="#">
                          	Serdaigle
                  	</a>
          	</div>
          
          	<div class="contenu_groupe">
                  	<div class="bloc_groupes">
                          	<div class="serpentard_image">
                  		</div>
                  		<div class="serpentard_couleur">
                  		</div>
                  	</div>
                  	<a href="#">
                          	Serpentard
                  	</a>
          	</div>
          
          	<div class="contenu_groupe">
                  	<div class="bloc_groupes">
                          	<div class="poufsouffle_image">
                  		</div>
                  		<div class="poufsouffle_couleur">
                  		</div>
                  	</div>
                  	<a href="#">
                          	Poufsouffle
                  	</a>
          	</div>
          
          	<div class="contenu_groupe">
                  	<div class="bloc_groupes">
                          	<div class="poudlard_image">
                  		</div>
                  		<div class="poudlard_couleur">
                  		</div>
                  	</div>
                  	<a href="#">
                          	Poudlard
                  	</a>
          	</div>
          
          	<div class="contenu_groupe">
                  	<div class="bloc_groupes">
                          	<div class="ministere_image">
                  		</div>
                  		<div class="ministere_couleur">
                  		</div>
                  	</div>
                  	<a href="#">
                          	Ministère
                  	</a>
          	</div>
          
          	<div class="contenu_groupe">
                  	<div class="bloc_groupes">
                          	<div class="sorciers_image">
                  		</div>
                  		<div class="sorciers_couleur">
                  		</div>
                  	</div>
                  	<a href="#">
                          	Sorciers
                  	</a>
          	</div>
  	</div>
  
  	<div class="statistiques">
          	<div class="qeel_messages">
                  	<span id="matt">
                          	{TOTAL_USERS}
                	</span>
                  	<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"").replace(/membre enregistré/,"<br />Membres");</script> 
          	</div>
          
          	<div class="qeel_dernier">
                  	<span id="yosh">
                          	{NEWEST_USER}
                	</span>
                	<script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Dernier inscrit");</script>
          	</div>
          
          	<div class="qeel_sujets">
                  	<span id="bert">
                          	{TOTAL_POSTS}
                	</span>
                  	<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"").replace(/messages/,"<br />Messages");</script> 
          	</div>
          	
          	<div class="clear">
          	</div>
  	</div>
  
  	<div class="qeel_24" id="kaboum">
          	<table>
                  	{L_CONNECTED_MEMBERS}
          	</table>
          	<script type="text/javascript">jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 24 dernières heures : ','Chassés par les Détraqueurs ces dernières 24 heures<br />'));</script>
  	</div>
  
  	<div class="qeel_en_ligne" id="alpha">
          	{LOGGED_IN_USER_LIST}
          	<script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés :/,"Planqués dans les ruelles<br />");</script>
  	</div>
  
  	<div class="qeel_anniv">
          	<span id="celine">
                   	{TOTAL_USERS_ONLINE}
          	</span>
                <script type="text/javascript">document.getElementById('celine').innerHTML=document.getElementById('celine').innerHTML.replace(/Il y a en tout/,"Actuellement").replace(/utilisateur(s?) en ligne/,"âme$1 à tuer sans retenue").replace(/::/,"dont").replace(/Enregistré(s?)/,"fiché$1").replace(/Invisible(s?) et/,"utilisateur$1 de cape d'invisibilité & ").replace(/Invité(s?)/,"moldus");</script>
          
          	<table>
                  	{L_WHOSBIRTHDAY_TODAY}
          	</table>
  	</div>
  
  	<a href="http://ls-halloween" class="qeel_credit" target="_blank">
          	Halloween
  	</a>
  
  	<div class="clear">
  	</div>
</div>

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

#morsmordre #indexcomplet #forumactif #codage #libreservice

Halloween