epsilon
forum de libre service de codage,
aucune inscription
Une refonte complète d'Epsilon est prévue pour bientôt. Dans les mois qui suivent, le forum va totalement changer d'apparence et toutes les catégories vont être réorganisées. Pas de panique, aucun LS ne va disparaître !
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment :
Xiaomi Mi Smart Camera 2K Standard Edition (design ...
Voir le deal
11.39 €

Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.
[INDEX RED AND SCARY] MTW8RpJ

Bannière + barre de nav + sous navigation



Tout se trouvant dans le même template, il sera donc à copier coller entièrement. Rendez vous dans votre panneau d'administration > Affichage > Templates > Général > Overall_header :

Code:
<!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}>
  <link rel="icon" type="image/png" href="https://imgur.com/Fx6F8wp.png" />
<head>
 
  
    <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" />
    <!-- BEGIN switch_compat_meta -->
    <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
    <!-- END switch_compat_meta -->
    <!-- BEGIN switch_canonical_url -->
    <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
    <!-- END switch_canonical_url -->
    {META_FAVICO}
    {META}
    {META_FB_LIKE}
    <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
    {T_HEAD_STYLESHEET}
    {CSS}
  <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
   <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/popper.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css"/>
  
  <script type='text/javascript' src='http://files.jcink.net/html/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='http://files.jcink.net/html/jquery.cookie-1.3.1.js'></script>
 
<script type='text/javascript' src='http://files.jcink.net/html/catcollapse.js'></script>
<script src="http://greatdivide.b1.jcink.com/uploads/greatdivide/styletooltips.js"></script>

<script>
(function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips({
            tip_follows_cursor:true,
    tip_delay_time:0,
    tip_fade_speed:300
    });
        });
    })(jQuery);

jQuery(document).ready(function($) {
 
 $(".scroll").click(function(event){
 event.preventDefault();
 $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
 });
});</script>
  
<script src="http://milouze14.fr/M14smoothscroll.js" type="text/javascript"></script>
    <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:900|Roboto" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Great+Vibes|Satisfy" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet"/>
  
    <!----FICHE DE BASE---> <link href="https://www.aht.li/3296730/fichedebaseInsorouge.css" rel="stylesheet"/>
    <!----FICHE DE PREDEFINIS---> <link href="https://www.aht.li/3296925/fichepredefinirouge.css" rel="stylesheet"/>
    <!----FICHE DE LIENS---> <link href="https://www.aht.li/3296958/Fichedeliensrouge.css" rel="stylesheet"/>
    <!----MP----> <link href='https://www.aht.li/3300172/MMMPP.css' rel='stylesheet' type='text/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>
    <!-- BEGIN switch_recent_jquery -->
    <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>
    <!-- END switch_recent_jquery -->
    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  
    {RICH_SNIPPET_GOOGLE}

    <!-- BEGIN switch_fb_login -->
    <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>
    <!-- END switch_fb_login -->

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

    <!-- BEGIN switch_ticker_new -->
    <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>
    <!-- END switch_ticker_new -->

    <script type="text/javascript">//<![CDATA[
    $(document).ready(function(){
        <!-- BEGIN switch_enable_pm_popup -->
        pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
        if(pm != null) { pm.focus(); }
        <!-- END switch_enable_pm_popup -->
        <!-- BEGIN switch_report_popup -->
        report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
        if(report != null) { report.focus(); }
        <!-- END switch_report_popup -->
        <!-- BEGIN switch_ticker -->
        $(document).ready(function() {              
            Ticker.start({
                height : {switch_ticker.HEIGHT},
                spacing : {switch_ticker.SPACING},
                speed : {switch_ticker.SPEED},
                direction : '{switch_ticker.DIRECTION}',
                pause : {switch_ticker.STOP_TIME}
            });
        });
        <!-- END switch_ticker -->
    });

    <!-- BEGIN switch_login_popup -->
        var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
    <!-- END switch_login_popup -->

    <!-- BEGIN switch_login_popup -->
    $(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
                });
        });
    });
    <!-- END switch_login_popup -->
    //]]>
    </script>
    {GREETING_POPUP}
    <!-- BEGIN switch_ticker_new -->
    <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>
    <!-- END switch_ticker_new -->
    {HOSTING_JS}

    <!-- BEGIN google_analytics_code -->
    <script type="text/javascript">
        //<![CDATA[
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', '{G_ANALYTICS_ID}', 'auto');
    ga('send', 'pageview');
    ga('set', 'anonymizeIp', true);

    <!-- BEGIN google_analytics_code_bis -->
    ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
    ga('bis.send', 'pageview');
    ga('bis.set', 'anonymizeIp', true);
    <!-- END google_analytics_code_bis -->
    //]]>
    </script>
    <!-- END google_analytics_code -->

