Welcome

Halloween Index complets

Pandémic

Halloween, LS codage Forumactif Index complets Index complet Pandemic

PHPBB2

Optimisé Profil & Message, liste des sujets et fiche de présentation disponibles. Réalisés pour le forum Pandemic. La maquette complète

Retour

Codage index complet Pandemic accueil Halloween Forumactif

CSS

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

/********************************************************* PAGE ACCUEIL *********************************************************/
.page_accueil {
        background: #000;
        color: #c2c8cb;
        font-family: Raleway, sans-serif;
        font-size: 10px;
        line-height: 1.5;
        margin: 3% auto;
        width: 100%;
        padding: 3%;
        box-sizing: border-box;
}

.page_accueil ::-webkit-scrollbar {
        background: #FAFAFA;
        border: 4px solid #000;
        height: 9px;
        width: 9px;	
}

.page_accueil ::-webkit-scrollbar-corner {
        background: #2B2B2B;
        width: 3px;
}

.page_accueil ::-webkit-scrollbar-thumb {
        background-color: #FAFAFA;
        border: solid #2B2B2B;
        border-radius: 10px;
  	border-width: 1px 2px;
        height: auto;
        width: 5px;
}

.page_accueil a {
  	color: #c2c8cb;
}

.pa_gauche, .pa_droite {
        float: left;
        width: 46%;
        margin: 0 2%;
}

.page_accueil h2 {
        font-weight: normal;
        font-size: 14px;
        text-align: center;
        text-transform: uppercase;
        margin: -2.7% auto 0 auto;
        background: #000;
        width: 50%;
}

.bloc_histoire, .bloc_admin, .bloc_infos_utiles {
        border: 1px solid #32312f;
        padding: 0 3% 3% 3%;
}

.bloc_histoire p {
        width: 95%;
        padding: 0 5% 0 0;
        height: 150px;
        overflow: auto;
        text-align: center;
  	font-family: Raleway, sans-serif;
}

.bloc_histoire a {
        color: #65382e !important;
        text-align: center;
        display: block;
        margin: 4% 0 0 0;
}

/* STAFF */
.pa_staff a {
        color: #65382e!important;
        letter-spacing: 1px;
}

.pa_staff {
        float: left;
        text-align: center;
        margin: 3% 4% 0 4%;
}

.pa_staff img {
        display: block;
        border: 1px solid #32312f;
    	width: 98.5%;
}

/* INFORMATIONS UTILES */
.bloc_infos_utiles {
        margin: 3% 0 0;
        padding: 0 3% .5% 3%;
  	text-align: center;
}

.bloc_infos_utiles p a {
    	text-align: left;
}

.bloc_infos_utiles p {
        width: 95%;
        padding: 0 5% 0 0;
        height: 54px;
        overflow: auto;
  	text-align: left;
  	font-family: Raleway, sans-serif;
}

/* CREDITS */
.credits_pa {
        text-align: right;
        display: block;
        margin: 2% 0 0 0;
}

HTML

Codage index complet Pandémic catégories Halloween Forumactif PHPBB2

CSS

/********************************************************* CATEGORIES *********************************************************/
/* LIENS HAUT ET BAS CATEGORIES */
.liens_rapides_categories a:hover {
        color: #fff !important;
}

.liens_rapides_categories {
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 2% 0;
}

/* CATEGORIES */
.categories {
        background: #000;
        box-sizing: border-box;
        color: #c2c8cb;
        display: table;
        font-family: Raleway, sans-serif;
        font-size: 10px;
        line-height: 1.5;
        margin: 1% auto;
        padding: 0 2% 2%;
        width: 800px;
}

.titre_cate h2 {
  	font-size: 20px;
        font-weight: 700;
        text-align: right;
        padding: 2%;
        color: #fff;
        letter-spacing: -1px;
}

/* BLOCS FORUMS */
.forum:nth-child(even) {
        margin: 2% 2% 0 0;
}

.forum {
        border: 1px solid #32312f;
        float: left;
        width: 49%;
        margin: 2% 0;
        height: 220px;
        box-sizing: border-box;
        padding: 0 2% 1% 2%;
}

a.forumlink {
        background: #000;
        display: block;
        font-size: 12px;
        font-weight: 400;
        margin: -2.7% auto 5%;
        text-align: center;
        text-transform: uppercase;
        width: 50%;
        color: #fff !important;
  	transition: .5s all;
}

.categories a {
  	color: #fff !important;
  	transition: .5s all;
}

a.forumlink:hover, .categories a:hover {
  	color: #512c24!important;
  	transition: .5s all;
}

.description_forum {
        width: 100%;
        height: 40px;
        overflow: auto;
}

.forum_dernier_message {
        border: 1px solid #32312f;
        width: 90%;
        margin: 10% auto 2%;
        padding: 0 2% 0;
        text-align: center;
  	height: 65px;
}

.forum_statut {
        width: 50px;
        height: 50px;
        border: 1px solid #32312f;
        border-radius: 100px;
        object-fit: cover;
        margin: -8% 0 0 0;
}

.sous_forum {
        width: 100%;
        height: 50px;
        overflow: auto;
}

.sous_forum a {
        display: inline-block;
        width: 49%;
}

.sous_forum a::before {
        content: "• ";
}

/* OVERFLOW */
.categories ::-webkit-scrollbar {
        background: #FAFAFA;
        border: 4px solid #000;
        height: 9px;
        width: 9px;	
}

.categories ::-webkit-scrollbar-corner {
        background: #2B2B2B;
        width: 3px;
}

