Welcome

Halloween Index complets

Protego

Halloween, LS codage Forumactif Index complets Index complet Protego

Invision

Optimisé Des fiches administratives et de présentations sont également disponibles. Le staff s'affiche grâce à un jeu d'onglet (changement au survol des cercles). Maquette par Ofty / Davienciarte La maquette complète

Retour

Codage index complet Protego accueil Halloween Forumactif

CSS

/******************************************************************** PAGE ACCUEIL ********************************************************************/
.page_accueil {
    background: #fff;
    width: 100%;
    margin: 0 0 2% 0;
}

/* COLONNE DE GAUCHE */
.pa_gauche {
    float: left;
    width: 27%;
    margin: 1% 2% 1% 1%;
}

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

.paonglet {
    cursor: pointer;
    display: inline-block;
    color: #383538;
    font-size: 50px;
}
            
.paonglet_0 {}
            
.paonglet_1 {
    color: #513243;
}
          
.contenu_paonglet {
    display: none;
    height: 120px;
}

/* Image */
.contenu_paonglet img {
    background: #dbdede;
    padding: 2%;
    border: 1px solid #bdbebf;
    float: left;
    margin: 0 2% 0 0;
}

/* Pseudo */
.contenu_paonglet h2 {
    color: #373437;
    text-transform: uppercase;
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
    font-family: 'Abril Fatface', cursive;
    padding: 0;
    height: 68px;
}

/* Bloc statut et liens */
.staff_statut {
    background: #dbdede;
    padding: 2%;
    border: 1px solid #bdbebf;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    display: flow-root;
}

.staff_statut a:hover {
    color: #513243 !important;
}

/* Nouveautes */
.pa_news {
    background: #383538;
    padding: 5%;
    width: 100%;
    height: 250px;
    overflow: auto;
    box-sizing: border-box;
}

.pa_news div {
    display: inline-block;
    padding: 2%;
    background: #d49865;
    color: #fff;
    font-weight: bold;
}

.pa_news div:nth-child(2n) {
    background: #e3e6e6;
    color: #000;
}

.pa_news a {
    text-transform: uppercase;
    color: #d0cfd0 !important;
    font-weight: bold;
    margin: 0 0 0 2%;
}

/* MILIEU */
.pa_milieu {
    float: left;
    width: 37%;
    margin: 1% 0;
}

/* Titre bloc pour les nouveaux */
.pa_liens_nouveaux h2 {
    color: #322f32;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 20px;
    font-family: 'Abril Fatface', cursive;
}

/* Barre nouveaux */
.barre_nouveau {
    background: #383538;
    width: 90%;
    height: 5px;
    margin: 2% 0 2% auto;
}

/* Liens nouveaux */
.pa_liens_nouveaux a {
    display: inline-block;
    background: #a6a5a7;
    color: #fff !important;
    text-transform: uppercase;
    text-align: center;
    padding: 1.45%;
    margin: 1%;
    width: 27.8%;
    font-size: 10px;
}

.pa_liens_nouveaux a:nth-child(2n) {
    background: #513243;
}

