![[INDEX BLEU] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [INDEX BLEU] - Sam 2 Oct - 20:45
![[INDEX BLEU] Fa86](https://zupimages.net/up/21/39/fa86.png)
En tête + barre latérale + barre de navigation + bannière + page d'accueil
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 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/css2?family=Abril+Fatface&family=Darker+Grotesque:wght@300;400;500;600;700;800;900&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>
<!-- 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&display=swap"
rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
<div class="haut"><a href="#top">^</a></div>
<body id="modernbb">
<div class="bann_fo">
<div class="nom_fo"><a href="/">nom du forum</a></div>
<div class="subtitle_fo">type de forum | nom de la ville | taille vavas</div>
<div class="contexte_fo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse semper volutpat nisi vitae condimentum. Mauris nulla mi, dapibus quis sapien eget, aliquam suscipit nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer non diam laoreet, maximus justo sit amet, posuere tortor. Vivamus ac neque tincidunt, dapibus neque suscipit, faucibus enim. Duis ac accumsan mi. Nullam sit amet tellus volutpat, lacinia eros eu, dapibus leo. Nam rhoncus magna vitae mauris faucibus ultricies. Nulla orci elit, mattis vel lacus quis, euismod pulvinar nisi. Donec libero augue, fermentum sed dictum eget, efficitur a augue. Mauris ornare tincidunt nibh. Pellentesque vulputate aliquet tellus, quis venenatis sapien. Mauris nunc ligula, lacinia sed feugiat eu, faucibus hendrerit turpis. Aenean molestie vulputate erat vel tincidunt. Morbi ac nunc faucibus, aliquet elit ut, suscipit erat.
</div>
<div class="navbar_fo">{GENERATED_NAV_BAR}</div>
</div>
<div class="pa_fo">
<div class="top_site_pa">
<a target="_blank" href="/">V</a> <a target="_blank" href="/">O</a> <a target="_blank" href="/">T</a> <a target="_blank" href="/">E</a>
</div>
<div class="blok_staff_fo">
<h1>Nos prédéfinis</h1>
<a target="_blank" href="/"><img src="https://via.placeholder.com/150x50"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/150x50"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/150x50"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/150x50"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/150x50"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/150x50"/></a>
</div>
<div class="blok_news_pa">
<h1>Les nouveautés</h1>
<div class="news_un">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dui purus, porttitor at tincidunt id, placerat eu enim. Vivamus vitae interdum leo, at condimentum diam.
<div class="news_pa_date">14/10/2020</div></div>
<div class="news_un">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dui purus, porttitor at tincidunt id, placerat eu enim. Vivamus vitae interdum leo, at condimentum diam.
<div class="news_pa_date">14/10/2020</div></div>
</div>
<div class="stats_pa_fo">
<h1>Les statistiques</h1>
<script type="text/javascript" src="https://js01.fra.co/24922.js"></script>
<div id="stat_nmbr"><div style="padding-left:30px;"><span class="FORUMCOUNTUSER"></span><br/>membres</div>
<br/><div style="padding-left:80px;"><span class="FORUMCOUNTPOST"></span><br/>messages</div></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 -->
<!-- BEGIN switch_like_popup -->
<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>
<!-- END switch_like_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<div id="page-header">
<div class="wrap">
<a href="{U_INDEX}" id="logo"><img loading="lazy" 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 :
- Code:
.bann_fo {
background-image: url(https://imgur.com/yaviSfT.png);
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.nom_fo {
text-align: center;
padding-top: 50px;
}
.nom_fo a {
color: #dedede;
font: 80px Abril Fatface;
}
.subtitle_fo {
width: 27%;
margin: -15px auto 0px auto;
text-align: right;
color: #dedede;
font: 12px Darker Grotesque;
text-transform: uppercase;
}
.contexte_fo {
margin: 0 auto;
width: 18%;
padding: 20px 0px;
text-align: justify;
color: #dedede;
font: 13px Darker Grotesque;
font-weight: bold;
line-height: 12px;
}
.navbar_fo {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
padding: 20px;
}
.pa_fo {
width: 100%;
padding: 20px;
background: #d5d7da;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pa_fo h1 {
color: #2d3943;
text-transform: uppercase;
font: 18px Darker Grotesque;
border-bottom: 1px solid #2d3943;
margin-bottom: 10px;
}
.top_site_pa {
width: 50px;
text-align: center;
}
.top_site_pa a {
font: 38px Abril Fatface;
color: #6a91b7;
line-height:53px;
}
.blok_staff_fo {
width: 340px;
margin: 0px 10px;
}
.blok_staff_fo img {
margin: 0px 10px 10px 10px;
}
.blok_news_pa {
width: 300px;
margin: 0px 10px;
}
.news_un {
width: 130px;
display: inline-block;
text-align: justify;
margin: 0px 10px;
}
.news_pa_date {
background: #2d3943;
text-align: center;
color: #dedede;
font: 12px Darker Grotesque;
padding: 2px;
}
.stats_pa_fo {
width: 300px;
background-image: url(https://imgur.com/mqSCBGn.png);
background-repeat: no-repeat;
background-position: 50% 50%;
margin-left: 10px;
}
#stat_nmbr {
font: 13px Darker Grotesque;
text-transform: uppercase;
color: #2d3943;
letter-spacing: 3px;
font-weight: bold;
line-height: 23px;
}
#stat_nmbr span {
font-size: 38px;
}
Jawn
# Re: [INDEX BLEU] - Sam 2 Oct - 21:00
les catégories
Remplacer l'intégralité de votre template index_box par le HTML :
- Code:
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cat_title_fo">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="categorie_fo">
<div class="titlecat_fo"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="first_blok_cat">
<div class="lastpost_fo"><!-- 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="desc_cat">{catrow.forumrow.FORUM_DESC}</div>
</div>
<div class="blok_vava_fo">
<!-- BEGIN avatar --><div class="lastpostava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div><!-- END avatar -->
</div>
<div class="stats_cat_fo">
<div class="cat_icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll 100%;">
<div class="statinside_fo">{catrow.forumrow.TOPICS}<br/><span>{L_TOPICS}</span></div>
<div class="statinside_fod">{catrow.forumrow.TOPICS}<br/><span>{L_TOPICS}</span></div>
</div>
</div>
<div class="cat_sousfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
<!-- END tablefoot -->
<!-- END catrow -->
<div class="liensbascat"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> <a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
<a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a> <!-- BEGIN switch_delete_cookies --><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a><!-- END switch_delete_cookies -->
</div>
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.cat_title_fo {
background-image: url(https://imgur.com/puvdITN.png);
padding: 10px;
text-align: right;
background-repeat: no-repeat;
background-size: 100%;
background-position: 50% 50%;
height: 130px;
}
.cat_title_fo h2 {
color: #dedede;
text-transform: uppercase;
font: 28px Darker Grotesque;
font-weight: bold;
}
.cat_title_fo h2::first-letter {
color:#507198;
font-style:italic;
}
.textcat {
text-align: justify;
border: solid 1px #dedede;
padding: 5px;
font-size: 12px;
width: 240px;
float: right;
text-transform: initial;
line-height: 10px;
height: 60px;
overflow: auto;
}
.categorie_fo{
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.titlecat_fo {
border-bottom: 1px solid #2d3943;
margin: -10px 0px 10px 0px;
width: 100%;
text-align: center;
}
.titlecat_fo a {
color: #2d3943;
text-transform: uppercase;
font: 18px Darker Grotesque;
}
.first_blok_cat {
width: 580px;
}
.lastpost_fo {
font: 9px abril Fatface;
color: #9d9d9d;
}
.lastpost_fo br{
display:none;
}
.lastpost_fo a {
margin: 0px 5px;
text-transform: lowercase;
font-size: 12px;
background-image: linear-gradient(120deg, #28374e 0%, #738591 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.lastpost_fo strong {
background-image: none !important;
-webkit-text-fill-color: initial !important;
}
.desc_cat {
color: #2d3943;
height: 110px;
padding: 10px;
text-align: justify;
font: 12px Darker Grotesque;
font-weight: bold;
line-height: 15px;
overflow: auto;
}
.blok_vava_fo {
width: 100px;
margin: 0 auto;
}
.lastpostava {
width: 90px;
height: 130px;
overflow: hidden;
}
.lastpostava img {
width:100%;
}
.stats_cat_fo {
width: 200px;
}
.cat_icon {
width: 100%;
background-repeat: no-repeat;
height: 100%;
color: #0d0d0d;
}
.statinside_fo {
font: 50px Darker Grotesque;
line-height: 38px;
text-align: center;
margin-left: -80px;
}
.statinside_fo span {
text-transform: uppercase;
font: 10px Abril Fatface;
letter-spacing: 2px;
}
.statinside_fod {
font: 50px Darker Grotesque;
line-height:38px;
text-align: center;
margin-left: 20px;
}
.statinside_fod span {
text-transform: uppercase;
font: 10px Abril Fatface;
letter-spacing: 2px;
}
.cat_sousfo {
width: 100%;
background: #2d3943;
padding: 5px;
margin-top: 10px;
font-size: 0px;
}
.cat_sousfo a {
font: 12px Darker Grotesque;
text-transform: uppercase;
color: #dedede;
margin: 0px 10px;
}
.liensbascat {
text-align: center;
}
.liensbascat a {
text-transform: lowercase;
font: 13px Darker Grotesque;
letter-spacing: 1px;
color: #2d3943;
}
/!\ Quand vous créez votre catégorie, vous devez donc entrer un titre ("administration" pour le premier en général par exemple); veuillez remplacer donc par ceci :
- Code:
VOTRE TITRE<br/><div class="textcat">le texte descriptif que vous voulez</div>
Les images des catégories
Catégorie :
- Code:
https://imgur.com/4CfcUka.png
Catégorie - Nouveau :
- Code:
https://imgur.com/Y6ht9BC.png
Forum :
- Code:
https://imgur.com/4CfcUka.png
Forum - Nouveau :
- Code:
https://imgur.com/Y6ht9BC.png
Jawn
# Re: [INDEX BLEU] - Sam 2 Oct - 21:08
le qui est en ligne
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}
<div style="text-align:center;padding:20px 0px;"><img src="https://imgur.com/e7pnSRz.png"/></div>
<!-- BEGIN disable_viewonline -->
<div class="fo_qeel">
<div class="qeel_co">{L_CONNECTED_MEMBERS}</div>
<div class="blok_qeel">
<h1>Membre du mois</h1>
<a href="/"><img src="https://via.placeholder.com/500x80"/></a><br/><br/>
<a href="/"><img src="https://via.placeholder.com/500x80"/></a>
</div>
<div id="qeel_newm">{NEWEST_USER}</div>
<script type="text/javascript">
document.getElementById('qeel_newm').innerHTML=document.getElementById('qeel_newm').innerHTML.replace(/L'utilisateur enregistré le plus récent est /g,"• Bienvenue à : ");</script>
<div class="bas_qeel_grp">
<div class="total_grps_qeel">
<div class="firsty_grp"><div class="second_grp" style="background:#09805d;">26</div></div>
<div class="title_grp">Nom du groupe</div>
<div class="txt_grp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus augue. Quisque pharetra scelerisque arcu in ornare. Aenean vel eros eget augue elementum imperdiet quis vel urna. Vivamus ac est mollis, pulvinar neque auctor, pulvinar dolor. Etiam porttitor libero nisl, et aliquet sapien ultrices id. Quisque at suscipit ligula. Phasellus feugiat viverra ligula, a pharetra magna fermentum quis. Donec consectetur feugiat nunc, nec consequat massa volutpat congue.
</div>
</div>
<div class="total_grps_qeel">
<div class="firsty_grp"><div class="second_grp" style="background:#888338;">26</div></div>
<div class="title_grp">Nom du groupe</div>
<div class="txt_grp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus augue. Quisque pharetra scelerisque arcu in ornare. Aenean vel eros eget augue elementum imperdiet quis vel urna. Vivamus ac est mollis, pulvinar neque auctor, pulvinar dolor. Etiam porttitor libero nisl, et aliquet sapien ultrices id. Quisque at suscipit ligula. Phasellus feugiat viverra ligula, a pharetra magna fermentum quis. Donec consectetur feugiat nunc, nec consequat massa volutpat congue.
</div>
</div>
<div class="total_grps_qeel">
<div class="firsty_grp"><div class="second_grp" style="background:#5b4299;">26</div></div>
<div class="title_grp">Nom du groupe</div>
<div class="txt_grp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus augue. Quisque pharetra scelerisque arcu in ornare. Aenean vel eros eget augue elementum imperdiet quis vel urna. Vivamus ac est mollis, pulvinar neque auctor, pulvinar dolor. Etiam porttitor libero nisl, et aliquet sapien ultrices id. Quisque at suscipit ligula. Phasellus feugiat viverra ligula, a pharetra magna fermentum quis. Donec consectetur feugiat nunc, nec consequat massa volutpat congue.
</div>
</div>
<div class="total_grps_qeel">
<div class="firsty_grp"><div class="second_grp" style="background:#59341f;">26</div></div>
<div class="title_grp">Nom du groupe</div>
<div class="txt_grp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus augue. Quisque pharetra scelerisque arcu in ornare. Aenean vel eros eget augue elementum imperdiet quis vel urna. Vivamus ac est mollis, pulvinar neque auctor, pulvinar dolor. Etiam porttitor libero nisl, et aliquet sapien ultrices id. Quisque at suscipit ligula. Phasellus feugiat viverra ligula, a pharetra magna fermentum quis. Donec consectetur feugiat nunc, nec consequat massa volutpat congue.
</div>
</div>
<div class="total_grps_qeel">
<div class="firsty_grp"><div class="second_grp" style="background:#c54f50;">26</div></div>
<div class="title_grp">Nom du groupe</div>
<div class="txt_grp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus augue. Quisque pharetra scelerisque arcu in ornare. Aenean vel eros eget augue elementum imperdiet quis vel urna. Vivamus ac est mollis, pulvinar neque auctor, pulvinar dolor. Etiam porttitor libero nisl, et aliquet sapien ultrices id. Quisque at suscipit ligula. Phasellus feugiat viverra ligula, a pharetra magna fermentum quis. Donec consectetur feugiat nunc, nec consequat massa volutpat congue.
</div>
</div>
<div class="total_grps_qeel">
<div class="firsty_grp"><div class="second_grp" style="background:lightblue;">26</div></div>
<div class="title_grp">Nom du groupe</div>
<div class="txt_grp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus augue. Quisque pharetra scelerisque arcu in ornare. Aenean vel eros eget augue elementum imperdiet quis vel urna. Vivamus ac est mollis, pulvinar neque auctor, pulvinar dolor. Etiam porttitor libero nisl, et aliquet sapien ultrices id. Quisque at suscipit ligula. Phasellus feugiat viverra ligula, a pharetra magna fermentum quis. Donec consectetur feugiat nunc, nec consequat massa volutpat congue.
</div>
</div>
</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:
.fo_qeel {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.qeel_co {
width: 350px;
background: #2d3943;
padding: 10px;
height: 215px;
overflow: auto;
color: #5c6c79;
font: 9px Roboto;
text-transform: uppercase;
letter-spacing: 1px;
}
.qeel_co a {
letter-spacing:0px;
text-transform:lowercase;
}
.blok_qeel {
width: 500px;
}
.blok_qeel h1 {
color: #2d3943;
text-transform: uppercase;
font: 18px Darker Grotesque;
border-bottom: 1px solid #2d3943;
margin-bottom: 10px;
text-align:center;
}
#qeel_newm {
width: 100%;
text-align: center;
padding: 20px 0px;
text-transform: uppercase;
font: 28px Darker Grotesque;
color: #2d3943;
}
#qeel_newm a {
font-style:italic;
}
.bas_qeel_grp {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.total_grps_qeel {
transition: all 800ms;
width: 140px;
}
.firsty_grp {
text-align: center;
width: 70px;
height: 70px;
padding: 10px;
margin: 0 auto;
border-radius: 100%;
background: #2d3943;
line-height: 20px;
transition: all 800ms;
}
.second_grp {
transition: all 800ms;
border-radius: 100%;
font: 25px Abril Fatface;
padding: 10px;
width: 50px;
height: 50px;
color: #2d3943;
opacity: 0;
}
.firsty_grp:hover .second_grp {
opacity:1;
}
.title_grp {
color: #2d3943;
text-transform: uppercase;
font: 18px Darker Grotesque;
border-bottom: 1px solid #2d3943;
margin: 10px 0px;
text-align: center;
}
.txt_grp {
text-align: justify;
padding: 10px;
font: 11px Calibri;
color: #2d3943;
}
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="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 -->
Jawn
# Re: [INDEX BLEU] - Sam 2 Oct - 21:11
le footer
Remplacez ensuite la totalité de votre template overall_footer_end :
- 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}
<div class="footer_fo">
<div class="staff_fo">
<h1>Le staff</h1>
<div class="staffflex">
<div class="imgfooter"><img src="https://via.placeholder.com/50x50"/></div>
<div class="infosfooter">
<h1>Nom et prénom</h1>
<span>Statut du staffeux</span>
<br/><br/>
<a href="/">Envoyer un mp</a>
</div>
</div>
<div class="staffflex">
<div class="imgfooter"><img src="https://via.placeholder.com/50x50"/></div>
<div class="infosfooter">
<h1>Nom et prénom</h1>
<span>Statut du staffeux</span>
<br/><br/>
<a href="/">Envoyer un mp</a>
</div>
</div>
<div class="staffflex">
<div class="imgfooter"><img src="https://via.placeholder.com/50x50"/></div>
<div class="infosfooter">
<h1>Nom et prénom</h1>
<span>Statut du staffeux</span>
<br/><br/>
<a href="/">Envoyer un mp</a>
</div>
</div>
</div>
<div class="linku_fo">
<h1>Les liens utiles</h1>
<a target="_blank" href="/">• Règlement</a>
<a target="_blank" href="/">• Bottins</a>
<a target="_blank" href="/">• Groupes</a>
<a target="_blank" href="/">• Annexes</a>
<a target="_blank" href="/">• Partenariat</a>
<a target="_blank" href="/">• Crédits</a>
<a target="_blank" href="/">• Le Discord</a>
</div>
<div class="partofooter_fo">
<h1>Les partenariats</h1>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31"/></a>
</div>
</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>
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.footer_fo {
background-image: url(https://imgur.com/o9rj3Fe.png);
background-position: 50% 50%;
background-size: cover;
padding: 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top:30px;
}
.footer_fo h1 {
color: #dedede;
text-transform: uppercase;
font: 18px Darker Grotesque;
border-bottom: 1px solid #dedede;
margin: 10px 0px;
text-align: left;
}
.staff_fo {
width: 250px;
margin: 0px 10px;
}
.staffflex {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.imgfooter {
width: 70px;
}
.imgfooter img {
width:50px;
height:50px;
}
.infosfooter {
margin: -3px 0px 16px 0px;
}
.infosfooter h1 {
border-bottom: none;
font: 14px Abril Fatface;
text-transform: initial;
margin: initial;
}
.infosfooter span {
color: #6f98bd;
text-transform: uppercase;
font-size: 8px;
}
.infosfooter a {
text-transform: uppercase;
color: #dedede;
font: 8px roboto;
font-style: normal;
font-style: italic;
}
.linku_fo {
width: 210px;
margin: 0px 10px;
}
.linku_fo a {
color: #dedede;
display: block;
font: 15px Darker Grotesque;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
}
.partofooter_fo {
margin-left: 10px;
width: 510px;
}
.partofooter_fo img {
margin: 5px;
}
la mise en forme
Ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
a{text-decoration:none;}
a:hover{text-decoration:none !important;}
#page-footer {
background-color: transparent !important;
}
#page-footer a {
color: #2d3943;
text-transform: uppercase;
font: 11px Darker Grotesque;
}
.footerbar-system .rightside {
color: #2d3943;
}
#page-footer, .copyright {
color: #FFF;
font-size: 1.3rem;
text-align: center;
margin: -19px 0px;
}
.haut {
position: fixed;
bottom: 18px;
right: 18px;
z-index: 999;
background: linear-gradient(120deg, #28374e 0%, #738591 100%);
padding: 10px;
width: 50px;
text-align: center;
height: 50px;
}
.haut a {
color: #dedede;
display: block;
font: 24px Abril Fatface;
font-weight: bold;
}
::-webkit-scrollbar {
width: 7px;
height: 8px;
background-color: #040403;
}
::-webkit-scrollbar-thumb {
background:#c5b9bf;
}
::selection {
background:#c5b9bf;
color: #0d0d0d;
}
/!\ Tant que vous êtes là, pensez à désactiver l'optimisation du CSS.
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|