.categories ::-webkit-scrollbar-thumb {
        background-color: #FAFAFA;
        border: solid #2B2B2B;
        border-radius: 10px;
  	border-width: 1px 2px;
        height: auto;
        width: 5px;
}

Index_box

<div class="categories">
          	<div class="titre_cate">
                  	{catrow.tablehead.L_FORUM}
          	</div>
	
          
	
	
          
	
	<div class="forum">
          	<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                  	{catrow.forumrow.FORUM_NAME}
          	</a>
          
          	<div class="description_forum">
                  	{catrow.forumrow.FORUM_DESC}
          	</div>
          
          	<div class="forum_dernier_message">
                  	<img class="forum_statut" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  
                  	<p id="last">{catrow.forumrow.LAST_POST}</p>
                  	<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>
          
          	<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>
          
	
          
	
	
          
	
	</div>
	<img src="{SPACER}" alt="" height="5" width="1" />

Les images "New", "No new" et "Lock" en 52*52px.

Codage index complet Pandemic qui est en ligne Halloween Forumactif PHPBB2

CSS

/********************************************************* QUI EST EN LIGNE *********************************************************/
.qui_est_en_ligne {
        background: #000;
        border: 1px solid #32312f;
        color: #c2c8cb;
        font-family: Raleway, sans-serif;
        font-size: 10px;
        line-height: 1.5;
        margin: 3% auto 0;
        padding: 2%;
        width: 800px;
        box-sizing: border-box;
}

.qui_est_en_ligne h2 {
        text-transform: uppercase;
        font-weight: normal;
        font-size: 18px;
        text-align: center;
        background: #000;
        width: 20%;
        margin: -1.7% auto 0;
  	color: #c2c8cb;
}

.qeel_gauche {
        border: 1px solid #32312f;
        width: 43%;
        float: left;
        padding: 2%;
        box-sizing: border-box;
        text-align: center;
  	margin: 2.5% 0 0 0;
}

.qeel_connectes {
        text-align: justify;
        width: 100%;
        height: 80px;
        overflow: auto;
        margin: 10% 0 0 0;
}

.qeel_droit {
        float: right;
        width: 50%;
}

.qeel_connectes24 {
        border: 1px solid #32312f;
        width: 100%;
        padding: 2%;
        box-sizing: border-box;
        height: 100px;
        overflow: auto;
        margin: 5% 0 0 0;
}

.qeel_connectes24 .row1 {
    	background: transparent;
}

#kaboum .gensmall {
    	font-size: 10px !important;
  	color: #c2c8cb;
}

.qui_est_en_ligne a:hover {
  	color: #512c24!important;
}

.groupes {
        width: 100%;
        margin: 2% 0 0 0;
}

.groupes a {
        width: 46%;
        display: inline-block;
        text-align: center;
        padding: 2%;
        border: 1px solid;
        font-size: 13px;
        text-transform: uppercase;
        box-sizing: border-box;
        margin: 1% 2%;
}

a.immunes {
        color: #1D402B;
}

a.black_guard {
    	color: #1A35AA;
}

a.outlaw {
    	color: #940B3B;
}

a.hopeless {
    	color: #4E4809;
}

/* OVERFLOW */
.qui_est_en_ligne ::-webkit-scrollbar {
        background: #FAFAFA;
        border: 4px solid #000;
        height: 9px;
        width: 9px;	
}

.qui_est_en_ligne ::-webkit-scrollbar-corner {
        background: #2B2B2B;
        width: 3px;
}

.qui_est_en_ligne ::-webkit-scrollbar-thumb {
        background-color: #FAFAFA;
        border: solid #2B2B2B;
        border-radius: 10px;
  	border-width: 1px 2px;
        height: auto;
        width: 5px;
}
                
/* CREDITS */
.credits_qeel {
        text-align: right;
        display: block;
        margin: 2% 0 0 0;
}

Index_Body

A placer entre les commentaires "BEGIN disable_viewonline" (ligne 136) et "END disable_viewonline" (ligne 184).

<div class="qui_est_en_ligne">
  	<h2>Qui a survécu ?</h2>
  	
  	<div class="qeel_gauche">
          	<span id="matt">
                  	{TOTAL_USERS}
                </span>
                <span id="bert">
                  	{TOTAL_POSTS}
                </span>
                <span id="yosh">
                  	{NEWEST_USER}
                </span>
               
          	<div class="qeel_connectes">
          		<span id="alpha">
                          	{LOGGED_IN_USER_LIST}
                	</span>
          	</div>
        </div>
  
  	<div class="qeel_droit">
          	<div class="qeel_connectes24">
                  	<table id="kaboum">
                  		{L_CONNECTED_MEMBERS}
          		</table>
          	</div>
          
          	<div class="groupes">
                  	<a href="http://pandemic.forumactif.com/g2-immune" class="immunes">
                          	Immunes
                  	</a>
                  
                  	<a href="http://pandemic.forumactif.com/g3-black-guard" class="black_guard">
                          	Black Guard
                  	</a>
                  
                  	<a href="http://pandemic.forumactif.com/g4-outlaw" class="outlaw">
                          	Outlaw
                  	</a>
                  
                  	<a href="http://pandemic.forumactif.com/g5-hopeless" class="hopeless">
                          	Hopeless
                  	</a>
          	</div>
  	</div>
  
  	<div class="clear">
  	</div>
  
  	<a target="_blank" class="credits_qeel" href="http://ls-halloween.fr/"><img alt="Halloween codage libre service" src="http://ls-halloween.fr/img/partenaires.jpg" /></a>
</div>

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

#pandemic #indexcomplet #forumactif #codage #libreservice

Halloween