Welcome

Halloween Index complets

Colby Lake

Halloween, LS codage Forumactif Index complets Index complet Colby Lake

PHPBB2

Optimisé Système d'onglet pour le staf. Une liste des sujets, un profil & message, une fiche de présentation, de publicité et de RP sont disponibles. Réalisé pour le forum Colby Lake. La maquette complète

Retour

Codage index complet Colby Lake accueil Halloween Forumactif

CSS

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

/********************************************************* PAGE ACCUEIL *********************************************************/
/* Fond PA */
.pa {
    background: #2d112a;
    font-family: courier new, sans-serif;
    font-size: 12px;
    width: 800px;
    margin: 0 auto 5% auto;
    color: #ffdcc8;
}

/* Titres PA */
.pa h2 {
    display: block;
    font-family: arial;
    font-size: 24px;
    padding: 2% 0;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    color: #ffdcc8;
}

.pa h3 {
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
}

.pa_staff h3 {
    margin-left: 5%;
}

.pa_news h3 {
    text-align: center;
    margin-bottom: 10%;
}

.pa_partenaires h3 {
    color: #30b292;
    font-family: arial, sans-serif;
    font-size: 17px;
    margin-bottom: 4%;
}

/* Bloc contexte */
.pa_contexte {
    background: #30122e;
    border: 1px solid #ffdcc8;
    padding: 2%;
    width: 45%;
    font-weight: bold;
    height: 180px;
    overflow: auto;
    float: left;
    margin: 3% 3% 0 10%;
    text-align: justify;
}

/* Bloc liens rapides */
.pa_liens_rapides {
    float: left;
    width: 30%;
    margin-top: 2.4%;
}

.pa_liens_rapides a {
    display: inline-block;
    background: #30122e;
    border: 1px solid #ffdcc8;
    color: #ffdcc8;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    padding: 1%;
    width: 45%;
    text-align: center;
    margin: 2% 0;
}

.pa_liens_rapides a:hover {
    color: #bd153c;
}

/* Staff */
.pa_staff {
    float: left;
    margin: 4% 5% 0 10%;
    width: 30%;
}

.paonglets {
    text-align: center;
}

.paonglet {
    color: #30b292;
    cursor: pointer;
    display: inline-block;
    margin: 2% 0;
    font-size: 25px;
}
            
.paonglet_0 {}
            
.paonglet_1 {}
          
.contenu_paonglet {
    display: none;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 2;
}

.contenu_paonglet a {
    color: #ffdcc8;
}

.pa_staff img {
    float: left;
    margin-right: 2%;
}

/* News */
.pa_news {
    float: left;
    border: 1px solid #ffdcc8;
    padding: 1%;
    width: 20%;
    margin: 3% 3% 0 0;
    background: #30122e;
    height: 100px;
    overflow: auto;
}

/* Partenaires */
.pa_partenaires {
    float: left;
    width: 25%;
    text-align: center;
    margin-top: -5%;
}

.pa_partenaires img {
    margin: 1%;
}

/* Credits */
.pa_credits {

background: #bd153c;
    padding: 1%;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    margin-top: 2%;

}

.clear {
    clear: both;
}

HTML