/* Maisons */
.pa_maisons {
    background: url(https://i.imgur.com/3YNdTo3.png) center no-repeat #242025;
    color: #d0cfd0;
    font-size: 10px;
    font-weight: 700;
    margin: 3% 0;
    padding: 11.5% 0;
    text-align: center;
    text-transform: uppercase;
}

.pa_points {
    display: inline-block;
    margin: 0 2%;
}

.pa_points img {
    display: block;  
    transition: .5s;
}

.pa_points img:hover {
    transform: rotate(20deg);
    transition: .5s;
}

/* BLOC DROITE */
.pa_droite {
    float: left;
    width: 26%;
    margin: 1% 1% 1% 2%;
    background: #383538;
    padding: 2%;
    color: #e0e0e0;
    line-height: 1.5;
    text-align: justify;
    height: 360px;
}

.pa_droite p {
    width: 95%;
    margin: auto;
    height: 357px;
    overflow: auto;
    padding: 0 5% 0 0;
}

HTML

<div class="page_accueil">
	                                                            
	<div class="pa_gauche">
		                                                                                                     
		<div class="contenu_paonglets">
			                                                                         
			<div id="contenu_paonglet_staff1" class="contenu_paonglet">
				                                                    <img src="https://i62.servimg.com/u/f62/19/81/58/70/hh10.png" />                             
				<h2>
					                            Andrew O'Sullivan                          
				</h2>
				                                                       
				<div class="staff_statut">
					                            Administrateur<br /><a href="http://protego.forumactif.com/privmsg?mode=post&u=4">MP</a> | <a href="http://protego.forumactif.com/u4">Profil</a>                            
				</div>
				                                                         
			</div>
			                                                                          
			<div id="contenu_paonglet_staff2" class="contenu_paonglet">
				                             <img src="https://i62.servimg.com/u/f62/19/81/58/70/untitl10.png" />                             
				<h2>
					                            Alice Green                            
				</h2>
				                                                       
				<div class="staff_statut">
					                            Administratrice<br /><a href="http://protego.forumactif.com/privmsg?mode=post&u=3">MP</a> | <a href="http://protego.forumactif.com/u3">Profil</a>                            
				</div>
				                                                         
			</div>
			                                                                          
			<div id="contenu_paonglet_staff3" class="contenu_paonglet">
				                             <img src="https://www.zupimages.net/up/18/16/yxwx.jpg" />                             
				<h2>
					                            Lacey Woodley                            
				</h2>
				                                                       
				<div class="staff_statut">
					                            Administratrice<br /><a href="http://protego.forumactif.com/privmsg?mode=post&u=12">MP</a> | <a href="http://protego.forumactif.com/u12">Profil</a>                            
				</div>
				                                                         
			</div>
			                                                                                   
			<div id="contenu_paonglet_staff4" class="contenu_paonglet">
				                             <img src="https://www.zupimages.net/up/18/16/5363.jpg" />                             
				<h2>
					                            Alistair Madverier                            
				</h2>
				                                                       
				<div class="staff_statut">
					                            Modérateur responsable<br /><a href="http://protego.forumactif.com/privmsg?mode=post&u=9">MP</a> | <a href="http://protego.forumactif.com/u9">Profil</a>                            
				</div>
				                                                         
			</div>
			                                                                   
		</div>
		                                         <script type="text/javascript">
            	//
            	</script>                                         
		<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>                                      <span onmouseover="javascript:change_paonglet('staff4');" id="paonglet_staff4" class="paonglet_0 paonglet">                           •                    </span>                             
		</div>
		                                                 <script type="text/javascript">
            	//
            	</script>                                       
		<div class="pa_news">
			                                                                   
			<div>
				                            18.02                            
			</div>
			                             <a href="#">Ouverture du forum</a><br />                                                                                    
		</div>
		               
	</div>
	                                                            
	<div class="pa_milieu">
		                                                                
		<div class="pa_liens_nouveaux">
			                                                                    
			<h2>
				                            Pour les nouveaux                            
			</h2>
			                                                                    
			<div class="barre_nouveau">
				                                                     
			</div>
			                                        <a href="http://protego.forumactif.com/t25-comment-faire-sa-presentation">Faire sa présentation</a>            <a href="http://protego.forumactif.com/t40-ouvrir-son-compte-gringott-s">Ouvrir un compte Gringott's</a>            <a href="http://protego.forumactif.com/t37-obtenir-votre-premiere-baguette-magique#39">Acheter sa première baguette</a>            <a href="http://protego.forumactif.com/f64-guide-de-l-apprenti">Guide de l'apprenti sorcier</a>            <a href="http://protego.forumactif.com/t38-grimoire-des-sortileges">Grimoire des sortilèges</a>            <a href="http://protego.forumactif.com/t39-saison-01-quete-epique-hominum-revelio">Les quêtes du forum</a>                                    
		</div>
		                                                                
		<div class="pa_maisons">
			                                                                    
			<div class="pa_points">
				                            <img src="https://i.servimg.com/u/f73/09/00/57/00/serpy110.png" /><span style="color: #2EA81B;">XX points </span>                           
			</div>
			                                                                    
			<div class="pa_points">
				                            <img src="https://i.servimg.com/u/f73/09/00/57/00/serdai10.png" /><span style="color: #336EE6;">XX points  </span>                          
			</div>
			                                                                    
			<div class="pa_points">
				                            <img src="https://i.servimg.com/u/f73/09/00/57/00/griffy10.png" /><span style="color: #D12E2E;">XX points</span>                            
			</div>
			                                                                    
			<div class="pa_points">
				                            <img src="https://i.servimg.com/u/f73/09/00/57/00/pouffy10.png" /><span style="color: #F2D33A;">XX points</span>                            
			</div>
			                                                                
		</div>
		                                                                
		<div class="pa_liens_nouveaux">
			                                                                    
			<h2>
				                            Pour les nouveaux                            
			</h2>
			                                                                    
			<div class="barre_nouveau">
				                                                     
			</div>
			                                        <a href="http://protego.forumactif.com/t4-reglement-rpg">Règlement RPG</a>            <a href="http://protego.forumactif.com/t30-reglement-hrp">Règlement HRP</a>            <a href="http://protego.forumactif.com/t5-reglement-du-forum">Règles du forum</a>            <a href="http://protego.forumactif.com/f15-challenges">Challenges</a>            <a href="http://protego.forumactif.com/f16-quiz-jeux-officiels">Quiz & Jeux</a>            <a href="#">Ouvrir sa volière</a>                                    
		</div>
		                                                            
	</div>
	                                                            
	<div class="pa_droite">
		                                                                
		<p>
			                            <span style="color: #999999;">CONTEXTE</span><br /><br />Cinq années après la chute des Mangemorts, Poudlard a pansé ses meurtrissures pour reconstruire le quotidien des jeunes sorciers de Grande Bretagne. Le climat se veut serein et les sourires retrouvent enfin leur place sur les visages des étudiants. Tout semble être rentré dans l’ordre dans le monde magique…  <br /><br />Alors que les Aurors partent à la poursuite des derniers Mangemorts en vie, de mystérieux cambriolages frappent le Chemin de Traverse. Plusieurs dizaines d’objets ont été subtilisés et pourtant, aucune dégradation des bâtiments n’ont eu lieu. Les gérants des boutiques affirment que ce ne sont des objets de grande qualité magique, mais de modeste bibelot. Simple délinquant ou cambriolage en bande organisée ? Le plus inquiétant reste néanmoins qu’il ne reste aucune trace du passage de ces individus… Tels des fantômes, ils ne laissent aucun indice derrière eux.                           
		</p>
		                                                            
	</div>
	                                                            
	<div class="clear">
		                                                       
	</div>
	                 
</div>

Codage index complet Protego catégories Halloween Forumactif PHPBB2

CSS

/******************************************************************** CATEGORIES ********************************************************************/

/* MISE EN FORME CATEGORIES */
.categories_forum {
    width: 95%;
    margin: auto;
    background: #181818;
}

/* TITRE CATEGORIE */
.nom_categorie h2 {
    background: #399;
    font-family: Parisienne, cursive;
    font-size: 35px;
    padding: 4%;
    text-align: center;
    transform: all;
    transition: 1s;
    font-weight: normal;
    color: #fff;
}

.nom_categorie h2:hover {
    letter-spacing: 2px;
    transform: all; 
    transition: 1s;
}

/* MISE EN FORME FORUM */
.forum, .qeel {
    margin: 2% 0;
    padding: 2%;
}

/* STATUT SUJETS */
.icon_forum {
    float: left;
    width: 150px;
}

/* COLONNE NOM FORUM + DESCRIPTION */
.forum_nom_desc {
    width: 24%;
    float: left;
    margin: 0 2%;
    position: relative;
}

/* Nom forum */
a.forumtitle {
    color: #fff;
    font-family: Parisienne, cursive;
    font-size: 24px;
    position: absolute;
    text-align: center;
    z-index: 1;
}

/* Description */
.forum-desc {
    background: #262626;
    color: #acacaa;
    height: 115px;
    margin-top: 10%;
    overflow: auto;
    padding: 2%;
    text-align: justify;
    width: 92%;
}

/* SOUS-FORUM */
.sous_forum {
    width: 20%;
    float: left;
    background: #262626;
    height: 149px;
}

.sous_forum a {
    display: block;
    width: 96%;
    text-align: center;
    background: #dcdcdc;
    margin: 2%;
}

.sous_forum a:hover {
    background: #399;
    color: #fff !important;
    letter-spacing: 2px;
}

/* AVATAR DERNIER MESSAGE */
.lastpost-avatar {
    border: 0;
    border-radius: 0;
}

.lastpost-avatar img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    border: 0;
    border-radius: 0;
}

