Welcome

Halloween Index complets

Sorbet Citron

Halloween, LS codage Forumactif Index complets Index complet Sorbet Citron

PHPBB2

Optimisé Les informations du staff et des membres du mois s'affichent au survol.
Réalisé pour le forum Sorbet Citron. La maquette complète

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 index complet Sorbet Citron accueil Halloween Forumactif

CSS

/******************************************************************** PAGE ACCUEIL ********************************************************************/
::-webkit-scrollbar {
    	width: 4px;
}
::-webkit-scrollbar-thumb {
    	background: #dba002;
}

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

.pa_sorbet_citron {
        background: #fff;
        border: 1px solid #dba002;
        color: #5a5353;
        padding: 3% 2%;
        text-align: center;
        width: 850px;
  	font-size: .9em;
        margin: auto;
}

.left, .middle, .right {
        width: 33%;
        margin: auto;
        float: left;
        text-align: justify;
}

.pa_sorbet_citron .middle {
    	margin: 1% 2% 0;
  	width: 30%;
}

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

/* TITRES */
.pa_sorbet_citron h2, .pa_sorbet_citron h3 {
        color: #76bcb5;
        font-family: 'Petit Formal Script', cursive;
        font-size: 28px;
        text-transform: lowercase;
        text-align: center;
        background: #fff;
        z-index: 2;
        position: relative;
        display: table;
        margin: 0 auto;
}

.pa_sorbet_citron .left h2:nth-child(1n+2) {
    	margin-top: -6%;
}

.pa_sorbet_citron h3 {
        margin: 2% auto;
        padding: 2%;
}

.pa_sorbet_citron .right h2:nth-child(1n+4) {
    	margin-top: -9%;
}

.pa_sorbet_citron .dotted {
        display: block;
        content: "";
        border-bottom: 5px dotted #dba002;
        margin: -9% 0 0 0;
}

/* CONTEXTE ET NEWS */
.pa_sorbet_citron .contexte, .pa_sorbet_citron .news {
        border: 1px solid #dba002;
        margin: -5% 0 0;
}

.pa_sorbet_citron .contexte p, .pa_sorbet_citron .news p {
        height: 173px;
        width: 100%;
        padding: 0 5%;
        box-sizing: border-box;
        overflow: auto;
        margin: 5% 0 4% 0;
}

/* MEMBRES DU MOIS */
.pa_sorbet_citron .membres_mois {
        border: 1px solid #dba002;
        margin: 8% 0 0 0;
        text-align: center;
  	padding: 3% 0;
}

.pa_sorbet_citron .mdm {
        width: 90px;
        height: 90px;
        overflow: hidden;
        display: inline-block;
        text-align: center;
        margin: 5% 2%;
}

.pa_sorbet_citron .mdm img {
        width: 90px;
        height: 90px;
        object-fit: cover;
}

.pa_sorbet_citron .mdm:hover .description_mdm {
        margin-top: -90px;
        transition: .5s all;
}

.pa_sorbet_citron .mdm .description_mdm {
        background: rgba(255,255,255,.8);
        z-index: 2;
        position: relative;
        height: 128px;
        box-sizing: border-box;
        padding: 25% 10%;
        font-size: 1.3em;
  	transition: .5s all;
}

/* STAFF */
.pa_sorbet_citron .staff {
        width: 200px;
        height: 80px;
        overflow: hidden;
        margin: 6% auto 0;
}

.pa_sorbet_citron .staff img {
        object-fit: cover;
        width: 200px;
        height: 80px;
}

.pa_sorbet_citron .staff:hover .description_staff {
    	margin-top: -80px;
}

.pa_sorbet_citron .description_staff {
        width: 100%;
        height: 80px;
        box-sizing: border-box;
        background: rgba(255,255,255,.8);
        transition: .5s all;
        position: relative;
        text-align: center;
        font-size: 1.5em;
        line-height: 1;
        padding: 6% 0;
}

/* LIENS UTILES */
.pa_sorbet_citron .liens_utiles {
    	margin: 6% 0 0 0;
}

.pa_sorbet_citron .liens_utiles a {
        border: 1px solid #dba002;
        box-sizing: border-box;
        color: #5a5353;
        display: inline-block;
        letter-spacing: 2px;
        margin: 1% 2%;
        padding: 1% 2%;
        text-align: center;
        text-transform: uppercase;
        transition: .5s all;
        width: 46%;
        font-family: Courier New, sans-serif;
        font-size: 1.13em;
}

