Welcome

Halloween Index complets

Raccoon

Halloween, LS codage Forumactif Index complets Index complet Raccoon

PHPBB2

Optimisé Une liste des sujets et un affichage des messages & profil sont également disponibles. Réalisé pour le forum Raccoon. La maquette complète

Retour

Codage index complet Raccoon accueil Halloween Forumactif

CSS

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

/* SCROLLBAR */
::-webkit-scrollbar {
    	width: 4px;
}

::-webkit-scrollbar-thumb {
    	background: #908383;
}

::-webkit-scrollbar-track {
    	background: #e0e0e0;
}

/********************************************************** PAGE ACCUEIL **********************************************************/
.pa_racoon {
        background: #cfccc5;
        width: 800px;
        margin: 2% auto;
        border-radius: 20px 20px 0 0;
        border-bottom: 5px solid #b72c5d;
  	padding: 0 0 2% 0;
        font-family: Calibri, Arial, sans-serif;
}

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

.pa_racoon .content {
        float: left;
        width: 22%;
        margin: 0 2%;
}

.pa_racoon .content:nth-child(3n+3) {
        width: 48%;
        margin: 0;
}

/* TITRES */
.pa_racoon h2 {
        background: #c1bdb6;
        text-align: center;
        color: #fff;
        font-family: Georgia, sans-serif;
        letter-spacing: 5px;
        font-size: 30px;
        font-weight: normal;
        padding: .5% 0;
        border-radius: 10px 10px 0 0;
}

.pa_racoon h3 {
        text-align: center;
        margin: 2% 0;
}

/* BLOCS BLANCS */
.pa_racoon .links, .pa_racoon .predef, .pa_racoon .news_votes, .pa_racoon .staff {
        background: #e2e2e2;
        border-radius: 5px;
        padding: 5%;
        width: 100%;
        box-sizing: border-box;
}

/* LIENS UTILES */
.pa_racoon .links {
        min-height: 150px;
}

.pa_racoon .links a {
        color: #908383;
        letter-spacing: 2px;
        font-size: 12px;
        display: block;
        text-align: center;
        padding: 1%;
}

.pa_racoon .links a:nth-child(2n+1) {
    	background: #c5c5c5;
}

/* PREDEFINIS */
.pa_racoon .predef {
        margin: 10% 0 0;
        text-align: center;
}

.pa_racoon .predef img {
    	margin: 2%;
}

/* CONTEXTE */
.pa_racoon .contexte {
        width: 379px;
        height: 169px;
        overflow: hidden;
}

.pa_racoon .contexte:hover .contexte_content {
    	margin-top: -169px;
}

.contexte_content {
        background: #e2e2e2;
        width: 100%;
        height: 169px;
        text-align: justify;
        padding: 5%;
        overflow: auto;
        box-sizing: border-box;
        position: relative;
        font-size: 12px;
        line-height: 1.5;
        transition: .5s all;
}

/* PARTENAIRES */
.pa_racoon .partenaires {
        text-align: center;
        font-size: 10px;
}

.pa_racoon .partenaires a:last-child {
        display: block;
        color: #908383;
        letter-spacing: 2px;
}

/* NEWS */
.pa_racoon .news span {
        display: table;
        color: #fff;
        background: #4da7ba;
        margin: 3% 0;
}

.pa_racoon .news span:nth-child(2n+2) {
    	background: #b72c5d;
}

.pa_racoon .news {
        font-size: 10px;
        letter-spacing: 2px;
        width: 100%;
        padding: 0 2% 0 0;
        box-sizing: border-box;
        height: 110px;
        overflow: auto;
}

/* VOTES */
.pa_racoon .news_votes h4::before {
        content: "";
        border-bottom: 2px solid #b72c5d;
        display: block;
  	margin: 0 0 2% 0;
}

.pa_racoon .news_votes h4 {
        letter-spacing: 4px;
        text-transform: uppercase;
        text-align: center;
        font-weight: normal;
  	font-size: 10px;
  	margin: 1%;
}

.pa_racoon .votes {
    	text-align: center;
}

.pa_racoon .votes img {
        display: inline-block;
        margin: 0 3%;
}

/* STAFF */
.pa_racoon .staff {
        margin: 10% 0 0;
        text-align: center;
        font-size: 8px;
  	letter-spacing: 2px;
}

