Welcome

Halloween Index complets

Fell from the Sky

Halloween, LS codage Forumactif Index complets Index complet Fell from the Sky

Invision

Optimisé Les liens "Voir les nouveaux messages", "Voir ses messages" et "Voir les messages sans réponses" apparaissent au survol du texte "Plus", au-dessus des catégories. Réalisé pour le forum Fell From The Sky. La maquette complète

Retour

Codage index complet Fell From The Sky accueil Halloween Forumactif

Les images rondes de la page d'accueil peuvent servir pour des prédéfinis (il faudra ajouter un lien) ou tout simplement en décoration (50*50px). Les traits rouges et noirs sont des partenaires. Les images du staff sont en 105*60px, celle du nom du forum en 230*30px.

CSS

/************************************************* PAGE ACCUEIL *************************************************/
div.newslink {
        background: #fff;
        border: 1px solid rgba(211, 207, 207, .7);
        width: 790px;
        margin: 2% auto;
        box-sizing: border-box;
        text-align: center;
        padding: 2% 0;
  	font-size: 10px;
}

.page_accueil {
        display: flex;
        justify-content: center;
  	font-family: Verdana, sans-serif;
        font-size: 10px;
  	color: #373535;
        flex-wrap: wrap;
        flex-basis: 30%;
        align-items: flex-start;
}

.page_accueil .pa_contexte, .page_accueil .pa_news_infos {
        background: #eceaed;
        width: 30%;
        border: 1px solid rgba(211, 207, 207, .7);
}

.page_accueil .pa_center {
        width: 30%;
        margin: 0 2%;
}

/* SCROLLBAR */
.page_accueil ::-webkit-scrollbar {
        background: #2B2B2B;
        height: 9px;
        width: 5px;
}

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

/* TITRES */
.page_accueil h2 {
        background: #000;
        color: #8c2c2b;
        display: block;
        width: 80%;
        margin: 4% auto;
        text-transform: uppercase;
        font-weight: normal;
        font-size: 11px;
        padding: 2% 0;
}

/* CONTEXTE */
.page_accueil .pa_contexte p {
        width: 95%;
        margin: 0 auto 2%;
        text-align: left;
        height: 217px;
        overflow: auto;
        padding: 0 2% 0 0;
        box-sizing: border-box;
}

.page_accueil .pa_contexte p span, .page_accueil .pa_contexte p a {
    	color: #8c2c2b;
}

/* STAFF */
.page_accueil .pa_staff {
        background: #eceaed;
        border: 1px solid rgba(211,207,207,.7);
        display: flex;
        padding: 2% 2% 4%;
        margin: 7% auto;
}

.page_accueil .pa_staff div a {
        color: #373535;
        text-transform: uppercase;
        font-size: 9px;
}

.page_accueil .pa_staff div img {
    	margin: 0 0 4%;
}

/* ILLUSTRATIONS */
.page_accueil .pa_img img {
        border: 1px dashed #8c2c2b;
        border-radius: 100px;
        padding: 1%;
        margin: 5.6% 0;
}

.page_accueil .pa_img img:nth-child(2) {
    	margin: 0 11%;
}

/* PARTENAIRES */
.page_accueil .pa_partenaires {
        display: flex;
        margin: 8% 0 0;
}

.page_accueil .pa_partenaires a {
        content: "";
        background: #000;
        width: 50px;
        height: 5px;
        display: block;
        margin: 0 4% 0 0;
}

.page_accueil .pa_partenaires a:last-child {
    	margin: 0;
}

.page_accueil .pa_partenaires a:nth-child(2n+2) {
    	background: #8c2c2b;
}

/* NEWS ET INFOS */
.page_accueil .pa_news_infos p {
        width: 90%;
        margin: auto;
        box-sizing: border-box;
        overflow: auto;
        text-align: left;
        height: 70px;
        line-height: 1.2;
}

.page_accueil .pa_news_infos p span::before {
        font-weight: bold;
        content: "|";
        color: #8c2c2b;
        display: inline-block;
}

/* Infos */
.page_accueil .pa_news_infos .pa_infos {
    	height: 110px;
}

a.pa_credit {
        text-align: right;
        display: block;
        color: #eceaed;
        text-transform: uppercase;
        font-size: 10px;
        font-family: Verdana, sans-serif;
        margin: 1% 3% 0 0;
}

HTML