/* STATISTIQUES */
.forum_stats {
    background: #262626;
    float: right;
    margin-right: 1%;
    text-align: center;
    width: 20%;
    color: #fff;
}

.forum_stats a {
    color: #399;
}

.parchemins_stats_forum, .sujets_stats_forum {
    color: #fff;
    display: inline-block;
    font-family: Parisienne, cursive;
    font-size: 15px;
    margin: 15% 6%;
    text-align: center;
}

/* DERNIER MESSAGE */
.dernier_message {
    padding-bottom: 14%;
}

/* LIENS FOOTER CATEGORIES */
.liens_utiles_forum {
    text-align: center;
    margin-bottom: 2%;
}

.liens_utiles_forum a {
    background: #513243;
    color: #fff !important;
    display: inline-block;
    margin: 0 1%;
    padding: 1%;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
}

Index_box

<div class="categories_forum">
		<div class="nom_categorie">
			{catrow.tablehead.L_FORUM}
		</div>

<div class="forum">
                  	<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="forum_nom_desc">
                          	<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                                  	{catrow.forumrow.FORUM_NAME}
                          	</a>
				<div class="forum-desc">
                                  	{catrow.forumrow.FORUM_DESC}
                          	</div>
	                </div>
                  
                  	<div class="sous_forum" 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 class="avatar_dernier_posteur">
                          	
                        		<span class="lastpost-avatar">
                                          	{catrow.forumrow.avatar.LAST_POST_AVATAR}
                          		</span>
                        	
                  	</div>
                  
                  	<div class="forum_stats">
                          	<div class="sujets_stats_forum">
                                  	{catrow.forumrow.TOPICS} Sujets
                          	</div>
                          
                          	<div class="parchemins_stats_forum">
                                  	{catrow.forumrow.POSTS} Parchemins
                          	</div>
                          
                          	<div class="dernier_message">
                                  	
						<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
                                                  	{catrow.forumrow.LATEST_TOPIC_NAME}
                                  		</a><br />
					
					{catrow.forumrow.USER_LAST_POST}
                          	</div>
                  	</div>
                  	<div class="clear">
                  	</div>
          	</div>

</div>
		<br />

<div class="liens_utiles_forum">
  	
		<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>
  	
  
  	<a href="{U_TODAY_ACTIVE}">
          	{L_TODAY_ACTIVE}
  	</a>
							
  	<a href="{U_TODAY_POSTERS}">
          	{L_TODAY_POSTERS}
  	</a>
  
  	<a href="{U_OVERALL_POSTERS}">
          	{L_OVERALL_POSTERS}
  	</a>
</div>

CSS

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

/* COLONNE GAUCHE QEEL */
.qeel_colonne_gauche {
    float: left;
    width: 30%;
}

/* Derniers connectes */
.qeel_derniers_connectes {
    background: #181818;
    color: #acacaa;
    height: 434px;
    overflow: auto;
    padding: 5%;
    text-align: justify;
    width: 90%;
}

/* Qui est en ligne */
.qeel_anniversaires {
    background: #181818;
    margin: 2% 0;
    color: #acacaa;
    padding: 5%;
}

/* COLONNE DROITE QEEL */
.qeel_colonne_droite {
    float: left;
    width: 64.5%;
    margin: 0 0 0 5%;
}

/* Statistiques */
.statistiques_qeel {
    width: 90%;
    padding: 5%;
    background: #181818;
    color: #acacaa;
}

.statistiques_qeel a {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Noms des sections de groupes */
.qeel_colonne_droite h2 {
    color: #fff;
    font-family: Parisienne, cursive;
    font-weight: normal;
    font-size: 30px;
    padding: 0;
    margin: 5% 0 2% 0;
}

/* Mise en forme des groupes */
.qeel_colonne_droite a {
    color: #fff;
    display: inline-block;
    margin: .5%;
    padding: 2%;
    text-transform: uppercase;
    width: 20%;
}

/* Fonds de chaque groupe */
#administrateurs_qeel {background: #000;}
#moderateurs_qeel {background: #acacac;}
#gryffondor_qeel {background: #D12E2E;}
#poufsouffle_qeel {background: #F2D33A;}
#serdaigle_qeel {background: #336EE6;}
#serpentard_qeel {background: #2EA81B;}
#personnel_qeel {background: #FA8F55;}
#ministere_qeel {background: #8986CC;}
#ordre_phenix_qeel {background: #95CBDB;}
#mangemorts_qeel {background: #878484;}

Index_Body

{JAVASCRIPT}
<ul id="navstrip" class="clearfix">
	<li class="begin"><a href="{U_INDEX}"><span>{L_INDEX}</span></a></li>
	{NAV_CAT_DESC}
</ul>

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

<div class="liens_utiles_forum">
                                  	<a href="{U_SEARCH_NEW}">
                                          	{L_SEARCH_NEW}
                                  	</a>
                                  	<a href="{U_SEARCH_SELF}">
                                          	{L_SEARCH_SELF}
                                  	</a>
					<a href="{U_SEARCH_UNANSWERED}">
                                          	{L_SEARCH_UNANSWERED}
                                  	</a>
				</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 class="qeel">
  	<div class="qeel_colonne_gauche">
          	<div class="qeel_derniers_connectes">
          		<table id="kaboum">{L_CONNECTED_MEMBERS}</table>
    <script type="text/javascript">
    jQuery('#kaboum').html(jQuery('#kaboum').html().replace('Membres connectés au cours des 24 dernières heures :','texte1 :'));
    </script>
  		</div>
          	<div class="qeel_anniversaires">
                  	
				{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
			
          	</div>
  	</div>
  
  	<div class="qeel_colonne_droite">
          	<div class="statistiques_qeel">
                  	<div id="bert">
                          	{TOTAL_POSTS}
                	</div>
                	<div id="matt">
                          	{TOTAL_USERS}
                	</div>
                	<div id="yosh">
                          	{NEWEST_USER}
                  	</div>
                  	<br />
                  	<div id="connectes">
                          	{RECORD_USERS}
                	</div>
                  	<div id="celine">
                          	{TOTAL_USERS_ONLINE}
                  	</div>
          	</div>
          
          	<h2>
                  	Gestion du forum
          	</h2>
          
          	<a href="http://protego.forumactif.com/g1-administrateurs" id="administrateurs_qeel">
                  	Administrateurs
          	</a>
          
          	<a href="http://protego.forumactif.com/g2-moderateurs" id="moderateurs_qeel">
                  	Modérateurs
          	</a>
          
          	<h2>
                  	Poudlard
          	</h2>
          
          	<a href="http://protego.forumactif.com/g3-gryffondor" id="gryffondor_qeel">
                  	Gryffondor
          	</a>
          
          	<a href="http://protego.forumactif.com/g4-poufsouffle" id="poufsouffle_qeel">
                  	Poufsouffle
          	</a>
          	
          	<a href="http://protego.forumactif.com/g5-serdaigle" id="serdaigle_qeel">
                  	Serdaigle
          	</a>
          
          	<a href="http://protego.forumactif.com/g6-serpentard" id="serpentard_qeel">
                  	Serpentard
          	</a>
          
          	<a href="http://protego.forumactif.com/g7-poudlard" id="personnel_qeel">
                  	Personnel
          	</a>
          
          	<h2>
                  	Monde Magique
          	</h2>
          
          	<a href="http://protego.forumactif.com/g8-ministere-de-la-magie" id="ministere_qeel">
                  	Ministère
          	</a>
          
          	<a href="http://protego.forumactif.com/g9-ordre-du-phenix" id="ordre_phenix_qeel">
                  	Ordre du Phénix
          	</a>
          
          	<a href="http://protego.forumactif.com/g10-mangemort" id="mangemorts_qeel">
                  	Mangemorts
          	</a>
  	</div>
  	<div class="clear">
  	</div>
</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}

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

#protego #indexcomplet #forumactif #codage #libreservice

Halloween