Welcome

Halloween Index complets

Freedom

Halloween, LS codage Forumactif Index complets Index complet Freedom

PHPBB2

Optimisé Système d'onglet pour le staf. Une liste des sujets, une navigation latérale ainsi qu'un profil & message sont disponibles. Réalisé pour le forum Freedom. La maquette complète

Retour

Codage index complet Freedom accueil Halloween Forumactif

CSS

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

/***************************************************** PAGE ACCUEIL *****************************************************/
.fond_page_accueil {
    background: url(https://i.imgur.com/7GmRHxa.png);
}

.page_accueil {
    background: #2c2d2f;
    font-size: 12px;
    margin: 4% auto;
    padding: 2%;
    width: 846px;
    font-family: arial;
    color: #626667;
    box-sizing: border-box;
}

.page_accueil h2 {
    color: #626667;
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    margin: 0;    
    font-weight: normal;
}

/* CONTEXTE ET NEWS */
.pa_contexte, .pa_news {
    background: #1e1f21;
    float: left;
    width: 30%;
    border: 1px solid #626667;
    padding: 1%;
    text-align: justify;
    height: 150px;
}

.pa_contexte p, .pa_news p {
    height: 125px;
    margin: 2% 0 0;
    overflow: auto;
    width: 98%;
    box-sizing: border-box;
    padding: 0 3% 0 0;  
    font-family: arial;
}

.pa_contexte a {
    color: #f75709;
}

/* BLOC LIENS ET STAFF */
.pa_centre {
    float: left;
    width: 33%;
    margin: 0 1%;
}

/* LIENS */
.pa_centre a {
    display: inline-block;
    background: #1e1f21;
    padding: 1%;
    color: #626667 !important;
    width: 30%;
    text-align: center;
    margin: 0 0 2% 0;
}

.pa_centre a:hover {
    color:  #f75709 !important;
}

/* STAFF ONGLETS */
.paonglets {
    margin: -10% 0 0 40%;
}

.paonglet {
    cursor: pointer;
    display: inline-block;
    color: #f75709;
    font-size: 24px;
}
            
.paonglet_0 {}
            
.paonglet_1 {}
          
.contenu_paonglet {
    display: none;
    margin-top: 5%;
}

/* IMAGES STAFF */
.contenu_paonglets img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 100px;
    float: left;
}

/* MISE EN FORME INFORMATIONS STAFF */
.contenu_staff {
    background: #1e1f21;
    width: 53%;
    float: left;
    margin: 5% 0 0 4%;
    padding: 2%;
}

/* Pseudo */
.contenu_staff h2 {
    color: #f75709;
    font-weight: normal;
    font-size: 18px;
    margin: 0;
}

/* Rang */
.contenu_staff h3 {
    font-weight: normal;
    margin: 0;
    font-size: 12px;
    text-transform: lowercase;
    text-align: center;
}

/* Statut et liens */
.contenu_staff h4 {
    text-align: center;
    margin: 0;
    font-weight: normal;
}

.contenu_staff a {
    width: auto;
}

.contenu_staff span {
    color: #04cc47;
}

/* CREDITS */
a.credits_pa {
    color: #626667 !important;
    text-transform: lowercase;
    font-size: 9px;
    float: right;
}

HTML