.paonglet {
        display: inline-block;
        cursor: pointer;
}

.paonglets span {
    	margin: 0 6%;
}
            
.paonglet_0 {}
            
.paonglet_1 {
	color: #9F0000;
}
          
.contenu_paonglet {
        display: none;
        height: auto;
        padding: 1%;
        border: 1px solid;
        background: #cfccc5;
        width: 80%;
  	font-size: 10px;
        margin: 2% auto;
}

.contenu_paonglet div {
        float: left;
        width: 55%;
        border-right: 2px solid #b72c5d;
        padding: 0 2% 0 0;
        box-sizing: border-box;
}

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

/* Pseudo */
.contenu_paonglet div h4 {
        margin: 0;
        letter-spacing: 1px;
        font-weight: normal;
}

/* Present ou absent */
.contenu_paonglet div span {
    	color: #5ab72c;
}

.contenu_paonglet div .abs {
    	color: darkred;
}

/* Liens */
.contenu_paonglet a {
        display: block;
        color: #908383;
}

.pa_racoon .staff a:last-child {
        color: #b72c5d;
        text-transform: lowercase;
}

HTML

<div class="pa_racoon">
	     
	<h2>
		   Bienvenue sur Raccoon   
	</h2>
	     
	<div class="content">
		     
		<div class="links">
			   <a href="#">Contexte</a><a href="#">Règlement</a><a href="#">Annexes</a><a href="#">Bottin des avatars</a><a href="#">Les intrigues</a><a href="#">Les nouveautés</a><a href="#">Scénarios</a><a href="#">Les invités</a><a href="#">Partenariats</a>   
		</div>
		     
		<div class="predef">
			   <a href="#"><img src="https://www.zupimages.net/up/18/46/0gk5.png" alt="" /></a><a href="#"><img src="https://www.zupimages.net/up/18/46/0gk5.png" alt="" /></a><a href="#"><img src="https://www.zupimages.net/up/18/46/0gk5.png" alt="" /></a><a href="#"><img src="https://www.zupimages.net/up/18/46/0gk5.png" alt="" /></a><a href="#"><img src="https://www.zupimages.net/up/18/46/0gk5.png" alt="" /></a><a href="#"><img src="https://www.zupimages.net/up/18/46/0gk5.png" alt="" /></a><a href="#"><img src="https://www.zupimages.net/up/18/46/0gk5.png" alt="" /></a><a href="#"><img src="https://www.zupimages.net/up/18/46/0gk5.png" alt="" /></a>   
		</div>
		     
	</div>
	     
	<div class="content">
		     
		<div class="contexte">
			   <img src="https://www.zupimages.net/up/18/46/c63d.png" alt="" />   
			<div class="contexte_content">
				   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tellus leo, ullamcorper sed laoreet sit amet, tristique sagittis leo. Aliquam consectetur lorem sed nisl finibus congue. Nam sollicitudin mattis arcu, at pharetra odio tempus eget. Phasellus et dui lobortis, scelerisque eros sit amet, pulvinar mi. Quisque in pulvinar libero, ac ornare urna. Nullam viverra eu enim eu dapibus. Quisque vestibulum interdum nisi, ac bibendum nisi iaculis non. Suspendisse faucibus lobortis nisl eget elementum. Donec efficitur mauris in tellus laoreet fringilla.<br /><br />Nulla sollicitudin justo quis tincidunt condimentum. Quisque eleifend vehicula nibh, vitae bibendum ex suscipit vitae. Donec vel erat nulla. Integer eu commodo lacus, a gravida orci. Proin lobortis, nulla ut faucibus laoreet, eros nulla feugiat velit, ut mollis risus neque eu sapien. In fermentum finibus mauris non bibendum. Aliquam convallis sodales ipsum a rutrum. Donec euismod felis sit amet dapibus cursus. Proin suscipit porttitor finibus.   
			</div>
			     
		</div>
		     
		<h3>
			   <img src="https://www.zupimages.net/up/18/46/36r4.png" alt="" />   
		</h3>
		     
		<div class="partenaires">
			   <a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/2j9k.png" alt="" /></a> <a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/2j9k.png" alt="" /></a> <a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/2j9k.png" alt="" /></a> <a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/2j9k.png" alt="" /></a> <a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/2j9k.png" alt="" /></a> <a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/2j9k.png" alt="" /></a> <a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/2j9k.png" alt="" /></a> <a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/2j9k.png" alt="" /></a><a href="#">Toi aussi ?</a>   
		</div>
		     
	</div>
	     
	<div class="content">
		     
		<div class="news_votes">
			 
			<div class="news">
				   <span>xx.xx.xxxx</span>Nouveauté #1<span>xx.xx.xxxx</span>Nouveauté #2<span>xx.xx.xxxx</span>Nouveauté #3  
			</div>
			   
			<h4>
				   Vote   
			</h4>
			     
			<div class="votes">
				   <a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/rggq.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/rggq.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/rggq.png" alt="" /></a><a href="#" target="_blank"><img src="https://www.zupimages.net/up/18/46/rggq.png" alt="" /></a>   
			</div>
			     
		</div>
		     
		<div class="staff">
			  <script type="text/javascript">
            	//
            	</script>                        
			<div class="paonglets">
				                   <span onmouseover="javascript:change_paonglet('staff1');" id="paonglet_staff1" class="paonglet_0 paonglet">                           <img alt="" src="https://www.zupimages.net/up/18/46/0gk5.png" />                   </span>                                    <span onmouseover="javascript:change_paonglet('staff2');" id="paonglet_staff2" class="paonglet_0 paonglet">                           <img alt="" src="https://www.zupimages.net/up/18/46/0gk5.png" />                   </span>                                    <span onmouseover="javascript:change_paonglet('staff3');" id="paonglet_staff3" class="paonglet_0 paonglet">                           <img alt="" src="https://www.zupimages.net/up/18/46/0gk5.png" />                   </span>   
			</div>
			                  
			<div class="contenu_paonglets">
				                     
				<div id="contenu_paonglet_staff1" class="contenu_paonglet">
					     
					<div>
						   
						<h4>
							  Yvan Quoi  
						</h4><span>Présent</span>  
					</div><a href="#">Contact</a><a href="#">Profil</a>   
				</div>
				                      
				<div id="contenu_paonglet_staff2" class="contenu_paonglet">
					     
					<div>
						   
						<h4>
							  Jaime Patagueule  
						</h4><span class="abs">Absent</span>  
					</div><a href="#">Contact</a><a href="#">Profil</a>   
				</div>
				                      
				<div id="contenu_paonglet_staff3" class="contenu_paonglet">
					     
					<div>
						   
						<h4>
							  Yvan Quoi  
						</h4><span>Présent</span>  
					</div><a href="#">Contact</a><a href="#">Profil</a>   
				</div>
				               
			</div>
			                      <script type="text/javascript">
            	//
            	</script>© Copyright | <a href="http://ls-halloween.fr" target="_blank">Halloween</a>  
		</div>
		     
	</div>