<div class="pa">
	                               
	<h2>
		                Bienvenue sur <span style="color: #30c29e;">Colby Lake</span>                
	</h2>
	                               
	<div class="pa_contexte">
		                 "En l’an 2059, la Terre connait son plus grand pic de pollution jamais enregistré… Impossible de revenir en arrière… Face à cette situation, les gouvernements de tous les pays décident de concevoir un vaisseau avec à son bord les meilleurs membres de chaque domaines et milieu ainsi qu’un contingent militaire. Deux ans plus tard le vaisseau pris son envole vers une nouvelle planète inexplorée avec l’espoir de continuer à faire vivre l’espèce humaine dans la galaxie. Quatre ans plus tard, les membres de l’équipage étaient toujours en état de cryogénisation. Suite à un problème technique encore inconnu" <a href="http://colbylake.forumactif.com/t1-contexte"><span style="color: #30c29e;">Lire la suite...</span></a>               
	</div>
	                               
	<div class="pa_liens_rapides">
		                <a href="http://colbylake.forumactif.com/t6-reglement#6">Règlement</a> <a href="http://colbylake.forumactif.com/t1-contexte">Histoire</a> <a href="http://colbylake.forumactif.com/f5-les-annexes">Annexes</a> <a href="http://colbylake.forumactif.com/f15-scenarios">Scénarios</a> <a href="http://colbylake.forumactif.com/f9-questions-invite">Zone invités</a> <a href="http://colbylake.forumactif.com/f10-partenariats">Partenariats</a>                
	</div>
	                               
	<div class="clear">
		                               
	</div>
	                               
	<div class="pa_staff">
		                         
		<h3>
			             Le staff             
		</h3>
		                 <script type="text/javascript">
            	//
            	</script>                              
		<div class="contenu_paonglets">
			                                                 
			<div style="display: block;" id="contenu_paonglet_staff1" class="contenu_paonglet">
				                 <img src="https://i62.servimg.com/u/f62/19/83/29/33/avatar13.png" /> Jena Hills<br />Présent<br /><a href="#">Message</a>                 
			</div>
			                                                  
			<div id="contenu_paonglet_staff2" class="contenu_paonglet">
				                 <img src="https://i.imgur.com/gXdxSaf.png" /> Pseudo Modo<br />Présent<br /><a href="#">Message</a>                 
			</div>
			                                           
		</div>
		                                                    
		<div class="paonglets">
			                                 <span onmouseover="javascript:change_paonglet('staff1');" id="paonglet_staff1" class="paonglet_1 paonglet">                           •                    </span>                                    <span onmouseover="javascript:change_paonglet('staff2');" id="paonglet_staff2" class="paonglet_0 paonglet">                           •                    </span>                 
		</div><script type="text/javascript">
            	//
            	</script>                  
	</div>
	                               
	<div class="pa_news">
		                               
		<h3>
			                Nouveautés                
		</h3>
		                - 15/01/2018 : ouverture du forum.                
	</div>
	                               
	<div class="pa_partenaires">
		                               
		<h3>
			                Nos amis                
		</h3><a target="_blank" href="http://www.root-top.com/topsite/pubrpgdesign/in.php?ID=1692"><img src="https://i62.servimg.com/u/f62/19/83/29/33/top_110.png" /></a> <a target="_blank" href="http://www.root-top.com/topsite/obsession27/in.php?ID=25054"><img src="https://i62.servimg.com/u/f62/19/83/29/33/top_210.png" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/xGcyPJw.png" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/xGcyPJw.png" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/xGcyPJw.png" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/xGcyPJw.png" /></a>                
	</div>
	                               
	<div class="clear">
		                               
	</div>
	                               
	<div class="pa_credits">
		                Copyright 2018 - Codage par Halloween, texte et graphisme par Jena Hills toute reproduction est interdite                
	</div>
</div>

Codage index complet Colby Lake catégories Halloween Forumactif PHPBB2

CSS

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

.clear {
    clear: both;
}

/* Scrollbar */
::-webkit-scrollbar {
    background: #ffdcc8;
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #2d112a;
    border-radius: 27px;
}
  
  
/********************************************************* CATEGORIES *********************************************************/

/* Lien voir derniers messages */
.categories_lien_header a {
    float: right;
    margin: 2%;
    color: #fff;
    text-transform: uppercase;
    font-family: courier new, sans-serif;
}

/* Contenu du forum */
.contenu_forum {
    background: #2d112a;
    font-family: courier new, sans-serif;
    font-size: 12px;
    margin: auto;
    width: 850px;
    border-bottom: 20px solid #bd153c;
    margin-bottom: 5%;
}

/* Titre categories */
.titre_categorie {
    background: url('https://i.imgur.com/DDknDZc.png');
    padding: .7% 0;
}

.titre_categorie h2 {
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: normal;
    margin-left: 2%;
    font-family: arial, sans-serif;
    color: #ffdcc8;
}

/* Contenu de chaque forum */
.forum {
    width: 95%;
    margin: 5% auto;
    color: #ffdcc8;
}

/* Bloc sous-forum */
.sous_forum {
    float: left;
    width: 22%;
    height: 115px;
    overflow: auto;
    background: #30122e;
    font-family: arial, sans-serif;
    font-weight: bold;
    line-height: 2;
    text-align: center;
}

.sous_forum a {
    color: #ffdcc8;
    text-transform: uppercase;
    display: block;
    font-size: 10px;
}

