Welcome

Halloween Index complets

Altered Minds

Halloween, LS codage Forumactif Index complets Index complet Altered Minds

PHPBB2

Optimisé Informations du staff en hover, petits effets au survol des liens rapides. Une liste de sujets est également disponible.
Réalisé pour le forum Altered Minds.
La maquette complète

Retour

Ajouter la police

Pour ajouter la police de la maquette, coller le code suivant dans le template "Overall_header" avant "T_HEAD_STYLESHEET" (l.18) :

Codage index complet Altered Minds accueil Halloween Forumactif

CSS

/* SCROLLBAR */
::-webkit-scrollbar {
    	width: 4px;
}
::-webkit-scrollbar-thumb {
    	background-color: #fbb794;
}
::-webkit-scrollbar-track {
        background-color: #f3f3f3;
}

/**************************************************** PAGE ACCUEIL ****************************************************/
.page_accueil {
        background: #fff;
        margin: auto;
        padding: 2%;
        width: 850px;
        border: 20px solid #f3f3f3;
        box-sizing: border-box;
  	font-family: 'Maven Pro', sans-serif;
  	color: #1a1a1a;
}

.pa_milieu {
        width: 40%;
        float: left;
        margin: 1% 2%;
}

.pa_droite {
        width: 36%;
        float: left;
        margin: 1% 0;
}

/* LIENS UTILES */
.pa_liens {
        width: 20%;
        float: left;
}

.pa_liens a {
        display: block;
        width: 100%;
        font-family: 'Maven Pro', sans-serif;
        font-size: 12px;
        padding: 3% 0;
        margin: 5% 0;
        background: #ac9893;
        color: #f3f3f3;
        text-transform: uppercase;
}

.pa_liens a:hover {
        background: #89665c;
        transition: bold;
        letter-spacing: -1px;
        transform: rotate(-1deg);
}

/* CONTEXTE */
.pa_contexte {
        box-sizing: border-box;
        height: 100px;
        overflow: auto;
        padding: 0 5% 0 0;
        text-align: justify;
        width: 100%;
        margin: 0 0 3.6% 0;
}

/* ACTUALITES */
.pa_actus {
        width: 50%;
        float: left;
        margin: 2% 0;
        background: #f3f3f3;
        padding: 2%;
        height: 88px;
        box-sizing: border-box;
        text-align: left;
        overflow: auto;
}

.pa_actus span {
        background: #ac9893;
        padding: 2%;
        display: inline-block;
        margin: 2%;
        color: #f3f3f3;
}

/* TOP SITES */
.pa_tops {
        width: 45%;
        float: left;
        margin: 2% 0 2% 5%;
        box-sizing: border-box;
}

.pa_tops a {
        color: #ac9893;
        display: block;
        font-family: Calibri, Arial, sans-serif;
        font-size: 16px;
        text-transform: uppercase;
        margin: 0 0 2% 0;
        font-weight: bold;
}

.pa_tops a::before {
    	content: "△ ";
}

/* Partenaires */
.pa_tops select {
        font-size: 10px;
        width: 90%;
        margin: auto;
        background: #f3f3f3;
        border: 0;
        padding: 1% 0;
}

/* STAFF */
.pa_staff {
    	margin: 0 0 2% 0;
}

.pa_staff h2 {
        text-transform: uppercase;
        font-size: 15px;
        color: #fbb794;
        letter-spacing: 5px;
        font-weight: normal;
        margin: 0 0 2% 0;
}

.staff_bloc {
        width: 120px;
        height: 45px;
        overflow: hidden;
        display: inline-block;
  	position: relative;
}

.staff_bloc_image {
        width: 120px;
        height: 45px;
        object-fit: cover;
  	position: relative;
  	z-index: 1;
  	transition: .5s all;
}

.staff_bloc:hover .staff_bloc_image {
        margin-left: -240px;
        transition: .5s all;
}

.contenu_staff {
        position: absolute;
        top: 0;
        width: 120px;
        border: 1px solid #f3f3f3;
        box-sizing: border-box;
        height: 45px;
}

/* Pseudo */
.contenu_staff h2 {
        margin: 2% 0 0 0;
        padding: 0;
        font-size: 10px;
        letter-spacing: 0;
}

