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 :
Manga Spy x Family Tome 13 édition Collector : ...
Voir le deal
14.50 €

[INDEX FLAT]
 :: I am lost without my Boswell ☆ :: Skins complets :: Skins clairs
Jawn
Jawn
The relations between us in those latter days were peculiar.
# [INDEX FLAT] - Ven 8 Nov - 2:04
[INDEX FLAT] Ap5meNe

Remplacez l'intégralité de votre template overall_header par :
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="http://orig00.deviantart.net/7e20/f/2012/168/0/e/0e21f3662a30f8fec2eff1454a07dc4b-d53ucad.gif" />
  <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" />
 <!-- 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}
<script type='text/javascript' src='https://www.aht.li/3413176/first.js'></script>
<script type='text/javascript' src='https://www.aht.li/3413177/second.js'></script>
 
<script type='text/javascript' src='https://www.aht.li/3413178/troisieme.js'></script>
<script src="https://www.aht.li/3413179/quatrieme.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>
 <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Libre+Caslon+Display&display=swap" rel="stylesheet"/>
  <link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/0pi4rr280t5vvs9/particles%20black.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() {

 $('#fa_ticker_content').css('display','block');

 var width_max = $('ul#fa_ticker_content').width();
 var width_item = Math.floor(width_max / {switch_ticker.SIZE});

 if (width_max > 0)
 {
 $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).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);
 }
 });

 if (slid_vert)
 {
 var height_max = h_perso;

 $('ul#fa_ticker_content li').each( function () {
 if ($(this).height() > height_max)
 {
 height_max = $(this).height();
 }
 } );

 $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
 $('ul#fa_ticker_content li').height(height_max);
 }


 $('#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;

            $(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}

 <style type="text/css">
 #page-footer, div.navbar, div.navbar ul.linklist {
 display: block !important;
 }

 ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
 display: inline !important;
 }

 <!-- BEGIN switch_ticker_new -->
 .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;
 }
 <!-- END switch_ticker_new -->
 </style>

 {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 -->

 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
 <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
</head>

<body id="modernbb">

  
  <div class="line1"></div>
  
<div class="lampe"></div>
  
  <div class="particle particle-1"></div><div class="particle particle-2"></div>
<div class="particle particle-3"></div>
<div class="particle particle-4"></div>
  
  <div class="imgfond"><img src="https://zupimages.net/up/19/33/95g9.png"/></div>
  
  <div class="bloknameforum">
    <div id="titlefo"><a href="/">to the crown</a></div>
    <div class="subtitle">Phrase descriptive de votre forum</div>
    
    <div class="navbarfo">{GENERATED_NAV_BAR}</div>
    <div class="arrowdown" style="text-align:center"><a href="#top"><img src="https://imgur.com/hdTezUr.png"/></a></div>
    
  </div>
  
<div class="fondPA">
  
<div class="blok1">
<div class="linksut"><a target="_blank" href="https://untilte.forumactif.com/f1-johnlock">Johnlock</a></div>
<div class="linksut"><a target="_blank" href="https://untilte.forumactif.com/f3-stucky">Stucky</a></div>
<div class="linksut"><a target="_blank" href="https://untilte.forumactif.com/f2-cherik">Cherik</a></div>
<div class="linksut"><a target="_blank" href="https://untilte.forumactif.com/f4-altega">Altega</a></div>
<div class="linksut"><a target="_blank" href="https://untilte.forumactif.com/f5-stucky-alternatif">Stucky - UA</a></div></div>

<div class="contextePA">
‘I consider that a man’s brain originally is like a little empty attic, and you have to stock it with such furniture as you choose.  
  A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up
  with a lot of other things, so that he has a difficulty in laying his hands on it. Now the skillful workman is very careful indeed as to what he takes into his
  brain-attic.  He will have nothing but the tools which may help him in doing his work, but of these he has a large assortment, and all in the most perfect order.
  It is a mistake to think that little room has elastic walls and can distend to any extent.  Depend uon it – there comes a time when for every addition of knowledge
  you forget something that you knew before.  It is of the highest importance, therefore, not to have useless facts elbowing out the useful ones.</div>

  <div class="blokyy">
  <div class="blok2">
<div class="jambon" title="Nom du prédéfini"><a target="_blank" href="/"><img src="https://via.placeholder.com/100x55"/></a></div>
<div class="jambon" title="Nom du prédéfini"><a target="_blank" href="/"><img src="https://via.placeholder.com/100x55"/></a></div>
<div class="jambon" title="Nom du prédéfini"><a target="_blank" href="/"><img src="https://via.placeholder.com/100x55"/></a></div>
<div class="jambon" title="Nom du prédéfini"><a target="_blank" href="/"><img src="https://via.placeholder.com/100x55"/></a></div>
<div class="jambon" title="Nom du prédéfini"><a target="_blank" href="/"><img src="https://via.placeholder.com/100x55"/></a></div>
<div class="jambon" title="Nom du prédéfini"><a target="_blank" href="/"><img src="https://via.placeholder.com/100x55"/></a></div>
</div>
    
    <div class="parto">
    <a target="_blank" href="/" title="nom du forum"><span class="th th-stars"></span></a>
    <a target="_blank" href="/" title="nom du forum"><span class="th th-stars"></span></a>
    <a target="_blank" href="/" title="nom du forum"><span class="th th-stars"></span></a>
    <a target="_blank" href="/" title="nom du forum"><span class="th th-stars"></span></a>
    <a target="_blank" href="/" title="nom du forum"><span class="th th-stars"></span></a>
    <a target="_blank" href="/" title="nom du forum"><span class="th th-stars"></span></a>
    <a target="_blank" href="/" title="nom du forum"><span class="th th-stars"></span></a>
    <a target="_blank" href="/" title="nom du forum"><span class="th th-stars"></span></a>
  </div>
  
  </div>
  
  
  
</div>

  
 <!-- BEGIN hitskin_preview -->
 <div id="hitskin_preview" style="display: block;">
 <h1><img src="{hitskin_preview.PATH_IMG_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;">
 <div class="h3">{SITENAME}</div>
            <div id="login_popup_message">
                {LOGIN_POPUP_MSG}
            </div>
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="button1" value="{L_LOGIN}" />
 <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
 <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
 </form>
 </div>
 </div>
 <!-- END switch_login_popup -->

 <a id="top" name="top" accesskey="t"></a>
 {JAVASCRIPT}

 <div id="page-header">
 <div class="wrap">
 <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
 </div>

 <!-- BEGIN switch_ticker_new -->
 <div id="fa_ticker_blockD" style="margin-top:4px;">
 <div class="module">
 <div class="inner">
 <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>
 </div>
 </div>
 </div>
 <!-- END switch_ticker_new -->
 </div>

 <div class="conteneur_minwidth_IE">
 <div class="conteneur_layout_IE">
 <div class="conteneur_container_IE">
 <div id="wrap">
 <div id="page-body">

 <!-- BEGIN switch_ticker -->
 <div id="fa_ticker_block" style="margin-top:4px;">
 <div class="module">
 <div class="inner">
 <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>
 </div>
 </div>
 </div>
 <!-- END switch_ticker -->

 <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
 <div id="outer-wrapper">
 <div id="wrapper">
 <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>

 <div id="container">
 <div id="content-main">
 <div id="main">
 <div id="main-content">

Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
Code:
.panel {
    border-radius: 0px !important;
    box-shadow: none !important;
}
#chatbox {
    bottom: 46px !important;
    left: 0;
    margin-left: 180px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 49px;
    padding-bottom: 10px;
}
#chatbox_top {
    height: 370px !important;
}
#chatbox_header {
    background-color: black !important;
    border-radius: 0px !important;
    height: 26px !important;
    line-height: 1;
    padding: 5px !important;
    font: 10px calibri;
    text-transform: uppercase;
}
#chatbox_header a {
    color: #d5d5d5 !important;
}
#chatbox_members {
    border-color: black !important;
    background: #d5d5d5;
    border-style: solid;
    border-width: 0 5px 0 0 !important;
    bottom: 40px;
    color: #000;
    float: left;
    left: 0;
    overflow: auto;
    position: absolute;
    top: 26px !important;
    width: 180px;
    height: 298px;
    text-transform: uppercase;
    font: 13px Libre Caslon Display;
}
#chatbox_footer {
    background-color: #d5d5d5;
    border: none !important;
}
#chatbox .user-msg .cb-avatar {
    background-color: transparent!important;
    border: none!important;
    box-shadow: none!important;
    float: left;
    margin-right: 0!important;
    padding: 0 18px 0 0 !important;
    width: 68px !important;
    height: 50px !important;
    overflow: hidden;
}
#chatbox .user-msg .cb-avatar img {
    background-color: transparent !important;
    border-color: #9a3535 !important;
    border-radius: 0px !important;
    border-style: solid;
    border-width: 2px;
    box-shadow: none !important;
    display: block;
    width: 100% !important;
    height: auto !important;
}
#chatbox .date-and-time {
    font: 11px calibri;
    color: #9a3535;
}
.button1:active, .button1:hover, .button1:link, .button1:visited, .button2:active, .button2:hover, .button2:link, .button2:visited, .button:active, .button:hover, .button:link, .button:visited, input[type="submit"]:active, input[type="submit"]:hover, input[type="submit"]:link, input[type="submit"]:visited {
    color: #ebebeb !important;
    font: 16px Libre Caslon Display;
    text-transform: uppercase;
    background: black !important;
    border-radius: 0px !important;
}
.button, .button1, .button2, input[type="submit"] {
    background-color: black !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    color: #ebebeb !important;
    display: inline-block;
    font: 16px Libre Caslon Display !important;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 500;
    overflow: hidden;
    padding: 9px 18px;
    position: relative;
    text-decoration: none;
    vertical-align: middle;
    width: auto!important;
}
a{text-decoration:none;}
a:hover{text-decoration:none !important;}
::-webkit-scrollbar {
    width: 8px;
    height: 10px;
    background:#ecebea;
}
::-webkit-scrollbar-thumb:vertical {
   height: 30px;
   background-color: #9a3535;
}
::-webkit-scrollbar-thumb:horizontal{
   height: 30px;
   background-color: #9a3535;
}
.particle.particle-1, .particle.particle-2, .particle.particle-3, .particle.particle-4 { margin-left: -320px; z-index: 9999999!important; position: relative;}
.line1 {
  position:relative;
  top:0;
  height:20px;
  background:black;
}
.line2 {
    position: relative;
    bottom: 0;
    color: #ebebeb;
    background: black;
    font: 9px Libre Caslon Display;
    text-align: right;
    letter-spacing: 1px;
    padding: 8px 20px 8px 0px;
}
#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:3px 10px 3px 10px;
  border-radius:5px;