</head>
  
    <div class="titlefo"><img src="https://imgur.com/j1IekjN.png"/><div class="linkname"><a href="/">NOM DU F<i>O</i>RUM</a></div></div>
  <div class="souscita">« Petite phrase descriptive parce que cay joli »</div>
    <!-- DEBUT BARRE NAVIG -->
 <div id="userlinkss">
        <div class="menuposition">
         {GENERATED_NAV_BAR}</div></div>
              <div class="js-avatar"></div>
      <!-- FIN BARRE NAVIG -->
                          <div class="topic_display_nav">
                            <a href="{U_INDEX}"><h1>NOM DU FORUM :</h1></a> <div class="stpbouge">{NAV_CAT_DESC_SECOND}</div></div>
  
  <div class="fonopif"><img src="https://imgur.com/k50MGYl.png"/></div>
  
  
  <div class="haut"><a href="#top"><span class="sf sf-chevron-up"></span></a></div>
  <div class="middle"><a href="#qeel"><span class="sf sf-wolf"></span></a></div>
   <div class="bas"><a href="#bottom"><span class="sf sf-chevron-down"></span></a></div>
  
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
  
    <!-- BEGIN hitskin_preview -->
    <div id="hitskin_preview" style="display: block;">
        <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
        <div class="content">
            <p>
                {hitskin_preview.L_THEME_SITE_PREVIEW}
                <br />
                <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
            </p>
        </div>
    </div>
  
  
  
 
    <!-- END hitskin_preview -->

    <!-- BEGIN switch_login_popup -->
    <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>
    <!-- END switch_login_popup -->

    <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">
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <!-- BEGIN switch_logo_left -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_left -->
                        <td align="center" width="100%" valign="middle">
                            <!-- BEGIN switch_logo_center -->
                            <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                            <br />
                            <!-- END switch_logo_center -->
                            <div class="maintitle">{MAIN_SITENAME}</div>
                            <br />
                            <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                        </td>
                        <!-- BEGIN switch_logo_right -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_right -->
                    </tr>
                </table>

                <div style="clear: both;"></div>

                <!-- BEGIN switch_ticker_new -->
                <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;">
                                        <!-- BEGIN ticker_row -->
                                        <li>{switch_ticker.ticker_row.ELEMENT}</li>
                                        <!-- END ticker_row -->
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- END switch_ticker_new -->

                <!-- BEGIN switch_ticker -->
                <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">
                                            <!-- BEGIN ticker_row -->
                                            <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                            <!-- END ticker_row -->
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- END switch_ticker -->

                <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}">
                                            <!-- BEGIN giefmod_index1 -->
                                            {giefmod_index1.MODVAR}
                                                <!-- BEGIN saut -->
                                                <div style="height:{SPACE_ROW}px"></div>
                                                <!-- END saut -->
                                            <!-- END giefmod_index1 -->
                                        </div>
                                    </td>
                                    <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
<!-- END html_validation -->

Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :

Code:
/***HEADER***/
.titlefo img {
  width:100%;
}
.linkname {
    text-align: center;
    margin-top: -260px;
    position: relative;
    top: -108px;
}
.linkname a {
    color: #fff;
    text-shadow: 5px 5px 5px black;
    font: 178px Pt Sans;
    letter-spacing: 10px;
    mix-blend-mode: soft-light;
    transition: all 800ms;
}
.linkname a i {
  color:#8d2525;
}
.linkname a:hover {
  color: #dadada;
    mix-blend-mode: soft-light; transition:all 800ms;
}
.souscita {
    text-align: center;
    margin-top: -17px;
    position: relative;
    top: -124px;
    color: #dadada;
    font: 12px calibri;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px black;
    mix-blend-mode: soft-light;
}
/********IMAGE DE FOND******/
.fonopif {
  position:absolute;
}
.fonopif img {
    width: 100%;
    mix-blend-mode: soft-light;
    opacity: 0.8;
}
/*******BARRE DE NAV*******/
#userlinkss {
    background-color: #2c2c2c;
    padding: 15px;
    margin-top: 32px;
    text-align: center;
}
.menuposition a {
    text-transform: uppercase;
    font: 12px Calibri;
    letter-spacing: 1px;
    color: #dadada !important;
}
.js-avatar {
    overflow: hidden;
    width: 80px;
    height: 80px;
    border: solid 1px black;
    outline: 1px solid #fff;
    box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
    outline-offset: -2px;
    margin-top: -70px;
    margin-right: 20px;
    float: right;
    position: relative;
}
.js-avatar img {
  width:100%;
}
/********SOUS NAV*******/
.topic_display_nav {
    width: 100%;
    height: 20px;
    background: black;
    margin-top: -10px;
    line-height: 29px !important;
}
.topic_display_nav a {
    font-size: 12px;
    font-family: calibri;
    letter-spacing: 1px;
    color: #dadada;
    text-shadow: 1px 1px 0px #000;
}
.topic_display_nav h1 {
    text-transform: uppercase;
    font: 11px calibri;
    line-height: 20px;
    color: #dadada;
}
.stpbouge {
    margin-top: -33px;
    margin-left: 60px;
}
Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.

La page d'accueil



Panneau d'administration > Affichage > Page d'accueil > Généralité :