/* Description */
.description {
    float: left;
    width: 330px;
    height: 95px;
    margin: 0 2%;
    position: relative;
}

.description img {
    position: absolute;
    z-index: 2;
    opacity: .5;
}

.description p {
    position: relative;
    z-index: 3;
    width: 60%;
    font-family: courier new, sans-serif;
    text-align: justify;
    line-height: 1.5;
    margin: 2% auto;
    height: 100px;
    overflow: auto;
    text-transform: uppercase;
    font-size: 10px;
}

/* Colonne nom forum, dernier message, statut et statistiques */
.dernier_stats {
    background: #30122e;
    float: left;
    font-size: 10px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 18%;
    height: 95px;
}

.dernier_stats a {
    color: #ffdcc8;
}

a.forumlink:link {
    color: #ffdcc8;
    display: block;
    margin: 2% 0 3% 2%;
    font-family: arial, sans-serif;
    letter-spacing: 1px;
}

.statut_message {
    display: block;
    margin: auto;
}

/* Avatar dernier posteur */
.forum_lastpost_avatar {
    float: left;
    margin-left: 1%;
}

.forum_lastpost_avatar img {
    width: 65px;
    height: 115px;
    object-fit: cover;
}

/* Separation forums */
.categories_footer {
    width: 100%;
    height: 20px;
    background: #bd153c;
    margin: 0 0 5% 0;
}

/* Liens bulles footer categories */
.infobulle {
    display: block;
    float: right;
    font-size: 12px;
    margin: 0 2% 2% 0;
    font-family: courier new, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

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

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

.bouh {
    background: #bd153c;
    color: #fff;
    margin: auto;
    padding: 25px;
    text-align: center;
}

.bouh a {
    display: block;
    color: #ffdcc8;
}

.fleche {
    border: 5px solid transparent;
    border-bottom: 10px solid #bd153c;
    margin-left: 70px;
    width: 0;
}

Index_box

<div class="categories_lien_header">
  	
		<span id="dernier_message">
                  	<a class="gensmall" href="{U_SEARCH_NEW}">
                          	{L_SEARCH_NEW}
                  	</a>
  		</span>
  		<div class="clear">
  		</div>
	
	<script type="text/javascript">document.getElementById('dernier_message').innerHTML=document.getElementById('dernier_message').innerHTML.replace(/Voir les nouveaux messages depuis votre dernière visite/,"Voir les derniers messages");</script> 
</div>

<div class="contenu_forum">
			<div class="titre_categorie">
                  		{catrow.tablehead.L_FORUM}
			</div>

<div class="forum">
                  		<div id="subforums" class="sous_forum">
                          		{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="description">
                          		{catrow.forumrow.FORUM_DESC}
                  		</div>
                  
                  		<div class="dernier_stats">
                          		<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                          		{catrow.forumrow.LAST_POST}
                          		<img class="statut_message" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                          		{catrow.forumrow.TOPICS} TOPICS & {catrow.forumrow.POSTS} POSTS
                  		</div>
                  
                  		
            				<div class="forum_lastpost_avatar">
                             		     	{catrow.forumrow.avatar.LAST_POST_AVATAR}
                  			</div>
            			
                  
                  		<div class="clear">
                  		</div>
  			</div>

</div>

Descriptions des forum

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 Colby Lake qui est en ligne Halloween Forumactif PHPBB2

CSS

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

.clear {
    clear: both;
}

/* Scrollbar */
::-webkit-scrollbar {
    background: #ffdcc8;
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #2d112a;
    border-radius: 27px;
}

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

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

.bouh {
    background: #bd153c;
    color: #fff;
    margin: auto;
    padding: 25px;
    text-align: center;
}

.bouh a {
    display: block;
    color: #ffdcc8;
}

.fleche {
    border: 5px solid transparent;
    border-bottom: 10px solid #bd153c;
    margin-left: 70px;
    width: 0;
}

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

.fond_qeel {
    width: 850px;
    background: #2d112a;
    margin: auto;
    font-family: courier new, sans-serif;
    font-size: 12px;
    color: #ffdcc8;
}

/* Bloc de gauche */
.qeel_gauche {
    background: #30122e;
    border: 1px solid #ffdcc8;
    border-radius: 10px;
    float: left;
    margin: 5% 2%;
    padding: 2%;
    width: 45%;
    height: 130px;
}

/* Overflow des connectes */
.qeel_connectes {
    width: 100%;
    height: 60px;
    overflow: auto;
}

/* Bloc de droite */
.qeel_droit {
    float: left;
    width: 43%;
}

#kaboum .row1 {
    background: transparent;
}

#kaboum span {
    color: #ffdcc8 !important;
    font-family: courier new;
    font-size: 12px;
}

