Welcome

Halloween Index complets

Noir & Blanc

Halloween, LS codage Forumactif Index complets Index complet Noir & Blanc

Invision

Optimisé Une liste des membres, un profil, une fiche de présentation, d'administration ainsi qu'un footer sont disponibles. La maquette complète

Retour

Codage index complet Noir & Blanc accueil Halloween Forumactif

CSS

/********************* PAGE ACCUEIL *********************/
.page_accueil {
  	background: url('https://redcdn.net/hpimg11/pics/390440footer.png') no-repeat bottom right #fff;
    	border: 1px solid #1c1c1c;
    	border-left: 5px solid #1c1c1c;
   	margin: auto;
    	padding: 0;
    	width: 1094px;
}

/* TITRES */
.page_accueil h3 {
        text-transform: uppercase;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 2px;
}

.page_accueil h4 {
    	text-transform: uppercase;
}

.staff, .infos_utiles, .concept {
        background: #f0f0f0;
        padding: 2%;
        width: 30%;
        float: left;
}

.concept {
  	margin: 2%;
}

.concept p {
        width: 95%;
        padding: 0 5% 0 0;
        height: 218px;
        overflow: auto;
        margin: 5% 0 0 0;
        text-align: justify;
}

.staff {
        text-align: center;
        width: 20%;
  	margin: 2% 0;
}

.infos_utiles {
  	margin: 2%;
}