Code:
<div class="fondPA">
                                                                                                                                                                                                                                                                                                                              
 <div class="colonneg">
                                                                                                                                                                                                                                                                                                                                  
 <div class="credits">
                        Texte du contexte <br /><br />                                                                                        
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="entourtop">
                                                                                                                                                                                                                                                                                                                              
 <div class="topparto">
   <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                                            
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                        
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                        
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                  
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                            
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                                                    
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                          
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                    
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                  
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                        
 <div class="topparto">
 <a href="/" target="_blank"><img src="http://placehold.it/50x50/" /></a>                                                                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                        
 </div>
                                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="colonneg">
                                                                                                                                                                                                                                                                                                                              
 <div class="txtpilot">
    <img src="https://imgur.com/IxZMYKg.png" />                                                                                                                                      
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="bloknews">
                                     <span>Date</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus auctor purus, nec semper lorem consectetur eu. Morbi ipsum neque, luctus vitae accumsan in, pharetra ator purus, nec semper lorem consectetur eu. Morbi ipsum neque, luctus vitae accumsan in, pharetra at risus. <br /><br /><span>Date</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus auctor purus, nec semper lorem consectetur eu.    
 </div>
                                                                                                                                                                                                                                                                  
 <div class="topsite">
   <a href="/" target="_blank"><img src="https://imgur.com/mYRnu7i.png" /></a><a href="/" target="_blank"><img src="https://imgur.com/r8slDje.png" /></a><a href="/" target="_blank"><img src="https://imgur.com/pqPILDT.png" /></a><a href="/" target="_blank"><img src="https://imgur.com/FcWw4At.png" /></a>                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                            
 <div class="colonneg2">
                                                                                                                                                                                                                                                                                                                              
 <div class="txtpilot">
                                                                         <img src="https://imgur.com/2H1TNSE.png" />                                                                                                                                      
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="scenarios">
                                                                                                                                                                                                                                                                                                                              
 <div class="P1" style="background-image:url(http://placehold.it/55x200/)">
                                                                                                                                                                                                                                                                                                                              
 <div class="S0">
                                                                                                                                                                                                                                                                                                                              
 <div class="texte">
                                                                                                                                                                                                                                                                                                                
 <div class="namepre">
                                                               nom prénom                                                                                                                                                            
 </div><span><img src="http://placehold.it/40x40/" /></span><br /><a href="/" target="_blank">sa fiche</a>                                                                                                                                                                
 </div>
                                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="P1" style="background-image:url(http://placehold.it/55x200/)">
                                                                                                                                                                                                                                                                                                                              
 <div class="S0">
                                                                                                                                                                                                                                                                                                                              
 <div class="texte">
                                                                                                                                                                                                                                                                                                                  
 <div class="namepre">
                                                               nom prénom                                                                                                                                            
 </div><span><img src="http://placehold.it/40x40/" /></span><br /><a href="/" target="_blank">sa fiche</a>                                                                                                                                                                
 </div>
                                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="P1" style="background-image:url(http://placehold.it/55x200/)">
                                                                                                                                                                                                                                                                                                                              
 <div class="S0">
                                                                                                                                                                                                                                                                                                                              
 <div class="texte">
                                                                                                                                                                                                                                                                                                                  
 <div class="namepre">
                                                              nom prénom                                                                                                                                                        
 </div><span><img src="http://placehold.it/40x40/" /></span><br /><a href="/" target="_blank">sa fiche</a>                                                                                                                                                                
 </div>
                                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                              
 <div class="P1" style="background-image:url(http://placehold.it/55x200/)">
                                                                                                                                                                                                                                                                                                                              
 <div class="S0">
                                                                                                                                                                                                                                                                                                                              
 <div class="texte">
                                                                                                                                                                                                                                                                                                                
 <div class="namepre">
                                           nom prénom                                                                                                                                                            
 </div><span><img src="http://placehold.it/40x40/" /></span><br /><a href="/" target="_blank">sa fiche</a>                                                                                                                                                                
 </div>
                                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                  
 <div class="fondsouspa">
 <span class="sf sf-book"> </span> <a href="/" target="_blank"> Contexte </a> <span class="sf sf-ghost"></span> <a href="/" target="_blank"> Avatars </a> <span class="sf sf-building"></span> <a href="/" target="_blank"> Métiers </a> <span class="sf sf-books"></span> <a href="/" target="_blank"> Oeuvres prises </a> <span class="sf sf-thor"></span><a href="/">Pouvoirs</a> <span class="sf sf-cheers"></span> <a href="/" target="_blank"> Partenariats </a>                                                                          
 </div>
</div>
      
<div class="lesliensutiles">
                                                       <a href="/memberlist?mode=today_posters">Top 20 du jour</a><a href="/memberlist?mode=overall_posters">Top 20 du forum</a><a href="/search?search_id=activetopics">Sujets actifs du jour</a><a href="/?mode=delete_cookies">Supprimer les cookies</a><a href="/search?search_id=newposts">Voir les messages non lus</a><a href="/?mark=forums">Marquer tous les forums comme lus</a>
