Welcome

Halloween Catégories

Sighless

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

PHPBB2

Optimisé Les images "New", "No new" et "Lock" est en 50*50 et s'affiche à côté du nom de forum. L'avatar du dernier posteur se trouve tout à droite et dépasse du cadre intérieur du forum.
Réalisé pour le forum :

Retour

Codage catégories Sighless Halloween Forumactif

CSS

/********************************************************************** CATEGORIES **********************************************************************/
.categories_shadow {
        width: 800px;
        margin: auto;
  	font-family: 'Roboto', sans-serif;
  	background: #262626;  	
        color: #000;
        font-size: 10px;
        line-height: 1.5;
}

.categories_shadow ::-webkit-scrollbar {
        width: 5px;
        background: #4BA0B5;
        border: 2px solid #f5f5f5;
}

.categories_shadow::-webkit-scrollbar-thumb {
        background: #4BA0B5;
        border: 1px solid #f5f5f5;
}

/* NOM CATEGORIE */
.titre_categorie h2 {
        color: #4BA0B5;
        display: block;
        font-family: 'Helvetica', sans-serif;
        font-size: 50px;
        font-weight: 400;
        margin: 0;
        padding: 5% 0 0;
        text-align: center;
        text-shadow: 0 2px 1px #000;
        font-style: italic;
        letter-spacing: -5px;
}

/* CONTENU FORUM */
.shadow_forum {
        box-sizing: border-box;
        margin: -3.3% auto 6%;
        width: 96%;
}

.forum_externe {
        background: #ccc;
        padding: 1%;
}

.forum_content {
        background: #ddd;
        border: 3px double #0e0e0e;
        margin: 5% auto 0;
        box-sizing: border-box;
  	position: relative;
        padding: 1% 1% 3%;
}

.forum_content::after {
        display: block;
        content: "";
        clear: both;
}

/* New no new lock */
img.forum_statut {
        float: left;
        width: 50px;
        margin: 0 2% 0 0;
}

/* Nom forum */
a.forumlink {
        font-family: cabin;
        color: #698 !important;
        text-transform: uppercase;
        font-size: 40px;
        letter-spacing: 5px;
        text-shadow: 1px 1px black;
        font-weight: normal;
        display: block;
        margin: 0 0 2%;
}

/* Statistiques */
.forum_stats {
        float: left;
        width: 18%;
        text-align: center;
        font-size: 7.4px;
        text-transform: uppercase;
        letter-spacing: 1px;
  	line-height: 1.3;
}

.forum_stats div {
        background: #e8e8e8;
        padding: 10% 0;
        border: 1px solid #f5f5f5;
}

.forum_stats div span {
        color: #96a6d2;
        display: block;
        font-size: 12px;
}

/* Description */
.forum_desc {
        float: left;
        margin: 0 1%;
        width: 50%;
        box-sizing: border-box;
        padding: 1%;
        text-align: justify;
        height: 106px;
        border: 1px solid #fff;
        overflow: auto;
}

/* Sous forum */
.forum_liens {
        float: left;
        width: 26%;
        height: 106px;
        overflow: auto;
}

.forum_liens a {
        background: #fff;
        border-radius: 0 10px 10px 0;
        box-shadow: 0 0 0 1px #ddd;
        color: #666;
        display: table;
        font-size: 8px;
        font-weight: 700;
        margin: 0 0 1%;
        padding: 2% 15%;
        text-align: center;
        text-transform: uppercase;
}

/* Avatar dernier posteur */
.dernier_posteur {
        position: absolute;
        right: -5%;
        width: 70px;
        height: 70px;
        border: 1px solid #fff;
        transform: rotate(45deg);
        overflow: hidden;    
  	z-index: 99;
        top: 36%;
}

.img_dernier img {
        transform: rotate(-45deg);
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin: -14px 0 0 -17px;
}

/* DERNIER MESSAGE */
.dernier_message {
        background: #181818;
        width: 98%;
        display: block;
        margin: 0 auto;
        border: 1px solid #212121;
        color: #bbb;
        font-family: Roboto;
        text-transform: uppercase;
        font-size: 8.4px;
        letter-spacing: 1px;
        border-radius: 5px;
        text-align: center;
        padding: .5% 0;
}

.dernier_message a {
        color: #669988;
        font-size: 8.4px;
}

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="categories_shadow">
		<div class="titre_categorie">
                  	{catrow.tablehead.L_FORUM}
		</div>

<div class="shadow_forum">
		<div class="forum_externe">
                          <div class="forum_content">	
                                  <img class="forum_statut" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                            
                                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                                          {catrow.forumrow.FORUM_NAME}
                                  </a>
                            
                                  <div class="forum_stats">
                                          <div>
                                                  <span>
                                                          {catrow.forumrow.TOPICS}
                                                  </span>
                                                  Sujets
                                          </div>
                                    
                                          <div>
                                                  <span>
                                                          {catrow.forumrow.POSTS}
                                                  </span>
                                                  Messages
                                          </div>
                                  </div>
                            
                                  <div class="forum_desc">
                                          {catrow.forumrow.FORUM_DESC}
                                  </div>
                            
                                  <div class="forum_liens" 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 class="dernier_posteur">
                                          <div class="img_dernier">
                                                  {catrow.forumrow.avatar.LAST_POST_AVATAR}
                                          </div>-->
                                  </div>
                          </div>
		</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>
	</div>

</div>
                <link href="https://fonts.googleapis.com/css?family=Cabin|Roboto" rel="stylesheet">

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

#sighless #categories #forumactif #codage #libreservice

Halloween