/* DC */
.contenu_staff h3 {
        margin: 0;
        font-weight: normal;
        font-style: italic;
        font-family: Times New Roman;
        text-transform: lowercase;
        color: #89665c;
}

/* Liens */
.contenu_staff a {
        display: inline-block;
        width: 30px;
        margin: 0 2%;
}

/* MP */
.contenu_staff a:nth-child(2n+1) {
    	background: #f3f3f3;
}

/* MEMBRE DU MOIS */
.pa_membre {
        width: 49%;
        box-sizing: border-box;
        float: left;
}

.pa_membre img {
        height: 50px;
        object-fit: cover;
        width: 100%;
        padding: 2%;
        border: 1px solid #f3f3f3;
  	box-sizing: border-box;
}

/* Pseudo */
.pa_membre h2 {
        color: #fbb794;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 5px;
        margin: 0;
        text-transform: uppercase;
}

.pa_membre h3 {
        margin: 0;
        font-weight: normal;
        color: #89665c;
}

/* INTRIGUE */
.pa_intrigue {
        background: #f3f3f3;
        box-sizing: border-box;
        float: left;
        height: 85px;
        margin: 0 0 0 2%;
        padding: 2%;
        width: 49%;
        overflow: auto;
        text-align: justify;
}

HTML

<div class="page_accueil">
	                                                                                                           
	<div class="pa_liens">
		                                                          <a href="#">Annexes</a><a href="#">Bottins</a><a href="#">Guide</a><a href="#">Prédéfinis</a><a href="#">Crédits</a><a href="#">Partenariats</a><a href="#">Section invités</a>                                                     
	</div>
	                                                                                                           
	<div class="pa_milieu">
		                                                                                                                       
		<div class="pa_contexte">
			                                                                 Lorem Ipsum<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis justo, dictum non venenatis vitae, vulputate quis lacus. Donec mauris orci, feugiat nec tempus tincidunt, porta vitae orci. In consectetur sit amet diam sit amet lobortis. In id maximus quam. Pellentesque non dolor vitae felis blandit luctus a id mauris. Fusce malesuada nibh a leo tincidunt, nec viverra ipsum aliquam. Donec varius rhoncus malesuada. Curabitur quis sem et nunc vulputate euismod. Nunc vitae ligula quis neque scelerisque condimentum. Nam pretium posuere sodales. Vivamus blandit rutrum dui eu aliquet. Praesent feugiat lobortis lacus, in mattis urna pharetra id. Donec vel porta justo. Ut lacinia, erat nec faucibus tempor, purus odio tincidunt nunc, quis sollicitudin metus nisl non mi. Sed scelerisque efficitur metus sit amet dapibus. Ut sagittis, nisl non lacinia gravida, tellus tortor cursus leo, id facilisis mauris elit vel ligula. Vivamus blandit tortor venenatis urna feugiat tristique. Nam interdum eros in convallis pharetra. Donec tempus lectus vel sagittis volutpat. Nam consectetur diam cursus posuere auctor. <a href="#">[ Lire la suite ]</a>                                                        
		</div>
		                                                                                                                       
		<div class="pa_actus">
			                                                                 <span>XX/XX</span> New 1<br /><span>XX/XX</span> News 2<br /><span>XX/XX</span> News 3<br />                                                            
		</div>
		                                                                                                                       
		<div class="pa_tops">
			                                                               <a target="_blank" href="#">Top 1</a><a target="_blank" href="#">Top 2</a><a target="_blank" href="#">+ Plus ?</a> <select onchange="location = this.value">
  <option selected="selected" class="partenaires">Partenaires</option>
  <option value="http://ls-halloween.fr">Halloween</option>
  <option value="http://ls-halloween.fr">Halloween</option>