.pa_sorbet_citron .liens_utiles a:hover {
        background: #dba002;
        color: #f2f2f2;
}

/* POSTES VACANTS */
.pa_sorbet_citron .postes_vacants {
        border: 1px solid #dba002;
        padding: 6% 5% 1%;
        text-align: center;
        margin: -5% 0 0;
}

.pa_sorbet_citron .postes_vacants img {
        width: 47px;
        height: 47px;
        object-fit: cover;
}

/* PARTENAIRES */
.pa_sorbet_citron .partenaires {
        border: 1px solid #dba002;
        margin: 3% 0;
        padding: 2% 2% 5%;
        box-sizing: border-box;
        text-align: center;
        text-transform: uppercase;
}

.pa_sorbet_citron .partenaires img {
        width: 200px;
        height: 25px;
        object-fit: cover;
        border: 1px solid #7d7d7a;
}

.pa_sorbet_citron .partenaires a {
        color: #5a5353;
        font-family: Courier New, sans-serif;
        font-size: .9em;
}

a.pa_credits {
        color: #b5afaf;
        text-align: right;
        display: block;
        text-decoration: none;
        text-transform: lowercase;
        letter-spacing: -1px;
        font-style: italic;
        font-family: Arial, sans-serif;
        font-size: 10px;
}

HTML

<div class="pa_sorbet_citron">
	               
	<div class="left">
		               
		<h2>
			        Contexte        
		</h2>
		               
		<div class="contexte">
			             
			<p>
				        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis eget nibh vitae eleifend. Morbi vel aliquam lorem, ut mollis metus. Nulla bibendum luctus quam eu suscipit. Pellentesque tincidunt arcu non risus pulvinar, ac tincidunt leo mattis. Sed porttitor lectus a neque porttitor iaculis. Sed mattis augue ut nisl lobortis rutrum. Nullam dignissim urna eu nunc venenatis, id pulvinar nunc convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rutrum orci quis ex iaculis, nec condimentum nibh consequat. Nullam facilisis rutrum erat, et mollis felis placerat a. Pellentesque cursus aliquam turpis ut venenatis. Donec in nisi feugiat, tristique elit sed, accumsan libero. Etiam cursus diam arcu, vitae sodales est maximus non. Phasellus ac arcu in leo aliquet porta at ullamcorper nulla. Aliquam condimentum varius eleifend. Pellentesque suscipit neque sed ex eleifend, sed eleifend est maximus. Fusce est libero, consectetur quis sagittis non, bibendum vitae tellus. Pellentesque ultrices semper nisl id finibus. Sed ullamcorper mi sed odio venenatis lobortis. Quisque sed ante sed leo rutrum suscipit. Nunc eget sagittis tortor, sed feugiat nisl. Proin finibus varius rhoncus. Aenean luctus urna in metus iaculis cursus. Morbi aliquam sem ante, in ullamcorper neque convallis accumsan.       
			</p>
			               
		</div>
		               
		<div class="membres_mois">
			               
			<div class="mdm">
				        <img alt="" src="https://nsa39.casimages.com/img/2018/11/12/181112035249472658.jpg" />        
				<div class="description_mdm">
					        Nom du joueur<br />MDM        
				</div>
				               
			</div>
			                 
			<div class="mdm">
				        <img alt="" src="https://nsa39.casimages.com/img/2018/11/12/181112035249472658.jpg" />        
				<div class="description_mdm">
					        Nom du joueur<br />MDM        
				</div>
				               
			</div>
			               
		</div>
		               
		<h2>
			        Membres du mois        
		</h2>
		               
	</div>
	               
	<div class="middle">
		               
		<div class="staff">
			        <img alt="" src="https://66.media.tumblr.com/tumblr_m7ltbgRo1H1qeb3sro1_1280.gif" />        
			<div class="description_staff">
				        thenightcall<br />Fondatrice        
			</div>
			               
		</div>
		                 
		<div class="staff">
			        <img alt="" src="https://66.media.tumblr.com/tumblr_m7ltbgRo1H1qeb3sro1_1280.gif" />        
			<div class="description_staff">
				        thenightcall<br />Fondatrice        
			</div>
			               
		</div>
		               
		<h3>
			        Staff        
		</h3>
		              
		<div class="dotted">
			       
		</div>
		         
		<h3>
			        Liens utiles        
		</h3>
		       
		<div class="dotted">
			       
		</div>
		               
		<div class="liens_utiles">
			        <a href="#">Lien</a><a href="#">Lien</a><a href="#">Lien</a><a href="#">Lien</a><a href="#">Lien</a><a href="#">Lien</a><a href="#">Lien</a><a href="#">Lien</a>        
		</div>
		               
	</div>
	               
	<div class="right">
		               
		<h2>
			        News        
		</h2>
		               
		<div class="news">
			               
			<p>
				       Maecenas venenatis eget nibh vitae eleifend. Morbi vel aliquam lorem, ut mollis metus. Nulla bibendum luctus quam eu suscipit. Pellentesque tincidunt arcu non risus pulvinar, ac tincidunt leo mattis. Sed porttitor lectus a neque porttitor iaculis. Sed mattis augue ut nisl lobortis rutrum. Nullam dignissim urna eu nunc venenatis, id pulvinar nunc convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rutrum orci quis ex iaculis, nec condimentum nibh consequat. Nullam facilisis rutrum erat, et mollis felis placerat a. Pellentesque cursus aliquam turpis ut venenatis. Donec in nisi feugiat, tristique elit sed, accumsan libero. Etiam cursus diam arcu, vitae sodales est maximus non. Phasellus ac arcu in leo aliquet porta at ullamcorper nulla. Aliquam condimentum varius eleifend. Pellentesque suscipit neque sed ex eleifend, sed eleifend est maximus. Fusce est libero, consectetur quis sagittis non, bibendum vitae tellus. Pellentesque ultrices semper nisl id finibus. Sed ullamcorper mi sed odio venenatis lobortis. Quisque sed ante sed leo rutrum suscipit. Nunc eget sagittis tortor, sed feugiat nisl. Proin finibus varius rhoncus. Aenean luctus urna in metus iaculis cursus.       
			</p>
			               
		</div>
		               
		<h2>
			        Postes vacants        
		</h2>
		               
		<div class="postes_vacants">
			        <a href="#"><img alt="" src="https://nsa39.casimages.com/img/2018/11/12/181112035249563663.jpg" /></a> <a href="#"><img alt="" src="https://nsa39.casimages.com/img/2018/11/12/181112035249563663.jpg" /></a> <a href="#"><img alt="" src="https://nsa39.casimages.com/img/2018/11/12/181112035249563663.jpg" /></a> <a href="#"><img alt="" src="https://nsa39.casimages.com/img/2018/11/12/181112035249563663.jpg" /></a>        
		</div>
		               
		<div class="partenaires">
			        <img alt="" src="https://66.media.tumblr.com/tumblr_m7ltbgRo1H1qeb3sro1_1280.gif" /><br /><a href="#">Plus</a> • <a href="#">Vous</a> • <a href="#">Top sites</a>        
		</div>
		               
		<h2>
			        Partenariat        
		</h2>
		               
	</div><a class="pa_credits" target="_blank" href="http://ls-halloween.fr/">Halloween</a>