/* Groupes */
.qeel_groupes {
    border-bottom: 10px solid #ff6e41;
    width: 90%;
    margin: 10% 0 10% 10%;
}

.qeel_groupes a {
    display: inline-block;
    text-transform: uppercase;
    font-size: 15px;
    margin: 1% 2%;
}

/* Connectes ces 24h dernieres */
.qeel_24 {
    width: 90%;
    margin: 0 0 0 10%;
    border: 1px solid #ffdcc8;
    border-radius: 10px;
    padding: 2%;
    height: 80px;
    overflow: auto;
}

Index_Body

{JAVASCRIPT}

	
	
	
		{message_admin_index.message_admin_txt.MES_TXT}

<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

<table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

<tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

<td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    
                    <div class="fb-login-button"></div>
                    
                    
                    <div class="ti-connect"></div>
                    
                </div>
            </td>

</tr>
    </table>
</form>

{CHATBOX_TOP}
{BOARD_INDEX}

<div class="infobulle">
    Plus

<div>
        <div class="fleche"></div>
        <div class="bouh">
          	<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>
		
			
				<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">
                                  	{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
          			</a>
			
		
        </div>
    </div>
</div>

<br />

<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

<td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    
                    <div class="fb-login-button"></div>
                    
                    
                    <div class="ti-connect"></div>
                    
                </div>
            </td>

</tr>
    </table>
</form>

<div class="fond_qeel">
  	<div class="qeel_gauche">
          	<span id="matt">	
                  	{TOTAL_USERS}
                </span>
                <span id="bert">
                  	{TOTAL_POSTS}
                </span>
                <span id="yosh">
                  	{NEWEST_USER}.
                </span>
          	<br /><br />
          	<span id="celine">
                  	{TOTAL_USERS_ONLINE}
          	</span>
                <div class="qeel_connectes">
                  	 <span id="alpha">
                           	{LOGGED_IN_USER_LIST}
                	</span>
                </div>
  	</div>
  
  	<div class="qeel_droit">
          	<div class="qeel_groupes">
                  	<a href="http://colbylake.forumactif.com/g2-pnj" style="color: #5FABC7 !important;">
                          	PNJ
                  	</a>
                  
                  	<a href="http://colbylake.forumactif.com/g3-militaire" style="color: #B8CAD1 !important;">
                          	Militaires
                  	</a>
                  
                  	<a href="http://colbylake.forumactif.com/g4-scientifique" style="color: #F090C6 !important;">
                          	Scientifiques
                  	</a>
                  
                  	<a href="http://colbylake.forumactif.com/g6-medecin" style="color: #ADA475 !important;">
                          	Médecins
                  	</a>
                  
                  	<a href="http://colbylake.forumactif.com/g7-politicien" style="color: #DB6969 !important;">
                          	Politiciens
                  	</a>
                  
                  	<a href="http://colbylake.forumactif.com/g8-ingenieur" style="color: #EDED66 !important;">
                          	Ingénieurs
                  	</a>
          	</div>
          	<div class="qeel_24">
                  	<table id="kaboum">
                          	{L_CONNECTED_MEMBERS}
                  	</table>
          	</div>
  	</div>
  
  	<div class="clear">
  	</div>	
  	
  	<img src="https://i.imgur.com/xGaJIu2.png" alt="image qeel" />
</div>

{CHATBOX_BOTTOM}
<br clear="all" />

<table border="0" cellspacing="3" cellpadding="0" align="center">
	<tr>
		<td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
		<td><span class="gensmall">{L_NEW_POSTS}</span></td>
		<td></td>
		<td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
		<td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
		<td>  </td>
		<td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
		<td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
	</tr>
</table>

{AUTO_DST}

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

#colbylake #indexcomplet #forumactif #codage #libreservice

Halloween