</div>

Codage index complet Raccoon catégories Halloween Forumactif PHPBB2

CSS

Les images "new", "no new" et "lock" sont de taille 21*77px.

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

/* SCROLLBAR */
::-webkit-scrollbar {
    	width: 4px;
}

::-webkit-scrollbar-thumb {
    	background: #908383;
}

::-webkit-scrollbar-track {
    	background: #e0e0e0;
}

/********************************************************** CATEGORIES **********************************************************/
/* LIENS AVANT CATEGORIES */
.categories_links {
        width: 800px;
        margin: auto;
        text-align: center;
}

.categories_links a {
        color: #b72c5d;
        font-family: Arial;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 14px;
    	margin: 0 1%;
}

.categories_links a:hover {
    	color: #908383;
}

.racoon_cate {
    	margin: 0 2%;
}

/* CATEGORIES */
.categories_racoon {
        background: #cfccc5;
        width: 800px;
        margin: auto;
        border-bottom: 5px solid #b72c5d;
        border-radius: 10px 10px 0 0;
  	margin: 2% auto;
  	font-family: Calibri, Arial, sans-serif;
}

/* TITRE */
.categories_header {
        background: #c1bdb6;
        border-radius: 10px 10px 0 0;
}

.categories_header h2 {
        background: #b72c5d;
        display: inline-block;
        padding: .5%;
        color: #fff;
        text-transform: uppercase;
        font-size: 20px;
        font-weight: normal;
        letter-spacing: 5px;
        margin: 1.5%;
}