</div>

Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
Code:
/*************PA**********/
.topsite {
    display: flex;
    flex-wrap: wrap;
    margin-left: 40px;
    margin-top: 40px;
}
.topsite img {
    width: 62px;
    animation: beat 1.5s infinite both;
}
.fondPA {
    height: 538px;
    margin-top: -60px;
    z-index: 99;
    position: relative;
}
.colonneg {
    padding: 10px;
    display: inline-block;
    margin: 3px;
    width: 308px;
    height: 470px;
    vertical-align: top;
}
.colonneg2 {
    padding: 10px;
    display: inline-block;
    margin: 5px;
    width: 260px;
    height: 470px;
    vertical-align: top;
}
.credits {
    padding: 10px;
    width: 930px;
    text-align: justify;
    height: 110px;
    margin: 0 auto;
    overflow: auto;
    background-image: url(https://imgur.com/dQ9HYI8.png);
    font-family: calibri;
    position: relative;
    font: 12px calibri;
    color: #2c2c2c;
    box-shadow: 0 15px 20px -12px rgba(0, 0, 0, 0.8);
}
  .entourtop {
    text-align:center;
    margin-top:20px;
  }
.topparto {
    display: inline-block;
    margin: 3px;
    filter: grayscale(70%);
    transition: linear 1s;
    outline: 1px solid #fff;
    box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
    outline-offset: -2px;
}
  .topparto img {
    width:50px;
    height:50px;
    border:solid 5px black;
  }
  .topparto:hover {
  filter:grayscale(0%);
  transition:linear 1s;
}
.txtpilot {
    margin-top: 180px;
    position: relative;
    top: 14px;
    margin-left: -20px;
}
.bloknews {
  padding:5px;
  width:100%;
  height:100px;
  color:black;
  font-size:11px;
  font-style:italic;
  font-family:calibri;
  text-align:justify;
}
.bloknews span {
    font: 700 10px/1 calibri;
    float: left;
    margin: 5px 5px;
    background: rgba(141, 37, 37, 0.7);
    padding: 10px;
    text-transform: uppercase;
    box-shadow: 2px 2px 3px rgb(44, 44, 44);
}
.scenarios {
    text-align: center;
    height: 210px;
    width: 258px;
}
  .lespredef img{
    display:inline-block;
  }
  .P1 {
    position:relative;
    width: 55px;
    height: 200px;
    display: inline-block;
    margin:2px;
    vertical-align:top;
    border:solid 1px black;
    outline: 1px solid #fff;
    box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
    outline-offset: -2px;
    }
.S0 {
    background: rgba(141, 37, 37, 0.7);
    color: #fff;
    padding-top: 15px;
    height: 185px;
    width: 55px;
    font-size: 8px;
    font-family: calibri;
    opacity: 0;
    transform: scale(0.5);
    transition: all 800ms;
}
.S0 a {
    font-size:8px;
    font-family:calibri;
    color:white;
    }
.P1:hover .S0 { opacity:1; transition:0.8s linear; transform:scale(1);
}
.texte {
  text-align:center;
  margin-top:35px;
}
.texte img {
    border-radius: 100%;
    width: 40px;
    border: solid 2px #ccc;
    height: 40px;
}
.texte a {
    padding: 5px;
    position: relative;
    top: 20px;
    background: #2c2c2c;
    color: #dadada;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 800ms;
}
.texte a:hover {
    background: #dadada;
    color: #2c2c2c;
    transition: all 800ms;
}
.namepre {
    font-family: fancy;
    color: #dadada;
    text-transform: lowercase;
    font-size: 15px;
    margin-top: -20px;
    margin-bottom: 10px;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}
.fondsouspa {
    text-align: center;
    padding: 10px;
    background: #8d2525;
    box-shadow: 0 15px 20px -12px rgba(0, 0, 0, 0.8);
}
.fondsouspa span {
    font-size: 15px;
    color: #dadada;
    margin: 5px;
    transition: linear 800ms;
}
.fondsouspa span:hover {
    transition: linear 800ms;
    color: #2c2c2c;
}
.fondsouspa a {
    color: #dadada;
    font-size: 13px;
    text-transform: uppercase;
    font-family: arial;
    letter-spacing: 2px;
}
Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.

Les catégories



Remplacer l'intégralité de votre template  panneau d'administration > Affichage > Templates > Général > index_box par le HTML :

Code:
<div class="entouray"> <!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="tleCAT">{catrow.tablehead.L_FORUM}</div>

<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->

   <div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
<div class="categorie">
  <div class="newsmessages">
            <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" />
          </div>
  <div class="blun">
  <div class="titreFRM"><a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a></div>
    <div class="lastpost">{catrow.forumrow.LAST_POST}</div>
  </div>
  
  <div class="bleux">
<!-- BEGIN avatar -->
<div class="lastvava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
 <!-- END avatar -->
        <div class="totalstats">
      <div class="stats"><span class="sf sf-envelope-2"></span> {catrow.forumrow.TOPICS}</div>
      <div class="stats2"><span class="sf sf-pencil"></span> {catrow.forumrow.POSTS}</div>
    </div>
  </div>
  
  <div class="blois">
  <div class="description">{catrow.forumrow.FORUM_DESC}</div>
  </div>

</div>

<!-- END forumrow -->
<!-- END catrow -->
</div>

Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :

Code:
/*********CATEGORIE*********/
.sous-forum {
    padding: 10px;
    background: #2c2c2c;
    height: 40px;
    width: 965px;
    overflow: auto;
    text-align: right;
    font-size: 0px;
}
.sous-forum a {
    font: 11px calibri;
    text-transform: uppercase;
    background: #8d2525;
    height: 133px;
    font: 12px calibri;
    color: #dadada;
    margin: 2px;
    padding: 5px;
    line-height: 32px;
    outline: 1px solid #dadada;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
    outline-offset: -2px;
}
.sous-forum a:hover {
  color: #dadada;
}
.tleCAT h2 {
    font: 50px Open Sans condensed;
    border-radius: 0px;
    width: 958px;
    text-align: center;
    color: black;
    box-shadow: 0 15px 20px -12px rgba(0, 0, 0, 0.8);
    position: relative;
    height: 0px;
    border-bottom: 80px solid rgba(0,0,0,0.15);
    line-height: 84px;
    border-right: 30px solid #8d2525;
    outline: 1px solid #6d6d6d;
    outline-offset: -6px;
}
.categorie {
    background-image: url(https://imgur.com/zXLuuiF.png);
    width: 983px;
    height: 200px;
    border: solid 1px black;
    box-shadow: 0 15px 20px -12px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 9;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    margin-top: 0px;
}
.newsmessages {
  position:absolute;
}
.newsmessages img {
    margin-left: 21px;
    margin-top: 30px;
    opacity: 0.7;
}
.blun {
    padding: 2px;
    width: 266px;
    height: 160px;
    margin-top: 15px;
    position: relative;
    border-right: 1px solid #8d2525;
}
.bleux {
    width: 250px;
    border-right: 1px solid #8d2525;
    height: 165px;
    margin-top: 15px;
}
.blois {
    padding: 2px;
    width: 266px;
    height: 160px;
    margin-top: 15px;
}
.titreFRM {
    text-align: center;
    padding: 50px 20px 20px 20px;
    height: 50px;
}
.titreFRM a {
  color: #8d2525;
  font: 13px arial;
  text-transform: uppercase;
  text-shadow:1px 1px 2px black;
}
.titreFRM a::first-word {
  font-style:italic;
}
.lastpost {
    text-align: center;
    font: 11px calibri;
    color: #8d2525;
    text-shadow: 1px 1px 2px black;
}
.lastpost a {
     color: #dadada;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: 1px;
    font-size: 15px;
}
.lastpost strong {
    text-transform: uppercase;
    font-size: 13px;
}
.lastvava {
      width: 150px;
    height: 80px;
    border: solid 5px #8d2525;
    overflow: hidden;
    margin:20px auto;
}
.lastvava img {
    width: 100%;
    animation: beat 4s infinite both;
}
.totalstats {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    color: #8d2525;
    font: 42px calibri;
    margin-top: -15px;
}
.stats{
  width:125px;
}
.stats span {
    opacity: 0.5;
    position: absolute;
    margin-left: 4px;
    margin-top: 7px;
}
.stats2 {
  width:125px;
}
.stats2 span {
    opacity: 0.5;
    position: absolute;
    margin-left: 4px;
    margin-top: 7px;
}
.description {
    overflow: auto;
    width: 430px;
    padding: 10px;
    margin: 0 auto;
    height: 147px;
    text-align: justify;
    font: 12px calibri;
    color: #dadada;
}
.description strong {
    color: #8d2525;
    float: left;
    padding: 12px;
    font-size: 20px;
    font-style: italic;
}
Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.

Le Qui est En Ligne



Remplacer l'intégralité de votre template panneau d'administration > Affichage > Templates > Général > index_body par le HTML :

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

<!-- BEGIN switch_user_login_form_header -->
<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>

            <!-- BEGIN switch_social_login -->
            <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">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}


<!-- BEGIN switch_user_login_form_footer -->
<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">

                <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"/>&nbsp;</td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <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">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<div id="qeel">
<div class="fondqeel" style="height:1080px;"></div>
  
  <div class="playplay">
    <div class="titlenew">Un écrivain de plus ...</div>
    <div class="newmember">{NEWEST_USER}</div>
    
    <div class="lesgroupesstp">
<div class="iconnumber"><span class="sf sf-book"></span></div>
<div class="iconnumber"><span class="sf sf-pencil"></span></div>
<div class="iconnumber"><span class="sf sf-feather"></span></div>
      <div class="numbergr"> XX</div>
      <div class="numbergr"> XX</div>
      <div class="numbergr"> XX</div>
    </div>
  </div>
  
  <div class="playplay">
<div id="cadre-qeel-header">
<div>{TOTAL_POSTS} {TOTAL_USERS}</div>
</div>
    <div class="totalyy">
    <div class="imgonline"><img src="https://zupimages.net/up/18/41/jkeo.png" style="width: 300px;"/></div>
   <div class="oukisson">{LOGGED_IN_USER_LIST}</div>
      
      <div class="statsonline">{TOTAL_USERS_ONLINE}</div>
    
    <div class="imgonline"><img src="https://zupimages.net/up/18/41/vsc7.png" style="width: 160px;"/></div>
    <div class="totalonline"><table>{L_CONNECTED_MEMBERS}</table></div>
    </div>
  </div>
  
</div>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->

<!-- END switch_legend -->

{AUTO_DST}

Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :

Code:
/*********QEEL********/
#qeel {
    height: 1092px;
    margin-top: -95px;
    display: flex;
    flex-wrap: wrap;
}
.fondqeel {
    left: 0px;
    margin-top: 585px;
    text-shadow: 0 0 5px #000;
    position: absolute;
    width: 100%;
    height: 360px;
}
.fondqeel {
    background-image: url(https://imgur.com/Zgc9Fvx.png);
    background-position: top center;
    background-size: cover;
    background-color: transparent;
    background-repeat: no-repeat;
    margin-top: 180px;
}
#qeel + br {
    display: none;
}
.playplay {
    margin: 9px;
    height: 600px;
    position: relative;
    width: 48%;
    margin-top: 430px;
}
.titlenew {
    padding: 50px 0px 0px 50px;
    position: relative;
    top: -58px;
    font: 35px Pacifico;
    color: #2c2c2c;
    font-weight: bold;
    text-shadow: 2px 0 0 #dadada, 2px 2px 0 #dadada, 0 2px 0 #dadada, -2px 2px 0 #dadada, -2px 0 0 #dadada, -2px -2px 0 #dadada, 0 -2px 0 #dadada, 2px -2px 0 #dadada;
    transform: rotate(2deg);
}
.newmember {
    font-size: 0px;
    text-align: center;
    padding: 58px;
    background-image: url(https://imgur.com/uay3ug4.png);
    background-size: 114%;
    margin-top: -114px;
    margin-right: 43px;
}
.newmember a {
  font:30px Open Sans Condensed;
  text-shadow:1px 1px 1px black;
  letter-spacing:2px;
  text-transform:uppercase;
}
.lesgroupesstp {
    margin-top: 360px;
    display: flex;
    flex-wrap: wrap;
}
.numbergr {
    color: #dadada;
    font: 70px Times New Roman;
    text-shadow: 4px 4px 2px black;
    width: 156px;
    position: relative;
    top: -80px;
    left: 38px;
}
.iconnumber span {
    color: #8d2525;
    font-size: 100px;
    opacity: 0.5;
    margin-left: 34px;
    text-shadow: 10px 10px #dadada, 12px 12px black;
}
#cadre-qeel-header {
    font-size: 0;
    margin-top: 25px;
}
#cadre-qeel-header strong {
    font-size: 45px;
    color: #902d2d;
    width: 180px;
    height: 70px;
    padding: 20px;
    display: inline-block;
    box-shadow: 0 15px 20px -12px rgba(0, 0, 0, 0.8);
    text-align: center;
    text-transform: uppercase;
    background-image: url(https://zupimages.net/up/18/41/hybk.png);
}
#cadre-qeel-header strong:nth-child(1) {
    position: absolute;
    right: 0px;
    font-family: Times New Roman;
  text-shadow: 1px 1px 2px black;
}
#cadre-qeel-header strong:nth-child(1):before {
    content: "épitaphes";
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    font-size: 20px;
    font-weight: 100;
    color: #dadada;
}
#cadre-qeel-header strong:nth-child(2) {
    position: absolute;
    font-family: Times new roman;
  text-shadow: 1px 1px 2px black;
}
#cadre-qeel-header strong:nth-child(2):before {
    content: "écrivains";
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    font-size: 20px;
    font-weight: 100;
    color: #dadada;
}
.totalyy {
    margin-top: 128px;
}
.imgonline {
  margin-bottom:7px;
}
.oukisson {
    padding: 20px;
    width: 434px;
    height: 100px;
    margin-top: -45px;
    position: relative;
    overflow: auto;
    font-size: 0px;
    text-align: justify;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 15px 20px -12px rgba(0, 0, 0, 0.8);
}
.oukisson strong:after {
content: ",";
color:black;
}
.oukisson a {
    margin: 2px;
    font: 16px Calibri;
    text-transform: uppercase;
}
.totalonline {
    padding: 13px;
    width: 360px;
    margin: -14px auto auto 50px;
    height: 98px;
    position: relative;
    overflow: auto;
    font-size: 0px;
    text-align: justify;
    background: rgb(12, 12, 12);
    box-shadow: 0 15px 20px -12px rgba(0, 0, 0, 0.8);
}
.totalonline a {
    margin: 2px;
    font: 15px Calibri;
    font-style: italic;
    text-transform: uppercase;
}
.totalonline .gensmall {
  background-color:none !important;
  font-size:0px !important;
  letter-spacing:0px;
}
.totalonline .row1 {
  font-family: 'Roboto';
}
.totalonline strong:after {
content: ",";
color:black;
}
.statsonline {
    color: #2c2c2c;
    font-family: Calibri;
    font-size: 10px;
    text-align: left;
}