background-color: #1e1e1e;
font-family:calibri;
text-transform: uppercase;
font-size:10px;  
color:#ebeaea;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
}
body {
  margin:0;
  padding:0;
  overflow-x: hidden;
}
.imgfond img {
  width:100%;
}
.bloknameforum {
    text-align: center;
    position: relative;
    margin-top: -370px;
    height: 500px;
}
#titlefo a {
    font: 125px Libre Caslon Display;
    text-transform: uppercase;
    color: black;
}
.subtitle {
    color: black;
    font: 11px calibri;
    letter-spacing: 1px;
    margin-top: -20px;
}
.lampe {
    background: no-repeat top right url(https://imgur.com/ctkRSy5.png);
    width: 96px;
    height: 608px;
    position: absolute;
    -webkit-animation: balancier 3s ease-in-out infinite;
    -moz-animation: balancier 3s ease-in-out infinite;
    animation: balancier 3s ease-in-out infinite;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    margin-right: 38px;
    right: 0;
    top: -100px;
}
@-moz-keyframes balancier {
  0% { -moz-transform: rotate(-1deg); }
  5% { -moz-transform: rotate(1deg); }
  100% { -moz-transform: rotate(1deg); }
}
@-webkit-keyframes balancier {
  0% { -webkit-transform: rotate(-1deg); }
  50% { -webkit-transform: rotate(1deg); }
  100% { -webkit-transform: rotate(-1deg); }
}
@keyframes balancier {
  0% { -webkit-transform: rotate(-1deg); transform:rotate(-1deg); }
  50% { -webkit-transform: rotate(1deg); transform:rotate(1deg); }
  100% { -webkit-transform: rotate(-1deg); transform:rotate(-1deg); }
}
.navbarfo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 50px;
    list-style: none;
}
a.mainmenu {
    padding: 0px 10px 0px 10px;
}
a.mainmenu img {
    width: 50px;
}

