Welcome

Halloween Liste sujets

Que la Nuit vienne

Halloween, LS codage Forumactif Templates & Eléments Liste des sujets Liste des sujets Que la Nuit vienne

PHPBB2

Optimisé Un module d'annonces défilantes précédant la page d'accueil, un index complet, un message & profil ainsi qu'un profil sont également disponibles.
Réalisé pour le forum :

Retour

Ajouter la police

Pour ajouter la police de la maquette, coller le code suivant dans le template "Overall_header" avant "T_HEAD_STYLESHEET" (l.18) :

Codage liste des sujets Que la Nuit vinne Halloween Forumactif

CSS

/************************************************ LISTE SUJETS ************************************************/
.liste_sujet_header::after {
        content: "";
        display: block;
        clear: both;
}

/* HEADER */
.liste_sujet_header {
        width: 850px;
        margin: auto;
  	font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
}

.liste_sujet_header .ls_fil_ariane {
        float: left;
        width: 80%;
}

.liste_sujet_header .ls_fil_ariane img {
    	height: 50px;
}

.liste_sujet_header .ls_fil_ariane a {
    	color: #8e8f8d;
}

.liste_sujet_header .ls_nouveau {
    	float: right;
}

/* LISTE */
.liste_sujets {
        width: 850px;
        margin: 2% auto;
        background: #151a15;
  	font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
        border-radius: 50px 50px 25px 25px;
}

.ls_header {
        background: url(https://www.zupimages.net/up/18/46/s4po.png);
        border-radius: 50px 50px 0 0;
        height: 130px;
        text-align: center;
        width: 100%;
        font-size: 35px;
        font-weight: normal;
        font-family: 'Berkshire Swash', cursive;
        padding: 5.5% 0 0 0;
        box-sizing: border-box;
}

.ls_content {
        width: 90%;
        margin: 2% auto;
        display: flex;
}

/* Dernier message */
.ls_dernier {
        background: rgba(0,0,0,.2);
        padding: 2%;
        width: 28%;
  	box-sizing: border-box;
}

.ls_dernier a {
        text-transform: uppercase;
        font-size: 14px;
        margin: 0 2% 0 0;
}

/* Statut */
.ls_statut {
        margin: 0 2%;
        align-self: center;
}

/* Nom sujet */
.ls_nomsujet {
        width: 40%;
        margin: 0 2% 0 0;
        background: rgba(0,0,0,.2);
        padding: 2%;
}

.ls_nomsujet h2 {
        display: inline-block;
        margin: 0 0 0 2%;
  	text-transform: uppercase;
}

.ls_auteur::before {
        content: "Rédigé par ";
        margin: 0 2% 0 0;
}

/* Avatar */
.ls_avatar img {
        width: 100px;
        height: 70px;
        object-fit: cover;
}

/* Statistiques */
.ls_stats {
        width: 15%;
        margin: 0 0 0 2%;
  	align-self: center;
}

.ls_stats span {
        display: block;
        text-align: center;
        background: rgba(0,0,0,.2);
        padding: 3% 0;
        text-transform: uppercase;
}

.ls_stats span:nth-child(2) {
    	margin: 10% 0 0;
}

.ls_footer {
        background: url(https://www.zupimages.net/up/18/46/lms2.png);
        border-radius: 0 0 25px 25px;
        height: 50px;
        width: 100%;
}

/* FOOTER */
.liste_sujets_footer {
        width: 850px;
        margin: auto;
  	font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
}

.liste_sujets_footer .ls_fil_ariane {
        float: left;
        width: 80%;
}

.liste_sujets_footer .ls_fil_ariane img {
    	height: 50px;
}

.liste_sujets_footer .ls_nouveau {
    	float: right;
}

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

/* BOUTONS */
.liste_sujets_boutons {
        margin: 2% auto;
        text-align: center;
        width: 850px;
        display: flex;
        justify-content: center;
  	font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
}

.liste_sujets_boutons a {
        background: #151a15;
        color: #8e8f8d;
        font-size: 14px;
        line-height: 3;
        text-transform: uppercase;
        width: 240px;
        display: block;
        margin: 0 10px;
}

span.ls_moderation {
    	font-size: 0;
}

.liste_sujets_boutons a:hover {
        background: #556b4d;
        color: #8e8f8d !important;
}

a.credits_sujets {
        color: #8e8f8d;
        text-align: right;
        display: block;
        padding: 1.5% 3%;
        font-size: 10px;
        text-transform: uppercase;
}

/* Pagination */
.ls_pagination {
        text-align: right;
        font-size: 12px;
        margin: 2%;
  	font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
}

Topic_list_box

<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
	var all_checked = true;
	for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
		if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
			all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
		}
	}
	document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
	for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
		if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
			document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
		}
	}
}
</script>

  
<div class="liste_sujets">
  	<div class="ls_header">
          	{topics_list_box.row.L_TITLE}
  	</div>

