Welcome

Halloween Index complets

Naruto

Halloween, LS codage Forumactif Index complets Index complet Naruto

Invision

Optimisé Slider sur la PA, infobulle sur le staff. Derniers messages au survol de l'image de description des forums. L'avatar du dernier inscrit apparaît dans le QEEL.
Merci à Undomiel de Never Utopia pour le tuto sur les derniers sujets et à Milouze14 pour les phrases du QEEL. La maquette complète

Retour

Codage index complet Naruto accueil Halloween Forumactif

CSS

/* ------------------- PAGE ACCUEIL ------------------- */
/* CODES GENERAUX : barre de defilement et soulignement des liens FACULTATIF */
#page_accueil ::-webkit-scrollbar {
        border: 2px solid #2B2B2B;
        width: 9px;
}

#page_accueil ::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.9);
        height: auto;
        width: 1px;
}

a, a:hover {
        text-decoration: none !important;
}

/* PAGE ACCUEIL */
#page_accueil {
        background: url('https://i.imgur.com/PKstlgX.png') no-repeat bottom, #dadada;
        width: 943px;
        margin: auto;
        font-family: 'Roboto', sans-serif;
        position: relative;
        padding: 1em 2em;
        box-sizing: border-box;
        text-align: center;
}

.page_accueil img {
        max-width: 100%;
}

.pa_bloc_gauche, .pa_bloc_milieu, .pa_bloc_droite {
        float: left;
        width: 32%;
}

.pa_bloc_milieu {
        margin: 0 1.4em;
}

.pa_bloc_gauche, .pa_bloc_droite {
        margin: 2em 0 0 0;
}

/* CORBEAU */
.corbeau {
        position: absolute;
        top: -3em;
        right: -4em;
}

/* TITRES */

#page_accueil h2 {
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-size: 35px;
        margin: .5em 0 0 0;
}

#page_accueil h3 {
        font-family: 'Yanone Kaffeesatz', sans-serif;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 20px;
        letter-spacing: 5px;
        text-align: left;
        color: #151515;
}

h3#news::before, h3#derniers_mess::before {
        display: inline-block;
        content: "";
}

h3#news::before {
        background: url(https://i.imgur.com/9DeIZ6P.png);        
        margin: 0 2% -2% 0;
        width: 26px;
        height: 26px;
}

h3#derniers_mess::before {
    background: url(https://i.imgur.com/GKSSmFo.png);
    width: 20px;
    height: 15px;
    margin: 0 .3em 0 0;
}

#page_accueil h4 {
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 16px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: inline-block;
        margin: 1em .4em;
}

/* NOUVEAUTES */
.bloc_new {
        background: #e6e5e5;
        margin: auto;
        padding: 1em;
        box-sizing: border-box;
        width: 100%;
        height: 120px;
        overflow: auto;
        line-height: 2.5;
        text-align: left;
}

.bloc_new span {
        display: inline-block;
        background: #000000;
        color: #fff;
        padding: 0em .5em;
        font-size: 10px;
        line-height: 2;
        margin: 0 .8em 0 0;
}

/* LIENS UTILES */
h4#guide::before, h4#factions::before, h4#questions::before, h4#clans::before, h4#annonces::before, h4#partenaires::before {
        content: "";
        display: inline-block;
        margin: 0 .4em 0 0;
        height: 16px;
}

h4#guide::before {
        background: url(https://i.imgur.com/GqEePp7.png);
        width: 20px;
}

h4#factions::before {
        width: 21px;
        background: url(https://i.imgur.com/rok2J1U.png);
}

h4#questions::before {
        width: 12px;
        background: url(https://i.imgur.com/Uu7RFdQ.png);
}

h4#clans::before {
        background: url('https://i.imgur.com/UGKYoua.png');
        width: 13px;
}

h4#annonces::before {
        width: 18px;
        height: 18px;
        background: url('https://i.imgur.com/BXDLkLK.png');
}

h4#partenaires::before {
        width: 17px;
        height: 15px;
        background: url('https://i.imgur.com/EAkn4bv.png');
}

/* FACTIONS */
.bloc_factions {
        text-align: left;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        width: 80%;
        margin: auto;
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 1.3;
}

.kiri, .suna, .kumo {
        position: relative;
        background: #fff;
        width: 70%;
        display: inline-block;
        content: "";
        height: 5px;
        margin: .15em 0 0 1.5em;
        float: right;
}

.stats_kiri, .stats_kumo, .stats_suna {
        position: absolute;
        top: 0;
        height: 5px;
}

/* Pour modifier la couleur des noms de groupes */
.bloc_factions span:nth-child(1) {
        color: #5187b0;
}

.bloc_factions span:nth-child(2n+2) {
        color: #d1ae00;
}

.bloc_factions span:nth-child(2n+3) {
        color: #b58345;
}

/* Pour modifier la couleur et la taille de la barre de progression des groupes */
.stats_kiri {
        background: #5187b0;
        width: 70%;
}

.stats_kumo {
        background: #d1ae00;
        width: 50%;
}

.stats_suna {
        background: #b58345;
        width: 30%;
}

/* DISCORD */
#discord img {
        opacity: .9;
        margin: 1em 0 0;
}

/* CONTEXTE */  
.contexte {
        background: rgba(0,0,0,.8);
        margin: -.6em 0 0 0;
        color: #e9ebed;
        text-align: justify;
        box-sizing: border-box;
        padding: 2em;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        letter-spacing: 1px;
        font-size: 14px;
        line-height: 1.5;
        width: 100%;
        height: 335px;
        overflow: auto;
        box-shadow: 0 15px 20px -12px rgba(0,0,0,.8);
}

.contexte a {
        font-family: 'Yanone Kaffeesatz', sans-serif;
        display: block;
        background: #8e1111;
        color: #fff !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 11px;
        padding: .5em;
        width: 60px;
        text-align: center;
        float: right;
}

/* DERNIERS SUJETS */
#derniers_sujets {
        background: #e6e5e5;
        width: 100%;
        height: 130px;
        overflow: auto;
        padding: 1em;
        box-sizing: border-box;
        text-align: left;
}

a.dm_titre, a.dm_pseudo {
        color: #151515;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 600;
}

span.dm_par {
        font-size: 10px;
        font-style: italic;
        margin: 0 1em;
}

.dm_time {
        text-transform: uppercase;
        font-size: 9px;
        font-weight: 500;
        color: #6f6f6f;
        line-height: .8;
        margin: 0 0 1em 0;
}
                        
#left {
        display: none;
}

/* SLIDER */
.slide, .slideshow {
        height: 127px;
        width: 293px;
}

.slideshow {
        margin: 0;
        overflow: hidden;
        position: relative;
}

.slideshow div {
        position: relative;
        top: 0;
        left: 0;
}
  
.slide {
        margin: auto;
        overflow: auto;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
}

/* PARTENAIRES */
.pa_partenaires {
        clear: both;
        padding: 2em 0 0;
}

.pa_partenaires img {
        margin: 0 1em;
}

/* ------------------- BARRE CONNEXION ------------------- */

.info_sup {
        width: 943px;
        text-align: center;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        margin: 2em auto;
}

.is_gauche {
        float: left;
        width: 33%;
        text-align: left;
}

.is_milieu {
        float: left;
        background: url(https://i.imgur.com/YdeNN8w.jpg);
        width: 31%;
        margin: 0 1em;
}

.is_droite {
        float: left;
        width: 33.4%;
        background: #e6e5e5;
        text-align: justify;
        padding: 1em;
        box-sizing: border-box;
        height: 116px;
        overflow: auto;
        font-size: 14px;
        text-transform: uppercase;
}

.info_sup::after {
        display: table;
        content: "";
        clear: both;
}

/* STAFF */
.bloc_staff {
        padding: .3em;
        border: 1px solid #dadada;
        display: inline-block;
        margin: 0 .3em .6em;
}

.staff {
        width: 137px;
        height: 40px;
        position: relative;
        overflow: hidden;
}

.contenu_staff {
        position: absolute;
        left: -5em;
        transition: .5s all;
}

.staff:hover .contenu_staff {
        transition: .5s all;
        top: 0;
        left: 0;
        width: 80%;
        background: rgba(0,0,0,.7);
        text-align: center;
        height: 40px;
}

.contenu_staff h2 {
        color: #fff;
        font-weight: 400;
        text-transform: uppercase;
        font-size: 16px;
        margin: .4em 0 0;
}

.contenu_staff img {
        width: 15px;
}

/* BOITE CONNEXION */

/* UTILISATEUR CONNECTE */
.membre_co {
        padding: 1em 2em;
        text-align: center;
}

.membre_co::after {
        display: table;
        content: "";
        clear: both;
}

.avatar_membre {
        float: left;
        margin: 0 1em 0 0;
}

.avatar_membre img {
        width: 90px;
        height: 90px;
        object-fit: cover;
        border-radius: 100px;
        border: 1px solid #e9ebed;
}

.txt_membre {
        color: #e9ebed;
        text-transform: uppercase;
}

.txt_membre h2 {
        font-weight: 400;
        letter-spacing: 2px;
        margin: .5em 0 0;
}

.txt_membre h3 {
        font-weight: 400;
        font-size: 25px;
        margin: .5em 0 .3em;
}

.txt_membre a {
        background: #000;
        color: #dadada !important;
        padding: .5em 1em .3em;
        letter-spacing: 1px;
        font-size: 14px;
        display: inline-block;
        transition: .5s all;
}

.txt_membre a:hover {
        transition: .5s all;
        background: #b42000;
}

.is_droite a span strong {
        font-weight: 600;
        font-family: 'Roboto', sans-serif;
        font-size: 10px;
}

Template Index_body

A insérer entre les lignes "{CHATBOX_TOP}" (47) et "{BOARD_INDEX}" (49)

<div id="page_accueil">
          	<img src="https://i.imgur.com/JkTkOft.png" alt="" class="corbeau" />
          
          	<div class="pa_bloc_gauche">
                  	<h3 id="news">
                          	News
                  	</h3>
                  
                  	<div class="bloc_new">
                          	<span>
                                  	XX/XX
                          	</span>
                          	Fermeture de Kiri, trop famous.
                          	
                          	<br />
                          
                          	<span>
                                  	XX/XX
                          	</span>                          
                          	Fermeture de Kiri, trop famous.
                          	
                          	<br />
                          
                          	<span>
                                  	XX/XX
                          	</span>                          
                          	Fermeture de Kiri, trop famous.
                          	<br />
                  	</div>
                  
                  	<h4 id="guide">
                          	<a href="#">
                          		Guide
                          	</a>
                  	</h4>
                  
                  	<h4 id="factions">
                          	<a href="#">
                          		Factions
                          	</a>
                  	</h4>
                  
                  	<h4 id="questions">
                          	<a href="#">
                          		Questions
                          	</a>
                  	</h4>
                  
                  	<div class="bloc_factions">
                          	<span>
                                  	Kiri
                          	</span>
                          
                          	<div class="kiri">
                                  	<div class="stats_kiri">
                                  	</div>
                          	</div>
                          
                          	<br />
                          
                          	<span>
                                  	Kumo
                          	</span>
                          
                          	<div class="kumo">
                                  	<div class="stats_kumo">
                                  	</div>
                          	</div>
                          
                          	<br />
                          
                          	<span>
                                  	Suna
                          	</span>
                          
                          	<div class="suna">
                                  	<div class="stats_suna">
                                  	</div>
                          	</div>
                  	</div>
                  
                  	<a href="#" target="_blank" id="discord">
                          	<img src="https://i.imgur.com/fUtRRVW.jpg" alt="Discord" />
                  	</a>
          	</div>
          
          	<div class="pa_bloc_milieu">
                  	<h2>
                          	Nom du forum
                  	</h2>
                  
                  	<div class="contexte">
                          	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit mi ut odio dignissim bibendum. Maecenas mauris libero, fringilla nec tempor ac, convallis in purus. Etiam mattis urna eget malesuada aliquet. Ut feugiat nec odio quis condimentum. Proin placerat quis nisi a pulvinar. Quisque non ultrices leo. Duis et tempus tellus. Proin porttitor imperdiet sem nec lacinia.
                          	<br />
                          	<a href="#">
                                  	Lire la suite
                          	</a>
                  	</div>
          	</div>
          
          	<div class="pa_bloc_droite">
                  	<h3 id="derniers_mess">
                       		Derniers messages
                  	</h3>
                  
                  	<div id="derniers_sujets">
                  	</div>
                  
                  	<h4 id="clans">
                          	<a href="#">
                                  	Clans
                          	</a>
                  	</h4>
                  
                  	<h4 id="annonces">
                          	<a href="#">
                                  	Annonces
                          	</a>
                  	</h4>
                  
                  	<h4 id="partenaires">
                          	<a href="#">
                                  	Partenaires
                          	</a>
                  	</h4>
                  
                  	<div class="slideshow" id="slideshow">
		       		<div id="slideshow-container">
			        	<div class="slide">
                                          	<a href="#">
                                                  	<img alt="" src="https://i.imgur.com/sXzxnNW.jpg" />
                                          	</a>                    
					</div>
			                                                           
					<div class="slide">
				  		<a href="#">
                                                  	<img alt="" src="https://i.imgur.com/sXzxnNW.jpg" />
                                          	</a>                   
					</div>
			                                                               
					<div class="slide">
				        	<a href="#">
                                                  	<img alt="" src="https://i.imgur.com/sXzxnNW.jpg" />
                                          	</a>             
					</div>			                  
				</div>		                                  
			</div>
          	</div>
          
          	<div class="pa_partenaires">
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
                  
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
                  
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
                  
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
                  
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
                  
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
                  
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
                  
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
                  
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
                  
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
                  
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
                  	
                  	<a href="#" target="_blank">
                        	<img src="https://i.imgur.com/QVFWqog.jpg" alt="" />
                  	</a>
          	</div>
	</div>

<div class="info_sup">
          	<div class="is_gauche">
                  	<div class="bloc_staff">
                          	<div class="staff">
                                  	<img src="https://i.imgur.com/nJB7yEt.jpg" alt="" class="img_staff" />
                          		<div class="contenu_staff">
                                  		<h2>
                                          		Pseudo
                                  		</h2>
                                  		
                                  		<a href="#">
                                          		<img src="https://i.imgur.com/4STQ09X.png" alt="" />
                                  		</a>
                                  	</div>
                          	</div>
                  	</div>
                  
                  	<div class="bloc_staff">
                          	<div class="staff">
                                  	<img src="https://i.imgur.com/nJB7yEt.jpg" alt="" class="img_staff" />
                          		<div class="contenu_staff">
                                  		<h2>
                                          		Pseudo
                                  		</h2>
                                  		
                                  		<a href="#">
                                          		<img src="https://i.imgur.com/4STQ09X.png" alt="" />
                                  		</a>
                                  	</div>
                          	</div>
                  	</div>
                  
                  	<br />
                 
                  	<div class="bloc_staff">
                          	<div class="staff">
                                  	<img src="https://i.imgur.com/nJB7yEt.jpg" alt="" class="img_staff" />
                          		<div class="contenu_staff">
                                  		<h2>
                                          		Pseudo
                                  		</h2>
                                  		
                                  		<a href="#">
                                          		<img src="https://i.imgur.com/4STQ09X.png" alt="" />
                                  		</a>
                                  	</div>
                          	</div>
                  	</div>
          	</div>
          
          	<div class="is_milieu">
                  	
				<div class="borderwrap module">
					<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
						<div class="box-content ipbform user_login_form center" style="padding:5px 0;">
							<label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label>  
							<label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label>  
							<label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
							{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
              					</div>
					</form>
				</div>
			
                  
                  	<div class="membre_co">
                          	<div class="avatar_membre">
                                      	<div class="js-useravatar">
                                  	</div>
                          	</div>
                          
                          	<div class="txt_membre">
                                  	<h2>
                                          	Affute tes armes
                                  	</h2>
                                  
                                  	<h3>
                                          	<div class="js-username">
                                          	</div>
                                  	</h3>
                                  
                                  	<a id="nouveaux_mess" href="{U_SEARCH_NEW}">
                                          	{L_SEARCH_NEW}
                                  	</a>
                                  	<script type="text/javascript">document.getElementById('nouveaux_mess').innerHTML=document.getElementById('nouveaux_mess').innerHTML.replace(/Voir les nouveaux messages depuis votre dernière visite/,"Nouveaux messages");</script>
                          	</div>
                  	</div>
          	</div>
          
          	<div class="is_droite" id="fo_stat">
                  	{LOGGED_IN_USER_LIST}
          	</div>
	</div>

Pour ajouter les polices

Dans le template "Overall_header" insérer ce qui suit avant "{T_HEAD_STYLESHEET}" (l18)

Mise en forme des derniers messages

Se rendre dans la partie "Portail" des templates et remplacer le template "mod_recent_topics"

<div class="module borderwrap">
	<div class="maintitle"><h3>{L_RECENT_TOPICS}</h3></div>
	<div class="box-content">
            
                {MARQUEE_JS_SRC}
                <div id="comments_scroll_div">
                    <div class="marquee" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
                        
                        <a class="dm_titre" href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">
                          	{scrolling_row.recent_topic_row.L_TOPIC_TITLE}
                      	</a>
                        
                      	<span class="dm_par">
                          	par
                      	</span>
                      
                      	
                            	<a class="dm_pseudo" href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">
                                  	{scrolling_row.recent_topic_row.switch_poster.S_POSTER}
                      		</a>

<span class="dm_pseudo">
                                  	{scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}
                      		</span>
                        
                      	
                      	<br />
                      
                      	<div class="dm_time">
                          	{scrolling_row.recent_topic_row.S_POSTTIME}
                      	</div>
                            
                        
                    </div>
                </div>
                <script type="text/javascript">
                        $(".marquee").marquee();
                </script>

» <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br />{BY}

<a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>

{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}

{ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />

</div>
</div>

Appeler l'avatar

Toujours dans la partie template (on s'accroche), direction l'onglet "Profil". Dans "Profil_view_body", remplacer la ligne 17 par :

Le Javascript

Dans "Modules", "Gestion des pages javascript", commencer par activer le Javascript (parce qu'on en a pas mal à mettre).
Pour ajouter les derniers messages sur l'accueil, créer un nouveau code que vous pouvez intituler "Derniers sujets" présent sur l'index. On colle ceci dedans avant d'enregistrer :

On enchaine avec le Slider ! On crée un nouveau code ("Slider" tout bêtement pour moi) et on colle ceci avant d'enregistrer :

$(function () {
    //VARIABLES MODIFIABLES
    var delaiSwitch    = 5000;                    // Délai (en ms) d'affichage d'un slide
    var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
    var direction      = 'left';                  // Sens (left ou right) du défilement
    var idSlideshow    = '#slideshow';            // ID du slideshow
    var idContainer    = '#slideshow-container';  // ID du container
  
    //VARIABLES SYSTEME
    var slideshowWidth  = parseInt($(idSlideshow).css('width'));
    var slideshowHeight  = parseInt($(idSlideshow).css('height'));
    var nbSlides        = $(idContainer+' > .slide').length;
  
    //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
    $(idContainer).css('width', slideshowWidth*nbSlides+'px');

//REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
    if(direction==='right') {
        var decalageLeft = -slideshowWidth*(nbSlides-1);
        $(idContainer).css('left', decalageLeft+'px');
      
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).prepend(el);
        }, this);
    } else {
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).append(el);
        }, this);
    }
  
    //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
    $(idSlideshow+' img').css('max-width', slideshowWidth);
    $(idSlideshow+' img').css('max-height', slideshowHeight);
  
    //LANCEMENT DE L'ANIMATION
    setInterval(function() {
        slideshow()
    }, delaiSwitch);
  
    //FONCTION DE DEFILEMENT
    function slideshow() {
        var compteur = 0;      // Compte les slides ayant bougé
      
        if(direction==='right') {
            $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
                compteur++;
              
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:last').remove();
                    $(idContainer).prepend(el);
                    $(idContainer+' > .slide').css('left', '0');
                  
                    compteur = 0;
                }
            });
        } else {
            $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
                compteur++;
              
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:first').remove();
                    $(idContainer).append(el);

$(idContainer+' > .slide').css('left', '0');
                  
                    compteur = 0;
                }
            });
        }      
    }
});

Si vous n'avez pas encore vomi, on continue avec l'avatar du membre connecté. Nouveau code, toujours sur l'index, on colle, on enregistre.

Il faut aussi appeler le pseudo du membre, accrochez-vous ! Nouveau code, on c/c, on enregistre !

Et enfin si vous êtes toujours là (parce que moi j'ai quitté sans enregistrer), la petite phrase des connectés qui disparait ! ATTENTION ce code risque d'être modifié avec l'arrivée du reste de l'index. Nouveau code, index, "Modification qeel" et on c/c avant d'enregistrer :

$(function () {
/*Réglages ci-dessous*/
                    var t = {
 "remplacer":
 [
"Qui est en ligne ?",
"Il y a en tout",
"utilisateur en ligne",
"utilisateurs en ligne",
   "Utilisateurs enregistrés :",
"Enregistré",
"Enregistrés ",
"Invisible ",
"Invisibles",
"et",
"Invité",
"Invités",
"Le record du nombre d'utilisateurs en ligne est de",
"Membres connectés au cours des",
"Aucun membre ne fête son anniversaire aujourd'hui",
"Aucun membre ne fête son anniversaire dans les",
"Membres fêtant leur anniversaire aujourd'hui",
"Membres fêtant leur anniversaire dans les",
"Légende",
"Nos membres ont posté un total de",
"Statistiques",
"messages",
"Nous avons",
"membres enregistrés",
"L'utilisateur enregistré le plus récent est",
"Anniversaires",
"Statistiques",
"Evènements à venir dans le calendrier pour les 5 prochains jours",
"Il n'y a pas d'évènement à venir dans le calendrier"
],
"par": 
[
"Qui se baladent sur le forum ?",
"Actuellement",
"personne sur le forum",
"personnes sur le forum",
"" ,
"membre",
"membres",
"caché ",
"cachés ",
" et pour finir ",
"fantôme",
"fantômes",
"Le pic de membres présents est de",
"Membres présents ces",
"Pas d'anniversaire ce jour",
"Pas d'anniversaire dans les",
"Joyeux anniversaire à",
"Les prochains anniversaires a souhaiter dans les",
"Les groupes du forum",
"Nos membres ont écrit un total de",
"Les stats du forum",
"blablas",
"Le forum compte",
"membres qui ont fait le pas pour s'inscrire",
"Le forum souhaite la bienvenue à",
"Les fêtes a venir",
"Les stats ",
"Que se passe t-il dans le calendrier ?",
"Pas d'évènement à l'heure actuelle"
]
};

/*Fin réglages*/
for(i in t.remplacer)$('#fo_stat')
.html($('#fo_stat').html().replace(t.remplacer[i], t.par[i]));
});

Manip' finale

C'est tout pour le code (amen), mais il reste à configurer les derniers messages. Pour celà "Modules" → "Gestion des Widgets" → "Afficher les widgets du forum" on met "oui". On supprime tout et on met le widget "Sujets récents" en haut à gauche. On enregistre et à moins d'être un chat noir, tout fonctionne \o/

Codage index complet Naruto catégories Halloween Forumactif Invision

CSS

/* ------------------- CATEGORIES ------------------- */
/* Generalites */
#categories ::-webkit-scrollbar {
    border: 2px solid #2B2B2B;
    width: 9px;
}
#categories ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.9);
    height: auto;
    width: 1px;
}

#categories {
        width: 90%;
        margin: auto;
}

/* TITRE CATEGORIE */
.titre_cate {
        display: table;
        clear: both;
        content: "";
        width: 100%;
        background: url(https://i.imgur.com/YdeNN8w.jpg);
}

.titre_cate h2 {
        font-family: 'Yanone Kaffeesatz', sans-serif;
        color: #fff;
        font-size: 30px;
        padding: 1.5em 5em 1.5em 1em;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-weight: 400;
        float: right;
}

.titre_cate h2 span {
        display: block;
        font-size: 12px;
        color: #989696;
        padding: .5em 0 0 0;
}

.titre_cate img {
        float: right;
        padding: 2.5em 0 0 0;
}

/* FORUM */
.forum {
        background: #d1d3d5;
        margin: 1em 0;
        padding: 2em;
        position: relative;
        display: table;
        clear: both;
        content: "";
        width: 100%;
        box-sizing: border-box;
}

.nom_forum {
        display: table;
        clear: both;
        content: "";
        margin: 0 0 1em;
}

/* Image New, No New, Lock */
img.statut_forum {
        float: left;
}

/* Nom forum */
a.forumtitle {
        color: #252525 !important;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 35px;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: .5em .5em .2em;
        display: inline-block;
        transition: 1s all;
        margin: 0 0 0 .3em;
}

a.forumtitle:hover {
        background: #000;
        color: #fff !important;
        padding: .5em .5em .2em;
}

/* Dernier message */
.bloc_dernier_message {
        width: 212px;
        float: left;
        height: 159px;
        position: relative;
        overflow: hidden;
        z-index: 2;
        box-shadow: 0 15px 20px -12px rgba(0,0,0,.8);
}

/* texte dernier message */
.dernier_message {
        float: right;
        background: #1a1c1e;
        color: #fff;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 14px;
        padding: .3em .5em .1em;
        text-align: right;
        width: 120px;
        margin: 8em 0 0 0;
}

/* bloc lien dernier message */
.dernier_message_txt {
        position: absolute;
        top: 212px;
        width: 212px;
        height: 159px;
        background: rgba(0,0,0,.6);
        text-align: center;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 14px;
        color: #fff;
        line-height: 1.3;
        text-transform: uppercase;
        transition: .5s all;
        padding: 3.5em 0 0;
}

.bloc_dernier_message:hover .dernier_message_txt {
        top: 0;    
        transition: .5s all;
}

.dernier_message_txt a {
        color: #fff !important;
        font-style: italic;
        letter-spacing: 2px;
}

.dernier_message_txt strong a {
        font-style: normal;
        letter-spacing: 1px;
}

/* image description */
.description_sf img {
        position: absolute;
        top: 6.45em;
        left: 2em;
}

/* DESCRIPTION ET SOUS FORUM */
.description_sf {
        width: 54%;
        float: left;
        margin: 0 3em;
}

.description_sf p {
        text-align: justify;
        line-height: 1.5;
        width: 100%;
        height: 110px;
        overflow: auto;
        box-sizing: border-box;
        padding: 0 1em 0 0;
        font-family: 'Roboto', sans-serif;
}

/* Sous forum */
.sf {
        width: 100%;
        background: url(https://i.imgur.com/YdeNN8w.jpg);
        box-sizing: border-box;
        margin: 1.4em 0 0;
        max-height: 50px;
        overflow: auto;
        line-height: 2.5;
}

.sf a {
        color: #fff !important;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 14px;
        font-style: italic;
        padding: 0 1em 0 2em;
}

/* AVATAR DERNIER POSTEUR ET STATISTIQUES */
.avatar_stats {
        float: left;
        position: relative;
        margin: -3.7em 0 0 0;
}

.avatar_dernier img {
        width: 137px;
        height: 205px;
        object-fit: cover;
        position: absolute;
        z-index: 3;
}

.statistiques {
        width: 137px;
        height: 205px;
        position: relative;
        z-index: 4;
        background: rgba(0,0,0,.6);
        text-align: center;
        color: #fff;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 30px;
        line-height: 1.2;
        font-style: italic;
        padding: .5em 0 0 0;
        box-sizing: border-box;
        text-shadow: 1px 1px #000;
}

/* LIEN SUPPRESSION COOKIE ET MARQUER LU */
.liens_footer_cate {
        width: 90%;
        margin: 0 auto 2em;
        text-align: right;
}

.liens_footer_cate li {
        list-style: none;
        display: inline-block;
        margin: 0 0 0 1em;
}

.liens_footer_cate a {
        display: inline-block;
        background: url(https://i.imgur.com/inIiuHJ.jpg) 500px;
        line-height: 2;
        color: #fff !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-weight: 400;
        font-size: 14px;
        width: 250px;
        text-align: center;
        transition: .5s all;
}

.liens_footer_cate a:hover {
        background: url(https://i.imgur.com/inIiuHJ.jpg) center 30px;
        transition: .5s all;
        text-shadow: 1px 1px #000;
}

Index_box

<div id="categories">
          
          		<div class="titre_cate">
                  		{catrow.tablehead.L_FORUM}
                          	<img src="https://i.imgur.com/v73PF5K.png" alt="" />
          		</div>

<div class="forum">
                          
                          	<div class="nom_forum">
                                  	<img class="statut_forum" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                                  
                                  	<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                                          	{catrow.forumrow.FORUM_NAME}
                                  	</a>
                          	</div>
                          
                          	<div class="bloc_dernier_message">
                                  	<div class="dernier_message">
                                          	<span>
                                                  	Dernier message
                                          	</span>
                                  	</div>
                                          
                                        <div class="dernier_message_txt">
                                                
							<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>
                          
                          	<div class="description_sf">
                                  	<p>
                                          	{catrow.forumrow.FORUM_DESC}
                                  	</p>
                                  
                                  	<div class="sf">
                                          	{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                  	</div>
                          	</div>
                          
                          	<div class="avatar_stats">
                                  	 
                        			<div class="avatar_dernier">
                                                  	{catrow.forumrow.avatar.LAST_POST_AVATAR}
                                  		</div>
                        		
                                  
                                  	<div class="statistiques">
                                          	{catrow.forumrow.TOPICS}
                                          	<br />
                                          	S.
                                          	<br />
                                          	<br />
						{catrow.forumrow.POSTS}
                                          	<br />
                                          	M.
                                  	</div>
                          	</div>
                          
                  	</div>

</div>
		<br />

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

Pour ajouter le sous-titre des catégories

Le "Tout ce qu'il faut savoir" sur la maquette. Dans votre titre de catégorie, encadrer le sous-titre d'un "span", comme sur l'exemple suivant :

Index complet Naruto Halloween exemple catégories

Le Shuriken à côté du nom de forum correspond à l'image "New", "No new", "Lock" et est en 38*38px. Au survol de la description (212*159px) le dernier message s'affiche. Vous n'avez pas besoin d'ajouter l'ombre ou le texte "dernier message" sur votre image, le code le fait pour vous.
Pour ajouter les police, cf plus haut

CSS

/* ------------------- QUI EST EN LIGNE ------------------- */

#qeel {
        background: url(https://i.imgur.com/inIiuHJ.jpg);
        width: 943px;
        margin: 0 auto 2em;
        height: 327px;
        padding: 3em;
        box-sizing: border-box;
}

/* AVATAR DERNIER INSCRIT */
.qeel_avatar {
        float: left;
}

#avatar_dernier_membre img {
        width: 184px;
        height: 262px;
        object-fit: cover;
}

/* STATISTIQUES */
.qeel_stats {
        float: left;
        width: 18%;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 14px;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        padding: 2.4em 0 0;
        letter-spacing: 1px;
}

.qeel_stats span {
        background: url(https://i.imgur.com/YdeNN8w.jpg);
        display: block;
        padding: .7em 0;
        margin: 1.5em 0;
        box-shadow: 0 15px 20px -12px rgba(0,0,0,.8);
}

.qeel_stats span strong {
        font-weight: 400;
}

.qeel_stats a {
        color: #fff !important;
}

/* GROUPES */
.qeel_groupes {
        float: left;
        width: 20%;
        text-align: center;
        margin: 5.5em 0 0;
}

.qeel_groupes a {
        width: 60%;
        display: block;
        padding: .4em 0 .8em;
        margin: 0 0 1em;
        color: #fff !important;
        text-transform: uppercase;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 19px;
        letter-spacing: 1px;
}

.qeel_groupes .kiri {
        background: #5187b0;
}

.qeel_groupes .kumo {
        background: #d1ae00;
}

.qeel_groupes .suna {
        background: #b58345;
}

/* CONNECTES */
.qeel_enligne {
        float: left;
        background: #e6e5e5;
        width: 33%;
        margin: 0 0 0 4em;
        box-sizing: border-box;
        padding: 1em;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 16px;
        text-transform: uppercase;
        text-align: center;
        height: 260px;
}

.liste_connectes {
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
        text-align: justify;
        text-transform: initial;
        height: 190px;
        margin: 1.5em 0 0;
        padding: 0 1em;
        box-sizing: border-box;
        overflow: auto;
}

Index_body, remplacer tout le contenu entre commentaire "Begin disable viewonline" :

<div id="qeel">
  
  	<div class="qeel_avatar">
        	<span id="avatar_dernier_membre"></span>
  	</div>
  
  	<div class="qeel_stats">
          	<span id="dernier_membre">
                  	{NEWEST_USER}
          	</span>
          
          	<span>
                  	{TOTAL_USERS}
          	</span>
          
          	<span>
                  	{TOTAL_POSTS}
          	</span>
  	</div>
  
  	<div class="qeel_groupes">
          	<a href="#" class="kiri">
                  	Kiri
          	</a>
          
          	<a href="#" class="kumo">
                  	Kumo
          	</a>
          
          	<a href="#" class="suna">
                  	Suna
          	</a>
  	</div>
          
        <div class="qeel_enligne">
          	{TOTAL_USERS_ONLINE}
          
          	<div class="liste_connectes">
                  	{L_CONNECTED_MEMBERS}
          	</div>
        </div>
     
</div>

<div class="liens_footer_cate">
  	<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>

Profile_View_Body

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

Javascript

Créer un nouveau code Javascript nommé "Phrases du qeel" par exemple, c/c ce qui suit et enregistrer.

$(function () {
/*Réglages ci-dessous*/
                    var t = {
 "remplacer":
 [
"Qui est en ligne ?",
"Il y a en tout",
   "utilisateur en ligne :",
   "utilisateurs en ligne :",
"Utilisateurs enregistrés :",
"Enregistré",
"Enregistrés ",
"Invisible ",
"Invisibles",
"et",
"Invité",
"Invités",
"Le record du nombre d'utilisateurs en ligne est de",
"Membres connectés au cours des",
"Aucun membre ne fête son anniversaire aujourd'hui",
"Aucun membre ne fête son anniversaire dans les",
"Membres fêtant leur anniversaire aujourd'hui",
"Membres fêtant leur anniversaire dans les",
"Légende",
"Nos membres ont posté un total de",
"Statistiques",
"messages",
"Nous avons",
"membres enregistrés",
"L'utilisateur enregistré le plus récent est",
"Anniversaires",
"Statistiques",
"Evènements à venir dans le calendrier pour les 5 prochains jours",
"Il n'y a pas d'évènement à venir dans le calendrier"
],
"par": 
[
"Qui se baladent sur le forum ?",
"",
"shinobi",
"shinobis",
"" ,
"connecté",
"connectés",
"caché ",
"cachés ",
", ",
"invité",
"invités",
"Le pic de membres présents est de",
"Connectés ces",
"Pas d'anniversaire ce jour",
"Pas d'anniversaire dans les",
"Joyeux anniversaire à",
"Les prochains anniversaires a souhaiter dans les",
"Les groupes du forum",
"",
"Les stats du forum",
"Messages",
"",
"Membres",
"",
"Les fêtes a venir",
"Les stats ",
"Que se passe t-il dans le calendrier ?",
"Pas d'évènement à l'heure actuelle"
]
};

/*Fin réglages*/
for(i in t.remplacer)$('#qeel')
.html($('#qeel').html().replace(t.remplacer[i], t.par[i]));
});

Et enfin, on affiche l'avatar du dernier inscrit :

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

#naruto #indexcomplet #forumactif #codage #libreservice

Halloween