</div>

Codage index complet Sorbet Citron catégories Halloween Forumactif PHPBB2

CSS

/******************************************************************** CATEGORIES ********************************************************************/
::-webkit-scrollbar {
    	width: 4px;
}
::-webkit-scrollbar-thumb {
    	background: #dba002;
}

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

.categories {
        width: 95%;
        border: 1px solid #dba002;
        margin: auto;
  	color: #5a5353;
}

.secondarytitle h2 {
        background: #dba002;
        padding: 1%;
        text-align: center;
        color: #f2f2f2;
        display: block;
        font-family: Courier New, sans-serif;
        text-transform: uppercase;
        font-weight: normal;
        font-size: 1.1em;
}

.categories .forum {
        width: 99%;
        margin: 2% auto;
        position: relative;
}

.forum_middle {
        margin: 0 0 0 3%;
        width: 42%;
        float: left;
}

.forum_right {
        float: left;
        font-family: Courier New, sans-serif;
        font-size: .8em;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        width: 18%;
        margin: 1% 0 0 2%;
}

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

/* LIENS AVANT ET APRES CATEGORIES */
.categories_links a {
        color: #dba002;
        font-size: .8em;
        margin: 2%;
}

.categories_links {
        text-align: center;
        font-family: Courier New, sans-serif;
        margin: 2% 0;
}