/* FORUM */
.forum_racoon {
        background: #dfdcd8;
        border: 2px solid #c6c6c6;
        width: 98%;
        margin: 2% auto;
        font-size: 10px;
        letter-spacing: 2px;
        padding: 2% 1%;
        box-sizing: border-box;
}

.forum_stats, .contenu_forum, .sous_forum {
    	float: left;
}

.statut_forum, .dernier_message, .avatar_dernier {
    	float: right;
}

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

/* Statistiques */
.forum_stats {
    	width: 6%;
}

.forum_stats span {
        background: #cfccc5;
        padding: 25% 0;
        display: block;
        text-align: center;
        margin: 0 0 10%;
        text-transform: lowercase;
        font-size: 9px;
}

/* Nom forum et description */
.contenu_forum {
        width: 35%;
        margin: 0 .5%;
        border-right: 2px solid #4da7ba;
}

a.forumlink {
        color: #4da7ba !important;
        text-transform: uppercase;
        font-weight: normal;
        text-align: center;
        display: block;
}

.description_forum {
        width: 98%;
        height: 76px;
        overflow: auto;
        text-align: justify;
        line-height: 1.5;
        margin: 1%;
        box-sizing: border-box;
}

/* SOUS FORUM */
.sous_forum {
        text-align: center;
        width: 20%;
        height: 104px;
        overflow: auto;
}

.sous_forum a {
        display: block;
        background: #c5c5c5;
        margin: 3% 0;
        padding: 1%;
        box-sizing: border-box;
        text-transform: uppercase;
        font-size: 9px;
}

.sous_forum a:hover {
        background: #b72c5d;
        color: #fff;
}

/* Avatar */
.avatar_dernier img {
        width: 100px;
        height: 100px;
        border-radius: 100px;
  	position: relative;
        object-fit: cover;
        margin: 1% 5% 1% 0;
}

/* Dernier message */
.dernier_message {
        background: #cfccc5;
        box-sizing: border-box;
        padding: 3.3% 2% 3.3% 8%;
        width: 27.5%;
        text-align: center;
        margin: 0 0 0 -6.5%;
  	height: 100px;
        border-radius: 0 25px 25px 0;
}

.dernier_message a {
    	color: #b72c5d;
}

/* Statut forum */
.statut_forum {
        margin: 1.8% 0 1.8% .5%;
}

Index_box

<div class="categories_links">
  	
			<a id="nouveaux_messages" href="{U_SEARCH_NEW}">
                          	{L_SEARCH_NEW}
  			</a>
	
  	
  	<img src="https://www.zupimages.net/up/18/46/bd1c.png" alt="" class="racoon_cate" />
			
  	<a href="{U_SEARCH_UNANSWERED}">
          	{L_SEARCH_UNANSWERED}
  	</a>
</div>
<script type="text/javascript">document.getElementById('nouveaux_messages').innerHTML=document.getElementById('nouveaux_messages').innerHTML.replace(/Voir les nouveaux messages depuis votre dernière visite/,"Voir les nouveaux messages");</script>

<div class="categories_racoon">
          	<div class="categories_header">
                 	{catrow.tablehead.L_FORUM}
          	</div>
	
          
	
	
          
	
        <div class="forum_racoon">
          	<div class="forum_stats">
                  	<span>
                          	{catrow.forumrow.TOPICS}<br />Sujets
                  	</span>
			<span>
                          	{catrow.forumrow.POSTS}<br />Mess
                  	</span>
          	</div>
          
          	<div class="contenu_forum">
                  	<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                          	{catrow.forumrow.FORUM_NAME}
                  	</a>
                  
                  	<div class="description_forum">	
                          	{catrow.forumrow.FORUM_DESC}
                  	</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>
          	
          	<img class="statut_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          
          	<div class="dernier_message">
                  	{catrow.forumrow.LAST_POST}
          	</div>
          
          	<div class="avatar_dernier">
                  	 
            			{catrow.forumrow.avatar.LAST_POST_AVATAR}
            		
          	</div>
          
          	
          
          	
        </div>
          
	
          
	
	
          
	