.fondPA {
    background-image: url(https://imgur.com/0hIXRS5.png);
    background-position: 50% 50%;
    padding: 20px 0px 10px 0px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.blok1 {
  width:200px;
}
.linksut {
    background: #eceaea;
    padding: 8px;
    text-align: center;
    margin-bottom: 10px;
    transition: all 800ms;
}
.linksut:hover {
  border-left:solid #9a3535 15px;
  transition:all 800ms;
}
.linksut a {
  color:black;
  font:10px calibri;
  display:block;
  text-transform:uppercase;
  transition:all 800ms;
}
.contextePA {
    width: 360px;
    color: #eceaea;
    height: 194px;
    overflow: auto;
    padding: 0px 10px 0px 20px;
    text-align: justify;
    font: 11px calibri;
}
.blok2 {
    width: 340px;
    padding-left: 10px;
    transition: all 800ms;
}
.jambon {
    margin: 5px;
  display:inline-block;
}
.blok2 img {
  width:100px;
  height:55px;
  filter:grayscale(80%);
}
.blok2 img:hover {
  filter:grayscale(0%);
  transition:all 800ms;
}
.parto {
    padding-top: 20px;
    text-align: center;
  transition:all 800ms;
}
.parto span {
    font-size: 20px;
    color: #ebebeb;
  padding:0px 10px 0px 10px;
  transition:all 800ms;
}
.parto span:hover {
  color:#9a3535;
  transition:all 800ms;
}

Panneau d'administration > Affichage > Page d'accueil > En tête et navigation > "N'afficher que des images dans la barre de navigation :" > Oui.
Accueil :
Code:
https://imgur.com/0U4ITN9.png

FAQ :
Code:
https://imgur.com/48HnJuL.png

Rechercher :
Code:
https://imgur.com/VCcliKQ.png

Membres :
Code:
https://imgur.com/MCxJjnj.png

Groupes :
Code:
https://imgur.com/JSheiVF.png

Profil :
Code:
https://imgur.com/sisgGsm.png

Messagerie :
Code:
https://imgur.com/3HXAvdB.png

Messagerie - Nouveau message :
Code:
https://imgur.com/6e1yYSt.png

Déconnexion/Connexion :
Code:
https://imgur.com/atIs7nI.png

S'enregistrer :
Code:
https://imgur.com/qTkDwhp.png
Jawn
Jawn
The relations between us in those latter days were peculiar.
# Re: [INDEX FLAT] - Ven 8 Nov - 2:04

Les catégories :



Remplacer l'intégralité de votre template index_box par le HTML :
Code:
<!-- BEGIN switch_user_logged_in -->


 <!-- END switch_user_logged_in -->


<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
<div class="titlecat">{catrow.tablehead.L_FORUM}</div>
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 

<div class="totalcat">
  
  <div class="iconmess" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 100%;"></div>
 
  <div class="contentcat">
 <!-- BEGIN avatar -->
<div class="lastpostvava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
<!-- END avatar -->
    
    <div class="titledesc">
      <div id="titulocat"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
      <div class="descriptioncat">{catrow.forumrow.FORUM_DESC}</div>
    </div>
    
    <div class="lastpostgeneral">
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}</div>
    
    <div class="sousfofo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  
  </div>
  
</div>


 <!-- END forumrow -->

<!-- END catrow -->

<!-- BEGIN switch_on_index -->

<!-- END switch_on_index -->

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 var btn_collapse = $('<div></div>', {
 class: 'btn-collapse'
 });

 var btn_collapse_show = $('<i></i>', {
 class: 'ion-android-add-circle hidden',
 'data-tooltip': '{L_EXPEND_CAT}'
 }).appendTo(btn_collapse);

 var btn_collapse_hide = $('<i></i>', {
 class: 'ion-android-remove-circle',
 'data-tooltip': '{L_HIDE_CAT}'
 }).appendTo(btn_collapse);

 var collapsed = [];

 if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
 collapsed = readCookie('collapsed').split(',');
 }

 $(document).on('click', '.btn-collapse', function() {
 $(this).children('.ion-android-add-circle').toggleClass('hidden');
 $(this).children('.ion-android-remove-circle').toggleClass('hidden');
 $(this).parents('.forabg').toggleClass('hidden');

 if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
 collapsed = readCookie('collapsed').split(',');
 }

 if (!$(this).parents('.forabg').hasClass('hidden')) {
 removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

 createCookie('collapsed', collapsed);
 } else {
 collapsed.push('' + $(this).parents('.forabg').data('cindex'));

 createCookie('collapsed', collapsed);
 }
 });

 $('.forabg').each(function(i) {
 $(this).data('cindex', '' + i);

 $(btn_collapse)
 .clone()
 .attr('id', 'forabg' + i)
 .appendTo($(this).find('.header'));

 if ($.inArray('' + i, collapsed) > -1) {
 $(this).toggleClass('hidden');
 $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
 $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
 }
 });
});

