Welcome

Halloween Catégories

Rouges

Halloween, LS codage Forumactif Templates & Eléments Catégories Catégories rouges

PHPBB2

Optimisé /

Retour

Codage catégories rouges Halloween Forumactif

CSS

/***************************************************************** CATEGORIES *****************************************************************/
.contenu_categories {
        background: #B03636;
        padding: 2% 0;
        width: 780px;
        box-sizing: border-box;
        margin: 2% auto;
}

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

.contenu_categories ::-webkit-scrollbar {
    	width: 5px;
}

.contenu_categories ::-webkit-scrollbar-thumb {
    	background-color: #B03636;
}

.contenu_categories ::-webkit-scrollbar-track {
    	background-color: #d9d9d9;
}

.clear {
  	clear: both;
}

/* TITRE CATEGORIE */
.contenu_categories h2 {
        background: #D16969;
        box-shadow: 2px 2px 15px #000;
        color: #6F2222;
        font-family: 'Carrois Gothic SC', sans-serif;
        font-size: 20px;
        margin: 0 auto 3% auto;
        padding: 3%;
        text-align: center;
        width: 75%;
        text-transform: uppercase;
}
  
.forum {
        width: 90%;
  	font-family: 'Carrois Gothic SC', sans-serif;
        margin: auto;
}

/* BLOC NOM FORUM, DESCRIPTION, SOUS FORUM */
.bloc1 {
        width: 76%;
        float: left;
}

.contenu_forum {
        background: #F0E9DB;
        box-shadow: 2px 2px 15px #000;
        margin-top: -2.7%;
  	min-height: 140px;
        padding: 5% 2% 3% 2%;
}

/* Titre forum */
.forumlink {
        color: #551A1A !important;
        font-family: 'Kite One', sans-serif;
        font-size: 25px !important;
        text-align: center;
        display: block;
        margin: 0;
}

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

.forumlink:hover {
        color: #C8AE79 !important;
        text-decoration: none !important;
}

/* Description */
.description p {
        background: #FCFAF5;
        border-radius: 5px;
        color: #7D2626;
        font-size: 11px;
        height: 100px;
        padding: 2% 5%;
        text-align: justify;
        width: 70%;
        box-sizing: border-box;
        float: right;
        overflow: auto;
        margin: 0 5% 0 0;
}

.description img {
        display: block;
        float: right !important;
        margin: 0 2% 0 0;
}

/* SOUS FORUM */
.sous_forum {
        width: 90%;
        margin: 3% auto 0;
}

.sous_forum a {
        color: #A47B8E !important;
}

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

/* BLOC DERNIER MESSAGE, STATUT ET STATISTIQUES */
.bloc2 {
        background: #F0E9DB;
        box-shadow: 2px 2px 15px #000;
        width: 20%;
        margin: 3% 0 0 4%;
        float: left;
        height: 183px;
        text-align: center;
        padding: 2% 0;
  	font-size: 12px;
  	color: #7D2626;
        box-sizing: border-box;
}

/* Statut forum */
img.statut_forum {
        width: 100px;
        margin: 0 auto 10%;
        display: block;
        max-height: 50px;
}

/* Dernier message */
.bloc2 div {
    	margin: 10% 0 10% 0;
}

/***************************************************************** FIN CATEGORIES *****************************************************************/

Index_box

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>

<div class="contenu_categories">
			{catrow.tablehead.L_FORUM}
	
  
        
        
   
        
		<div class="forum">
                	<div class="bloc1">
                          	<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                          		{catrow.forumrow.FORUM_NAME}
                  		</a>
                  	
                  		<div class="contenu_forum">
                                  	<div class="description">
                          			{catrow.forumrow.FORUM_DESC}
                                          
                                          	<div class="clear">
                                  		</div>
                  			</div>                                  	
                  
                  			<div class="sous_forum">
                          			{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                  			</div>
                          	</div>
                	</div>
                  
                  	<div class="bloc2">
                          	<img class="statut_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                          	<span>
                                  	{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages
                          	</span>
                          	<div class="dernier_mess">
                                  	{catrow.forumrow.LAST_POST}
                          	</div>
                  	</div>
                  
                  	<div class="clear">
                  	</div>
               </div>
   	
   
        
        
   
        
		</div> 
 	

<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>

Descriptions des forums

Les illustrations de catégories sont à insérer dans le champ image de chaque forum. Les textes des catégories sont à entourer d'un :

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

#categoriesrouges #categories #forumactif #codage #libreservice

Halloween