</div>

Et dans "Index_body" remplacer les lignes 66 à 89.

Codage index complet Raccoon qui est en ligne Halloween Forumactif PHPBB2

CSS

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

/* SCROLLBAR */
::-webkit-scrollbar {
    	width: 4px;
}

::-webkit-scrollbar-thumb {
    	background: #908383;
}

::-webkit-scrollbar-track {
    	background: #e0e0e0;
}

/********************************************************** QUI EST EN LIGNE **********************************************************/
.qeel_racoon {
        background: url(https://www.zupimages.net/up/18/46/hjnp.png) no-repeat;
        width: 800px;
        margin: 2% auto;
        height: 249px;
        box-sizing: border-box;
        padding: 5% 2%;
        font-size: 10px;
        letter-spacing: 2px;
        color: #958988;
  	font-family: Calibri, Arial, sans-serif;
}

.qeel_gauche, .qeel_milieu, .qeel_droite {
        background: #dfdcd8;
        float: left;
        border: 2px solid #c6c6c6;
        border-radius: 5px;
        padding: 1%;
        width: 31.3%;
        box-sizing: border-box;
        text-align: center;
        height: 170px;
}

.qeel_milieu {
    	margin: 0 3%;
}

/* STATISTIQUES */
#stats strong:nth-child(6n+1) {
    	display: none;
}

.stats_qeel::after {
        content: "";
        display: block;
}

/* UTILISATEURS CONNECTES */
.online_qeel {
        display: block;
        margin: 5% 0 0;
        width: 100%;
        height: 75px;
        overflow: auto;
}

/* LISTE CONNECTES 24 HEURES */
.qeel_milieu table .row1 {
        background: transparent;
        width: 100%;
        height: 150px;
        overflow: auto;
        display: block;
        text-align: justify;
}

.qeel_milieu table .row1 .gensmall {
    	color: #958988;
}

/* GROUPES */
a.g1, a.g2, a.g3, a.g4, a.g5 {
        color: #73b2c0;
        display: block;
        text-transform: uppercase;
        margin: 3% 0;
        font-weight: bold;
}

a.g1 {}
a.g2 {}
a.g3 {}
a.g4 {}
a.g5 {}

/* CREDITS */
.credits::before {
        border-top: 2px solid #b72c5d;
        content: "";
        display: block;
        margin: 0 auto 5%;
        width: 85%;
}

.racoon_qeel_img {
        float: left;
        margin: 2.5% 3% 1% 7%;
}

.credits p {
        font-size: 9px;
        text-align: justify;
}

.credits a {
    	color: #4da7ba;
}

Index_Body

Remplacer les lignes 136 à 184.

<div class="qeel_racoon">
  	<div class="qeel_gauche">
          	<span id="membres">
                  	{TOTAL_USERS}
                </span>
                
          	<span id="stats" class="stats_qeel">
                   	{TOTAL_USERS_ONLINE}
          	</span>
          
          	<span id="dernier_membre">
                	{NEWEST_USER}
                </span>
          
          	<span id="online" class="online_qeel">
                  	{LOGGED_IN_USER_LIST}
                </span>
  	</div>
  
  	<div class="qeel_milieu">
          	<table id="kaboum">
                  	{L_CONNECTED_MEMBERS}
          	</table>
  	</div>
  
  	<div class="qeel_droite">
          	<a href="#" class="g1">
                  	Résidents
          	</a>
          
          	<a href="#" class="g2">
                  	Dial Emergency 911
          	</a>
          
          	<a href="#" class="g3">
                  	Business & Crook
          	</a>
          
          	<a href="#" class="g4">
                  	Town Council
          	</a>
          
          	<a href="#" class="g5">
                  	Students & Professors
          	</a>
          
          	<div class="credits">
                  	<img src="https://www.zupimages.net/up/18/46/rggq.png" alt="" class="racoon_qeel_img" />
                  	<p>
                          	Copyright Raccoon 2018-2019
                          	<br />
                          	Raccoon est la propriété de son fondateur. <a href="http://ls-halloween.fr" target="_blank">Halloween</a>
                  	</p>
          	</div>
  	</div>
</div>

Télécharger le CSS complet

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

#raccoon #indexcomplet #forumactif #codage #libreservice

Halloween