Welcome

Halloween Index complets

Nightmare

Halloween, LS codage Forumactif Index complets Index complet Nightmare

Invision

Optimisé Page d'accueil à venir. La maquette complète

Retour

Codage index complet Nightmare catégories Halloween Forumactif

CSS

/********************************************************************* CATEGORIES *********************************************************************/
/* TITRE CATEGORIE */
.titre_categorie h2, .qeel h2 {
    background: url(https://image.noelshack.com/fichiers/2018/02/1/1515366208-bar-categorie.png) no-repeat;
    font-size: 30px;
    font-weight: 700;
    padding: 4.5% 0;
    text-align: center;
    text-transform: uppercase;
    width: 950px;
    margin: 2% auto;
}

/* FOND FORUMS */
.forum {
    background: #2f373b;
    margin: auto;
    width: 895px;
    padding: 20px;
}

/* SOUS FORUM */
.sous_forum {
    float: left;
    background: url(https://image.noelshack.com/fichiers/2018/02/1/1515366209-image-sous-liens.png) no-repeat;
    width: 230px;
    height: 80px;
    text-align: center;
    overflow: auto;
    padding: 10px 0;
}

.sous_forum a {
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
}

.sous_forum a:hover {
    color: #ad949b;
    letter-spacing: 1px;
}

/* DESCRIPTION */
.description {
    float: left;
    width: 30%;
    background: #2e3132;
    padding: 1%;
    height: 83px;
    overflow: auto;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 2%;
}

/* DERNIER MESSAGE */
.dernier_message {
    background: #2e3132;
    float: left;
    width: 30%;
    padding: 2% 0;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    height: 66px;
}

/* Nom forum */
a.forumtitle {
    display: block;
    margin: 0 0 5% 0;
}

/* Texte avant le pseudo */
.pseudo_dernier a:nth-child(1)::before {
    content: "Ecrit par ";
}

/* IMAGES STATUT NEW, NO NEW, LOCK */
.icon_forum {
    margin: 0 0 0 2.5%;
}

/* INFOBULLE CATEGORIES */
.infobulle {
    display: block;
    float: right;
    margin: 2%;
    font-size: 13px;
}

.infobulle > div {
  position: absolute;
  margin: 0 0 0 -6%;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.3) rotate(-45deg);
  transition: all 0.3s linear;
}

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

.bouh {
  padding: 25px;
  margin: auto;
  background-color: #000;
  color: #fff;
  text-align: center;
}

.bouh a {
  display: block;
}

.fleche {
  width: 0;
  margin-left: 40%;
  border: 5px solid transparent;
  border-bottom: 10px solid #000000;
}

Index_box

<div class="borderwrap">
  	
	
		<div class="titre_categorie">
			{catrow.tablehead.L_FORUM}
          	</div>
	
	
	<div class="forum">
          	<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="description">
                  	{catrow.forumrow.FORUM_DESC}
          	</div>
          
          	<div class="dernier_message">
                  	<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                          	{catrow.forumrow.FORUM_NAME}
                  	</a>
                  
			<span>
				
					<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
                                          	{catrow.forumrow.LATEST_TOPIC_NAME}
                          		</a><br />
				
				<div class="pseudo_dernier">
                                  	{catrow.forumrow.USER_LAST_POST}
                          	</div>
			</span>
          	</div>
          
          	<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icon_forum" />
          
          	<div class="clear">
          	</div>
          
	</div>	
	
        
	
	

        </div>

<div class="infobulle">
    Voir

<div>
        <div class="fleche"></div>
        <div class="bouh">
		
			<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>
		
          	
          	<a href="{U_TODAY_ACTIVE}">
                  	{L_TODAY_ACTIVE}
          	</a>
          
          	<a href="{U_TODAY_POSTERS}">
                  	{L_TODAY_POSTERS}
          	</a>
          
          	<a href="{U_OVERALL_POSTERS}">
                  	{L_OVERALL_POSTERS}
          	</a>
        </div>
    </div>
</div>
<div class="clear">
</div>

Codage index complet Nightmare Qui est en ligne Halloween Forumactif PHPBB2

CSS

/********************************************************************* QUI EST EN LIGNE *********************************************************************/
/* TITRE QEEL */
.qeel h2 {
    margin: 2% 0 0 0;
}

/* FOND QEEL */
.contenu_qeel {
    background: url(https://image.noelshack.com/fichiers/2018/02/1/1515366394-fond-qeel.png) no-repeat center;
    margin: auto;
    width: 935px;
    height: 500px;
}

/* BLOC GAUCHE QEEL */
.bloc_gauche {
    background: #2f373b;
    width: 30%;
    padding: 2%;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    height: 350px;
    overflow: auto;
    margin: 4% 2%;
    float: left;
    border: 1px solid #ffdcc8;
}

/* Texte gauche */
.qeel_texte_gauche {
    text-align: left;
    display: block;
}

/* BLOC DROITE QEEL */
.bloc_droite {
    float: right;
    width: 40%;
    margin: 4% 2%;
}

/* Groupes qeel */
.groupes {
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.5;
}

/* Derniers connectes */
.derniers_co {
    background: #2f373b;
    border: 1px solid #ffdcc8;
    width: 96%;
    padding: 2%;
    height: 150px;
    overflow: auto;
    margin: 20% 0;
    text-transform: uppercase;
    font-weight: bold;
}

Remplacer le contenu entre commentaire "disable_viewonline"

<div class="qeel" id="fo_stat">
  	<h2>
          	Pour qui le cauchemars commence ?
  	</h2>
  
  	<div class="contenu_qeel">
              <div class="bloc_gauche">
                      <span id="matt">
                              {TOTAL_USERS}
                      </span>
                
                      <span id="yosh">
                        	{NEWEST_USER} <br />
                      </span>
                      
                      <span id="bert">
                              {TOTAL_POSTS}
                      </span>
                	<br /><br />
                      
                      <span id="celine" class="qeel_texte_gauche">
                              {TOTAL_USERS_ONLINE}
                      </span>
                
                	<br />
                        
                      <span id="alpha" class="qeel_texte_gauche">
                              {LOGGED_IN_USER_LIST}
                      </span>
              </div>
        
              <div class="bloc_droite">
                      <a href="http://nightmarerpg.forumactif.com/g2-freedom" class="groupes" style="color: #589191 !important;">
                              Freedom
                      </a>
                
                      <a href="http://nightmarerpg.forumactif.com/g3-obedience" class="groupes" style="color: #b06384 !important;">
                              Obedience
                      </a>
                
                      <a href="http://nightmarerpg.forumactif.com/g4-aimless" class="groupes" style="color: #bbb269 !important;">
                              Aimless
                      </a>
                
                      <a href="http://nightmarerpg.forumactif.com/g5-rascal" class="groupes" style="color: #518182 !important;">
                              Rascal
                      </a>
                
                     <div class="derniers_co ">
				{L_CONNECTED_MEMBERS}
                	</div>
              </div>
          
          	<div class="clear">
          	</div>
  	</div>
</div>

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

#nightmare #indexcomplet #forumactif #codage #libreservice

Halloween