function removeFromArray(item, array) {
 var i = array.indexOf(item);

 if (i > -1) {
 array = array.splice(i, 1);
 }
}

function createCookie(name, value, days) {
 var expires;

 if (days) {
 var date = new Date();
 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
 expires = "; expires=" + date.toGMTString();
 } else {
 expires = "";
 }
 document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
 var nameEQ = encodeURIComponent(name) + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) === ' ') c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
 }
 return null;
}
//]]>
</script>

Pour le CSS :
Code:
.titlecat {
    text-align: center;
}
.titlecat h2 {
    font: 56px Libre Caslon Display;
    text-transform: uppercase;
    color: black;
}
.underline {
    width: 400px;
    height: 20px;
    background: #9a3535;
    z-index: -1;
    margin: -25px auto 0px auto;
}
.totalcat {
    height: 200px;
    margin: 30px 0px 10px 0px;
}
.iconmess {
    width: 315px;
    height: 174px;
}
.contentcat {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: -150px;
}
.lastpostvava {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border: solid 5px black;
}
.lastpostvava img {
  width:100%;
}
.titledesc {
    width: 360px;
    padding-left: 20px;
}
#titulocat a {
    font: 24px Libre Caslon Display;
    text-transform: uppercase;
    color: black !important;
}
.descriptioncat {
    height: 98px;
    overflow: auto;
    text-align: justify;
    font: 11px calibri;
    padding: 5px;
}
.lastpostgeneral {
    padding-left: 10px;
    background-image: url(https://imgur.com/mMcarCK.png);
    background-size: 66%;
    background-repeat: no-repeat;
    background-position: top left;
    width: 230px;
    padding-top: 28px;
    text-align: center;
    color: #9a3535;
    font: 8px calibri;
}
.last-post-icon img {
    position: absolute;
    right: 44%;
    margin-top: -65px;
}
.lastpostgeneral a {
    font: 18px Libre Caslon Display;
    color: black !important;
    text-transform: uppercase;
}
.lastpostgeneral strong {
    font: 13px Libre Caslon Display;
    text-transform: uppercase;
    font-style: italic;
    font-weight: bold;
}
.sousfofo {
    width: 680px;
    margin: 20px auto 0 auto;
    background: black;
    padding: 5px;
    color: #d5d5d5;
}
.sousfofo a {
    color: #d5d5d5;
    font: 10px calibri;
    text-transform: uppercase;
    word-spacing: 2px;
}

Les images pour les catégories :


Icône du dernier message :
Code:
https://imgur.com/cFVxaQV.png

Icône du dernier message (nouveau) :
Code:
https://imgur.com/1PzbyAR.png

Catégories/forum :
Code:
https://imgur.com/0MDz81j.png

Catégories - Nouveau/ Forum-Nouveau :
Code:
https://imgur.com/rPo1dzs.png

Catégories - Vérrouillé / Forum - Vérrouillé :
Code:
https://imgur.com/sO5mzyX.png
Jawn
Jawn
The relations between us in those latter days were peculiar.
# Re: [INDEX FLAT] - Ven 8 Nov - 2:04

Le Qui est en ligne et le Footer :



Remplacez l'intégralité de votre template index_body par :
Code:
{JAVASCRIPT}

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
 <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
 <br />
 <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_social_login -->
            <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>
            <!-- END switch_social_login -->
 </div>
 </form>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
 <div class="panel introduction">
 <!-- BEGIN message_admin_titre -->
 <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
 <!-- END message_admin_txt -->
 </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}