<div class="page_accueil">
	             
	<div class="pa_contexte">
		             
		<h2>
			       Contexte       
		</h2>
		             
		<p>
			       <span>Prélude :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae varius nulla. Ut aliquet, augue at rhoncus sollicitudin, purus lorem hendrerit nunc, in eleifend felis sapien ac sapien. Nulla vitae finibus orci. Mauris et fermentum eros. Cras cursus urna purus, non suscipit libero tempor sit amet. Quisque sem ligula, placerat id urna sit amet, dictum euismod ipsum. Donec vestibulum quam nec arcu interdum euismod. Nullam dictum sodales purus, vel congue nulla suscipit sed. Proin vel quam et est porta bibendum. Mauris lobortis risus elit, eu molestie risus commodo quis. Suspendisse potenti.<br /><br />Ut tincidunt, mi non placerat fringilla, mi nibh luctus erat, scelerisque fringilla enim purus et quam. Nullam posuere orci sed felis posuere vehicula. Etiam at scelerisque augue, ac posuere augue. Cras gravida, velit condimentum posuere faucibus, felis erat dignissim risus, ut molestie sapien velit vel lacus. Vestibulum pretium erat nunc, sed faucibus nulla fringilla eget. Etiam consectetur est vitae dolor auctor interdum. Mauris a mollis purus, dapibus vestibulum urna. <a href="#">En lire plus ...</a>       
		</p>
		             
	</div>
	             
	<div class="pa_center">
		       <img src="https://i.imgur.com/hJqVr0B.png" alt="" />       
		<div class="pa_staff">
			             
			<div>
				       <img src="https://i.servimg.com/u/f16/20/03/31/05/img_st11.gif" alt="Staff 1" /><a href="#">Profil</a> | <a href="#">Message</a>       
			</div>
			             
			<div>
				       <img src="https://i.servimg.com/u/f16/20/03/31/05/img_st10.gif" alt="Staff 2" /><a href="#">Profil</a> | <a href="#">Message</a>       
			</div>
			             
		</div>
		             
		<div class="pa_img">
			       <img src="https://i.servimg.com/u/f16/20/03/31/05/img_ro10.png" alt="" /> <img src="https://i.servimg.com/u/f16/20/03/31/05/img_ro11.png" alt="" /> <img src="https://i.servimg.com/u/f16/20/03/31/05/img_ro12.png" alt="" />       
		</div>
		             
		<div class="pa_partenaires">
			       <a href="#" target="_blank"> </a> <a href="#" target="_blank"></a> <a href="#" target="_blank"></a> <a href="#" target="_blank"></a> <a href="#" target="_blank"></a> <a href="#" target="_blank"></a> <a href="#" target="_blank"></a> <a href="#" target="_blank"></a>       
		</div>
		             
	</div>
	             
	<div class="pa_news_infos">
		             
		<h2>
			       Nouveautés       
		</h2>
		             
		<p>
			       <span></span>01.03.2019 : Ouverture du forum<br /><span></span>01.03.2019 : Ouverture du forum<br /><span></span>01.03.2019 : Ouverture du forum       
		</p>
		             
		<h2>
			       Qu'est-ce que ?       
		</h2>
		             
		<p class="pa_infos">
			       <span> </span> Forum basé sur l'univers de la série The 100.<br /><span></span> Avatar de taille 200*320.<br /><span></span> Pas de nombre de lignes requis.<br /><span></span> Minimum 1 message toutes les deux semaines.<br /><span></span> L'histoire se déroule en 2150, à la suite de la destruction totale du Mont Weather.       
		</p>
		             
	</div>
</div><a href="http://ls-halloween.fr" target="_blank" class="pa_credit">Halloween</a>

Index_body

On enlève la partie "dernière visite le" en supprimant la ligne 9 soit :

Codage index complet Fell From The Sky catégories Halloween Forumactif PHPBB2

Les liens "Voir les nouveaux messages", "Voir ses messages" et "Voir les messages sans réponses" apparaissent au survol du texte "Plus".

CSS

/************************************************* CATEGORIES *************************************************/
/*LIENS UTILES */
.cate_liens_utiles {
        display: block;
        text-align: right;
        margin: 0 1% 0 0;
  	position: relative;
  	font-family: Verdana, sans-serif;
        font-size: 10px;
  	color: #373535;
}

.cate_liens_utiles p {
    	text-transform: uppercase;
}