Le footer



Remplacer l'intégralité de votre template panneau d'administration > Affichage > Templates > Général > overall_footer_end par le HTML :

Code:
<!-- BEGIN html_validation -->
<!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">
<body>
<table>
 <tr>
 <td>
 <div>
 <div>
 <div>
<!-- END html_validation -->
 </div>
 </div>
 <!-- BEGIN switch_footer_links -->
 <div align="center">
 <div class="gen">
 <!-- BEGIN footer_link -->
 <!-- BEGIN switch_separator --><!-- END switch_separator -->
 <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
 <!-- END footer_link -->
 </div>
 </div>
 <!-- END switch_footer_links -->
 </div>
 {PROTECT_FOOTER}
 </td>
 </tr>
</table>
  
  <div class="fondfoo">
  <div class="blokyy">
    <div class="title" style="font:14px roboto;text-align: left;text-transform:uppercase;letter-spacing:2px;color:#dadada;margin-left: 24px;margin-top: 20px;margin-bottom: 20px;text-shadow: 1px 2px 3px black;">copyright & crédits</div>
      <div class="txtcopy">:copyright: Copyright : <a href="http://epsilon-ls.forumactif.com/">Thème réalisé par Epsilon</a>.</div>
    </div>
    
    
  <div class="blokyy2">
     <div class="title" style="font:14px roboto;text-align:center;text-transform:uppercase;letter-spacing:2px;color:#dadada;margin-left: 24px;margin-top: 20px;margin-bottom: 20px;text-shadow: 1px 2px 3px black;">marques pages récents</div>
    <div id="recent_topics"></div>
