Welcome

Halloween Index complets

Halloween

Halloween, LS codage Forumactif Index complets Index complet Halloween

Invision

Optimisé Le staff change au survol des ronds et les images de nouveautés défilent. Système d'onglet pour les groupes. Un header est également disponible. La maquette complète

Retour

Codage index complet Halloween accueil Halloween Forumactif

CSS

#ipbwrapper {
        padding: 0;
        width: 1000px;
  	background: rgba(57,50,51,.5);
}

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

.clear {
  	clear: both;
}

::-webkit-scrollbar {
        background: #38303b;
        height: 9px;
        width: 9px;
}

::-webkit-scrollbar-thumb {
        background-color: #be6233;
        border-radius: 10px;
        height: auto;
        width: 5px;
}

/****************************************************** TITRES ******************************************************/
.page_accueil h2 {
        background: url(https://i.imgur.com/aWOCeSV.png);
        padding: 7% 0;
        text-align: center;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 2.5em;
        letter-spacing: 2px;
        color: #ffeceb;
        font-style: italic;
}

.page_accueil h3 {
        text-align: center;
        text-transform: uppercase;
        font-style: italic;
        font-weight: normal;
        font-size: 2em;
        letter-spacing: -1px;
  	margin: 0;
}

.milieu h3 {
        text-align: left;
        margin: 0 0 1% 0;
}

/****************************************************** PAGE ACCUEIL ******************************************************/
.page_accueil {
        width: 1000px;
        background: url(https://i.imgur.com/wWGQ8if.jpg);
        margin: auto;
  	font-size: .8em;
  	color: #c3c3c3;
        font-family: 'Heebo', sans-serif;
        line-height: 1.5;
}

/* POSITIONS BLOCS */
.gauche {
        width: 30%;
        float: left;
        margin: 0 0 0 2%;
}

.milieu {
        float: left;
        width: 37%;
  	margin: 0 2%;
}

.droite {
        float: left;
        width: 25%;
}

/* ONGLETS STAFF */
.paonglet {
          display: inline-block;
          cursor: pointer;
}

.paonglets {
        color: #38323c;
        font-size: 5em;
        text-align: center;
        margin: -10% 0;
}
            
.paonglet_1 {
  	color: #be632e;
}
          
.contenu_paonglet {
        border: 1px solid #bc6432;
        display: none;
        margin: 2% auto 4%;
        width: 72.5%;
        text-align: center;
        padding: 1%;
  	position: relative;
}

.contenu_paonglet p {
        position: absolute;
        bottom: 10%;
        right: 0;
        background: #211f20;
        padding: 2%;
        width: 120px;
        text-align: left;
        font-style: italic;
        color: #bdbdbd;
        text-transform: uppercase;
        letter-spacing: -1px;
}

.contenu_paonglet img {
    	max-width: 100%;
}

/* INFORMATIONS */
.pa_informations {
        width: 100%;
        margin: auto;
        background: rgba(57,50,51,.5);
        padding: 8%;
        box-sizing: border-box;
        text-transform: uppercase;
        font-style: italic;
        text-align: justify;
        height: 150px;
        overflow: auto;
}

/* NOUVEAUTES */
.pa_news {
        width: 100%;
        background: rgba(57,50,51,.5);
        padding: 5%;
        box-sizing: border-box;
        overflow: auto;
  	text-align: left;
        height: 160px;
        line-height: 3;
        text-transform: uppercase;
        font-style: italic;
    	margin: 0 0 2.5% 0;
}

.pa_news a {
        display: inline-block;
        background: #be6233;
        color: #fff;
        letter-spacing: -1px;
        width: 50px;
        line-height: 2;
        text-align: center;
        margin: 0 0 0 2%;
}

/* SLIDER */
.slide, .slideshow {
        height: 183px;
        width: 362px;
}

.slideshow {
        margin: 0;
        overflow: hidden;
        position: relative;
}

.slideshow div {
        position: relative;
        top: 0;
        left: 0;
}
  
.slide {
        margin: auto;
        overflow: auto;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
}

/* LIENS UTILES */
.pa_liens_imp {
    	margin: 12% 0 0;
}

.pa_liens_imp a {
        display: inline-block;
        border-top: 2px solid #38323c;
        border-bottom: 2px solid #38323c;
        width: 34%;
        margin: 5%;
        padding: 3%;
        text-align: center;
        text-transform: uppercase;
        font-style: italic;
        color: #c3c3c3;
}

.pa_liens_imp a:hover {
  	color: #be6233;
}

/* PREDEFINIS */
a.predef1, a.predef2, a.predef3 {
        display: block;
        width: 212px;
        height: 36px;
        box-sizing: border-box;
        padding: 4% 5% 0;
        text-align: right;
        text-transform: uppercase;
        color: #c8c8c8;
        font-style: italic;
        margin: 5% 0 5% 21.5%;
}

a.predef1 {
        background: url(https://i.imgur.com/R8d0POU.jpg);
  	border-left: 5px solid #2e5984;
}

a.predef2 {
        background: url(https://i.imgur.com/prleOt9.jpg);
  	border-left: 5px solid #696825;
}

a.predef3 {
        background: url(https://i.imgur.com/jWY5oRd.jpg);
  	border-left: 5px solid #8b658c;
}

/* TOP SITES */
.pa_tops {
        text-align: center;
        margin: 10% 0 12%;
}

/* PARTENAIRES */
.pa_partenaires img {
        border: 1px solid #be6233;
        padding: .2%;
        margin: 0 .5%;
}
.pa_partenaires {
        width: 100%;
        text-align: center;
        padding: 3% 0;
}

a.credits {
    color: #d9d9d9;
    font-size: .8em;
    text-transform: lowercase;
    display: block;
    padding: 0 0 2%;
    font-style: italic;
    font-family: Times new roamn;
    font-weight: 100;
}

HTML

<div class="page_accueil">
	               
	<h2>
		        Jack Skelington te salue        
	</h2>
	               
	<div class="gauche">
		         
		<h3>
			     Staff     
		</h3>
		       <script type="text/javascript">
            	//
            	</script>                                               
		<div class="contenu_paonglets">
			                                 
			<div id="contenu_paonglet_staff1" class="contenu_paonglet">
				         <a href="#"><img src="https://i.imgur.com/p9TgJqn.jpg" /></a>    
				<p style="">
					    Halloween    
				</p><a href="#"></a>        
			</div>
			                                  
			<div id="contenu_paonglet_staff2" class="contenu_paonglet">
				         <a href="#"><img src="https://i.imgur.com/CBCEfF9.jpg" /></a>    
				<p style="">
					    Louis XIV    
				</p><a href="#"></a>      
			</div>
			                                  
			<div id="contenu_paonglet_staff3" class="contenu_paonglet">
				         <a href="#"><img src="https://i.imgur.com/p9TgJqn.jpg" /></a>    
				<p style="">
					    Halloween    
				</p><a href="#"></a>       
			</div>
			                           
		</div>
		           
		<div class="paonglets">
			                         <span onmouseover="javascript:change_paonglet('staff1');" id="paonglet_staff1" class="paonglet_0 paonglet">                           •                 </span>                                    <span onmouseover="javascript:change_paonglet('staff2');" id="paonglet_staff2" class="paonglet_0 paonglet">                          •</span>                                    <span onmouseover="javascript:change_paonglet('staff3');" id="paonglet_staff3" class="paonglet_0 paonglet">                           •                  </span>         
		</div>
		                            <script type="text/javascript">
            	//
            	</script>       
		<div class="pa_informations">
			     Type d'avatar etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices ornare nisl, vitae bibendum augue viverra nec. Nullam sodales non metus ut laoreet. Nunc faucibus congue felis, pretium tempor diam pellentesque eu. Nunc vestibulum aliquam convallis. Fusce ut vestibulum tortor. Fusce vel sodales sem. Donec nec lacus vitae eros tincidunt mattis.     
		</div>
		           
	</div>
	              
	<div class="milieu">
		         
		<h3>
			     <img src="https://i.imgur.com/5Qs7M9O.png" alt="" />Nouveautés     
		</h3>
		         
		<div class="pa_news">
			     • News#1 : Blablabla <a href="#">Plus</a><br />• News#2 : Blablabla <a href="#">Plus</a><br />• News#3 : Blablabla <a href="#">Plus</a>     
		</div>
		           
		                     
		<div id="slideshow" class="slideshow">
			                                                       
			<div id="slideshow-container">
				                                                                 
				<div class="slide">
					     <a target="_blank" href="#">               <img src="https://i.imgur.com/VoaBlkF.jpg" alt="new1" /></a>                                   
				</div>
				                                                                     
				<div class="slide">
					     <a target="_blank" href="#">               <img src="https://i.imgur.com/VoaBlkF.jpg" alt="new1" /></a>                                             
				</div>
				                                                                         
				<div class="slide">
					     <a target="_blank" href="#">               <img src="https://i.imgur.com/VoaBlkF.jpg" alt="new1" /></a>                                                
				</div>
				                                                                                                   
				                            
			</div>
			                                            
		</div>
		         
	</div>
	         
	<div class="droite">
		         
		<div class="pa_liens_imp">
			     <a href="#">Lien 1</a><a href="#">Lien 2</a><a href="#">Lien 3</a><a href="#">Lien 4</a>     
		</div>
		        
		<div class="pa_tops">
			  <a href="#" target="_blank"><img src="https://i.imgur.com/xortu6P.png" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/xortu6P.png" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/xortu6P.png" alt="" /></a>  
		</div>
		   <a href="#" class="predef1">Nom perso</a><a href="#" class="predef2">Nom perso</a><a href="#" class="predef3">Nom perso</a>     
	</div>
	           
	<div class="clear">
		               
	</div>
	         
	<div class="pa_partenaires">
		     <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a> <a href="#"><img src="https://i.imgur.com/QVFWqog.jpg" /></a>     
	</div>
	 <a class="credits" target="_blank" href="http://ls-halloween.fr/">Halloween</a>
</div>

Codage index complet Halloween catégories Halloween Forumactif PHPBB2

CSS

#ipbwrapper {
        padding: 0;
        width: 1000px;
  	background: rgba(57,50,51,.5);
}

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

.clear {
  	clear: both;
}

::-webkit-scrollbar {
        background: #38303b;
        height: 9px;
        width: 9px;
}

::-webkit-scrollbar-thumb {
        background-color: #be6233;
        border-radius: 10px;
        height: auto;
        width: 5px;
}

/****************************************************** TITRES ******************************************************/
.titre_categories h2 {
        background: url(https://i.imgur.com/aWOCeSV.png);
        padding: 7% 0;
        text-align: center;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 2.5em;
        letter-spacing: 2px;
        color: #ffeceb;
        font-style: italic;
}

/****************************************************** CATEGORIES ******************************************************/
/* LIENS UTILES */
.liens_utiles {
  	text-align: center;
  	color: #c3c3c3;
        font-family: 'Heebo', sans-serif;
        line-height: 1.5;
        font-size: .8em;
}

.liens_utiles a {
        display: inline-block;
        background: #39313c;
        padding: 1%;
        text-align: center;
        color: #fff;
        margin: 4% 2%;
        text-transform: uppercase;
        font-size: 9px;
}

.liens_utiles a:hover {
  	background: #c1662f;
}

/* FONDS */
.fond_categories {
        background: url(https://i.imgur.com/wWGQ8if.jpg);
        width: 980px;
        margin: 2% auto;
  	color: #c3c3c3;
        font-family: 'Heebo', sans-serif;
        line-height: 1.5;
        font-size: .8em;
}

.forum {
        background: url(https://i.imgur.com/LjAwlzH.jpg);
        width: 98%;
        margin: 2% auto;
        height: 203px;
  	position: relative;
}

/* DERNIER MESSAGE */
.dernier_message {
        border: 1px solid #cf7b3a;
        float: left;
        width: 20%;
        padding: .5%;
        height: 160px;
        margin: 1.8% 2% 1.8% 15%;
  	position: relative;
  	z-index: 2;
}

.avatar_dernier {
        position: relative;
        z-index: 3;
        height: 160px;
}

.avatar_dernier:hover {
  	z-index: 2;
}

.avatar_dernier img {
        width: 100%;
        object-fit: cover;
        height: 160px;
}

.txt_avatar_dernier {
        position: absolute;
        right: 0;
        bottom: 17%;
        background: #242122;
        padding: 3% 15% 3% 5%;
        text-transform: uppercase;
        font-size: .8em;
        font-style: italic;
}

.contenu_dernier_message {
        background: rgba(39,35,37,.9);
        height: 163px;
        position: absolute;
        top: 1%;
        width: 192px;
        z-index: 2;
        box-sizing: border-box;
        font-size: 1.2em;
        text-transform: uppercase;
        font-style: italic;
        text-align: center;
        letter-spacing: -1px;
        line-height: 2;
        padding-top: 18%;
}

.contenu_dernier_message a {
    	color: #b0662d !important;
}

.contenu_dernier_message:hover {
    	z-index: 4;
}

/* BLOC NOM FORUM ET DESCRIPTION */
.bloc_forum_desc {
        float: left;
        width: 35%;
}

/* Titre forum */
a.forumtitle {
        margin: 3% 0 3% 10%;
        display: block;
        text-transform: uppercase;
        font-style: italic;
        font-size: 1.8em;
        color: #9b9b9b;
        letter-spacing: -2px;
}

/* Position image de description */
.forum-desc img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
}

/* Description */
.forum-desc {
        font-style: italic;
        text-transform: uppercase;
        line-height: 1.2;
        font-size: .8em;
        width: 95%;
        height: 135px;
        overflow: auto;
        text-align: justify;
        padding: 0 5% 0 0;
}

/* IMAGES NEW NO NEW LOCK */
img.icon_forum {
    	margin: 0 2%;
  	float: left;
}

/* BLOC STATS ET SOUS FORUM */
.stats_sf {
        float: left;
        width: 19%;
}

/* Statistiques */
.statistiques_forum {
        display: inline-block;
        color: #999999;
        font-style: italic;
        font-size: 2em;
        text-align: center;
        width: 50%;
        margin: 5% 0 0 0;
}

/* Sous forum */
.sous_forum a {
        display: block;
        text-align: center;
        border-top: 2px solid #39323d;
        border-bottom: 2px solid #39323d;
        padding: 2%;
        margin: 5% 0;
        color: #9a9a9a;
        text-transform: uppercase;
        font-style: italic;
        letter-spacing: 2px;
        font-size: .8em;
}

.sous_forum {
        width: 95%;
        padding: 0 5% 0 0;
        height: 150px;
        overflow: auto;
}

.sous_forum a:hover {
        background: #be6233;
        color: #fff;
  	transition: .5s;
        font-style: normal;
        border-top: 2px solid #be6233;
        border-bottom: 2px solid #be6233;
}

Index_box

<div class="borderwrap">
		<div class="titre_categories">
			{catrow.tablehead.L_FORUM}
          	</div>

<div class="forum">
                  	<div class="dernier_message">
                          	<div class="avatar_dernier">
                                  	
                        			{catrow.forumrow.avatar.LAST_POST_AVATAR}
                        		
                                  	<div class="txt_avatar_dernier">
                                          	Dernier message
                                  	</div>
                          	</div>
                          	
                          	<div class="contenu_dernier_message">
                                  	
							<a href="{catrow.forumrow.U_LATEST_TOPIC}">
                                                          	{catrow.forumrow.LATEST_TOPIC_NAME}
                                  			</a><br />
					
					{catrow.forumrow.USER_LAST_POST}
                          	</div>
                  	</div>
                  
                  	<div class="bloc_forum_desc">
                          	<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                                  	{catrow.forumrow.FORUM_NAME}
                          	</a>
                          	<div class="forum-desc">
                                  	{catrow.forumrow.FORUM_DESC}
                          	</div>
                  	</div>
                  
                  	<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icon_forum" />
                  
                  	<div class="stats_sf">
                          	<div class="statistiques_forum">
                                  	{catrow.forumrow.TOPICS} S.
                          	</div>
				<div class="statistiques_forum">
                                  	{catrow.forumrow.POSTS} M.
                          	</div>
                          	<div class="sous_forum" id="subforums">
                                  	{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                          	</div>
                          	<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>
                  	</div>
                  
                  	<div class="clear">
                  	</div>
                  
          	</div>

</div>
		<br />
	
 
 <a class="credits" style="text-align: center;" href="http://ls-halloween.fr/" target="_blank">Halloween</a>
</div>

<div class="liens_utiles">
  	
		<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">
                  	{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
  		</a>
	
		
 	
		<a href="{U_MARK_READ}">
                  	{L_MARK_FORUMS_READ}
  		</a>
	
</div>

L'image de description est en 350*115px, les images "New", "No new" et "Lock" en 105*20px. L'image à droite correspond à l'avatar du dernier posteur.

Codage index complet Halloween qui est en ligne Halloween Forumactif PHPBB2

CSS

#ipbwrapper {
        padding: 0;
        width: 1000px;
  	background: rgba(57,50,51,.5);
}

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

.clear {
  	clear: both;
}

::-webkit-scrollbar {
        background: #38303b;
        height: 9px;
        width: 9px;
}

::-webkit-scrollbar-thumb {
        background-color: #be6233;
        border-radius: 10px;
        height: auto;
        width: 5px;
}

.titre_qeel {
        background: url(https://i.imgur.com/aWOCeSV.png);
        padding: 7% 0;
        text-align: center;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 2.5em;
        letter-spacing: 2px;
        color: #ffeceb;
        font-style: italic;
}

/****************************************************** QUI EST EN LIGNE ******************************************************/
/* FOND QEEL */
.qeel {
        width: 980px;
        margin: auto;
        background: url(https://i.imgur.com/wWGQ8if.jpg);
  	color: #c3c3c3;
        font-family: 'Heebo', sans-serif;
        line-height: 1.5;
        font-size: .8em;
}

/* BLOC GAUCHE */
.qeel_gauche {
        float: left;
        width: 30%;
        margin: 2%;
}

.qeel_g_1 {
  	float: left;
}

.qeel_g_2 {
        float: right;
        margin: 0 6%;
}

/* Membres et messages */
div#membres, div#messages {
        border-top: 2px solid #383442;
        border-bottom: 2px solid #383442;
        padding: 2%;
        margin: 5% auto;
        text-align: center;
        text-transform: uppercase;
        font-style: italic;
        width: 150px;
}

/* Dernier inscrit */
.dernier_inscrit {
        border: 1px solid #e78c36;
        width: 200px;
        height: 150px;
        padding: 1%;
        box-sizing: border-box;
        position: relative;
        margin: auto;
}

.dernier_inscrit img {
        width: 100%;
        height: 140px;
        object-fit: cover;
}

.qeel_pseudo_dernier {
        background: #242122;
        bottom: 17%;
        font-size: .8em;
        font-style: italic;
        padding: 3% 40% 3% 5%;
        position: absolute;
        right: 0;
        text-transform: uppercase;
}

/* GROUPES */
.qeelonglet {
        cursor: pointer;
        display: block;
}
            
.contenu_qeelonglet {
        display: none;
}

.contenu_qeelonglets {
        width: 100%;
        height: 290px;
}

.contenu_qeelonglets span {
        background: rgba(56,52,66,.9);
        box-sizing: border-box;
        color: #e78c36;
        font-size: 1.5em;
        font-style: italic;
        letter-spacing: -2px;
        padding: 5% 0 5% 10%;
        text-transform: uppercase;
        width: 100%;
        margin-top: -19.5%;
        display: block;
        position: relative;
}

/* Anniversaires */
.anniversaires {
        background: url(https://i.imgur.com/LjAwlzH.jpg);
        width: 100%;
        box-sizing: border-box;
        padding: 5%;
        text-transform: uppercase;
        font-style: italic;
        margin: 10% 0;
  	letter-spacing: -1px;
  	height: 95px;
}

/* BLOC MILIEU */
.qeel_milieu {
        float: left;
        width: 26%;
  	margin: 2% 0 0 0;
}

/* Bouton Discord */
a.discord {
        display: block;
        text-align: center;
        margin: 5% 0;
}

/* QEEL DROITE */
.qeel_droite {
        float: left;
        margin: 2%;
        width: 35%;
}

div#connectes, .qeel_24, .qeel_credits {
    background: url(https://i.imgur.com/LjAwlzH.jpg);
    box-sizing: border-box;
    font-style: italic;
    letter-spacing: -1px;
    padding: 5%;
    text-transform: uppercase;
    width: 100%;
    height: 120px;
    overflow: auto;
 text-align: justify;
}

.qeel_24 {
    margin: 5% 0;
    height: 100px;
}

.qeel_credits {
    height: auto;
}

.qeel_credits a {
    color: #e78c36;
}

/* PARTENAIRES */
.qeel_partenaires img {
        border: 1px solid #be6233;
        padding: .2%;
        margin: 0 .5%;
}

.qeel_partenaires {
        width: 100%;
        text-align: center;
        padding: 3% 0;
}

Index_Body

{JAVASCRIPT}

<div>
	
		<div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>

<p>{message_admin_index.message_admin_txt.MES_TXT}</p>
	
	</div>

<div class="borderwrap module">
	<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
		<div class="box-content ipbform user_login_form center" style="padding:5px 0;">
			<label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label>  
			<label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label>  
			<label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
			{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
            
            
            <div class="mt10">
                <div class="social_btn">
                    
                    <div class="fb-login-button"></div>
                    
                    
                    <div class="ti-connect"></div>
                    
                </div>
            </div>
            
		</div>
	</form>
</div>
 <br />

{CHATBOX_TOP}

{BOARD_INDEX}

<div id="fo_stat" class="borderwrap qeel">
  	<div class="titre_qeel">
          	Statistiques
  	</div>
  	
  	<div class="qeel_gauche">
          	<div class="qeel_g_1">
          		<div id="membres">
                  		{TOTAL_USERS}
          		</div>
          		<div id="messages">
                  		{TOTAL_POSTS}
          		</div>
          		<div class="dernier_inscrit">
                 	 	<span id="avatar_dernier_membre"></span>
                 	 	<span id="dernier_membre" class="qeel_pseudo_dernier">{NEWEST_USER}</span>
          		</div>
          	</div>
          	<div class="qeel_g_2">
                          
          	<script type="text/javascript">
            	//
            	</script>
          
          	<div class="qeelonglets">
                	<span class="qeelonglet_0 qeelonglet" id="qeelonglet_g1" onmouseover="javascript:change_qeelonglet('g1');">
                          	<img src="https://i.imgur.com/AM2n5mq.png" alt="" />
                  	</span>
                  
                	<span class="qeelonglet_0 qeelonglet" id="qeelonglet_g2" onmouseover="javascript:change_qeelonglet('g2');">
                          	<img src="https://i.imgur.com/4GivRCI.png" alt="" />
                  	</span>
                  
                	<span class="qeelonglet_0 qeelonglet" id="qeelonglet_g3" onmouseover="javascript:change_qeelonglet('g3');">
                          	<img src="https://i.imgur.com/YMezyvU.png" alt="" />
                  	</span>
                  
                  	<span class="qeelonglet_0 qeelonglet" id="qeelonglet_g4" onmouseover="javascript:change_qeelonglet('g4');">
                          	<img src="https://i.imgur.com/NOGexKr.png" alt="" />
                  	</span>
		</div>
          
          	</div>
          
          	<div class="clear">
          	</div>
          	    
          	<div class="anniversaires">
                  	<table class="trans">
                          	<span id="anniv">
                      	            	{L_WHOSBIRTHDAY_TODAY}
                          	</span>
                     	</table>
          	</div>
  	</div>
  
  	<div class="qeel_milieu">
          	<div class="contenu_qeelonglets">
                	<div class="contenu_qeelonglet" id="contenu_qeelonglet_g1">  
                          	<img src="https://i.imgur.com/PauAkP1.jpg" alt="" />
                          	<span>Nom du groupe 1</span>
			</div>

<div class="contenu_qeelonglet" id="contenu_qeelonglet_g2">
				<img src="https://i.imgur.com/PauAkP1.jpg" alt="" />
                          	<span>Nom du groupe 2</span>
			</div>

<div class="contenu_qeelonglet" id="contenu_qeelonglet_g3">
				<img src="https://i.imgur.com/PauAkP1.jpg" alt="" />
                          	<span>Nom du groupe 3</span>
			</div>
                  
                  	<div class="contenu_qeelonglet" id="contenu_qeelonglet_g4">
				<img src="https://i.imgur.com/PauAkP1.jpg" alt="" />
                          	<span>Nom du groupe 4</span>
			</div>
          	</div>
          	<script type="text/javascript">
            	//
            	</script>
          
          	<a href="#" class="discord" target="_blank">
                  	<img src="https://i.imgur.com/BXofVF8.png" alt="" />
          	</a>
  	</div>
  
  	<div class="qeel_droite">
          	<div class="qeel_en_ligne" id="connectes">
                  	{LOGGED_IN_USER_LIST}
                </div>
                <div class="qeel_24">
                  	<table id="kaboum">
                          	{L_CONNECTED_MEMBERS}
                  	</table>
          	</div>
          	<div class="qeel_credits">
                  	Merci à X pour l'idée originale, la rédaction des textes et la création du forum. Design par X, codage par <a target="_blank" href="http://www.ls-halloween.fr/">Halloween</a>. Etc.
          	</div>
  	</div>
  
  	<div class="clear">
  	</div>
  
  	<div class="qeel_partenaires">
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
          	<a href="#" target="_blank"><img alt="" src="https://i.imgur.com/QVFWqog.jpg" /></a>
  	</div>
  
  
  
<script type="text/javascript">document.getElementById('membres').innerHTML=document.getElementById('membres').innerHTML.replace(/Nous avons/,"").replace(/membres enregistrés/,"membres");</script>
<script type="text/javascript">document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de/,"").replace(/messages/,"lamentations");</script>
<script type="text/javascript">document.getElementById('anniv').parentNode.innerHTML=document.getElementById('anniv').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Dansons autour du bûcher ! Aujourd'hui c'est l'anniversaire de");</script>
<script type="text/javascript">document.getElementById('dernier_membre').innerHTML=document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");</script>
<script type="text/javascript">document.getElementById('connectes').innerHTML=document.getElementById('connectes').innerHTML.replace(/Utilisateurs enregistrés :/,"Les braves qui foulent cette terre sont");</script>
<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 : ','Ils se sont pointés ces 24 dernières heures'));</script>
 
</div>

<br />
{CHATBOX_BOTTOM}

<div class="borderwrap module">
	<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
		<div class="box-content ipbform user_login_form center" style="padding:5px 0;">
			<label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label>  
			<label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label>  
			<label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
			{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
            
            <div class="mt10">
                <div class="social_btn">
                    
                    <div class="fb-login-button"></div>
                    
                    
                    <div class="ti-connect"></div>
                    
                </div>
            </div>
            
		</div>
	</form>
</div>

{AUTO_DST}

Profil_view_body

Entourer "{AVATAR_IMG}" par un span :

Pour ajouter la police "Heebo"

Ajouter ceci avant "{T_HEAD_STYLESHEET}" dans le template Overall_header

Créer un premier code javascript

Modules → Gestion des codes Javascript → Nouveau → "Slider accueil" à afficher sur l'accueil uniquement

$(function () {
    //VARIABLES MODIFIABLES
    var delaiSwitch    = 5000;                    // Délai (en ms) d'affichage d'un slide
    var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
    var direction      = 'left';                  // Sens (left ou right) du défilement
    var idSlideshow    = '#slideshow';            // ID du slideshow
    var idContainer    = '#slideshow-container';  // ID du container
  
    //VARIABLES SYSTEME
    var slideshowWidth  = parseInt($(idSlideshow).css('width'));
    var slideshowHeight  = parseInt($(idSlideshow).css('height'));
    var nbSlides        = $(idContainer+' > .slide').length;
  
    //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
    $(idContainer).css('width', slideshowWidth*nbSlides+'px');

//REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
    if(direction==='right') {
        var decalageLeft = -slideshowWidth*(nbSlides-1);
        $(idContainer).css('left', decalageLeft+'px');
      
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).prepend(el);
        }, this);
    } else {
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).append(el);
        }, this);
    }
  
    //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
    $(idSlideshow+' img').css('max-width', slideshowWidth);
    $(idSlideshow+' img').css('max-height', slideshowHeight);
  
    //LANCEMENT DE L'ANIMATION
    setInterval(function() {
        slideshow()
    }, delaiSwitch);
  
    //FONCTION DE DEFILEMENT
    function slideshow() {
        var compteur = 0;      // Compte les slides ayant bougé
      
        if(direction==='right') {
            $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
                compteur++;
              
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:last').remove();
                    $(idContainer).prepend(el);
                    $(idContainer+' > .slide').css('left', '0');
                  
                    compteur = 0;
                }
            });
        } else {
            $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
                compteur++;
              
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:first').remove();
                    $(idContainer).append(el);

$(idContainer+' > .slide').css('left', '0');
                  
                    compteur = 0;
                }
            });
        }      
    }
});

Créer un second code javascript

Modules → Gestion des codes Javascript → Nouveau → "Avatar dernier inscrit" à afficher sur l'accueil uniquement

Télécharger le CSS complet

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

#halloween #indexcomplet #forumactif #codage #libreservice

Halloween