/* NOM FORUM */
.forum_middle a.forumlink {
        color: #69b7af;
        font-family: 'Petit Formal Script', cursive;
        text-transform: lowercase;
        font-size: 1.5em;
        letter-spacing: -1px;
        font-weight: normal;
}

/* STATISTIQUES FORUM */
.stats_forum {
        float: right;
        font-family: Courier new, sans-serif;
        font-size: .8em;
        text-transform: uppercase;
        font-weight: bold;
        padding: 2% 0 0;
}

/* DESCRIPTION */
.description_forum {
        width: 100%;
        height: 80px;
        padding: 0 2% 0 0;
        text-align: justify;
        overflow: auto;
        font-size: .8em;
        box-sizing: border-box;
}

/* SOUS FORUM */
.sous_forum {
        width: 17%;
        float: left;
        margin: 0 2%;
        border-left: 5px dotted #dba002;
        padding: 0 0 0 1%;
        height: 130px;
        overflow: auto;
}

.sous_forum a {
        font-family: Courier New, sans-serif;
        display: block;
        color: #5a5353;
        text-transform: uppercase;
        font-size: .8em;
}

/* AVATAR */
.avatar_forum {
        width: 65px;
        height: 97px;
        border: 5px solid #dba002;
        border-radius: 5px;
        float: left;
  	margin: 1% 0;
}

.avatar_forum img {
        width: 65px;
        height: 97px;
        object-fit: cover;
}

/* IMAGE NEW NO NEW LOCK */
img.statut_forum {
    	margin: 0 0 10% 0;
}

/* DERNIER SUJET */
.dernier_forum span a {
    	text-transform: uppercase;
}

.dernier_forum span strong a span strong {
    	text-transform: initial;
}

a.cate_credits {
        color: #b5afaf;
        text-align: right;
        display: block;
        text-decoration: none;
        text-transform: lowercase;
        letter-spacing: -1px;
        font-style: italic;
        font-family: Arial, sans-serif;
        font-size: 10px;
}

Index_box

<div class="categories_links">
  	
		<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 class="categories">
          	<div class="secondarytitle">
                  	{catrow.tablehead.L_FORUM}
          	</div>
          
	
          
	
	
          
	
        <div class="forum">
          	<div class="forum_middle">
                  	<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                  
                  	<div class="description_forum">
                          	{catrow.forumrow.FORUM_DESC}
                  	</div>
                  
                  	<div class="stats_forum">
                          	{catrow.forumrow.POSTS} Messages {catrow.forumrow.TOPICS} sujets
                  	</div>
          	</div>
          
          	<div class="sous_forum" id="subforums">
                  	{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
          	</div>
          	<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>
          
          	<div class="avatar_forum">
                  	
            			{catrow.forumrow.avatar.LAST_POST_AVATAR}
            		
          	</div>
          
          	<div class="forum_right">
                  	<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="statut_forum" />
         
          		<div class="dernier_forum">
                          	{catrow.forumrow.LAST_POST}
                  	</div>
          	</div>
        </div>
	
          
	
	
          
          <a href="http://ls-halloween.fr/" class="cate_credits" target="_blank">Halloween</a>
</div>

Codage index complet Sorbet Citron qui est en ligne Halloween Forumactif PHPBB2

CSS

/******************************************************************** QUI EST EN LIGNE ********************************************************************/
.qeel_sorbet_citron {
        border: 1px solid #dba002;
        color: #5a5353;
        font-size: .7em;
        margin: auto;
        width: 95%;
        padding: 0 0 2% 0;
}

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

.qeel_left, .qeel_right {
        width: 46%;
        float: left;
        margin: 0 2%;
}

/* GROUPES */
.groupes {
        text-align: center;
        width: 100%;
}

.groupes a {
        display: inline-block;
        width: 20%;
        margin: 0 2%;
        color: #f2f2f2;
        text-transform: uppercase;
        padding: .5% 0;
}

#g1 {
    	background: #cbe136;
}

#g2 {
    	background: #aec900;
}

#g3 {
    	background: #828d00;
}

#g4 {
    	background: #494801;
}

/* STATISTIQUES */
.qeel_left p {
        text-align: justify;
        margin: 5% 0 12%;
}

/* TITRES */
.qeel_sorbet_citron h2 {
        background: #fff;
        color: #76bcb5;
        display: table;
        font-family: 'Petit Formal Script', cursive;
        font-size: 28px;
        margin: 0 auto;
        position: relative;
        text-align: center;
        text-transform: lowercase;
        z-index: 2;
}