<script type="text/javascript">jQuery('#recent_topics').append('<div style="height: 160px;" behavior="scroll" direction="up" scrollamount="1">' + jQuery('.js-marquee:first').html() + '</div>')</script>
 </div>
    
  <div class="blokyy3">
     <div class="title" style="font:14px roboto;text-align:right;text-transform:uppercase;letter-spacing:2px;color:#dadada;margin-left: 24px;margin-top: 20px;margin-bottom: 20px;text-shadow: 1px 2px 3px black;">les chapitres ouverts</div>
  
    <div class="tourte">
  <div class="tourte">
    <div style="margin:10px;display:inline-block;"><a target="_blank" href="/">NOM DU MEMBRE</a> recherche un rp.</div></div>
  
   <div class="tourte">
     <div style="margin:10px;display:inline-block;"><a target="_blank" href="/">NOM DU MEMBRE</a> recherche un rp.</div></div>

  <div class="tourte">
    <div style="margin:10px;display:inline-block;"><a target="_blank" href="/">NOM DU MEMBRE</a> recherche un rp.</div></div>
  </div></div>
    
    <div class="bffimg">
    <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
    <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
      <a href="/" target="_blank"><img src="http://placehold.it/50x50/" class="tooltip" title="NOM DU FORUM"/></a>