.staff_pa {
        background: url(https://img11.hostingpics.net/pics/168287texture.jpg);
        height: 100px;
        overflow: hidden;
        width: 100px;
        display: inline-block;
        margin: 1%;
}

.staff_pa_img {
  	position: relative;
  	z-index: 2;	
  	width: 100px;
  	height: 100px;
  	margin-left: 0px;
    	transform: all;
  	transition: 1s;
}

.staff_pa:hover .staff_pa_img {
  	margin-top: -100px;
  	transform: all;
  	transition: 1s;
}

.staff_pa_description {
        color: #fff;
        font-size: 11px;
        height: 100px;
        margin-top: 30px;
        overflow: auto;
        position: relative;
        text-align: center;
        width: 100px;
        z-index: 1;
}

.staff_pa_description a {
    	color: #36cb98!important;
}

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

.liens_utiles_pa a {
        display: inline-block;
        background: url(https://img11.hostingpics.net/pics/168287texture.jpg);
        width: 150px;
        color: #fff !important;
        text-align: center;
        padding: 1% 0;
  	transition: all .5s;
}

.liens_utiles_pa a:hover {
    	background: url(https://i.imgur.com/LEcGgfb.jpg);
  	transition: all .5s;
}

HTML

<div class="page_accueil">
	                     
	<div class="fond_titre">
		        <span class="symbole_titre">▷</span>         
		<h2>
			           Bienvenue {USERNAME}           
		</h2>
		                 
	</div>
	                     
	<div class="concept">
		                     
		<h3>
			           Concept           
		</h3>
		                   
		<p>
			        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit id massa eget ullamcorper. Nulla euismod ante quis magna ultricies dictum. Nam lobortis ipsum nec dignissim ultricies. Vestibulum non orci a erat varius lacinia non quis magna. Sed non feugiat felis. Morbi nec ultrices enim. Nunc mollis laoreet vulputate. Suspendisse semper finibus lacus sit amet semper. Maecenas pulvinar sollicitudin orci a feugiat. Maecenas ex diam, tempus ac tortor nec, placerat vehicula odio. Integer eget arcu sed nibh egestas maximus. Maecenas eu rhoncus tellus, in imperdiet velit. Quisque viverra enim ac pretium varius. Fusce ultricies, elit vel lobortis accumsan, metus ligula dapibus risus, aliquam malesuada erat neque id lorem.<br /><br /> Vivamus egestas ex nisi, quis finibus turpis ultricies a. Vivamus felis enim, placerat id enim non, efficitur sagittis tellus. Mauris eu mollis quam. Ut neque enim, fringilla sit amet lacus nec, varius lacinia leo. Curabitur eu iaculis lorem, eget facilisis sem. Phasellus leo risus, efficitur quis metus quis, facilisis vehicula nunc. Curabitur vulputate, ligula in lacinia sodales, libero odio commodo nibh, in vulputate erat est quis lacus. Sed in massa velit. Quisque maximus dolor tortor. Integer nunc ex, sollicitudin tempus rhoncus eu, tempus vitae lectus. Nam ut aliquet urna. Nunc interdum velit sit amet vestibulum congue. Sed ultricies nec velit vitae porttitor.          
		</p>
		                 
	</div>
	                     
	<div class="staff">
		       
		<h3>
			    Staff    
		</h3><br />            
		<div class="staff_pa">
			                     
			<div class="staff_pa_img">
				           <img src="https://i.imgur.com/8ldafum.png" />           
			</div>
			                     
			<div class="staff_pa_description">
				                     
				<h4>
					           Pseudo           
				</h4>
				                     
				<h5>
					           Rang           
				</h5><a href="#">MP</a>           
			</div>
			                   
		</div>
		                     
		<div class="staff_pa">
			                     
			<div class="staff_pa_img">
				           <img src="https://i.imgur.com/XgG3kfe.png" />           
			</div>
			                     
			<div class="staff_pa_description">
				                     
				<h4>
					           Pseudo           
				</h4>
				                     
				<h5>
					           Rang           
				</h5><a href="#">MP</a>           
			</div>
			                   
		</div>
		                     
		<div class="staff_pa">
			                     
			<div class="staff_pa_img">
				           <img src="https://i.imgur.com/8ldafum.png" />           
			</div>
			                     
			<div class="staff_pa_description">
				                     
				<h4>
					           Pseudo           
				</h4>
				                     
				<h5>
					           Rang           
				</h5><a href="#">MP</a>           
			</div>
			                   
		</div>
		                     
		<div class="staff_pa">
			                     
			<div class="staff_pa_img">
				           <img src="https://i.imgur.com/XgG3kfe.png" />           
			</div>
			                     
			<div class="staff_pa_description">
				                     
				<h4>
					           Pseudo           
				</h4>
				                     
				<h5>
					           Rang           
				</h5><a href="#">MP</a>           
			</div>
			                     
		</div>
		             
	</div>
	                          
	<div class="infos_utiles">
		                     
		<h3>
			           Informations & Crédits           
		</h3><br />           Je suis une information utile. Integer nunc ex, sollicitudin tempus rhoncus eu, tempus vitae lectus. Nam ut aliquet urna. Nunc interdum velit sit amet vestibulum congue. Sed ultricies nec velit vitae porttitor.<br /><br />Codage par <a href="http://ls-halloween.fr" target="_blank">Halloween</a>.         
	</div>
	                 
	<div class="clear">
		                     
	</div>
	<div class="liens_utiles_pa">
		<a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a>
	</div>
	   
</div>

Codage index complet Noir & Blanc catégories Halloween Forumactif PHPBB2

CSS

/********************* CATEGORIES *********************/

.contenu_forum {
    border: 1px solid #1c1c1c;
    border-left: 5px solid #1c1c1c;
    position: relative;
    width: 1100px;
    margin: auto;
}

.fond_titre {
    background: url('https://img11.hostingpics.net/pics/168287texture.jpg');
    width: 95%;
    padding: 5% 0 5% 5%;
    letter-spacing: 5px;
    font-size: 24px;
    text-transform: uppercase;
    font-style: italic;
    color: #fff;
    position: relative;
    z-index: 2;
}

.fond_titre h2 {
    letter-spacing: 5px;
    font-size: 24px;
    text-transform: uppercase;
    font-style: italic;
    color: #fff !important;
    margin: -2% 0 0 5%;
    font-weight: normal;
}

.symbole_titre {
    color: #36cb98 !important;
    font-style: normal;
    font-size: 30px;
}

#mise_en_forme_forum {
    background: #fff;
    min-height: 150px;
    padding: 1%;
    position: relative;
    width: 90%;
    margin: auto;
    margin-top: 1.5%;
    margin-bottom: 1.5%;
}

#dernier_message {
    background: url('https://img11.hostingpics.net/pics/168287texture.jpg');
    width: 16%;
    text-align: center;
    float: left;
    padding: 2%;
    color: #fff;
    font-style: italic;
    font-family: 'Heebo';
    margin-right: 5%;
}

#dernier_message a {
    color: #fff !important;
    font-style: normal;
    font-weight: normal !important;
    transform: all;
    transition: 0.8s;
}