.cate_liens_utiles > .bulle_content {
        opacity: 0;
        position: absolute;
        transform: scale(0.3) rotate(-45deg);
        transition: all .3s linear;
        visibility: hidden;
        right: 6.5%;
        top: -150%;
}

.cate_liens_utiles .bulle_content::before {
        content: "▶";
        position: absolute;
        top: 35%;
        font-size: 14px;
        color: rgba(211,207,207,.7);
}

.cate_liens_utiles:hover > .bulle_content {
        opacity: 1;
        visibility: visible;
        transform: scale(1) rotate(0deg);
}

.contenu_liens_utiles {
        border-radius: 5px;
        color: #fff;
        margin: auto;
        padding: 2%;
        text-align: center;
        background: #eceaed;
        border: 1px solid rgba(211,207,207,.7);
}

.contenu_liens_utiles a {
        display: block;
        color: #373535;
}

.categories {
        width: 790px;
        margin: 2% auto 0;
        background: #fff;
        border: 1px solid rgba(211,207,207,.7);
        box-sizing: border-box;
        font-size: 10px;
  	font-family: Verdana, sans-serif;
        font-size: 10px;
  	color: #373535;
}

.categories ::-webkit-scrollbar {
        background: #2B2B2B;
        height: 9px;
        width: 5px;
}

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