</div>
  
</div>
    <div class="toutenbas">:copyright: COPYRIGHT : Tous droits réservés.</div>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    $(document).ready( function() {
        $('div.fb-login-button, span.fb-login-button').attr({
            "data-scope": "{switch_facebook_login.FB_SCOPE}",
            "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
            "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
            "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
            "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
        });
        $('div.fb-login-button, span.fb-login-button').each(function() {
            if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
                $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
            }
            if($(this).html() == '') {
                $(this).html('{switch_facebook_login.FB_LABEL}');
            }
        });

        FB.init({
            appId   : "{switch_facebook_login.FB_APP_ID}",
            cookie  : {switch_facebook_login.FB_COOKIE},
            xfbml   : {switch_facebook_login.FB_XFBML},
            oauth   : {switch_facebook_login.FB_OAUTH},
            version : '{switch_facebook_login.FB_VERSION}'
        });

        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
                js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
    function onLoginFB() {
        window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
    }
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
    $(document).ready( function() {
        $('div.ti-connect').attr({
            'data-loc' : '{switch_topicit_connect.TOPICIT_URL}',
            'data-login' : '{switch_topicit_connect.BOARD_LOGIN}',
            'data-version' : '{switch_topicit_connect.TOPICIT_VERSION}',
            'data-lang' : '{switch_topicit_connect.BOARD_LANG}'
        });

        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'topicit-connect'));
    });
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
 fa_endpage();
//]]>
</script>
</body>
</html>

Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :

Code:
/******FOOTER*********/
.fondfoo {
    background-image: url(https://imgur.com/NDb3Xpv.png);
    width: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 740px;
    position: relative;
}
.blokyy {
    display: inline-block;
    vertical-align: top;
    width: 33%;
    height: 200px;
    border-right: 2px solid #6f6f6f;
    margin-top:80px;
}
.blokyy2 {
    display: inline-block;
    vertical-align: top;
    width: 33%;
    height: 200px;
    border-right: 2px solid #6f6f6f;
    margin-top:80px;
}
.blokyy3 {
    display: inline-block;
    vertical-align: top;
    width: 33%;
    height: 200px;
    margin-top:80px;
}
.txtcopy {
    height:102px;
    width: 90%;
    padding: 20px;
    overflow: auto;
    text-align: justify;
    font: 11px calibri;
    color: #dadada;
}
.txtcopy a {
    background: #8d2525;
    color: #dadada;
    display: inline-block;
    font-family: calibri, arial;
    font-size: 10px;
    letter-spacing: 2px;
    margin: 2px;
    padding: 2px 5px 2px 5px;
    text-shadow: 0px 1px 2px black;
    text-transform: uppercase;
}
.tourte {
    width: 98%;
    color: #dadada;
    font: 11px roboto;
}
  .tourte a {
    color:lightgrey;
    font-size:13px;
    transition: linear 1s;
  }
  .tourte a:hover {
    color:#white;
  }
.bffimg {
    text-align: center;
    filter: grayscale(70%);
    transition: linear 1s;
    width: 80%;
    margin: 15px auto;
}
  .bffimg:hover {
    filter: grayscale(0%);
    transition: linear 1s;
  }
  .bffimg img {
    margin:5px;
    width:50px;
    height:50px;
    border: solid 1px #8d2525;
    outline: 1px solid #fff;
    outline-offset: -2px;
  }
.toutenbas {
    padding: 20px;
    text-align: center;
    font: 12px calibri;
    color: #dadada;
    text-shadow: 1px 1px 1px black;
    background: #000000;
    border-top: 2px solid #8d2525;
    margin-bottom: -50px;
}
/******SUJETS RECENTS*******/
/*Ce truc te sert à effacer le widget*/
#left {display: none;}
/*****FIN*******/
#recent_topics {
    text-align: center;
    color: #8d2525;
    text-transform: uppercase;
    font: 10px calibri;
    text-shadow: 1px 1px 2px black;
    overflow: auto;
    height: 142px;
}
#recent_topics a {
    color: #a0a0a0;
    font-family: calibri;
    font-size: 13px;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
}
Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.