.qeel_right h2 {
    	margin: -4% auto 0;
}

/* MEMBRES CONNECTES 24 H */
.membres_24 {
        border: 1px solid #dba002;
        margin: -3% 0 0;
        padding: 5%;
}

.membres_24 table {
        width: 100%;
        height: 100px;
        display: block;
        overflow: auto;
        padding: 0 5% 0 0;
        box-sizing: border-box;
}

.membres_24 .row1 {
    	background: none;
}

.membres_24 .gensmall {
        font-family: Calibri, Arial, sans-serif;
        font-size: 1em;
        color: #5a5353;
}

/* CONNECTES */
.stats {
        border: 1px solid #dba002;
        margin: 5% 0 0;
        padding: 2%;
  	text-align: justify;
        box-sizing: border-box;
}

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

/* CREDITS */
.credits {
        margin: 3.5% 0 0;
        text-align: justify;
}

Index_Body

Remplacer le contenu présent entre "Begin disable viewonline" (l. 51) et "End disable viewonline" (l. 162) par :

<div class="qeel_sorbet_citron">
  	<div class="groupes">
              <a href="#" id="g1">
                      Groupe
              </a>
        
              <a href="#" id="g2">
                      Groupe
              </a>
        
              <a href="#" id="g3">
                      Groupe
              </a>
        
              <a href="#" id="g4">
                      Groupe
              </a>
  	</div>
  
  	<div class="qeel_left">
          	<p>
                  	<span id="membres">
                          	{TOTAL_USERS}
                	</span>
                	<script type="text/javascript">document.getElementById('membres').innerHTML=document.getElementById('membres').innerHTML.replace(/Nous avons/,"Le monde sorcier compte dorénavant").replace(/membres enregistrés/,"habitants.");</script> 
                  
                  	<span id="dernier_membre">
                          	{NEWEST_USER}
                	</span>
                	<script type="text/javascript">document.getElementById('dernier_membre').innerHTML=document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier à s'être établi parmi les siens est");</script>
                  
                  	, et nous lui souhaitons bonne aventure.
                  
                  	<span id="messages">
                          	{TOTAL_POSTS}
                	</span>
                	<script type="text/javascript">document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de/," Les habitants sont friands d'histoires, et nous en ont concoctées").replace(/messages/,"depuis leur arrivée.");</script> 
                  
          	</p>
                  	
          	<h2>
                        Dernières 24h
                </h2>
                  
                <div class="membres_24">
                        <table>
                          	{L_CONNECTED_MEMBERS}
                  	</table>
                </div>
  	</div>
  
  	<div class="qeel_right">
          	<div class="stats">
                  	<span id="membres_connectes">
                          	{TOTAL_USERS_ONLINE}
                  	</span>
                  	<script type="text/javascript">document.getElementById('membres_connectes').innerHTML=document.getElementById('membres_connectes').innerHTML.replace(/Il y a en tout/,"En ce moment, nous décelons").replace(/utilisateur(s?) en ligne/,"vie$1 sur nos terres").replace(/::/,":").replace(/Enregistré(s?)/,"habitant$1").replace(/Invisible(s?) et/,"ombre$1 et").replace(/Invité(s?)/,"voyageur$1.");</script>
                  	<br />
                  	<p>
                  	<span id="en_ligne">
                          	{LOGGED_IN_USER_LIST}
                	</span>
                	<script type="text/javascript">document.getElementById('en_ligne').innerHTML=document.getElementById('en_ligne').innerHTML.replace(/Utilisateurs enregistrés/,"A l'heure actuelle, les habitants suivants marchent dans le monde sorcier");</script></p>
          	</div>
          
          	<h2>
                  	Membres connectés
          	</h2>
          
          	<div class="credits">
                  	Le forum est l'entière propriété et responsabilité de son staff, soit Thenightcall et Royalus Ripierus. Le design est une création de Royalus Ripierus, le codage a été réalisé par <a href="http://ls-halloween.fr/" target="_blank">Halloween</a>.
                  	<br />
			Nous remercions Bazzart et Pub RPG Design qui ont grandement contribué au lancement et à la promotion du projet. Toute reproduction, qu'elle soit totale ou partielle, est interdite. Forum optimisé pour Google Chrome.
          	</div>
  	</div>
</div>

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

#sorbetcitron #indexcomplet #forumactif #codage #libreservice

Halloween