#dernier_message a:hover {
    color: #37cb99 !important;
    transform: all;
    transition: 0.8s;
}

.lastpost-avatar img {
    width: 50px;
    height: 50px;
    margin: auto;
    border-radius: 50%;
    padding-bottom: 5%;
    object-fit: cover;
}

.lastpost-avatar {
    float: none;
    padding: 2px;
}

#informations_forum {
    width: 75%;
    float: left;
}

.forumtitle {
    text-transform: uppercase;
    color: #000 !important;
    letter-spacing: 3px;
    font-size: 18px;
    transform: all;
    transition: 0.8s;
    position: relative;
    z-index: 3;
}

.forumtitle:hover {
    transform: all;
    transition: 0.8s;
    color: #36cb98 !important;
}

.forum-desc {
    width: 96%;
    padding: 1%;
    color: #fff;
    background: url('https://img11.hostingpics.net/pics/168287texture.jpg');
    margin-top: 2%;
}

.forum-desc::before {
    content: "▲";
    margin-top: -18px;
    float: left;
    color: #1c1c1c;
    font-size: 18px;
    margin-left: 2%;
}

#statut_forum {
    position: absolute;
    top: -11px;
    right: 0;
    z-index: 2;
}

.sous_forum a {
    min-width: 150px;
    display: inline-block;
    background: #e6e6e6;
    margin: 2% 2% 0.1% 0;
    text-align: center;
    color: #000;
    padding: 1%;
    text-transform: uppercase;
    transform: all;
    transition: 0.2s;
}

.sous_forum a:hover {
    background: url('https://img11.hostingpics.net/pics/168287texture.jpg');
    color: #36cb98 !important;
    transform: all;
    transition: 0.2s;
}

.sous_forum {
    padding: 0;
    width: 104%;
}

#footer_categories {
    width: auto;
    margin-top: -4%;
    z-index: 2;
    position: relative;
    top: -1px;
}

#contenu_sous_forum {
    width: 100%;
    height: 80px;
    overflow: auto;
}

Index_box

<br /><br />
<div class="contenu_forum" id="b{catrow.tablehead.ID}" >

  <div class="more" id="t{catrow.tablehead.ID}"></div><span id="t{catrow.tablehead.ID}">
  
 <div class="fond_titre" id="f{catrow.tablehead.ID}">
                   <span class="symbole_titre">▷</span> {catrow.tablehead.L_FORUM}
 </div>
  

   <span class="just_lile">
           <div class="new_message" data-type="{catrow.forumrow.L_FORUM_FOLDER_ALT}"></div>
           <div id="mise_en_forme_forum">
                   
                   <div id="dernier_message">
             
                           <div class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
                         
                                
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 
 {catrow.forumrow.USER_LAST_POST}
                   </div>
                   <div id="informations_forum">
                           <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" id="statut_forum" />
                   <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                   <div class="forum-desc">{catrow.forumrow.FORUM_DESC}</div>
                           <div id="contenu_sous_forum">
                                   <span class="sous_forum" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                           <script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>
                           </div>
                        </div>
           </div>
 </span>

<img src="https://img11.hostingpics.net/pics/390440footer.png" id="footer_categories" alt="footer nmd" />
 </span>
 

</div>

Images

Codage index complet Noir & Blanc qui est en ligne Halloween Forumactif PHPBB2

CSS

