Welcome

Halloween Index complets

My Hero Academia

Halloween, LS codage Forumactif Index complets Index complet My Hero Academia

PHPBB2

Optimisé La page d'accueil est en header à droite de la bannière et le staff est en hover (plus d'info en bas). Les catégories affichent l'avatar du dernier posteur et les images de description en fond de forum. Un footer & une barre latérale existent également. La maquette complète

Le profil avancé des membres ne doit pas être activé ("Groupes & Utilisateurs", "Profil", "Options générales", "Profil avancé : non".

Retour

Codage index complet Freedom accueil Halloween Forumactif

La page d'accueil est en header. L'image de gauche correspond au logo du forum en 400*617px. Les informations du staff apparaissent au survol. Ne correspond qu'à un forum d'au moins 1200px de large. Les membres connectés au cours des 24 dernières heures s'affichent en hover de l'image (257*217px), et l'image de fond des stats correspond à l'avatar du dernier inscrit.

CSS

.bodylinewidth {
        width: 1200px;
}

.bodyline {
    	padding: 0;
}

/********************************************************************** BANNIERE **********************************************************************/
.banniere {
        width: 33.5%;
        float: left;
        position: relative;
}

/* MENU */
.menu {
        bottom: 6%;
        font-family: Bangers, cursive;
        position: absolute;
        text-align: center;
        width: 90%;
        left: 5%;
}

.menu a {
        color: #d0cbc9 !important;
        display: inline-block;
        font-size: 14px;
}

.menu a:hover {
    	color: #ad8245 !important;
}

/********************************************************************** PAGE ACCUEIL **********************************************************************/
.page_accueil {
        float: left;
        width: 66.5%;
  	color: #c8c3c1;
}

/* TITRES */
.page_accueil h2 {
        font-family: Bangers, cursive;
        font-size: 24px;
        font-weight: 400;
        margin: 0% 0 4% 0;
        text-align: center;
  	color: #c8c3c1;
}

.page_accueil h2 span {
    	color: #ad8245;
}

/* ENTETE (CONTEXTE NEWS PREDEF) */
.pa_entete {
        background: url(https://i.imgur.com/whvuPv5.png);
        display: inline-block;
        padding: 1% 3%;
}

/* Contexte */
.pa_bloc_contexte {
        float: left;
        width: 40%;
        background: url(https://i.imgur.com/xU8fE7I.png) no-repeat top left, url(https://i.imgur.com/DmHAZrT.png) no-repeat bottom right;
        padding: 2%;
        box-sizing: border-box;
}

.pa_bloc_contexte p, .pa_bloc_news p {
        background: #4b4346;
        padding: 10%;
        width: 98%;
        margin: auto;
        box-sizing: border-box;
        height: 280px;
        line-height: 1.5;
        text-align: justify;
        overflow: auto;
        font-size: 11px;
}

.pa_bloc_contexte a {
        color: #ad8245 !important;
        font-family: Bangers, cursive;
}

.pa_bloc_contexte a:hover {
    	color: #fff !important;
}

/* News */
.pa_bloc_news {
        float: left;
        margin: 2.5% 5% 0 5%;
        width: 25%;
}

.pa_bloc_news p {
    	background: #6e6363;
}

.pa_bloc_news span {
        font-family: Bangers, cursive;
        letter-spacing: 1px;
        color: #fff;
}

.pa_bloc_news a {
        background: #ad8245;
        color: #fff;
        display: inline-block;
        font-family: time new roman;
        font-size: 14px;
        font-style: italic;
        font-weight: 700;
        letter-spacing: -1px;
        padding: 0 5%;
        text-transform: lowercase;
        width: 70px;
        text-align: center;
        box-sizing: border-box;
}

.pa_bloc_news a:hover {
    	background: #4b4346;
}

/* Predefinis */
.pa_bloc_predef {
        float: left;
        width: 23%;
        margin: 2.5% 0 0;
        text-align: center;
}

.pa_bloc_predef img {
    	margin: 6.9% 3.5%
}

.heros_predef {border: 2px solid #238acf;}
.eleves_predef {border: 2px solid #cf6d2c;}
.ligue_predef {border: 2px solid #b71516;}
.vilains_predef  {border: 2px solid #c163e6;}
.civils_predef {border: 2px solid #4c881c;}

/* FOOTER PAGE ACCUEIL */
.pa_footer {
        background: url('https://i.imgur.com/7sUpp8o.jpg') no-repeat bottom right #2e2b2b;
        padding: 0 0 2% 0;
}

/* Staff */
.pa_staff {
        float: left;
        width: 56%;
        margin: 2% 0 0 3%;
}

.pa_staff h2 {
    	text-align: left;
}

.pa_staff div {
        display: inline-block;
        height: 55px;
        margin: 5px;
        width: 100px;
}

.pa_staff img {
        height: 55px;
        width: 100px;
}

.pa_staff div:hover p {
    	opacity: 1;
}

.pa_staff a {
        display: block;
        text-decoration: none!important;
}

.pa_staff p {
        background: rgba(75,76,70,.8);
        color: #d0cbc9;
        height: 45px;
        margin-top: -55px;
        opacity: 0;
        overflow: hidden;
        padding: 5px;
        position: absolute;
        text-align: center;
        transition: all .65s linear;
        width: 90px;
        font-size: 10px;
        letter-spacing: 1px;
}

.pa_staff a {
        display: block;
        background: #ad8245;
        color: #d0cbc9;
        padding: 1%;
        width: 50px;
        margin: 7% auto 0;
}

.pa_staff a:hover {
      	background: #6e6363;
}

/* Liens utiles */
.pa_liens_utiles {
        float: left;
        width: 35%;
        margin: 3% 0 0 2%;
}

.pa_liens_utiles a {
        display: inline-block;
        background: #ad8245;
        width: 40%;
        padding: 3%;
        margin: 1%;
        text-align: center;
        font-family: Time new Roman;
        font-style: italic;
        color: #fff;
        letter-spacing: 1px;
        text-transform: lowercase;
        font-size: 16px;
}

.pa_liens_utiles a:hover {
    	background: #4b4346;
}

/* Partenaires */
.pa_partenaires {
        margin: 2% 0 0 0;
        text-align: center;
}

.pa_partenaires img {
    	margin: 0 .5%;
}

Overall_header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
    <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
    <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    
    <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
    
    
    <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
    
    {META_FAVICO}
    {META}
    {META_FB_LIKE}
    <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
    <link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
    {T_HEAD_STYLESHEET}
    {CSS}
    <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
    <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
    <script src="{JQUERY_PATH}" type="text/javascript"></script>
    
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    
    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>   
    {RICH_SNIPPET_GOOGLE}

<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
    <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>

<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
    <script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>

<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
    <script type="text/javascript">//<![CDATA[
        /* Definir le sens de direction en fonction du panneau admin */
        var tickerDirParam = "{switch_ticker.DIRECTION}";
        var slid_vert = false;
        var auto_dir = 'next';
        var h_perso = parseInt({switch_ticker.HEIGHT});

switch( tickerDirParam ) {
            case 'top' : 
                slid_vert = true;
                break;
            case 'left': 
                break;
            case 'bottom': 
                slid_vert = true;
                auto_dir = 'prev';
                break;
            case 'right':
                auto_dir = 'prev';
                break;
            default:
                slid_vert = true;
        }

$(document).ready(function() {
            var w_cont = $('#fa_ticker_container').width();

if (w_cont > 0) {
                $('#fa_ticker_container').width(w_cont);

/* Affichage de la liste */
                $('#fa_ticker_content').css('display','block');

/* Calcul des dimensions du conteneur et des elements */
                var width_max = $('ul#fa_ticker_content').width();
                var width_item = Math.floor(width_max / {switch_ticker.SIZE});
                var height_max = h_perso;

/* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
                $('ul#fa_ticker_content li').each( function () {
                    if ($(this).height() > height_max) {
                        height_max = $(this).height();
                    }
                } );

/* Redimensionnement des elements et des images trop larges */
                $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
                    if ($(this).width() > width_item) {
                        var ratio		= $(this).width() / width_item;
                        var new_height = Math.round($(this).height() / ratio);
                        $(this).height(new_height).width(width_item);
                    }
                });

/* Redimensionnement et centrage du conteneur en mode vertical */
                if (slid_vert) {
                    $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
                }

/* Initialisation du caroussel */
                $('#fa_ticker_content').jcarousel({
                    vertical: slid_vert,
                    wrap: 'circular',
                    auto: {switch_ticker.STOP_TIME},
                    auto_direction: auto_dir,
                    scroll: 1,
                    size: {switch_ticker.SIZE},
                    height_max: height_max,
                    animation: {switch_ticker.SPEED}
                });
            } else {
                $('ul#fa_ticker_content li:not(:first)').css('display','none');
                $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
            }
        });
    //]]>
    </script>

var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

$(document).ready( function() {
        $(window).resize(function() {
            var windowWidth = document.documentElement.clientWidth;
            var popupWidth = $("#login_popup").width();
            var mypopup = $("#login_popup");

$("#login_popup").css({
            "left": windowWidth/2 - popupWidth/2
                });
        });
    });
    
    //]]>
    </script>
    {GREETING_POPUP}
    
    <style>
    .jcarousel-skin-tango .jcarousel-item {
        text-align:center;
        width: 10px;
    }

.jcarousel-skin-tango .jcarousel-item-horizontal {
        margin-right: {switch_ticker.SPACING}px;
    }

.jcarousel-skin-tango .jcarousel-item-vertical {
        margin-bottom: {switch_ticker.SPACING}px;
    }
    </style>
    
    {HOSTING_JS}
    
    <script type="text/javascript">
    //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_trackPageLoadTime']);

_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
    _gaq.push(['b._trackPageview']);

<div id="login_popup" style="z-index: 10000 !important;">
        <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
            <tr height="25">
                <td class="catLeft">
                    <span class="genmed module-title">{SITENAME}</span>
                </td>
            </tr>
            <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
                <td class="row1" align="left" valign="top">
                    <div id="login_popup_buttons">
                        <form action="{S_LOGIN_ACTION}" method="get">
                            <input type="submit" class="mainoption" value="{L_LOGIN}" />
                            <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                            <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                        </form>
                    </div>
                    <span class="genmed">{LOGIN_POPUP_MSG}</span>
                </td>
            </tr>
        </table>
    </div>

<a name="top"></a>
    {JAVASCRIPT}

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
        <tr>
            <td class="bodyline">
                <div class="banniere">
                  	<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                  	<div class="menu">
                          	{GENERATED_NAV_BAR}
                  	</div>
              	</div>
              
              	<div class="page_accueil">
                  	<div class="pa_entete">
                          	<div class="pa_bloc_contexte">
                                  	<h2>Notre <span>Histoire</span></h2>
                                  	<p>
                                          	Année 2045. 80% de la population a développé des pouvoirs surnaturels, surnommés Alter. Certains les utilisèrent pour semer le chaos, détruire ou réaliser des activités illégales.<br />D'autres, à l'inverse, utilisèrent leurs nouvelles capacités pour sauver la veuve et l'orphelin, rendant réel le métier autrefois fantasmé de Super-héros, qui devint, au fur et à mesure, une activité reconnue par l'état. C'est ainsi que des écoles se spécialisèrent dans l'éducation de nouveaux justiciers, prêts à affronter ceux bravant la loi : les vilains. 
                                          	<a href="#">La suite</a>
                                        </p>
                          	</div>
                          
                          	<div class="pa_bloc_news">
                                  	<h2>Nouve<span>autés</span></h2>
                                  	<p>
                                          	<span>XX/XX</span> Je suis une nouveauté <a href="#">Consulter</a>
                                          	<br />
                                          	<span>XX/XX</span> Je suis une nouveauté <a href="#">Consulter</a>
                                          	<br />
                                          	<span>XX/XX</span> Je suis une nouveauté <a href="#">Consulter</a>
                                          	<br />
                                          	<span>XX/XX</span> Je suis une nouveauté !<a href="#">Consulter</a>
                                        </p>
                          	</div>
                          
                          	<div class="pa_bloc_predef">
                                  	<h2>Prédé<span>finis</span></h2>
                                  	<a href="#"><img src="https://zupimages.net/up/18/08/qsa8.png" class="eleves_predef" /></a>
                                  	<a href="#"><img src="https://zupimages.net/up/18/08/nsyg.png" class="eleves_predef" /></a>
                                  	<a href="#"><img src="https://zupimages.net/up/18/08/iw6i.png" class="eleves_predef" /></a>
                                  	<a href="#"><img src="https://zupimages.net/up/18/08/hdk1.png" class="eleves_predef" /></a>
                                  	<a href="#"><img src="http://nsa39.casimages.com/img/2018/03/27/180327020926613478.jpg" class="eleves_predef" /></a>
                                  	<a href="#"><img src="https://zupimages.net/up/18/08/g9ii.png" class="eleves_predef" /></a>
                          	</div>
                          
                          	<div class="clear"></div>
                  	</div>
                  
                  	<div class="pa_footer">
                          	<div class="pa_staff">
                                  	<h2>La dream <span>team</span></h2>
                                  		<div>
                                                  	<img src="https://redcdn.net/hpimg15/pics/865584staff1.png" al="" />
                                                  	<p>
                                                          	Pseudo<br />Rôle <a target="_blank" href="#">MP</a>
                                                  	</p>
                                  		</div>
                                  
                                  		<div>
                                                  	<img src="https://redcdn.net/hpimg15/pics/865584staff1.png" al="" />
                                                  	<p>
                                                          	Pseudo<br />Rôle <a target="_blank" href="#">MP</a>
                                                  	</p>
                                  		</div>
                                  
                                  		<div>
                                                  	<img src="https://redcdn.net/hpimg15/pics/865584staff1.png" al="" />
                                                  	<p>
                                                          	Pseudo<br />Rôle <a target="_blank" href="#">MP</a>
                                                  	</p>
                                  		</div>
                                  
                                  		<div>
                                                  	<img src="https://redcdn.net/hpimg15/pics/865584staff1.png" al="" />
                                                  	<p>
                                                          	Pseudo<br />Rôle <a target="_blank" href="#">MP</a>
                                                  	</p>
                                  		</div>
                                  
                                  		<div>
                                                  	<img src="https://redcdn.net/hpimg15/pics/865584staff1.png" al="" />
                                                  	<p>
                                                          	Pseudo<br />Rôle <a target="_blank" href="#">MP</a>
                                                  	</p>
                                  		</div>
                                  
                                  		<div>
                                                  	<img src="https://redcdn.net/hpimg15/pics/865584staff1.png" al="" />
                                                  	<p>
                                                          	Pseudo<br />Rôle <a target="_blank" href="#">MP</a>
                                                  	</p>
                                  		</div>
                          	</div>
                                  
                                <div class="pa_liens_utiles">
                                  	<a href="#">Règlement</a>
                                  	<a href="#">Annexes</a>
                                  	<a href="#">Prédéfinis</a>
                                  	<a href="#">Bottin</a>
                                  	<a href="#">Partenariat</a>
                                  	<a href="#">Fair Play</a>
                                  	<a href="#">Les votes</a>
                                  	<a href="#">La chronologie</a>
                          	</div>
                          
                          	<div class="clear"></div>
                          
                          	<div class="pa_partenaires">
                                  	<a target="_blank" href="http://ls-halloween.fr/"><img src="http://ls-halloween.fr/img/partenaires.jpg" alt="" /></a>
                                  	<a target="_blank" href="http://ls-halloween.fr/"><img src="http://ls-halloween.fr/img/partenaires.jpg" alt="" /></a>
                                  	<a target="_blank" href="http://ls-halloween.fr/"><img src="http://ls-halloween.fr/img/partenaires.jpg" alt="" /></a>
                                  	<a target="_blank" href="http://ls-halloween.fr/"><img src="http://ls-halloween.fr/img/partenaires.jpg" alt="" /></a>
                                  	<a target="_blank" href="http://ls-halloween.fr/"><img src="http://ls-halloween.fr/img/partenaires.jpg" alt="" /></a>
                                  	<a target="_blank" href="http://ls-halloween.fr/"><img src="http://ls-halloween.fr/img/partenaires.jpg" alt="" /></a>
                                  	<a target="_blank" href="http://ls-halloween.fr/"><img src="http://ls-halloween.fr/img/partenaires.jpg" alt="" /></a>
                                </div>
                  	</div>
              	</div>
              
              	<div class="clear"></div>

<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                        <tr>
                            <td align="left" class="row1">
                                <div id="fa_ticker_container">
                                    <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                                        
                                        <li>{switch_ticker.ticker_row.ELEMENT}</li>
                                        
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                        <tr>
                            <td align="left" class="row1">
                                <div id="fa_ticker_container">
                                    <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                                        <div class="fa_ticker_content">
                                            
                                            <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

<div id="page-body">
                    <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                        <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                            <tbody>
                                <tr>
                                    <td valign="top" width="{C1SIZE}">
                                        <div id="{ID_LEFT}">
                                            
                                            {giefmod_index1.MODVAR}
                                                
                                                <div style="height:{SPACE_ROW}px"></div>
                                                
                                            
                                        </div>
                                    </td>
                                    <td valign="top" width="100%">

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Codage index complet My Hero Academia catégories Halloween Forumactif PHPBB2

L'avatar du dernier posteur est à gauche de la description. Le rectangle marron correspond à l'image "New"/"No new"/"Lock" (77*33px). L'image de droite est l'image de description du forum (283*265px).

CSS

/* OVERFLOW */
::-webkit-scrollbar {
    background: #c8c3c1;
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #594e4e;
}

/********************************************************************** CATEGORIES **********************************************************************/
/* LIENS ENTETE CATEGORIES */
.cate_liens_header, .cate_liens_footer {
    text-align: center;
    margin: 2% 0;
}

.cate_liens_footer {
    margin: 3% 0 0 0;
}

.cate_liens_header a, .cate_liens_footer a {
    font-family: 'Bangers', cursive;
    font-size: 18px;
    color: #d0cbc9;
    margin: 0 1.5%;
}

.cate_liens_header a:hover, .cate_liens_footer a:hover {
    letter-spacing: 2px;
}

.cate_liens_header a span, .cate_liens_footer a span {
    color: #bc7a32;
}

/* FOND CATEGORIES */
.contenu_categories {
    background: #594e4e;
    margin: 2% auto;
    color: #c8c3c1;
    width: 80%;
}

/* TITRE CATEGORIE */
.titre_categorie {
    background: url(http://nsa39.casimages.com/img/2018/02/08/18020811040423579.png);
}

.titre_categorie h2 {
    padding: 6.7%;
    text-align: right;
    font-family: 'Bangers', sans-serif;
    color: #c8c3c1;
    font-size: 30px;
    font-weight: normal;
}

/* FOND FORUM */
.forum {
    background: #6e6262;
    margin: 2% auto;
    position: relative;
    width: 90%;
    height: 265px;
}

/* AVATAR */
.forum_avatar {
    position: relative;
}

.forum_avatar img {
    float: left;
    height: 235px;
    margin: 2% 2.5%;
    object-fit: cover;
    width: 125px;
    position: absolute;
}

/* BLOC MILIEU NOM FOFO STATUT DESCRIPTION DERNIER MESSAGE */
.forum_bloc {
    background: #4b4346;
    float: left;
    height: 200px;
    margin: 4% 0 0 14%;
    position: relative;
    width: 45%;
    z-index: 2;
}

/* NOM FORUM ET STATUT */
.forum_bloc_nom {
    position: relative;
}

/* Image statut */
img.forum_statut {
    left: 4%;
    position: absolute;
    top: -20%;
}

/* Nom forum */
a.forumlink {
    display: block;
    font-family: Bangers, cursive;
    font-size: 24px;
    font-weight: 400;
    position: relative;
    color: #c8c3c1 !important;
    z-index: 1;
    margin: 3% 0 0 10%;
}

/* DESCRIPTION */
.forum_description {
    position: relative;
}

/* Image description */
.forum_description img {
    position: absolute;
    right: -91%;
    top: -78%;
    z-index: 1;
}

/* Texte description */
.forum_description p {
    font-size: 11px;
    height: 80px;
    line-height: 1.5;
    margin: 3% auto 0 auto;
    overflow: auto;
    padding: 0 2% 0 0;
    text-align: justify;
    width: 90%;
}

/* DERNIER MESSAGE */
.dernier_message {
    width: 90%;
    margin: auto;
    background: url(https://i.imgur.com/xU8fE7I.png) no-repeat top left, url(https://i.imgur.com/DmHAZrT.png) no-repeat bottom right;
    padding: 3%;
    text-align: center;
    font-size: 11px;
}

.dernier_message a {
    color: #d0cbc9 !important;
}

/* BLOC SOUS FORUMS STATISTIQUES */
.forum_bloc_droite {
    float: right;
    width: 30%;
    position: relative;
    z-index: 2;
}

/* Sous forum */
.sous_forum {
    width: 100%;
    height: 190px;
    margin: 7% 0 0 0;
    overflow: auto;
}

.sous_forum a {
    display: block;
    background: #ad8245;
    color: #fff !important;
    text-align: center;
    width: 80%;
    margin: 2% auto;
    padding: 4% 0;
    font-size: 16px;
    font-family: Time New Roman;
    text-transform: lowercase;
    font-style: italic;
    letter-spacing: 1px;
}

.sous_forum a:hover {
    background: #4b4346;
}

/* Statistiques */
.forum_statistiques {
    background: rgba(75,76,70,.8);
    box-sizing: border-box;
    font-size: 10px;
    margin: 5% auto 0;
    padding: 1% 0;
    text-align: center;
    width: 80%;
}

/* FOOTER */
.footer_categorie {
    background: url(http://nsa39.casimages.com/img/2018/02/08/180208110805372266.png);
    width: 100%;
    height: 144px;
}

Index_box

<div class="cate_liens_header">
  	
	<a id="nouveaux_messages" href="{U_SEARCH_NEW}">
          	{L_SEARCH_NEW}
  	</a>
	<a id="mes_messages" href="{U_SEARCH_SELF}">
          	{L_SEARCH_SELF}
        </a>
  	
	<a id="sans_reponse" href="{U_SEARCH_UNANSWERED}">
          	{L_SEARCH_UNANSWERED}
  	</a>
</div>
<script type="text/javascript">document.getElementById('nouveaux_messages').innerHTML=document.getElementById('nouveaux_messages').innerHTML.replace(/Voir les nouveaux messages depuis votre dernière visite/,"Nouveaux <span>messages</span>");</script> 
<script type="text/javascript">document.getElementById('mes_messages').innerHTML=document.getElementById('mes_messages').innerHTML.replace(/Voir ses messages/,"Mes <span>messages</span>");</script>
<script type="text/javascript">document.getElementById('sans_reponse').innerHTML=document.getElementById('sans_reponse').innerHTML.replace(/Voir les messages sans réponses/,"Messages <span>sans réponse</span>");</script>

<div class="contenu_categories">
	<div class="titre_categorie">
                 {catrow.tablehead.L_FORUM}
	</div>

<div class="forum">
          	
           	<div class="forum_avatar">
                  	{catrow.forumrow.avatar.LAST_POST_AVATAR}
          	</div>
            	
          
          	<div class="forum_bloc">
                  	<div class="forum_bloc_nom">                             	
                       		<img class="forum_statut" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                          	<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                                  	{catrow.forumrow.FORUM_NAME}
                          	</a>
                  	</div>
                  
                  	<div class="forum_description">
                          	{catrow.forumrow.FORUM_DESC}
                  	</div>
                  
                  	<div id="last" class="dernier_message">
                          	{catrow.forumrow.LAST_POST}
                          	<script type="text/javascript">jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">, </span>')).removeAttr('id');</script>
                  	</div>
          	</div>
          
          	<div class="forum_bloc_droite">
                  	<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="forum_statistiques">
                          	{catrow.forumrow.POSTS} Messages | 
                          	{catrow.forumrow.TOPICS} Sujets
                  	</div>
          	</div>
          
          	<div class="clear">
          	</div>
	</div>
	
  
	
	
  
	
  	<div class="footer_categorie">
  	</div></div>

A mettre dans toutes les descriptions

Codage index complet My Hero Academia qui est en ligne Halloween Forumactif PHPBB2

CSS

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

/* OVERFLOW */
::-webkit-scrollbar {
    background: #c8c3c1;
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #594e4e;
}

/* LIENS ENTETE CATEGORIES */
.cate_liens_header, .cate_liens_footer {
    text-align: center;
    margin: 2% 0;
}

.cate_liens_footer {
    margin: 3% 0 0 0;
}

.cate_liens_header a, .cate_liens_footer a {
    font-family: 'Bangers', cursive;
    font-size: 18px;
    color: #d0cbc9;
    margin: 0 1.5%;
}

.cate_liens_header a:hover, .cate_liens_footer a:hover {
    letter-spacing: 2px;
}

.cate_liens_header a span, .cate_liens_footer a span {
    color: #bc7a32;
}

/********************************************************************** QUI EST EN LIGNE **********************************************************************/
.qui_est_en_ligne {
    background: url(http://nsa39.casimages.com/img/2018/02/08/180208112514573024.png);
    box-sizing: border-box;
    margin: 3% auto 2%;
    padding: 1% 4% 0 8%;
    width: 900px;
    color: #c8c3c1;
}

/* QEEL GAUCHE */
.qeel_gauche {
    float: left;
    width: 33.5%;
}

.connectes24 {
    background: #302c2c;
    height: 217px;
    overflow: hidden;
    width: 257px;
}

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

.connectes24:hover .connectes24_img {
    margin-left: 400px;
    transform: all;
    transition: 1s;
}

.connectes24_contenu {
    color: #d0cbc9;
    font-size: 11px;
    height: 217px;
    margin-top: -218px;
    overflow: auto;
    padding: 5%;
    position: relative;
    text-align: justify;
    width: 257px;
    z-index: 1;
    box-sizing: border-box;
}

.connectes24_contenu .row1, .bloc2 .row1 {
    background: transparent;
}

.connectes24_contenu .row1 .gensmall, .bloc2 .row1 .gensmall {
    color: #c8c3c1;
}

/* QEEL MILIEU */
.qeel_milieu {
    float: left;
    width: 22%;
    text-align: center;
    margin: 0 5%;
    position: relative;
}

.qeel_milieu img {
    width: 100%;
    height: 217px;
    object-fit: cover;
}

.qeel_statistiques {
    background: rgba(46,43,43,.6);
    box-sizing: border-box;
    font-family: Bangers, cursive;
    font-size: 24px;
    font-weight: 100;
    height: 217px;
    letter-spacing: 1px;
    padding: 20% 0 0 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* QEEL DROIT */
.qeel_droite {
    width: 30%;
    float: left;
}

.bloc1 {
    background: #6e6363;
    padding: 5%;
    font-size: 11px;
}

.qeel_en_ligne {
    width: 100%;
    height: 80px;
    margin: 5% 0 0 0;
    overflow: auto;
}

.bloc2 {
    background: #6e6363;
    font-size: 11px;
    padding: 5%;
    margin: 5% 0 0 0;
    height: 30px;
    overflow: auto;
}

/* GROUPES */
.qeel_groupes {
    font-family: Bangers, cursive;
    text-align: center;
    font-size: 24px;
    padding: 2% 0;
}

.qeel_groupes a {
    margin: 0 2%;
}

.bloc_stats .heros, .qui_est_en_ligne .heros {color: #238acf;}
.bloc_stats .eleves, .qui_est_en_ligne .eleves {color: #cf6d2c;}
.bloc_stats .ligue_vilains, .qui_est_en_ligne .ligue_vilains {color: #b71516;}
.bloc_stats .vilains, .qui_est_en_ligne .vilains {color: #c163e6;}
.bloc_stats .civils, .qui_est_en_ligne .civils {color: #4c881c;}

Index_Body

{JAVASCRIPT}

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
	
	<tr>
		<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
	</tr>
	
	
	<tr>
		<td class="row1" rowspan="3" align="center" valign="middle">
		<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
		</td>
	</tr>
	
</table>

<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

<table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

<tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

<td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    
                    <div class="fb-login-button"></div>
                    
                    
                    <div class="ti-connect"></div>
                    
                </div>
            </td>

</tr>
    </table>
</form>

<div class="chatbox">
  	{CHATBOX_TOP}
</div>

{BOARD_INDEX}

<div class="cate_liens_footer">
  	
		<a id="marquerlu" href="{U_MARK_READ}">
                  	{L_MARK_FORUMS_READ}
  		</a>
	
	<a id="sujets_jour" href="{U_TODAY_ACTIVE}" class="gensmall">
          	{L_TODAY_ACTIVE}
  	</a>
	<a id="posteurs_forum" href="{U_OVERALL_POSTERS}">
          	{L_OVERALL_POSTERS}
  	</a>
</div>
<script type="text/javascript">document.getElementById('marquerlu').innerHTML=document.getElementById('marquerlu').innerHTML.replace(/Marquer tous les forums comme lus/,"Marquer comme <span>lus</span>");</script> 
<script type="text/javascript">document.getElementById('sujets_jour').innerHTML=document.getElementById('sujets_jour').innerHTML.replace(/Sujets actifs du jour/,"Sujets <span>actifs</span>");</script>
<script type="text/javascript">document.getElementById('posteurs_forum').innerHTML=document.getElementById('posteurs_forum').innerHTML.replace(/Top 20 des posteurs du forum/,"Meilleurs <span>posteurs</span>");</script>

<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

<td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    
                    <div class="fb-login-button"></div>
                    
                    
                    <div class="ti-connect"></div>
                    
                </div>
            </td>

</tr>
    </table>
</form>

<div class="qui_est_en_ligne">
  	<h2>
          	<img src="http://nsa38.casimages.com/img/2016/01/28/160128013358916942.png" alt="qui est en ligne My Hero Academia" />
  	</h2>
  
  	<div class="qeel_gauche">
        	<div class="connectes24">
                  	<div class="connectes24_img">
                          	<img src="https://i.imgur.com/fTMIyTK.jpg" />
                  	</div>
                  	<div class="connectes24_contenu">
                          	<table>
                                  	{L_CONNECTED_MEMBERS}
                          	</table>
                  	</div>
          	</div>
  	</div>
  
  	<div class="qeel_milieu">
        	    <span id="avatar_dernier_membre"></span>
          	<div class="qeel_statistiques">
                  	<span id="matt">
                          	{TOTAL_USERS}
                	</span>
                  	<br /><br />
                  	<span id="bert">
                          	{TOTAL_POSTS}
                	</span>
                	<br /><br />
                  	<span id="dernier_membre">
                          	{NEWEST_USER}
                	</span>
          	</div>
  	</div>
  
  	<div class="qeel_droite">
          	<div class="bloc1">
                  	<span id="celine">
                   		{TOTAL_USERS_ONLINE}
          		</span>
                  
          		<div class="qeel_en_ligne">
                          	<span id="alpha">
                       	   		{LOGGED_IN_USER_LIST}
                  		</span>
          		</div>
          	</div>
          
          	<div class="bloc2">
                  	<table>
                          	{L_WHOSBIRTHDAY_TODAY}
                  	</table>
          	</div>
  	</div>
  
  	<div class="clear">
  	</div>
  
  	<div class="qeel_groupes">
          	<a class="heros" href="/g9-heros">
                  	Héros
          	</a>
          	<a class="eleves" href="/g14-eleves">
                  	Élèves
          	</a>
          	<a class="ligue_vilains" href="/g12-ligue-des-vilains">
                  	Ligue des Vilains
          	</a>
          	<a class="vilains" href="/g11-vilains">
                  	Vilains
          	</a>
          	<a class="civils" href="/g13-civils">
                  	Civils
          	</a>
  	</div>
</div>

<div class="chatbox">
  	{CHATBOX_BOTTOM}
</div>

{AUTO_DST}

Profile_view_body

Remplacer "{AVATAR_IMG}" (ligne 20) par :

Créer une page Javascript

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

#myheroacademia #indexcomplet #forumactif #codage #libreservice

Halloween