{BOARD_INDEX}

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
 <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
 <br />
 <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_social_login -->
            <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>
            <!-- END switch_social_login -->
 </div>
 </form>
</div>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN switch_legend -->
<!-- END switch_legend -->

{AUTO_DST}

Remplacez l'intégralité de votre template overall_footer_end par :
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>
<div>
 <div>
        <ul>
            <li>
<!-- END html_validation -->
            </li>
        </ul>
        <!-- BEGIN switch_footer_links -->
 <ul class="footerbar-user">
 <li><i class="ion-clock"></i>{CURRENT_TIME}</li>
            <!-- BEGIN footer_link -->
 <li class="rightside">
 <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>
 </li>
            <!-- END footer_link -->
        </ul>
        <!-- END switch_footer_links -->
    </div>
 <div class="copyright">
 <div class="wrap">
 <div class="copyright-body">
 {ADMIN_LINK}
            </div>
        </div>
    </div>
</div>
{PROTECT_FOOTER}
  
  
  <!-- BEGIN disable_viewonline -->
<div class="qeel">
  <div class="hautqeel"><div class="crownqeel"><img src="https://imgur.com/tdAHnti.png"/></div><div class="newmember">{NEWEST_USER}</div></div>
  
  <div class="basqeel">
  
    <div class="lastcomember">
      <div class="titlelastco">Derniers membres connectés</div>
      <div id="lastco">{L_CONNECTED_MEMBERS}</div>