<option value="http://ls-halloween.fr">Halloween</option>
<option value="http://ls-halloween.fr">Halloween</option>
</select>                                                            
		</div>
		                                                                                                                       
		<div class="clear">
			                                                                                                                              
		</div>
		                                                                                                                  
	</div>
	                                                                                                           
	<div class="pa_droite">
		                                                                                                                       
		<div class="pa_staff">
			                                                                                                                                 
			<h2>
				                                                                      Equipe                                                                  
			</h2>
			                                                                                                                                   
			<div class="staff_bloc">
				                                                                      <img alt="" src="https://imgur.com/7kOspyg.gif" class="staff_bloc_image" />                                                                        
				<div class="contenu_staff">
					                                                                                                                                                           
					<h2>
						                                                                                    pseudo                                                                            
					</h2>
					                                                                                                                                                           
					<h3>
						                                                                                    DC                                                                                
					</h3><a href="#">MP</a><a href="#">Profil</a>                                                                        
				</div>
				                                                                                                                                          
			</div>
			                                                                                                                                   
			<div class="staff_bloc">
				                                                                      <img alt="" src="https://imgur.com/7kOspyg.gif" class="staff_bloc_image" />                                                                        
				<div class="contenu_staff">
					                                                                                                                                                           
					<h2>
						                                                                                    pseudo                                                                            
					</h2>
					                                                                                                                                                           
					<h3>
						                                                                                    DC                                                                                
					</h3><a href="#">MP</a><a href="#">Profil</a>                                                                        
				</div>
				                                                                                                                                          
			</div>
			                                                                                                                                   
			<div class="staff_bloc">
				                                                                      <img alt="" src="https://imgur.com/7kOspyg.gif" class="staff_bloc_image" />                                                                        
				<div class="contenu_staff">
					                                                                                                                                                           
					<h2>
						                                                                                    pseudo                                                                            
					</h2>
					                                                                                                                                                           
					<h3>
						                                                                                    DC                                                                                
					</h3><a href="#">MP</a><a href="#">Profil</a>                                                                        
				</div>
				                                                                                                                                          
			</div>
			                                                                                                                                    
			<div class="staff_bloc">
				                                                                      <img alt="" src="https://imgur.com/7kOspyg.gif" class="staff_bloc_image" />                                                                        
				<div class="contenu_staff">
					                                                                                                                                                           
					<h2>
						                                                                                    pseudo                                                                            
					</h2>
					                                                                                                                                                           
					<h3>
						                                                                                    DC                                                                                
					</h3><a href="#">MP</a><a href="#">Profil</a>                                                                        
				</div>
				                                                                                                                                          
			</div>
			                                                                                                                              
		</div>
		                                                                                                                       
		<div class="pa_membre">
			                                                               <img alt="" src="https://imgur.com/7kOspyg.gif" />                                                                 
			<h2 style="font-size:13px;">
				                                                                        Pseudo                                                            
			</h2>
			                                                                                                                                   
			<h3>
				                                                                        MDM de Novembre                                                                    
			</h3>
			                                                                                                                              
		</div>
		                                                                                                                       
		<div class="pa_intrigue">
			                                                                 △ Type de forum <br /> △ Année <br />△ Codage d'<a href="http://ls-halloween.fr" target="_blank">Halloween</a>  
		</div>
		                                                                                                                       
		<div class="clear">
			                                                                                                                              
		</div>
		                                                                                                                    
	</div>
	                                                                                                           
	<div class="clear">
		                                                                                                                  
	</div>
</div>

Codage index complet Altered Minds catégories Halloween Forumactif PHPBB2

CSS

/**************************************************** CATEGORIES ****************************************************/
/* SCROLLBAR */
::-webkit-scrollbar {
    	width: 4px;
}
::-webkit-scrollbar-thumb {
    	background-color: #fbb794;
}
::-webkit-scrollbar-track {
        background-color: #f3f3f3;
}

/* LIENS HEADER */
.liens_header_categories a {
        color: #fbb794;
        font-size: 10px;
        letter-spacing: 5px;
        margin: 0 2%;
        text-transform: uppercase;
        display: inline-block;
  	font-family: 'Maven Pro', Arial;
}

.liens_header_categories {
        text-align: center;
        margin: 2% 0;
}

.categories {
        width: 95%;
  	font-family: 'Maven Pro', Arial;
  	color: #1a1a1a;
        margin: auto;
}

/* TITRE CATEGORIES */
.header_categories h2 {
        text-align: center;
        font-weight: normal;
        text-transform: uppercase;
        padding: 2% 0;
        font-family: 'Maven Pro', sans-serif;
        background: #ac9893;
        color: #f3f3f3;
        border: 10px solid;
}