/********************* QUI EST EN LIGNE ? *********************/
.qeel {
    background: url(https://img11.hostingpics.net/pics/710890fondqeel.png) no-repeat #fff bottom right;
    border: 1px solid #1c1c1c;
    border-left: 5px solid #1c1c1c;
    padding: 0;
    width: 1094px;
    margin: auto;
}

/* Mise en forme titre */
.fond_titre {
    background: url('https://img11.hostingpics.net/pics/168287texture.jpg');
    width: 1040px;
    padding: 5% 0 5% 5%;
    letter-spacing: 5px;
    font-size: 24px;
    text-transform: uppercase;
    font-style: italic;
    color: #fff;
    position: relative;
    z-index: 2;
}

.fond_titre h2 {
     letter-spacing: 5px;
    font-size: 24px;
    text-transform: uppercase;
    font-style: italic;
    color: #fff;
    margin: -2% 0 0 5%;
    font-weight: normal;
}

.symbole_titre {
    color: #36cb98 !important;
    font-style: normal;
    font-size: 30px;
}

/* Mise en forme des groupes */
#groupes {
    width: 100%;
    margin: auto;
    text-align: center;
}
#groupes a:hover {
    color: white !important;
}
#groupes a {
    display: block;
    float: left;
    width: 20%;
    color: #fff !important;
    padding: 2% 0;
    text-transform: uppercase;
    margin: auto;
    letter-spacing: 2px;
}

#bloc_stats_qeel {
    background: url('https://img11.hostingpics.net/pics/168287texture.jpg');
    width: 15%;
    float: left;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 5px; 
    font-size: 18px;
    padding: 3% 5% 1.5% 5%;
    font-style: italic;
    margin: 2% 0 2% 5%;
    position: relative;
}

#bloc_stats_qeel img {
    text-align: center;
    display: block;
    margin: auto;
    border-radius: 50%;
    border: 2px solid #36cb98;
    position: absolute;
    margin-top: -80%;
    width: 150px;
    height: 150px;
}

#connectes {
    width: 60%;
    background: #f0f0f0;
    text-align: justify;
    margin: 2% 0 0 2%;
    float: left;
    padding: 2%;
    height: 50px;
    overflow: auto;
}

#img_qeel {
    width: 21%;
}

#anniversaires, #connectes_24 {
    float: right;
}

#anniversaires {
    width: 40%;
    margin: 2% 4% 2% 0;
    background: #f0f0f0;
    padding: 2%;
}

#connectes_24 {
    width: 40%;
    margin: -22% 4% 2% 0;
    background: #f0f0f0;
    padding: 2%;
    height: 180px;
    overflow: auto;
}

Index_body, remplacer le contenu entre les commentaires "Begin disable online"

<div class="qeel">
   <div class="fond_titre">
                 <span class="symbole_titre">▷</span> Viens te la couler douce
        </div>

<div id="groupes">
           <a href="#" style="background: #6800f0;">Groupe</a>
           <a href="#" style="background: #bd980d;">Groupe</a>
           <a href="#" style="background: #77a62e;">Groupe</a>
           <a href="#" style="background: #b64a4a;">Groupe</a>
           <a href="#" style="background: #2c819e;">Groupe</a>
   </div>
  
   <div id="bloc_stats_qeel">
           <span id="matt">{TOTAL_USERS}</span><br /><br /><br />
                <span id="bert">{TOTAL_POSTS}</span><br /><br /><br />
           <span id="dernier_membre">{NEWEST_USER}<br /></span><br /><br />
                <span style="text-align: center;" id="avatar_dernier_membre"></span>
                 
   </div>
 <div id="connectes">
   <span id="alpha">{LOGGED_IN_USER_LIST}</span>
   </div>
   <img src="https://img11.hostingpics.net/pics/458842renderqeel.png" id="img_qeel" alt="Qui est en ligne ?" />
   <div id="anniversaires">
           {L_WHOSBIRTHDAY_TODAY}
   </div>
   <div id="connectes_24">
           {L_CONNECTED_MEMBERS}
   </div>
                
   <div class="clear"></div>
  
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"").replace(/membres enregistrés/,"Membres");</script> 
<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"").replace(/messages/,"Messages");</script>
<script type="text/javascript">document.getElementById('dernier_membre').innerHTML=document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Dernier inscrit<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />");</script>
<script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés/,"Actuellement connectés");</script>
</div>

Dans Profile_View_Body

Dans les templates, onglet "Profil" et non "Général". Chercher "{AVATAR_IMG}" et le remplacer par :

Javascript

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

#noirblanc #indexcomplet #forumactif #codage #libreservice

Halloween