/* TITRES CATEGORIES */
.categories_header {
        width: 790px;
        height: 100px;
        background: url(https://i.servimg.com/u/f16/20/03/31/05/img_fo11.png);
        text-align: center;
        box-sizing: border-box;
        font-family: Verdana;
        font-size: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: -5px;
        text-transform: uppercase;
}

.categories_header h2::before, .categories_header h2::after {
        content: "•";
        font-size: 20px;
        color: #852728;
        margin: 0 5%;
}

/* FORUM */
.forum_content {
        width: 90%;
        margin: 2% auto;
        display: flex;
        height: 85px;
}

/* Bloc description et statut */
.forum_description_statut {
        width: 50%;
        display: flex;
}

.forum_description {
        background: #eceaed;
        border: 1px solid rgba(211,207,207,.7);
        padding: 4% 13% 4% 2%;
        text-align: justify;
        width: 90%;
        box-sizing: border-box;
}

.forum_description p {
        overflow: auto;
        width: 100%;
        height: 54px;
        padding: 0 5% 0 0;
        box-sizing: border-box;
  	line-height: 1.2;
}

.forum_description p span {
        color: #8c2c2b;
        font-weight: bold;
}

.forum_statut {
        margin: 0 0 0 -10%;
        z-index: 1;
        align-self: center;
}

/* Bloc nom forum, dernier message avatar */
.nom_forum_dernier_avatar {
        width: 30%;
        display: flex;
}

.nom_forum_dernier {
        background: #eceaed;
        border: 1px solid rgba(211,207,207,.7);
        padding: 2% 5%;
        box-sizing: border-box;
        width: 100%;
        height: 85px;
}

.nom_forum_dernier .forumtitle {
        text-align: center;
        display: block;
        font-family: Verdana;
        font-weight: bold;
        color: #373535;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: -1px;
}

.forum_avatar {
        align-self: center;
        margin: 0 0 0 -15%;
        z-index: 1;
}

.nom_forum_dernier_avatar .forum_avatar img {
        width: 60px;
        height: 60px;
        border-radius: 100px;
        object-fit: cover;
        align-self: center;
}

.dernier_message {
    	margin: 8% 0 0;
}

.dernier_message a {
    	color: #373535;
}

.dernier_message span strong a:before {
        content: "écrit par ";
        font-weight: normal;
}

/* Sous-forum */
.sous_forum {
        background: #eceaed;
        border: 1px solid rgba(211,207,207,.7);
        width: 18%;
        padding: 0 2%;
        margin: 0 0 0 2%;
        box-sizing: border-box;
        text-align: center;
        height: 85px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
}

.sous_forum a {
    	color: #373535;
}

/* LIENS FOOTER CATEGORIES */
.cate_liens_footer {
        text-align: center;
        margin: 0 0 3%;
}

.cate_liens_footer a {
        color: #373535;
        text-transform: uppercase;
        font-weight: bold;
}

.cate_liens_footer a:nth-child(1)::after {
    	content: " | ";
}

a.cate_credit {
        text-align: right;
        display: block;
        color: #eceaed;
        text-transform: uppercase;
        font-size: 10px;
        font-family: Verdana, sans-serif;
        margin: 0 5% 2% 0;
}

Index_box

<div class="cate_liens_utiles">
  	<p>
          Plus !
  	</p>
  		
  	<div class="bulle_content">
		<div class="contenu_liens_utiles">
			
				<a 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>
	</div>
</div>

<div class="categories">
			<div class="categories_header">
                          	{catrow.tablehead.L_FORUM}
                  	</div>

<div class="forum_content">
                          	<div class="forum_description_statut">
                                  	<div class="forum_description">
                                          	{catrow.forumrow.FORUM_DESC}
                                  	</div>
                                  
                                  	<div class="forum_statut">
                                          	<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icon" />
                                  	</div>
                          	</div>
                          
                          	<div class="nom_forum_dernier_avatar">
                                  	<div class="nom_forum_dernier">
                                          	<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                                          		{catrow.forumrow.FORUM_NAME}
                                  		</a>
                                  
                                  		<div class="dernier_message">
                                          		<span>
							
							<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
							
							écrit le {catrow.forumrow.USER_LAST_POST}
							</span>
                                          	</div>
                                  	</div>
                                  
                                  	<div class="forum_avatar">
                                          	
                        				{catrow.forumrow.avatar.LAST_POST_AVATAR}
                        			
                                  	</div>							
                          	</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>

<a href="http://ls-halloween.fr" target="_blank" class="cate_credit">Halloween</a>
		</div>
		<br />

<div class="cate_liens_footer">
  	
		<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">
                  	{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
  		</a>
		
		
			<a href="{U_MARK_READ}">
                          	{L_MARK_FORUMS_READ}
  			</a>
		
</div>

A mettre dans toutes les descriptions

Codage index complet Fell From The Sky qui est en ligne Halloween Forumactif PHPBB2

CSS

/************************************************* QUI EST EN LIGNE *************************************************/
.qui-est-en-ligne {
        background: #fff;
        border: 1px solid rgba(211,207,207,.7);
        width: 790px;
        margin: auto;
        padding: 2% 5%;
        box-sizing: border-box;
        display: flex;
  	font-family: Verdana, sans-serif;
        font-size: 10px;
  	color: #373535;
}

.qui-est-en-ligne ::-webkit-scrollbar {
        background: #2B2B2B;
        height: 9px;
        width: 5px;
}

.qui-est-en-ligne ::-webkit-scrollbar-thumb {
        background-color: #FAFAFA;
        border: solid #2B2B2B;
        border-radius: 100px;
        border-width: 1px 2px;
        height: auto;
}

img.img_qeel {
        display: block;
        margin: auto;
}

.bloc_qeel {
        background: #eceaed;
        border: 1px solid rgba(211,207,207,.7);
        box-sizing: border-box;
        height: 165px;
        padding: 1%;
        width: 40%;
}

.bloc_qeel:nth-child(2) {
        margin: 0 2%;
        width: 30%;
}

.bloc_qeel:nth-child(2), .bloc_qeel:nth-child(3) {
        background: none;
        border: 0;
        padding: 0;
}

.qeel_connectes {
        width: 100%;
        height: 100px;
        overflow: auto;
        padding: 0 2% 0 0;
        box-sizing: border-box;
        margin: 5% 0 0;
}

.dernier_inscrit {
        background: #eceaed;
        border: 1px solid rgba(211,207,207,.7);
        box-sizing: border-box;
        padding: 5% 2%;
        text-align: center;
        color: #852728;
        text-transform: uppercase;
        text-decoration: underline;
        font-size: 14px;
}

.dernier_inscrit a {
        text-decoration: none;
        display: block;
        margin: 3% 0 0;
        color: transparent;
}

.qeel_groupes a {
        display: block;
        text-align: center;
        font-size: 10px;
        text-transform: uppercase;
  	font-weight: bold;
}

.qeel_groupes a.g1 {
    	color: #45a752;
}

.qeel_groupes a.g2 {
    	color: #266085;
}

.qeel_groupes a.g3 {
    	color: #859435;
}

.qeel_groupes {
        margin: 8% 0;
        line-height: 1.7;
}

.qeel_stats {
        background: #eceaed;
        border: 1px solid rgba(211,207,207,.7);
        text-transform: uppercase;
        text-align: center;
        padding: 5% 0;
}

.derniers_connectes {
        height: 145px;
        overflow: auto;
        width: 100%;
        background: #eceaed;
        border: 1px solid rgba(211,207,207,.7);
        box-sizing: border-box;
        padding: 3%;
}

a.qeel_credit {
        text-align: right;
        display: block;
        color: #eceaed;
        text-transform: uppercase;
        margin: 3% 0 0;
}

Index_Body

Remplacer les lignes 51 à 162, soit :

<div id="fo_stat" class="borderwrap">
	<div class="maintitle floated">
		<h3>{L_STATISTICS}</h3>
		<div class="contract" id="bs0" onclick="toggleCategory('s0');">
			   
		</div>
	</div>

<table cellpadding="0" cellspacing="0" class="ipbtable">
		<thead>
			<tr>
				<th colspan="2">
					<div class="linklist clearfix statlinks">
						<ul>
							<li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
							<li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
							<li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
						</ul>
					</div>
				</th>
			</tr>
		</thead>
		<tfoot>
			<tr><td colspan="2"></td></tr>
		</tfoot>
		<tbody id="s0">
			<tr>
				<th colspan="2" class="formsubtitle">
				
				<a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
				
				
				{L_WHO_IS_ONLINE}
				
				</th>
			</tr>
			<tr>
				<td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
				<td class="row2">
					<div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
					<div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
					<div>{LEGEND} : {GROUP_LEGEND}</div>
				</td>
			</tr>
			
			<tr>
				<th colspan="2" class="formsubtitle">{L_BIRTHDAY}</th>
			</tr>
			<tr>
				<td class="row1" width="1%"><img src="{L_BIRTHDAY_IMG}" alt="{L_BIRTHDAY}" /></td>
				<td class="row2">
					<p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
				</td>
			</tr>
			
			
			<tr>
				<th colspan="2" class="formsubtitle">{L_CALENDAR_5DAYS}</th>
			</tr>
			<tr>
				<td class="row1" width="1%"><img src="{L_CALENDAR_IMG}" alt="{L_CALENDAR}" /></td>
				<td class="row2">
					{CALENDAR_EVENTS_5DAYS}
				</td>
			</tr>
			
			<tr>
				<th colspan="2" class="formsubtitle">

<a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a>

{L_STATISTICS}
				
				</th>
			</tr>
			<tr>
				<td class="row1"><img src="{L_STATISTICS_IMG}" alt="{L_STATISTICS}" /></td>
				<td class="row2">
					<p>{TOTAL_POSTS}</p>
					<p>{TOTAL_USERS}</p>
					<p>{NEWEST_USER}</p>
					<p>{RECORD_USERS}</p>
				</td>
			</tr>
			
			<tr>
				<th colspan="2" class="formsubtitle">{CHATBOX_NAME}</th>
			</tr>
			<tr>
				<td class="row1"><img src="{CHATBOX_IMG}" alt="{CHATBOX_NAME}" /></td>
				<td class="row2">
					<p>{TOTAL_CHATTERS_ONLINE}</p>
					<p>{CHATTERS_LIST}</p>
					
					<div id="chatbox_popup"></div>
					<script type="text/javascript">
					insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
					</script>
					
				</td>
			</tr>
			
		</tbody>
	</table>

</div>

Par :

<div id="fo_stat" class="qui-est-en-ligne">
  	<div class="bloc_qeel">
          	{TOTAL_USERS_ONLINE}
          
          	<div class="qeel_connectes">
                  	{LOGGED_IN_USER_LIST}
          	</div>
  	</div>
  
  	<div class="bloc_qeel">
          	<div class="dernier_inscrit">
                  	{NEWEST_USER}
          	</div>
          
          	<div class="qeel_groupes">
                  	<a href="#" class="g1">
                          	I was born here
                  	</a>
                  
                  	<a href="#" class="g2">
                          	Back to the origins
                  	</a>
                  
                  	<a href="#" class="g3">
                          	The lost souls
                  	</a>
          	</div>
          
          	<div class="qeel_stats">
                  	{TOTAL_USERS} | {TOTAL_POSTS}
          	</div>
  	</div>
  
  	<div class="bloc_qeel">
          	<div class="derniers_connectes">
                  	{L_CONNECTED_MEMBERS}
          	</div>
          	
  		<a href="http://ls-halloween.fr" target="_blank" class="qeel_credit">Halloween</a>
  	</div>
  
</div>
  
<img src="https://i.imgur.com/uhw9wCV.png" alt="" class="img_qeel" />

Créer une page Javascript

Pour modifier les phrases du qeel à votre convenance :

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

#fellfromthesky #indexcomplet #forumactif #codage #libreservice

Halloween