.forum {
        border: 10px solid #f3f3f3;
        padding: 2%;
  	margin: 2% 0;
}

.forum_gauche {
        width: 50%;
        float: left;
}

.forum_milieu {
        float: left;
        width: 43%;
}

/* NOM FORUM */
a.forumlink {
        text-transform: uppercase;
        font-weight: normal;
}

a.forumlink::before {
    	content: "▶ ";
}

/* DESCRIPTION */
.forum_description {
        width: 100%;
        height: 90px;
        overflow: auto;
        padding: 0 2% 0 0;
        box-sizing: border-box;
        font-size: 11px;
  	text-align: justify;
        margin: 1% 0 0 0;
}

/* AVATAR */
.forum_avatar img {
        border: 1px solid #f3f3f3;
        height: 90px;
        object-fit: cover;
        padding: 1%;
        transition: .5s all;
        width: 70px;
        float: left;
        margin: 6.7% 2% 0;
}

.forum_avatar img:hover {
        transform: rotate(-10deg);
        transition: .5s all;
}

/* DERNIER MESSAGE */
.forum_dernier_mess {
    	font-size: 10px;
}

.forum_dernier {
        float: left;
        width: 70%;
        margin: 16% 0 0;
}

/* STATISTIQUES */
span.forum_stats {
        display: block;
        font-size: 11px;
        margin: 4% auto 0;
        text-align: center;
        background: #f3f3f3;
        width: 90%;
        padding: 2%;
}

/* SOUS FORUM */
.sous_forum a {
        background: #f3f3f3;
        padding: 1%;
        margin: 2% 0 0;
}

.sous_forum a:hover {
        background: #fbb794;
        color: #f3f3f3;
}

Index_box

<div class="liens_header_categories">
  	
		<a id="nouveaux_messages" href="{U_SEARCH_NEW}">
                  	{L_SEARCH_NEW}
  		</a>
			
  		<a id="mes_messages" href="{U_SEARCH_SELF}">
                  	{L_SEARCH_SELF}
  		</a>
  	
			
 	<a id="sans_reponse" href="{U_SEARCH_UNANSWERED}">
          	{L_SEARCH_UNANSWERED}
  	</a>
</div>

<div class="categories">
		<div class="header_categories">
                  	{catrow.tablehead.L_FORUM}
          	</div>
	
          
	
	
          
	
	<div class="forum">
          	<div class="forum_gauche">
                  	<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                          	{catrow.forumrow.FORUM_NAME}
                  	</a>
                  
                  	<div class="forum_description">
                          	{catrow.forumrow.FORUM_DESC}
                  	</div>
          	</div>
          
          	<div class="forum_milieu">
                  	
            			<div class="forum_avatar">
                                  	{catrow.forumrow.avatar.LAST_POST_AVATAR}
                  		</div>
                  	
                  
                  	<div class="forum_dernier">
                                <div class="forum_dernier_mess">
                                  	<span id="last">
                                        	{catrow.forumrow.LAST_POST}
                                	</span>
                          	</div>
                          	<span class="forum_stats">
                                  	{catrow.forumrow.POSTS} Messages - {catrow.forumrow.TOPICS} Sujets
                          	</span>
                  	</div>
    			<script type="text/javascript">jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');</script>
            
                        <div class="clear">
                        </div>
          	</div>
                  
                <img class="forum_statut" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  
                <div class="clear">
                </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><img src="{SPACER}" alt="" height="5" width="1" />

Codage index complet Altered Minds qui est en ligne Halloween Forumactif PHPBB2

CSS

/* SCROLLBAR */
::-webkit-scrollbar {
    	width: 4px;
}
::-webkit-scrollbar-thumb {
    	background-color: #fbb794;
}
::-webkit-scrollbar-track {
        background-color: #f3f3f3;
}

/**************************************************** QUI EST EN LIGNE ****************************************************/
.qui_est_en_ligne {
        border: 20px solid #f3f3f3;
        width: 850px;
        margin: 5% auto 0;
        padding: 0 2%;
  	font-family: 'Maven Pro', Arial;
  	color: #1a1a1a;
        box-sizing: border-box;
}