<div align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></div>
	
	
	
	<div class="ls_pagination">
          	{PAGINATION}
  	</div>

{topics_list_box.row.END_TABLE_STICKY}
  
  	<div class="ls_content">
          
          	
		<div class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></div>
		
          
          	<div class="ls_dernier">
                  	{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}
          	</div>
          
          	<div class="ls_statut">
                  		<img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
          	</div>
          
          	<div class="ls_nomsujet">
                  	{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
			<h2>
				<a href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
			</h2>
                  	<div class="ls_auteur">
                          	{topics_list_box.row.TOPIC_AUTHOR}
                  	</div>
          	</div>
          
          	<div class="ls_avatar">
                  	
            			<span class="lastpost-avatar">
                                  	{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}
                  		</span>
            		
          	</div>
          
          	<div class="ls_stats">
                  	<span>
                          	{topics_list_box.row.VIEWS} vues
                  	</span>
                  
                  	<span>
                          	{topics_list_box.row.REPLIES} réponses
                  	</span>
          	</div>
  
	
		<div class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></div>
	
  	
  	</div>
	
	<div class="ls_pasdesujet">
          	{topics_list_box.row.L_NO_TOPICS}
  	</div>
	
	<div class="ls_footer">
          	<a href="http://ls-halloween.fr/" class="credits_sujets">
                  	Halloween
          	</a>
  	</div>

</div><br class="gensmall" />

Viewforum_body

{BOARD_INDEX}

<div class="liste_sujet_header">
  	<div class="ls_fil_ariane">
          	<a class="nav" href="{U_INDEX}">
                  	{L_INDEX}
          	</a>
          	{NAV_CAT_DESC_SECOND}
  	</div>
  
  	<div class="ls_nouveau">
          	
			<a href="{U_POST_NEW_TOPIC}" rel="nofollow">
                          	<img src="{POST_IMG}" id="{POST_IMG_ID}1" alt="{L_POST_NEW_TOPIC}" border="0" />
          		</a>
		
  	</div>
</div>

{TOPICS_LIST_BOX}

<div class="liste_sujets_footer">
  	<div class="ls_fil_ariane">
          	<a class="nav" href="{U_INDEX}">
                  	{L_INDEX}
          	</a>
          	{NAV_CAT_DESC_SECOND}
  	</div>
  
  	<div class="ls_nouveau">
          	
			<a href="{U_POST_NEW_TOPIC}" rel="nofollow">
                          	<img src="{POST_IMG}" id="{POST_IMG_ID}1" alt="{L_POST_NEW_TOPIC}" border="0" />
          		</a>
		
  	</div>
</div>

<div class="liste_sujets_boutons">
  	<span class="ls_moderation">
                {S_AUTH_LIST}
        </span>
  
  	<a href="{U_MARK_READ}">
                {L_MARK_TOPICS_READ}
        </a>
          
        {S_WATCH_FORUM}
</div>

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

#nuit #listesujets #forumactif #codage #libreservice

Halloween