<script type="text/javascript">
document.getElementById('lastco').innerHTML=document.getElementById('lastco').innerHTML.replace(/Membres connectés au cours des 99 dernières heures :/g," ");</script>
    </div>
    
    <div class="onlinemember">
      <div class="titleonline">Membres en ligne</div>
      <div id="onlineu">{LOGGED_IN_USER_LIST}</div>
      <script type="text/javascript">
document.getElementById('onlineu').innerHTML=document.getElementById('onlineu').innerHTML.replace(/Utilisateurs enregistrés :/g," ");</script>
    </div>
    
  </div>
  
   <div class="nmbrmess">{TOTAL_POSTS}</div>
  </div>
  
 
  
  
<div class="groupstotal">
<div class="group"><span class="th th-shooting-star"></span> Groupe n°1</div>
<div class="group"><span class="th th-solar-system"></span> Groupe n°2</div>
<div class="group"><span class="th th-meteorite"></span> Groupe n°3</div>
<div class="group"><span class="th th-planet-1"></span> Groupe n°4</div>
</div>
<!-- END disable_viewonline -->
  
  
  <div class="line2">(:copyright:) ALL RIGHTS RESERVED, DO NOT COPY OR REPRODUCE THE DESIGN.</div>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 $(window).scroll(function() {
 var header_top = $('#headerbar-top');

 if (header_top.hasClass('w-toolbar')) {
 if ($(window).scrollTop() >= 42) {
 header_top.addClass('is-sticky');
 } else {
 header_top.removeClass('is-sticky');
 }
 } else {
 if ($(window).scrollTop() >= 1) {
 header_top.addClass('is-sticky');
 } else {
 header_top.removeClass('is-sticky');
 }
 }
 });
});
//]]>
</script>
<!-- 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 = "https://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, span.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>

Remplacez l'intégralité de  votre template overall_footer_begin par :
Code:
<!-- BEGIN html_validation -->
<div>
 <div>
 <div>
 <div>

<div>
 <div>
 <div>
 <div>
 <div>
 <div>
 <div>
 <div>
<!-- END html_validation -->
 </div>
 </div>
 </div>
 </div>

 <div id="{ID_RIGHT}">
 <!-- BEGIN giefmod_index2 -->
 {giefmod_index2.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index2 -->
 </div>
 </div>
 </div>
 </div>
</div>
 </div>
 </div>
 </div>
</div>


<div id="page-footer">
 <div class="wrap">
 <ul class="footerbar-system">
 <li class="footer-home">
 <a class="icon-home" href="{U_INDEX}" accesskey="h"><i class="ion-ios-home"></i>{L_HOME}</a>
 </li>
 <li class="rightside">
<!-- BEGIN html_validation -->
 </li>
 </ul>
 </div>
</div>
<!-- END html_validation -->

Pour le CSS :
Code:
.hautqeel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.qeel {
    margin: 30px auto 0px auto;
    background-image: url(https://imgur.com/p1Zg2kR.png);
    height: 510px;
}
.crownqeel img {
    width: 120px;
}
.newmember {
    font-size: 0px;
    text-align: center;
    padding: 46px 0px 0px 20px;
}
.newmember:before {
    content: "welcome to";
    text-transform: uppercase;
    color: black;
    font: 24px "Libre Caslon Display";
    padding-right: 10px;
}
.newmember a {
    text-transform: uppercase;
    font: 24px "Libre Caslon Display";
    font-style: italic;
    border-bottom: solid 1px #9a3535;
}
.basqeel {
    margin: 50px auto 0 auto;
    width: 900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.lastcomember {
    width: 440px;
    padding: 10px;
    background: black;
    color: #ebebeb;
    margin-right: 10px;
    height: 130px;
}
.titlelastco {
    text-align: center;
    margin: 0 auto;
    font: 11px Libre Caslon Display;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 400px;
    border-bottom: solid 1px #d5d5d5;
    padding-bottom: 10px;
}
#lastco {
    text-align: justify;
    padding-top: 10px;
    height: 85px;
    overflow: auto;
}
#lastco a {
    font: 14px calibri;
    text-transform: uppercase;
}
.onlinemember {
    width: 440px;
    padding: 10px;
    background: black;
    color: #ebebeb;
    margin-right: 10px;
    height: 130px;
}
.titleonline {
    text-align: center;
    margin: 0 auto;
    font: 15px Libre Caslon Display;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 400px;
    border-bottom: solid 1px #d5d5d5;
    padding-bottom: 10px;
}
#onlineu {
    text-align: justify;
    height: 80px;
    overflow: auto;
    padding-top: 10px;
}
#onlineu a {
    font: 14px "Libre Caslon Display";
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: 2px;
}
#onlineu br {
  display:none;
}
.nmbrmess {
    margin: 10px auto;
    width: 894px;
    text-align: center;
    padding: 5px;
    letter-spacing: 2px;
    color: #9c9c9c;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: lighter;
}

.groupstotal {
    width: 900px;
    height: 100px;
    margin: -120px auto 0px auto;
    text-align: center;
}
.group {
    font: 10px arial;
    text-transform: uppercase;
    display: inline-block;
    padding: 0px 10px 0px 10px;
    width: 194px;
    text-align: left;
    margin: 0px 5px 5px 0px;
}
.group span {
  padding-right:20px;
  font-size:20px;
}
.group:nth-child(1) {color:#aa7ebb;}
.group:nth-child(2) {color:#50b660;}
.group:nth-child(3) {color:#D6BC57;}
.group:nth-child(4) {color:#dc94aa;}

#page-footer {
    text-align: center;
    background: #d5d5d5;
    padding: 10px;
    text-transform: uppercase;
    margin: 0 auto;
    font: 8px calibri;
    color: black !important;
    line-height: 0px;
}
#page-footer a{
    color: black;
    font: 9px calibri;
}
.footerbar-system {
    padding: 8px 0 0 !important;
}
.copyright-body {
    border-color: #bd8282 !important;
    border-style: solid;
    border-width: 1px 0 0;
    margin: 12px 0 0 !important;
    padding: 10px 0 0 !important;
}
.footerbar-system .rightside {
    margin: 0;
    text-align: right;
    color: black !important;
}
Contenu sponsorisé
# Re: [INDEX FLAT] -
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum