![[INDEX - EMBRACE THE DARKNESS] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [INDEX - EMBRACE THE DARKNESS] - Mar 4 Fév - 23:53
![[INDEX - EMBRACE THE DARKNESS] SUp2kJ0](https://imgur.com/SUp2kJ0.png)
Bannière + Page d'accueil + Barre de 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://66.media.tumblr.com/414502a306b33c79ad8b014d463182f1/tumblr_inline_p94wgvKqxj1rhwzwl_75sq.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}
<link href="https://fonts.googleapis.com/css?family=Pirata+One&display=swap" rel="stylesheet"/><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>
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" 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>
<!-- 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="haut"><a href="#top" title="vers le haut"><span class="th th-chevron-up"></span></a></div>
<div class="bas"><a href="#bottom" title="vers le bas"><span class="th th-chevron-down"></span></a></div>
<div class="navybar">{GENERATED_NAV_BAR}</div>
<div class="banniere"><a href="/"><img src="https://imgur.com/L7TS3s4.png"/></a></div>
<div class="pageda">
<div class="linksut">
<li>01. <a target="_blank" href="/">Lien utile</a></li>
<li>02. <a target="_blank" href="/">Lien utile</a></li>
<li>03. <a target="_blank" href="/">Lien utile</a></li>
<li>04. <a target="_blank" href="/">Lien utile</a></li>
<li>05. <a target="_blank" href="/">Lien utile</a></li>
<li>06. <a target="_blank" href="/">Lien utile</a></li>
<li>07. <a target="_blank" href="/">Lien utile</a></li>
<li>08. <a target="_blank" href="/">Lien utile</a></li>
</div>
<div class="contexteuh">
Lorem ipsum dolor sit amet,<strong>consectetur adipiscing eli</strong>. Quisque sagittis dignissim semper. Mauris libero justo, porta sit amet nunc ut, condimentum dictum est. Nullam arcu purus, iaculis elementum tristique a, tincidunt eget quam. Nunc ut facilisis dolor. Suspendisse vitae nisl felis. Ut a rhoncus mi, ut lacinia sem. Vivamus in viverra dolor. Maecenas non metus convallis, lobortis neque nec, posuere metus. Curabitur enim quam, vehicula vitae faucibus sed, varius in neque. Nunc mattis, erat et posuere blandit, libero tellus feugiat nibh, a efficitur tellus leo quis diam. Aenean vehicula faucibus risus a pharetra. Aenean a lorem sed mi fringilla accumsan cursus quis augue. Quisque commodo sagittis iaculis. Maecenas venenatis velit ullamcorper, tempor tellus nec, consectetur massa. Sed nisi urna, pellentesque commodo egestas sit amet, malesuada at nulla.
<div class="ensavoir"><a target="_blank" href="/">+ en savoir plus</a></div>
</div>
<div class="infosenplus">
<div class="newsdum"><div class="insidenew">News du moment</div></div>
<div class="txtright">Nos amis</div>
<div class="partotop">
<a target="_blank" href="/" title="/"><img src="https://via.placeholder.com/50x50"/></a>
<a target="_blank" href="/" title="/"><img src="https://via.placeholder.com/50x50"/></a>
<a target="_blank" href="/" title="/"><img src="https://via.placeholder.com/50x50"/></a>
<a target="_blank" href="/" title="/"><img src="https://via.placeholder.com/50x50"/></a>
<a target="_blank" href="/" title="/"><img src="https://via.placeholder.com/50x50"/></a>
<a target="_blank" href="/" title="/"><img src="https://via.placeholder.com/50x50"/></a>
<a target="_blank" href="/" title="/"><img src="https://via.placeholder.com/50x50"/></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 class="wrap">
<div id="site-desc">
<!-- BEGIN switch_h1 -->
<div id="site-title">{switch_h1.MAIN_SITENAME}</div>
<!-- END switch_h1 -->
<!-- BEGIN switch_desc -->
<p>{switch_desc.SITE_DESCRIPTION}</p>
<!-- END switch_desc -->
</div>
</div>
</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 :
LE CSS DE LA BARRE DE NAVIGATION :
- Code:
.navybar {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: flex-end;
list-style: none;
background: black;
padding: 5px 20px 10px 0px;
position: fixed;
top: 0;
z-index: 999;
box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
}
.navybar a {
color: lightgrey;
font: 9px calibri;
text-transform: uppercase;
letter-spacing: 1px;
}
LE CSS DE LA BANNIERE :
- Code:
.banniere {
margin-top: 35px;
}
.banniere img {
width:100%;
}
LE CSS DE LA PAGE D'ACCUEIL :
- Code:
.pageda {
padding: 10px 0px 10px 0px;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.linksut {
width: 210px;
text-align: right;
list-style: none;
color: #848484;
font: 20px Pirata One;
padding-right: 20px;
}
.linksut a {
font: 12px Calibri;
text-transform: uppercase;
color: #96313d;
letter-spacing: 1px;
font-weight: bold;
}
.linksut a:hover {
font-style:italic;
}
.contexteuh {
width: 425px;
color: #848484;
text-align: justify;
font: 11px calibri;
line-height: 15px;
padding: 10px 20px 0px 20px;
border-left: solid 1px #96313d;
border-right: solid 1px #96313d;
}
.contexteuh strong {
border-bottom: dotted 1px #96313d;
color: #9c9c9c;
font-style: italic;
}
.ensavoir {
text-align: right;
padding-top: 20px;
}
.ensavoir a {
font: 17px Calibri;
text-transform: uppercase;
color: #96313d;
letter-spacing: 1px;
font-weight: bold;
}
.infosenplus {
width: 320px;
padding-left: 20px;
padding-top: 16px;
}
.newsdum {
background-image: url(https://imgur.com/wpi5CpU.png);
background-size: cover;
height: 130px;
width: 300px;
}
.insidenew {
background: rgba(0, 0, 0, 0.8);
position: relative;
top: 20px;
left: 20px;
width: 260px;
height: 90px;
font: 17px Calibri;
text-transform: uppercase;
color: #96313d;
letter-spacing: 1px;
font-weight: bold;
text-align: center;
line-height: 85px;
}
.txtright {
font: 12px Calibri;
text-transform: uppercase;
color: #96313d;
letter-spacing: 1px;
font-weight: bold;
text-align: right;
padding: 10px 0px 10px 0px;
}
.partotop {
text-align: right;
}
.partotop img {
margin: 2px;
width: 38px;
}
Pour la couleur des liens ainsi que la mise en place du forum en général :
- Code:
body {
overflow-x: hidden;
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 5px;
border: 2px solid #000000;
background-color: #641d24;
}
::-webkit-scrollbar-thumb {
background-color: #641d24;
}
.selectCode {
float:right;
}
#cp-main .panel.sig {
background-color: transparent !important;
}
#page-footer {
background-color: transparent !important;
}
#page-footer span {
color: #797979;
}
#page-footer a {
color: #797979;
font: 9px calibri;
text-transform: uppercase;
letter-spacing: 1px;
}
.footerbar-system .rightside {
color: #797979;
}
.copyright-body {
border-color: #797979 !important;
margin: 6px 0 0 !important;
padding: 8px 0 0 !important;
}
.haut {
position: fixed;
bottom: 80px;
padding: 10px;
background: #dbd8d4;
border-radius: 100%;
right: 20px;
display: block;
z-index: 999;
}
.haut span {
font-size: 14px;
color: #080808;
}
.bas {
position: fixed;
bottom: 35px;
padding: 10px;
background: #dbd8d4;
border-radius: 100%;
right: 20px;
display: block;
z-index: 999;
}
.bas span {
font-size: 14px;
color: #080808;
}
#wrap {
color: white;
padding: 0px 20px 20px 20px !important;
}
a[href="/u1"] span strong {
background: linear-gradient(to left, #486290, #641d24);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
a[href="/u1"] span strong:before {
content: "♚";
margin-right: 2px;
font-style: initial;
}
.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: #e0e0e0 !important;
font: 9px Calibri !important;
letter-spacing: 1px;
text-transform: uppercase;
background: -webkit-linear-gradient(#641d24, #351114);
border-radius: 0px !important;
}
.button, .button1, .button2, input[type="submit"] {
background: -webkit-linear-gradient(#641d24, #351114) !important;
border-radius: 0px !important;
box-shadow: none !important;
color: #e0e0e0 !important;
display: inline-block;
letter-spacing: 1px;
font: 9px Calibri !important;
text-transform: uppercase;
font-size: 1.2rem;
font-weight: 500;
overflow: hidden;
padding: 5px;
position: relative;
text-decoration: none;
vertical-align: middle;
width: auto!important;
}
#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:5px;
background-color: #fff;
font-family:arial;
font-weight: 700;
text-transform: uppercase;
font-size:8px;
color:#222;
border: 1px solid #f6f6f6;
text-align:justify;
}
a{text-decoration:none;}
a:hover{text-decoration:none !important;}
Jawn
# Re: [INDEX - EMBRACE THE DARKNESS] - Mar 4 Fév - 23:54
Les catégories :
Remplacer l'intégralité de votre template index_box par le HTML :
- Code:
<div class="illusion"><!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cattitle">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="totalcat">
<div class="fb">
<!-- BEGIN avatar -->
<div class="lastvava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
<!-- END avatar -->
</div>
<div class="sb">
<div class="secondtitle">
<div class="iconcat" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL}"></div>
<div class="insidetitle"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div></div>
<div class="frmdesc">{catrow.forumrow.FORUM_DESC}</div>
<div id="subfrms">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
<script type="text/javascript">document.getElementById('subfrms').innerHTML=document.getElementById('subfrms').innerHTML.replace(/,/g," ");</script>
</div>
<div class="tb">
<div class="lastpost">
<!-- 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="statis">
<div class="topics"><span>{catrow.forumrow.TOPICS}</span> <br/>{L_TOPICS}</div>
<div class="topics"><span>{catrow.forumrow.POSTS}</span> <br/>{L_POSTS}</div></div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
<!-- END tablefoot -->
<!-- END catrow --></div>
<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>
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.illusion {
margin: 0 auto;
padding: 20px;
}
.cattitle {
text-align: right;
margin: 10px 0px 5px 0px;
padding-bottom: 3px;
border-bottom: 1px solid #848484;
}
.cattitle h2 {
color: #848484;
font: 12px calibri;
text-transform: uppercase;
letter-spacing: 5px;
font-style: italic;
}
.totalcat {
background-image: url(https://imgur.com/ONyelyZ.png);
background-size: cover;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
padding-top: 30px;
margin-bottom: 2px;
height: 210px;
}
.fb {
width: 150px;
}
.lastvava {
width: 150px;
height: 150px;
overflow: hidden;
outline: 1px solid #909090;
outline-offset: 3px;
}
.lastvava img {
width: 100%;
filter: grayscale(70%);
}
.sb {
width: 500px;
padding-right: 40px;
}
.secondtitle {
margin: -15px 0px 5px 0px;
border-bottom: 1px solid #909090;
display: flex;
flex-wrap: wrap;
height: 42px;
}
.iconcat {
height: 50px;
width: 50px;
margin-left: -18px;
}
.insidetitle {
padding: 24px 0px 0px 10px;
}
.insidetitle a {
text-transform: uppercase;
font: 12px calibri;
letter-spacing: 1px;
color: black;
font-weight: bold;
}
.frmdesc {
font: 8px arial;
height: 76px;
padding: 10px 10px 10px 0px;
overflow: auto;
text-align: justify;
color: black;
line-height: 11px;
text-transform: uppercase;
}
#subfrms {
font-size: 0px;
margin-top: 15px;
}
#subfrms a {
font: 11px calibri;
text-transform: uppercase;
margin: 0px 10px 0px 0px;
border-bottom: 1px solid #96313d;
color: black;
font-weight: bold;
}
.lastpost {
text-align: right;
font: 10px calibri;
text-transform: lowercase;
color: #909090;
padding-top: 30px;
}
.lastpost a {
font-size: 17px;
letter-spacing: 1px;
color: black;
text-transform: uppercase;
font-weight: bold;
}
.lastpost strong {
font: 20px Pirata One;
text-transform: lowercase;
font-weight: 100 !important;
font-style: italic;
}
.lastpost img {
position: absolute;
width: 200px;
height: 20px;
margin: 26px 0px 0px -180px;
}
.statis {
text-align: right;
margin: 32px auto 0px auto;
width: 120px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
line-height: 10px;
}
.topics {
color: black;
font: 10px calibri;
text-transform: uppercase;
letter-spacing: -0.4px;
font-weight: bold;
font-style: italic;
}
.topics span {
color: #96313d;
}
Le QEEL :
Dans votre template index_body, remplacez tout le template par votre HTML :
- 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}
<!-- BEGIN disable_viewonline -->
<div id="qeel">
<div class="fondqeel" style="height:310px;"></div>
<div class="bloknewmem"><div class="toseeyou"><span id="avatar_lastmember"></span></div></div>
<div class="grpnew">
<div id="nommembre"><div class="bidule">Bievenue sur Aethiantar :</div>{NEWEST_USER}</div>
<script type="text/javascript">document.getElementById('nommembre').innerHTML=document.getElementById('nommembre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/g," ");</script>
<div class="grpsqeel">
<div class="gr1" style="background:#b97878;">Groupe 1 </div>
<div class="gr1" style="background:#7d4747;">Groupe 2</div>
<div class="gr1" style="background:#581414;">Groupe 3</div>
</div>
<div class="totalonline">{TOTAL_USERS_ONLINE}</div>
</div>
<div class="statco">
<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 48 dernières heures :/g," ");</script>
<div id="online">{LOGGED_IN_USER_LIST}</div>
<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Utilisateurs enregistrés :/g," ");</script>
<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Moteurs de recherche :/g," ");</script>
</div>
</div>
<!-- END disable_viewonline -->
{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}
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
#qeel {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 980px;
margin: 20px 0px 20px 0px;
}
.fondqeel {
height: 500px;
left: 0px;
text-shadow: 0 0 5px #000;
position: absolute;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.bloknewmem {
width: 230px;
text-align: center;
position: relative;
}
.toseeyou {
height: 270px;
width: 150px;
margin: 20px;
}
#avatar_lastmember img {
opacity: 0.3;
width: 100%;
outline: 1px solid #5a5a5a;
outline-offset: 3px;
}
.grpnew {
width: 300px;
position: relative;
}
#nommembre {
margin: 110px 0px 0px -150px;
width: 426px;
}
#nommembre a {
font: 25px Pirata one;
letter-spacing: 1px;
}
.bidule {
font: 10px arial;
text-align: justify;
color: #b7b4b4;
border-bottom: 1px solid #b7b4b4;
margin-bottom: 10px;
padding: 2px;
text-transform: uppercase;
font-style: italic;
}
.grpsqeel {
margin: 14px 0px 6px -20px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
width: 300px;
}
.gr1:last-child {
width: 300px;
color: #847878;
}
.gr1:nth-child(2) {
color: #b7a7a7;
}
.gr1 {
padding:10px;
text-align: center;
width: 140px;
margin: 5px;
font: 9px arial;
letter-spacing: 3px;
color: black;
text-transform: uppercase;
}
.totalonline {
color: #616161;
font: 9px calibri;
text-transform: uppercase;
letter-spacing: 2px;
margin: 1px 0px 0px -52px;
padding-top: 3px;
border-top: 1px solid #484848;
text-align: justify;
width: 328px;
}
.statco {
position: relative;
width: 430px;
}
#lastco {
margin-bottom: 10px;
background-image: url(https://imgur.com/ONyelyZ.png);
background-size: cover;
height: 190px;
width: 390px;
padding: 10px;
overflow: auto;
color: black;
}
#lastco a {
text-transform: uppercase;
font: 11px calibri;
}
#online {
background-image: url(https://imgur.com/ONyelyZ.png);
background-size: cover;
overflow: auto;
height: 100px;
width: 390px;
padding: 10px;
color: black;
}
#online br {
display:none;
}
#online a {
text-transform: uppercase;
font: 16px calibri;
font-style: italic;
}
Remplacez ensuite la totalité de votre template overall_footer_begin :
- 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="rightside">
<!-- BEGIN html_validation -->
</li>
</ul>
</div>
</div>
<!-- END html_validation -->
Une dernier chose, il vous faudra aller remplacer le template profile_view_body par :
- Code:
<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a></span></td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<th class="thHead" colspan="2" nowrap="nowrap" height="25"><h1 class="h_member">{L_VIEWING_PROFILE}</h1></th>
</tr>
<tr>
<td class="catLeft" align="center" width="40%" height="28"><b><span class="gen">{L_USER_PRESENCE}</span></b></td>
<td class="catRight" width="60%" align="center"><b><span class="gen">{L_ABOUT_USER}</span></b></td>
</tr>
<tr>
<td class="row1" align="center" valign="top" height="120">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td valign="middle" nowrap="nowrap" align="right" width="20%"><span class="gen">{L_AVATAR_IMG} </span></td>
<td width="80%"><b><span class="gen"><span id="avatar_membre">{AVATAR_IMG}</span></span></b></td>
</tr>
<tr>
<td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_RANK}: </span></td>
<td><b><span class="gen">{POSTER_RANK}</span></b></td>
</tr>
<!-- BEGIN switch_show_status -->
<tr>
<td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_STATUT}: </span></td>
<td><b><span class="gen">{USER_ONLINE}</span></b></td>
</tr>
<!-- END switch_show_status -->
<!-- BEGIN switch_allow_friendsfoes -->
<tr>
<td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_FRIENDS_AND_FOES}: </span></td>
<td><span class="gen"><strong>{FRIENDSFOES}</strong></span></td>
</tr>
<!-- END switch_allow_friendsfoes -->
<!-- BEGIN switch_auth_user -->
<tr>
<td valign="middle" nowrap="nowrap" align="right"><br /><span class="gen">{L_ADMINISTRATE_USER}: </span></td>
<td><br /><strong><span class="gen">{ADMINISTRATE_USER}{BAN_USER}</span></strong></td>
</tr>
<!-- END switch_auth_user -->
</table>
</td>
<td class="row1" rowspan="3" valign="top">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td align="right" valign="top" nowrap="nowrap"><span class="gen">{L_LAST_VISITED}: </span></td>
<td><b><span class="gen">{LAST_VISIT_TIME}</span></b></td>
</tr>
<!-- BEGIN switch_dhow_mp -->
<tr>
<td align="right" valign="middle" nowrap="nowrap"><span class="gen">{L_PRIVATE_MSG}: </span></td>
<td><b><span class="gen">{PRIVATE_MSG}</span></b></td>
</tr>
<!-- END switch_dhow_mp -->
<!-- BEGIN profile_field -->
<tr id="field_id{profile_field.ID}">
<td width="40%" align="right" valign="top" nowrap="nowrap"><span class="gen">{profile_field.LABEL} </span></td>
<td width="60%"><div class="gen" style="font-weight:bold;">{profile_field.CONTENT}</div><br /><!-- BEGIN profil_type_user_posts --><span class="genmed">[{POST_PERCENT_STATS} / {POST_DAY_STATS}]</span> <br />
<span class="genmed"><a rel="nofollow" class="genmed" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a><br />
- <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><br />
- <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></span><!-- END profil_type_user_posts --></td>
</tr>
<!-- END profile_field -->
</table>
</td>
</tr>
<tr>
<td class="catLeft" align="center" height="28"><b><span class="gen">{L_CONTACT} {USERNAME}</span></b></td>
</tr>
<tr>
<td class="row1" valign="top" height="{S_CONTACT_HEIGHT}">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN contact_field -->
<tr id="field_id{contact_field.ID}">
<td width="40%" align="right" valign="middle" nowrap="nowrap"><span class="gen">{contact_field.LABEL} </span></td>
<td width="60%" valign="middle"><div class="gen" style="font-weight:bold;">{contact_field.CONTENT}</div></td>
</tr>
<!-- END contact_field -->
<!-- BEGIN switch_admin_user_comment_active -->
<tr>
<td align="right" valign="middle" nowrap="nowrap" width="50%">
<span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span>
</td>
<td class="row1" valign="middle">
<table align="center">
<tr>
<td>
{ADMIN_USER_COMMENT}
</td>
</tr>
</table>
</td>
</tr>
<!-- END switch_admin_user_comment_active -->
</table>
</td>
</tr>
<!-- BEGIN switch_rpg -->
<tr>
<td colspan="2" class="catLeft" align="center"><b><span class="gen">{L_VIEWING_RPG}</span></b></td>
</tr>
<tr>
<td class="row1" align="center" valign="top" height="6">
{RPG_IMAGE}<br /><br />
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN rpg_fields_left -->
<tr>
<td align="right" valign="middle" nowrap="nowrap">
<span class="gen">{switch_rpg.rpg_fields_left.F_NAME} : </span>
</td>
<td width="100%" valign="middle" nowrap="nowrap">
<b><span class="gen">{switch_rpg.rpg_fields_left.F_VALUE_NEW}</span></b>
</td>
</tr>
<!-- END rpg_fields_left -->
</table>
</td>
<td class="row1" align="center" valign="top" height="6">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN rpg_fields -->
<tr>
<td align="right" valign="middle" nowrap="nowrap">
<span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span>
</td>
<td width="100%" valign="baseline">
<b><span class="gen">{switch_rpg.rpg_fields.F_VALUE_NEW}</span></b>
</td>
</tr>
<!-- END rpg_fields -->
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center" class="row1">
{U_ADMIN_RPG}
</td>
</tr>
<!-- END switch_rpg -->
</table>
<br />
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('[id^=field_id]').each(function(){
if ( $(this).find('.field_editable').is('span, div') )
{
$(this).hover(function()
{
if( $(this).find('.field_editable.invisible').is('span, div') )
{
$(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
$(this).find('.ajax-profil_edit').attr({
alt: "{L_FIELD_EDIT_VALUE}",
title: "{L_FIELD_EDIT_VALUE}"
}).click(function(){
$(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
$(this).prev().find('.ajax-profil_valid').attr({
alt: "{L_VALIDATE}",
title: "{L_VALIDATE}"
}).click(function(){
var content = new Array();
$(this).parent().find('[name]').each(function(){
var type_special = $(this).is('input[type=radio],input[type=checkbox]');
if ( (type_special && $(this).is(':checked')) || !type_special )
{
content.push(new Array($(this).attr('name'), $(this).attr('value')));
}
});
var id_name = $(this).parents('[id^=field_id]').attr('id');
var id = id_name.substring(8, id_name.length);
$.post(
"{U_AJAX_PROFILE}",
{id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
function(data){
$.each(data, function(i, item){
$('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
});
},
"json"
);
});
$(this).remove();
});
}
},function()
{
if( $(this).find('.field_editable.invisible').is('span, div') )
{
$(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
$(this).find('.ajax-profil_edit').remove();
}
});
}
});
});
//]]>
</script>
Et ensuite, dans Module > Gestion des codes Javascript > Créer un nouveau Javascript en sélectionnant uniquement sur l'index :
- Code:
$(function(){
$.get($("#nommembre a[href^='/u']")[0].href,function(d){
(a=$("#avatar_membre img",$(d))).length&&$("#avatar_lastmember").html(a);})
});
Ce dont vous aurez besoin :
Image du fond de page (à mettre en fond de page fixe) :
- Code:
https://imgur.com/Jq6pzIK.png
Catégorie / Forum :
- Code:
https://imgur.com/3exoVrG.png
Catégorie - Nouveau / Forum - Nouveau :
- Code:
https://imgur.com/bUZ73Vg.png
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|