/* GAUCHE ET DROITE */
.qeel_gauche, .qeel_droite {
        float: left;
        font-size: 10px;
        height: 200px;
        overflow: auto;
        padding: 0 2% 0 0;
        width: 28%;
        margin: 2% 0;
}

/* MILIEU */
.qeel_milieu {
        background: url(https://i.imgur.com/pbcmuyE.jpg);
        float: left;
        height: 227px;
        margin: 0 2%;
        text-align: center;
        width: 36%;
        padding: 3%;
        box-sizing: border-box;
}

.qeel_milieu a {
        display: block;
        background: rgba(0,0,0,.4);
        padding: 3%;
        margin: 4%;
        font-size: 12px;
}

a.modeles {color: #97ACD1;} a.modeles:hover {background: #97ACD1; color: #f3f3f3;}
a.norme {color: #80D68C;} a.norme:hover {background: #80D68C; color: #f3f3f3;}
a.deviants {color: #FF9147;} a.deviants:hover {background: #FF9147; color: #f3f3f3;}
a.nuisibles {color: #8F0000;} a.nuisibles:hover {background: #8F0000; color: #f3f3f3;}
a.pnj:hover {color: #f3f3f3; background: #000;}

/* DERNIERS CO ET ANNIVERSAIRES */
.transparent .row1 {
    	background: none;
}

.transparent .row1 .gensmall {
    	color: #1a1a1a !important;
  	font-family: 'Maven Pro', Arial;
}

a.qeel_credit {
        text-align: right;
        margin: 2% 0;
        text-decoration: none;
        display: block;
        font-size: 10px;
        color: #b9b9b9;
        font-style: italic;
        letter-spacing: -1px;
        text-transform: lowercase;
        font-family: 'Helvetica';
}

Index_Body

Remplacer le contenu présent entre "Begin disable viewonline" (l. 51) et "End disable viewonline" (l. 162) par :

<div class="qui_est_en_ligne">
  	<div class="qeel_gauche">
          	{TOTAL_POSTS}<br />
		{TOTAL_USERS}<br />
          	{NEWEST_USER}
          	
          	<br /><br />
          
          	{TOTAL_USERS_ONLINE}
          	
          	<br /><br />
          
		{LOGGED_IN_USER_LIST}
  	</div>
  
  	<div class="qeel_milieu">
          	<a class="pnj" href="#">
                  	PNJ
          	</a>
          
          	<a href="#" class="modeles">
                  	Modèles
          	</a>
          
          	<a href="#" class="norme">
                  	Norme
          	</a>
          
          	<a href="#" class="deviants">
                  	Déviants
          	</a>
          
          	<a href="#" class="nuisibles">
                  	Nuisibles
          	</a>
  	</div>
  
  	<div class="qeel_droite">
          	<table class="transparent">
                  	{L_CONNECTED_MEMBERS}
                  	<br />
			{L_WHOSBIRTHDAY_TODAY}
          	</table>
  	</div>
  
  	<div class="clear">
  	</div>
</div>
<a href="http://ls-halloween.fr" target="_blank" class="qeel_credit">Halloween</a>

Les liens précédents

Pour modifier également les liens "Marquer comme lus", "Posteurs du jour" etc., remplacer les lignes 66 à 89 du template de base (la table suivant "BOARD_INDEX") par :

<div class="liens_header_categories">
  	
		<a href="{U_MARK_READ}" id="marquerlus">
                  	{L_MARK_FORUMS_READ}
  		</a>
	
	
		<a href="{switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">
          		{switch_delete_cookies.L_DELETE_COOKIES}
  		</a>
  	
  
  	<a href="{U_TODAY_ACTIVE}" id="sujets_jour">
          	{L_TODAY_ACTIVE}
  	</a>
  
  	<a href="{U_TODAY_POSTERS}" id="posteurs_jour">
          	{L_TODAY_POSTERS}
  	</a>
				
  	<a href="{U_OVERALL_POSTERS}" id="top_posteurs">
          	{L_OVERALL_POSTERS}
  	</a>
				
  	
		
			<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" id="cookies" rel="nofollow">
                          	{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
  			</a>
		
	
</div>

Et ajouter le CSS suivant si vous n'avez pas installé les catégories précédentes :

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

#alteredminds #indexcomplet #forumactif #codage #libreservice

Halloween