Tout ce dont vous aurez besoin pour customiser :



Pour avoir une jolie barre de scroll (uniquement sous Chrome), ajoutez dans votre CSS :
Code:
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background: black;
}
::-webkit-scrollbar-thumb:vertical {
   height: 30px;
   -webkit-border-radius: 2px;
   background-color: #6f6f6f;
}
::-webkit-scrollbar-thumb:horizontal{
   height: 30px;
  -webkit-border-radius:5px;
   background-color: #6f6f6f;
}

N'oubliez pas de rajouter également, pour retirer le soulignement moche de base de forumactif ;
Code:
a {text-decoration:none;}
a:hover{text-decoration:none !important;}

Pour que l'image de fond forum rende bien et ne soit pas invisible, rajoutez :
Code:
.forumline {
    position: relative;
}

Pour avoir de jolis boutons haut/milieu/bas pour naviguer plus rapidement sur le forum, rajoutez toujours à votre CSS :
Code:
.haut a {
  color:#2c2c2c;
}
.bas a{
  color:#2c2c2c;
}
.middle a {
  color:#2c2c2c;
}
.haut {
    position: fixed;
    bottom: 350px;
    right: 30px;
    z-index: 999;
}
.bas {
    position: fixed;
    bottom: 250px;
    right: 30px;
    z-index: 999;
}
.middle {
    position: fixed;
    bottom: 300px;
    right: 30px;
    z-index: 999;
}
.haut span {
  font-size:50px;
  transition:1s linear;
}
.middle span {
  font-size:50px;
  transition:1s linear;
}
.bas span {
  font-size:50px;
  transition:1s linear;
}
.haut span:hover {
  color:#8d2525;
  transition:1s linear;
}
.bas span:hover {
  transition:1s linear;
  color:#8d2525;
}
.middle span:hover {
  transition:1s linear;
  color:#8d2525;
}

Pour l'image de fond ainsi que le fond forum, ajoutez :
Code:
body {
    margin: 0 auto;
    padding: 0px;
    background-image: url(https://imgur.com/z1PCuTj.png);
    background-size: 100%;
  overflow-x: hidden;
}
.bodylinewidth {
    background: rgb(218, 218, 218);
    background-image: url(https://imgur.com/Q8Zd3VG.png);
    background-attachment: fixed;
}

Pour avoir la barre de liens en bas du forum customisée :
Code:
#page-footer {
    text-transform: uppercase;
    word-spacing: 2px;
    z-index: 7;
    box-sizing: border-box;
    clear: both;
    color: #ccc;
    font-size: 1em;
    padding: 5px;
    text-align: center;
    background: #8d2525;
    position: absolute;
    right: 0;
    width: 100%!important;
}
#page-footer a {
  text-shadow: 1px 2px 3px black;
  color:#dadada;
  text-transform:uppercase;
  letter-spacing:1px;
  font:11px calibri;
}

Pour avoir une joli tooltip (le truc qui bouge quand on passe sa souris sur les partos dans le footer), rajoutez :

Code:
#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:5px;
background-color: #2c2c2c;
font-family:arial;
font-weight: 700;
text-transform: uppercase;
font-size:8px;  
color:#dadada;
outline: 1px solid #dadada;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
outline-offset: -1px;
}

Et enfin, ajoutez à votre CSS ceci pour avoir la police d'écriture utile et l'effet de coeur qui bat sur les images des catégories :
Code:
@font-face {
   font-family: fancy;
   src: url(http://files.jcink.net/uploads/sugarsid/KGEyesWideOpen.ttf);}
@keyframes beat{from{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}50%{-webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05);}to{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}}

Pour les images des catégories, retirez tout dans votre panneau d'administration et ajoutez ceci pour les nouveaux messages :
Code:
https://imgur.com/RtHLxl1.png

Comme ceci :
[INDEX RED AND SCARY] HDol7MM

Pour l'icône qui redirige vers le dernier message sur les catégories :

Code:
https://zupimages.net/up/18/42/am45.png

Pour l'icône qui redirige vers le dernier message (nouveau) sur les catégories :

Code:
https://zupimages.net/up/18/42/pp0a.png

Pour afficher sur la barre de navigation le membre connecté/l'invité, il vous faudra ajouter ceci dans les Javascripts. Pour ceci, suivez le chemin : Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript. Créez un nouveau JS et cochez bien, "Sur toutes les pages" après lui avoir donné un nom :

Code:
$(function(){
    $.each(_userdata, function(key, value){
        $(".js-" + key).html(value);
    })
});
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum