[INDEX GOLDEN GREY]

Avant tout, notez que ce code est assez vieux, il date de 2019 (oui on fait ce qu'on peut pour remettre la main sur de vieux index) donc tout n'est pas parfait !

Barre de navigation / bannière / page d'acceuil

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}> <head> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/>  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/> {T_HEAD_STYLESHEET} {CSS} <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"/> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=qtvMKcIJ"/> <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"/> <link href="https://solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet"/> <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/> <script src="{JQUERY_PATH}" type="text/javascript"></script>  <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script> <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script> <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> {RICH_SNIPPET_GOOGLE}  <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/> <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>   <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ /* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT}); switch (tickerDirParam) { case 'top' : slid_vert = true; break; case 'left': break; case 'bottom': slid_vert = true; auto_dir = 'prev'; break; case 'right': auto_dir = 'prev'; break; default: slid_vert = true; } $(document).ready(function () { $('#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>  <script type="text/javascript">//<![CDATA[ $(document).ready(function () {  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); if (pm != null) { pm.focus(); }   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(); }   Ticker.start({ height: {switch_ticker.HEIGHT}, spacing: {switch_ticker.SPACING}, speed: {switch_ticker.SPEED}, direction: '{switch_ticker.DIRECTION}', pause: {switch_ticker.STOP_TIME} });  document.onclick = function(e){ if (!e.target.classList.contains('navicon')) { if ($(e.target).parents('.responsive-headerbar').length == 0 && e.target.id != "menu-btn") { document.getElementById('menu-btn').checked = false; } } }; });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false; $(document).ready(function () { $(window).resize(function () { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth / 2 - popupWidth / 2 }); }); });  //]]> </script> {GREETING_POPUP} <style 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; }  .jcarousel-skin-tango .jcarousel-item { text-align: center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; }  </style> {HOSTING_JS}  <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});  gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});  </script>  <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&display=swap" rel="stylesheet"/> <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> </head> <body id="modernbb"> <div class="total_headbad_omega"> <div class="navbar_omega_left">Bienvenue <span class="js-username"></span> <div class="js-avatar"></div> </div> <div class="navbar_omega">{GENERATED_NAV_BAR}</div> </div> <div class="bann_omega"><a href="/"><img src="https://placehold.co/1920x400"/></a></div> <div class="pa_omega"> <div class="blok_pa"> <div class="lien_ut_pa"> <a target="_blank" href="/">lien utile</a> <a target="_blank" href="/">lien utile</a> <a target="_blank" href="/">lien utile</a> <a target="_blank" href="/">lien utile</a> </div> <div class="pa_top_parto"> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> <a target="_blank" href="/"><img src="https://placehold.co/40"/></a> </div> </div> <div class="blok_pad"> <div class="pa_contexte"> <div class="inside_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget dapibus dui. Quisque metus enim, malesuada at consectetur eget, lacinia sit amet metus. Pellentesque ligula libero, tincidunt auctor tincidunt vitae, porta eget nunc. Curabitur sed mi erat. In diam augue, placerat ut pretium non, semper nec odio. Vestibulum dignissim risus dolor, sit amet luctus diam sodales id. Etiam tincidunt egestas nunc, ut elementum libero fermentum non. Maecenas sollicitudin quam purus, sed tincidunt mauris interdum nec. Vivamus dapibus leo a tristique cursus. </div> </div> <div class="votes_pa"> <div class="votes_btn"> <a target="_blank" href="/"><span class="th th-star"></span></a> <a target="_blank" href="/"><span class="th th-star"></span></a> <a target="_blank" href="/"><span class="th th-star"></span></a> <a target="_blank" href="/"><span class="th th-star"></span></a> </div> <div class="votes_opt"> <div class="votes_votez">Votez aux top-sites !</div> <div class="votes_heures">Toutes les deux heures</div> </div> </div> </div> <div class="blok_pa"> <div class="lien_ut_pa"> <a target="_blank" href="/">lien utile</a> <a target="_blank" href="/">lien utile</a> <a target="_blank" href="/">lien utile</a> <a target="_blank" href="/">lien utile</a> </div> <div class="staff_pa"> <div class="staff_outside" style="background-image:url(https://placehold.co/120x60);"> <div class="staff_inside"><div class="name_hov">Nom du staffeux.se</div><div class="statuts_staff">Titre</div> <div class="link_mp"> <a target="_blank" href="/">Profil</a> </div> </div> </div> <div class="staff_outside" style="background-image:url(https://placehold.co/120x60);"> <div class="staff_inside"> <div class="name_hov">Nom du staffeux.se</div> <div class="statuts_staff">Titre</div> <div class="link_mp"> <a target="_blank" href="/">Profil</a> </div> </div> </div> <div class="staff_outside" style="background-image:url(https://placehold.co/120x60);"> <div class="staff_inside"> <div class="name_hov">Nom du staffeux.se</div> <div class="statuts_staff">Titre</div> <div class="link_mp"><a target="_blank" href="/">Profil</a> </div> </div> </div> <div class="staff_outside" style="background-image:url(https://placehold.co/120x60);"> <div class="staff_inside"> <div class="name_hov">Nom du staffeux.se</div> <div class="statuts_staff">Titre</div> <div class="link_mp"><a target="_blank" href="/">Profil</a> </div> </div> </div> </div> </div> </div>  <div id="hitskin_preview" style="display: block;"> <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" loading="lazy" /> <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>   <div id="inactive_popup" style="z-index: 10000 !important;"> <div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div> <div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div> <div id="inactive_popup_buttons"> <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button> <button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button> </div> </div> <script type="text/javascript"> $('#inactive_popup #inactive_popup_close').on('mouseup', function () { document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;"; $('#inactive_popup').hide(50); }); $('#inactive_popup #inactive_popup_url').on('mouseup', function () { document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;"; location.href = '{inactive_users_modal.U_MODAL}' }) </script>   <div id="login_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> <div id="login_popup_message"> {LOGIN_POPUP_MSG} </div>  <br/> <div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div> <div> <div class="mt10"> <div class="social_btn">  <div class="fb-login-button"></div>     <div class="ti-connect"></div>  </div> </div> </div> <br/>  <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>   <div id="like_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> <div id="like_popup_message"> {LIKE_POPUP_MSG} </div> <div id="like_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="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/> </form> </div> </div>  <a id="top" name="top" accesskey="t"></a> {JAVASCRIPT} <div id="page-header"> <div class="wrap"> <div class="wrap"> <div id="site-desc">  <div id="site-title">{switch_h1.MAIN_SITENAME}</div>   <p>{switch_desc.SITE_DESCRIPTION}</p>  </div> </div> </div>  <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">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> </div> </div> </div>  </div> <div class="conteneur_minwidth_IE modern-resp"> <div class="conteneur_layout_IE"> <div class="conteneur_container_IE"> <div id="wrap"> <div id="page-body">  <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">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </div> </div> </div>  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <div id="outer-wrapper"> <div id="wrapper"> <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </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:: @-webkit-keyframes tada {0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);} 10%, 20% {-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);} 30%, 50%, 70%, 90% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);} 40%, 60%, 80% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);} 100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}} @keyframes tada {0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);} 10%, 20% {-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);} 30%, 50%, 70%, 90% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);} 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);} 100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}} .tada { -webkit-animation-name: tada; animation-name: tada; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .navbar_omega { display: flex; position: relative; flex-wrap: wrap; list-style: none; justify-content: flex-end; } .navbar_omega::after { position: absolute; margin: 25px 20px 0px 0px; width: 300px; height: 2px; background: #6c5e29; content: ""; } a.mainmenu { font: 11px Courier Prime; text-transform: uppercase; } .navbar_omega a:nth-child(1) { margin-top: 2px; } .bann_omega { margin-top: -124px; } .bann_omega img { width: 100%; cursor:grab; } .total_headbad_omega { display: flex; flex-wrap: wrap; padding: 20px 20px 0px 20px; width: 100%; justify-content: space-between; } .navbar_omega_left { position: relative; text-transform: uppercase; font: 11px Courier Prime; } .js-username { color: #6c5e29; } .js-username::before { position: absolute; margin: 25px 0px 0px -54px; width: 200px; height: 2px; content: ""; background: #6c5e29; } .js-avatar { width: 60px; height: 60px; margin: 30px 0px 0px 0px; overflow: hidden; border-right: solid 10px #6c5e29; } .js-avatar:hover { animation: tada 900ms infinite; } .js-avatar img { object-fit: cover; width: 100%; } .pnj { color: #FA5858; } .alpha { color: #FF8000; } .beta { color: #E3E31D; } .omega { color: #80FF00; } .fantome { color: #00B0F0; } .nouveau { color: #BF00FF; } .pa_omega { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; padding: 15px; justify-content: center; background: #1d1d1d; } .blok_pa { width: 300px; } .blok_pad { width: 350px; margin: 0px 10px; } .lien_ut_pa { margin-bottom: 10px; } .lien_ut_pa a { display: inline-block; width: 46%; padding: 5px; margin: 2px; text-align: center; font: 12px Courier Prime; text-transform: uppercase; background: #191919; } .pa_top_parto { text-align: center; margin-left: -10px; } .pa_top_parto img { width: 40px; height: 40px; margin: 3.5px; cursor: grab; } .pa_contexte { padding: 10px; margin-bottom: 10px; background-image: url('https://imgur.com/TlybUoG.png'); } .inside_cont { overflow: auto; padding: 10px; height: 142px; text-align: justify; font: 13px Calibri; background: #191919; line-height: 18px; } .votes_pa { display: flex; flex-wrap: wrap; justify-content: space-between; } .votes_btn span { font-size: 26px; margin: 0px 14px 0px 0px; cursor: grab; } .votes_btn span:hover { animation: tada 900ms infinite; } .votes_btn a:nth-child(2n+0){color: #666 !important;} .votes_opt { width: 180px; } .votes_votez { margin-bottom: 2px; padding-bottom: 2px; text-align: center; font: 14px Courier Prime; border-bottom: 2px solid #6c5e29; } .votes_heures { text-transform: lowercase; color: #6c6c6c; font: 11px Courier Prime; text-align: right; } .staff_pa { display: flex; flex-wrap: wrap; justify-content: center; } .staff_outside { margin:5px; width: 120px; height: 60px; transition:all 800ms; } .staff_inside { display: block; padding: 10px; width: 120px; height: 60px; transition: all 800ms; opacity: 0; text-align: center; background: rgba(0, 0, 0, 0.9); } .staff_outside:hover .staff_inside { opacity: 1; transition:all 800ms; } .name_hov { text-transform: uppercase; font: 11px Courier Prime; color: #6c5e29; } .statuts_staff { font: 10px Courier Prime; text-transform: lowercase; } .link_mp a { text-transform: uppercase; letter-spacing: 2px; font: 12px Courier Prime; color: #dedede; }

Pour faire apparaître le nom d'utilisateur ainsi que l'avatar du compte connecté, il faut ajouter un Javascript > Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript : créez un nouveau Javascript, mettez ce code, puis cochez "sur toutes les pages". Donnez lui un titre et validez. N'oubliez pas d'activer le Javascript !

Code:: $(function(){ $.each(_userdata, function(key, value){ $(".js-" + key).html(value); }) });

Les catégories

Remplacer l'intégralité de votre template index_box par le HTML :

Code:: <div class="cat_liens">  <li> <a href="{U_SEARCH_NEW}">nouveaux messages</a> </li> <li> <a href="{U_SEARCH_SELF}">mes messages</a> </li>  <li> </li>  <li class="rightside"> <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>marquer comme lus</a> </li>  </div>   <div class="cat_img_omega"> <img src="https://imgur.com/R3Q4lE5.png"/></div> <div class="cat_title_omega"><span></span> {catrow.tablehead.L_FORUM}</div>   <div class="cat_title_om"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></div> <div class="total_cat_omega"> <div class="cat_icon_omega" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll 100%;"></div> <div class="blok_cat_stat_omega"> <div class="cat_statmess"> <span class="th th-quote-up"></span>{catrow.forumrow.POSTS}<br/> <strong>Messages</strong> </div> <div class="cat_statsuj"> <span class="th th-quote-up"></span>{catrow.forumrow.TOPICS}<br/> <strong>Sujets</strong> </div> </div> <div class="blok_cat_vava"> <div class="cat_lastpost_ava">  {catrow.forumrow.avatar.LAST_POST_AVATAR}  </div> </div> <div class="blok_cat_desc"> <div class="cat_lastpost_omega"> <span class="lastpost-infos">  <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />  {catrow.forumrow.USER_LAST_POST} </span> </div> <div class="cat_desc_omega">{catrow.forumrow.FORUM_DESC}</div> </div> </div> <div class="cat_omega_sousfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>

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

Code:: .cat_liens { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; list-style: none; } .cat_liens a { margin: 0px 10px; padding-bottom: 2px; text-transform: uppercase; letter-spacing: 2px; font: 9px Courier Prime; border-bottom: 2px solid #6c5e29; } .cat_img_omega { margin-bottom: -8px; width: 200px; overflow: hidden; height: 122px; } .cat_img_omega img { width:100%; } .cat_title_om { margin-bottom: -7px; } .cat_title_om a { margin-bottom:-8px; } .cat_title_om a { text-transform: lowercase; font: 35px Abril Fatface; } .cat_title_omega { position: relative; margin-bottom: 20px; text-align: right; } .cat_title_omega h2 { text-transform: lowercase; font: 14px Courier Prime; color: #6c5e29; } .cat_title_omega span { float: left; width: 58%; height: 2px; margin-top: 6px; background: #6c5e29; } .total_cat_omega { display: flex; flex-wrap: wrap; margin-bottom: 10px; justify-content: space-evenly; background: #1d1d1d; } .cat_icon_omega { width: 300px; } .blok_cat_stat_omega { width: 150px; margin-left: -152px; } .cat_statmess { padding: 26px 0px 0px 30px; line-height: 10px; } .cat_statmess span, .cat_statsuj span { position: absolute; margin: -13px 4px 0px -49px; font-size: 48px; opacity: 0.3; color: #6c5e29; } .cat_statmess strong, .cat_statsuj strong { text-transform: lowercase; font: 22px Abril Fatface; color: #3c3c3c; } .cat_statsuj { padding: 30px 0px 0px 61px; line-height: 10px; } .blok_cat_vava { width: 110px; padding: 15px 0px; } .cat_lastpost_ava { overflow: hidden; height: 110px; width: 100px; border-right: 10px solid #6c5e29; background: #252525; } .cat_lastpost_ava img { object-fit: cover; width: 100%; filter: grayscale(50%); } .blok_cat_desc { width: 520px; padding: 20px; } .cat_desc_omega { overflow: auto; height: 78px; padding: 0px 10px 0px 10px; text-align: justify; font: 14px Courier Prime; } .cat_lastpost_omega { padding: 0px 0px 10px 10px; font: 10px Courier Prime; } .cat_lastpost_omega br { display:none; } .cat_lastpost_omega a { margin: 0px 5px; text-transform: uppercase; font-style: italic; font-size: 12px; color: #6c5e29; } .cat_omega_sousfo { margin-top: -5px; padding-bottom: 10px; text-align: right; } .cat_omega_sousfo a { font: 13px Courier Prime; text-transform: uppercase; letter-spacing: 1px; }

Le Qui est En Ligne

Dans votre template index_body, entre les balises :

Code::

et

Code::

il vous faudra supprimer tout ce qui s'y trouve pour le remplacer par :

Code::  <div class="omega_ttl_qeel"> <div class="qeel_omega"> <div class="qeel_omega_stats_gr"> <div class="b_g"> <div class="qeel_groupes"> <span class="th th-quote-up"></span> xx<br/> <strong style="color:#FA5858;">groupe</strong> </div> <div class="qeel_groupes"> <span class="th th-quote-up"></span> xx<br/> <strong style="color:#FF8000;">groupe</strong> </div> <div class="qeel_groupes"> <span class="th th-quote-up"></span> xx<br/> <strong style="color:#E3E31D;">groupe</strong> </div> </div> <div class="b_d"> <div class="qeel_groupesdr"> <span class="th th-quote-down"></span> xx<br/> <strong style="color:#80FF00;">groupe</strong> </div> <div class="qeel_groupesdr"> <span class="th th-quote-down"></span> xx<br/> <strong style="color:#0080FF;">groupe</strong> </div> <div class="qeel_groupesdr"> <span class="th th-quote-down"></span>xx<br/> <strong style="color:#BF00FF;">groupe</strong> </div> </div> </div> <div class="qeel_center_stat"> <div class="qeel_membres_ettout"> <div id="nmbr_mem"> <span class="th th-users"></span> <strong>{TOTAL_USERS}</strong> </div> <script type="text/javascript">document.getElementById('nmbr_mem').innerHTML=document.getElementById('nmbr_mem').innerHTML.replace(/Nous avons /g," ");</script> <script type="text/javascript">document.getElementById('nmbr_mem').innerHTML=document.getElementById('nmbr_mem').innerHTML.replace(/ membre enregistré/g," ");</script> <script type="text/javascript">document.getElementById('nmbr_mem').innerHTML=document.getElementById('nmbr_mem').innerHTML.replace(/ membres enregistrés/g," ");</script> <div id="nmbr_memb"><span class="th th-envelope"></span> <strong>{TOTAL_POSTS}</strong> </div> <script type="text/javascript">document.getElementById('nmbr_memb').innerHTML=document.getElementById('nmbr_memb').innerHTML.replace(/Nos membres ont posté un total de /g," ");</script> <script type="text/javascript">document.getElementById('nmbr_memb').innerHTML=document.getElementById('nmbr_memb').innerHTML.replace(/ messages/g," ");</script> <script type="text/javascript">document.getElementById('nmbr_memb').innerHTML=document.getElementById('nmbr_memb').innerHTML.replace(/ message/g," ");</script> </div> <h1>bienvenue</h1> <div id="qeel_nouveau_mem">{NEWEST_USER}</div> <script type="text/javascript">document.getElementById('qeel_nouveau_mem').innerHTML=document.getElementById('qeel_nouveau_mem').innerHTML.replace(/L'utilisateur enregistré le plus récent est /g," ");</script> </div> <div class="qeel_omega_co"> <h1>en ligne</h1> <div id="qeel_online">{LOGGED_IN_USER_LIST}</div> <script type="text/javascript">document.getElementById('qeel_online').innerHTML=document.getElementById('qeel_online').innerHTML.replace(/Utilisateurs enregistrés :/g," ");</script> <script type="text/javascript">document.getElementById('qeel_online').innerHTML=document.getElementById('qeel_online').innerHTML.replace(/Moteurs de recherche :/g," ");</script> <h1>derniers passages</h1> <div id="qeel_lastco">{L_CONNECTED_MEMBERS}</div> <script type="text/javascript">document.getElementById('qeel_lastco').innerHTML=document.getElementById('qeel_lastco').innerHTML.replace(/Membres connectés au cours des 48 dernières heures :/g," ");</script> </div> <div class="qeel_omega_parto"> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> <a target="_blank" href="/"><img src="https://placehold.co/30"/></a> </div> </div> </div>

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

Code:: .omega_ttl_qeel { width: 100%; height: 222px; } .qeel_omega { overflow: hidden; display: flex; flex-wrap: wrap; width: 100%; padding: 40px 0px 20px 0px; justify-content: center; background: #1d1d1d; position:absolute; left:0; } .qeel_omega_stats_gr { position: relative; display: flex; flex-wrap: wrap; width: 14%; margin-right: 20px; justify-content: space-between; } .qeel_groupes, .qeel_groupesdr { padding: 6px 0px; font-family: Courier Prime; } .qeel_groupes span { position: absolute; margin: -4px 4px 0px -49px; opacity: 0.3; font-size: 45px; color: #6c5e29; } .qeel_groupesdr span { opacity: 0.3; font-size: 45px; position: absolute; margin: -4px 4px 0px 15px; color: #6c5e29; } .qeel_groupes span:hover, .qeel_groupesdr span:hover { animation: tada 900ms infinite; } .qeel_groupes strong, .qeel_groupesdr strong { font: 22px Abril Fatface; text-transform: lowercase; } .b_g { width: 49%; } .b_d { width: 49%; padding-right: 50px; text-align: right; } .qeel_center_stat { position: relative; width: 18%; padding: 0px 20px; text-align: center; } .qeel_membres_ettout { display: flex; flex-wrap: wrap; justify-content: space-evenly; } #nmbr_mem, #nmbr_memb { font:26px Courier Prime; font-weight: lighter !important; } #nmbr_mem span, #nmbr_memb span { position: absolute; margin: -10px 4px 0px -18px; opacity: 0.3; font-size: 54px; color: #313131; } .qeel_center_stat h1 { margin-top: 50px; font: 35px Abril Fatface; color: #313131; } #qeel_nouveau_mem a { cursor: grab; letter-spacing: 1px; font: 14px Courier Prime; text-transform: uppercase; } .qeel_omega_co { position: relative; padding-right: 20px; margin-top: -35px; width: 20% !important; } .qeel_omega_co h1 { text-align: center; font: 35px Abril Fatface; color: #313131; } #qeel_online br { display:none; } #qeel_online { height: 30px; padding: 5px; overflow: auto; text-align: justify; font-family: Courier Prime; } #qeel_lastco { height: 120px; padding:5px; overflow: auto; text-align: justify; font-family: Courier Prime; } #qeel_online a, #qeel_lastco a { cursor:grab; } .qeel_omega_parto { position: relative; width: 19%; margin-top: -16px; text-align: center; } .qeel_omega_parto img { width: 35px; height: 35px; cursor: grab; margin: 4px; }

Pour retirer la barre toute moche tout en bas du forum

Remplacez l'intégralité de votre template overall_footer_begin par le HTML suivant :

Code::  <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div>  </div> </div> </div> </div> <div id="{ID_RIGHT}">  {giefmod_index2.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> </div> </div> </div> </div> </div> </div> </div> </div> {FOOTER_WIDGETS} <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">  </li> </ul> </div> </div>

Les petites décorations et images importantes

Pour les boutons des catégories > Catégorie/Forum

Code:: https://imgur.com/VcLpzBN.png.png

Catégorie - Nouveau / Forum - Nouveau :

Code:: https://imgur.com/JESu6jo.png.png

Catégorie - Verrouillé / Forum - Verrouillé :

Code:: https://imgur.com/gKpIRCa.png.png

Pour avoir une jolie scrollbar à la bonne couleur pour Mozilla et Chrome, il faut ajouter à votre CSS :

Code:: * { scrollbar-width: thin; scrollbar-color: #6c5e29 #252525; } ::-webkit-scrollbar { background: #252525; width: 8px; } ::-webkit-scrollbar-thumb { height: 30px; background: -webkit-linear-gradient(#6c5e29, #49401c); }

Pour retirer le soulignement tout moche de base de Forumactif, ajoutez également à votre CSS :

Code:: a{ text-decoration: none; cursor: grab; color:#6c5e29 !important;} a:hover{ text-decoration: none !important; cursor: grab; }

Pour que la barre contenant le panneau d'admin et les infos de Forumactif de base ne soit pas de ce bleu si particulier, il vous faudra ajouter à votre CSS :

Code:: #page-footer{background-color:transparent !important;}

Pour finir, voici les couleurs de base à rajouter si vous voulez que ça ait la même tête ! Sinon, vous pouvez modifier.