<div class="page_accueil">
	         
	<div class="pa_contexte">
		         
		<h2>
			     Le contexte     
		</h2>
		         
		<p>
			    L’année 2039 vit la Terre tomber dans le chaos. Émeutes, violence, fermeture des marchés boursiers, couvre-feux obligatoires... La fin du monde tel que nous le connaissions commençait. Eden, 2047. Population d’environ 108.259 habitants. Le dernier bastion de l’humanité, ou du moins ce qu’il en reste. Taux de criminalité, 67%. Les impitoyables forces de l’ordre syndicales, quoi que moins nombreuses qu’au début de la dictature du Syndicat, continuent de régner d’une main de fer sur la dernière ville du monde. En huit ans, le Syndicat, cette nouvelle et seule organisation gouvernementale terrestre, a su préserver la race humaine mais à quel prix ? Arrestations abusives, peine de mort en lieu public, rationnement des denrées alimentaires... Il est dit partout que la Résistance est une mauvaise chose, une organisation qui vous veut du mal et souhaite vous faire vire dans un monde de terreur… Mais savez-vous vraiment qui sont les méchants dans l’histoire ? Est-ce ceux qui imposent leurs lois par la force ou au contraire ceux qui veulent rendre leur liberté à tous ? Non, posez-vous plutôt cette question : voulez-vous vivre libres ou dans un monde de terreurs ? Vous seuls pouvez prendre cette décision. C’était Adam Barton, de l’organisation résistance.    
		</p>
		         
	</div>
	         
	<div class="pa_centre">
		            <a href="#">Règlement</a> <a href="#">Contexte</a> <a href="#">Annexes</a> <a href="#">Scénarios</a> <a href="#">Les groupes</a> <a href="#">Partenaires</a>                 
		<div class="pa_staff">
			                <script type="text/javascript">
            	//
            </script>                             
			<div class="contenu_paonglets">
				                         
				<div class="contenu_paonglet" id="contenu_paonglet_staff1" style="display: block;">
					         <img src="https://i62.servimg.com/u/f62/19/84/31/89/tumblr10.gif" />                        
					<div class="contenu_staff">
						         
						<h2>
							     Adam Barton     
						</h2>
						         
						<h3>
							     Fondateur     
						</h3>
						         
						<h4>
							     <span>Présent</span> | <a href="#">MP</a> | <a href="#">Profil</a>     
						</h4>
						         
					</div>
					         
					<div class="clear">
						         
					</div>
					         
				</div>
				         
				<div class="contenu_paonglet" id="contenu_paonglet_staff2">
					     <img src="https://zupimages.net/up/17/51/ee7x.png" />     
					<div class="contenu_staff">
						         
						<h2>
							     A pourvoir     
						</h2>
						         
						<h3>
							     Administrateur    
						</h3>
						         
						<h4>
							     <span>Présent</span> | <a href="#">MP</a> | <a href="#">Profil</a>     
						</h4>
						         
					</div>
					         
					<div class="clear">
						         
					</div>
					         
				</div>
				         
			</div>
			                                 
			<div class="paonglets">
				                    <span class="paonglet_1 paonglet" id="paonglet_staff1" onmouseover="javascript:change_paonglet('staff1');">                           •                    </span>                                    <span class="paonglet_0 paonglet" id="paonglet_staff2" onmouseover="javascript:change_paonglet('staff2');">                           •                    </span>    
			</div>
			     <script type="text/javascript">
            	//
            	</script>     
		</div>
		         
		<div class="clear">
			         
		</div>
		         
	</div>
	         
	<div class="pa_news">
		         
		<h2>
			     Les nouveautés     
		</h2>
		         
		<p>
			     - Ouverture le : XX/XX/2018<br />- ...     
		</p>
		         
	</div>
	         
	<div class="clear">
		         
	</div><a class="credits_pa" href="http://ls-halloween.fr">Halloween</a>
</div>

Codage index complet Freedom catégories Halloween Forumactif PHPBB2

CSS

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

.clear {
    clear: both;
}

/* SCROLLBAR */
::-webkit-scrollbar {
    background: #c8c8c8;
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #f75709;
}

/***************************************************** CATEGORIES *****************************************************/
/* LIENS AVANT CATEGORIES */
.categories_liens_header a, .liens_footer_categories a {
    display: inline-block;
    text-align: center;
    font-size: 10px;
    background: #2c2d2f;
    padding: 1%;
    margin: 0 1%;
    text-transform: uppercase;
    color: #626667 !important;
}

.categories_liens_header, .liens_footer_categories {
    text-align: center;
    margin: 2% 0;
}

.categories_liens_header a:hover, .liens_footer_categories a:hover {
    background: #ed540b;
    color: #fff !important;
}

/* TITRE CATEGORIE */
.titre_categorie h2 {
    background: url(https://i.imgur.com/Rd6EneF.png);
    color: #deccce;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 1px;
    margin: auto;
    padding: .5% 0;
    text-align: center;
    text-transform: uppercase;
    width: 850px;
}

/* CONTENU FORUM */
.forum {
    background: url(https://i.imgur.com/UMxY17n.png);
    box-sizing: border-box;
    color: #626667;
    font-family: Arial;
    font-size: 12px;
    max-height: 200px;
    margin: auto;
    padding: 2% 2% 5%;
    position: relative;
    width: 850px;
    box-sizing: border-box;
}

/* BLOC GAUCHE */
.forum_gauche {
    float: left;
    width: 70%;
}

/* TITRE FORUM */
a.forumlink {
    color: #626667!important;
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 0 5%;
    text-transform: uppercase;
    position: relative;
    z-index: 3;
}

a.forumlink:hover {
    letter-spacing: 2px;
}

/* DESCRIPTION */
.forum_description {
    position: relative;
}

.forum_description p {
    background: #1e1f21;
    border: 1px solid #626667;
    box-sizing: border-box;
    font-size: 12px;
    height: 100px;
    margin: -2.5% 0 0 0;
    overflow: auto;
    padding: 3% 2% 2% 2%;
    position: relative;
    text-align: justify;
    font-family: Arial;
    width: 55%;
    z-index: 2;
}

/* AVATAR DERNIER MESSAGE */
.lastpost-avatar img {
    position: absolute;
    top: 11%;
    left: 43%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid #626667;
    border-radius: 0;
    padding: .8%;
}

/* DERNIER MESSAGE */
.dernier_message {
    float: left;
    font-size: 12px;
    width: 40%;
    margin: -1% 0 0 0;
}

.dernier_message a {
    color: #626667 !important;
    text-transform: uppercase;
    display: block;
}

.dernier_message a::before {
    content: "» ";
}

.dernier_message strong a {
    display: inline-block;
}

.dernier_message strong a::before {
    content: "par ";
}

a.last-post-icon {
    display: none;
}

/* IMAGE NEW NO NEW LOCK */
.statut_forum {
    float: right;
    height: 10px;
    object-fit: cover;
    width: 200px;
    margin: 0 24.5% 0 0;
}

/* SOUS FORUM */
.sous_forum {
    float: right;
    width: 20%;
    height: 150px;
    overflow: auto;
}

.sous_forum a {
    border-bottom: 1px dashed #626667;
    color: #626667!important;
    display: block;
    padding: 0 0 5%;
    text-align: right;
    text-transform: lowercase;
    margin: 5% 0;
}

.sous_forum a:hover {
    color: #f75709 !important;
}

/* FOOTER CATEGORIE */
.footer_categorie {
    background: url(https://i.imgur.com/8e9xJ51.png);
    margin: 0 auto 2% auto;
    width: 850px;
    padding: 1.5% 0;
    text-align: center;
    font-size: 18px;
    color: #fff;
    box-sizing: border-box;
    height: 52px;
}

Index_box

<div class="categories_liens_header">
	<a id="voirnouveauxmessages" 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>
<script type="text/javascript">document.getElementById('voirnouveauxmessages').innerHTML=document.getElementById('voirnouveauxmessages').innerHTML.replace(/Voir les nouveaux messages depuis votre dernière visite/,"Voir les nouveaux messages");</script>

<div class="titre_categorie">
                  	{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 class="lastpost-avatar">
                                  	{catrow.forumrow.avatar.LAST_POST_AVATAR}
                          	</div>
                          	
                          	<div class="clear">
                          	</div>
                          	<div class="dernier_message">
                                  	<span id="last">
                                          	{catrow.forumrow.LAST_POST}
                                  	</span>
    					<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>
                          
                          	<img class="statut_forum" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                          	<div class="clear">
                          	</div>
                  	</div>
                  	<div class="sous_forum">
                          	<span id="subforums">
                                  	{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                          	</span>
                  		<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>
                  	</div>
                  	<div class="clear">
                  	</div>
		</div>

<div class="footer_categorie">
          	rainyhalloween.wixsite.com
	</div>

Descriptions des forum

Les images "New", "No new" et "Lock" sont en 200*10px. L'image de fond de forum est en 850*200px.

Codage index complet Freedom 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: #c8c8c8;
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #f75709;
}

/***************************************************** QUI EST EN LIGNE *****************************************************/
/* LIENS APRES CATEGORIES */
.liens_footer_categories a {
    display: inline-block;
    text-align: center;
    font-size: 10px;
    background: #2c2d2f;
    padding: 1%;
    margin: 0 1%;
    text-transform: uppercase;
    color: #626667 !important;
}

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

.liens_footer_categories a:hover {
    background: #ed540b;
    color: #fff !important;
}

/* QEEL */
.fond_qeel {
    background: #2c2d2f;
    box-sizing: border-box;
    font-size: 12px;
    margin: 0 auto 2% auto;
    padding: 2%;
    width: 850px;
    font-family: Arial;
    color: #626667;
}

/* BLOCS GAUCHE ET DROIT */
.boite_qeel {
    background: #1e1f21;
    border: 1px solid #626667;
    padding: 1%;
    float: left;
    width: 30%;
    height: 150px;
    overflow: auto;
}

/* BLOC MILIEU */
.qeel_groupes {
    float: left;
    width: 33%;
    margin: 0 1%;
    text-align: center;
}

/* Mise en forme generale des liens */
.qeel_groupes a {
    display: inline-block;
    width: 30%;
    margin: 0 2% 2% 0;
    background: #1e1f21;
    text-transform: uppercase;
    padding: 1% 0;
    color: #3e464c !important;
}

/* Mise en forme de chaque groupe */
.qeel_g1 {background: #b594d4 !important;}
.qeel_g2 {}
.qeel_g3 {}
.qeel_g4 {}
.qeel_g5 {}
.qeel_g6 {}

/* Position de l image */
.qeel_groupes img {
    margin: 7% 0 0 0;
}

/* TRANSPARENCE DU BLOC 24H */
#kaboum .row1 {
    background-color: transparent;
}

#kaboum .row1 .gensmall {
    font-size: 12px;
    color: #626667;
    font-family: Arial;
}

Index_Body

{JAVASCRIPT}
<div class="fond_page_accueil">

	
	
	
		{message_admin_index.message_admin_txt.MES_TXT}

</div>

<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="liens_footer_categories">
  	
		<a id="marquerlus" href="{U_MARK_READ}">
                  	{L_MARK_FORUMS_READ}
  		</a>
	
  	<a href="{U_TODAY_ACTIVE}">
          	{L_TODAY_ACTIVE}
  	</a>
  	<a href="{U_TODAY_POSTERS}" id="topposteurs">
          	{L_TODAY_POSTERS}
  	</a>
  	
		
			<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" id="supprimercookies" rel="nofollow">
                          	{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
  			</a>
		
	
</div>
<script type="text/javascript">document.getElementById('marquerlus').innerHTML=document.getElementById('marquerlus').innerHTML.replace(/Marquer tous les forums comme lus/,"Marquer comme lus");</script>
<script type="text/javascript">document.getElementById('topposteurs').innerHTML=document.getElementById('topposteurs').innerHTML.replace(/Top 20 des posteurs du jour/,"Top 20 des posteurs");</script>
<script type="text/javascript">document.getElementById('supprimercookies').innerHTML=document.getElementById('supprimercookies').innerHTML.replace(/Supprimer les cookies du forum/,"Supprimer les cookies");</script>

<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="boite_qeel">
          	<span id="matt">
                  	{TOTAL_USERS}
                </span>
               	<span id="bert">
                  	{TOTAL_POSTS}
                </span>
          	<br />
                <span id="celine">
                  	{TOTAL_USERS_ONLINE}
          	</span>
          	<br />
                <span id="yosh">
                  	{NEWEST_USER}
                </span>
          	<br /><br />
          	<span id="alpha">
                  	{LOGGED_IN_USER_LIST}
                </span>
	</div>
  
  	<div class="qeel_groupes">
          	<a href="#" class="qeel_g1">
                  Master
          	</a>
          	<a href="#" class="qeel_g2">
                  	Freedom
          	</a>
          	<a href="#" class="qeel_g3">
                  	Obedience
          	</a>
          	<a href="#" class="qeel_g4">
                  	Aimless
          	</a>
          	<a href="#" class="qeel_g5">
                  	Rascal
          	</a>
          	<a href="#" class="qeel_g6">

</a>
          	
          	<img src="https://i.imgur.com/A8hqU2U.png" />
  	</div>
  
  	<div class="boite_qeel">
          	<table id="kaboum">
                  	{L_CONNECTED_MEMBERS}
          	</table>
  	</div>
  
  	<div class="clear">
  	</div>
</div>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
	
	<tr>
		<td class="row1">
			<span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
				
				<div id="chatbox_popup"></div>
				<script type="text/javascript">
				//<![CDATA[
				insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
				//]]>
				</script>
				
			</span>
		</td>
	</tr>
	
</table>

{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.

#freedom #indexcomplet #forumactif #codage #libreservice

Halloween