![[INDEX TURQUOISE] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [INDEX TURQUOISE] - Sam 2 Oct - 22:55
![[INDEX TURQUOISE] Pzkz](https://zupimages.net/up/21/39/pzkz.png)
barre de navigation + bannière
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://zupimages.net/up/20/16/so55.png" />
<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="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway&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"
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-up-arrow"></span></a></div>
<div class="bas"><a href="#bottom" title="vers le bas"><span class="th th-down-arrow"></span></a></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="line1">{GENERATED_NAV_BAR}</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 class="bann"><a href="/"><img src="https://via.placeholder.com/914x380"/></a></div>
<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:
.line1 {
position: fixed;
top: 0;
left: 0;
height: 38px;
width: 100%;
z-index: 999;
display: flex;
padding-top: 12px;
flex-wrap: wrap;
justify-content: flex-end;
list-style: none;
border-bottom: 1px solid #cacaca;
background: linear-gradient(to right, #5e7679, #91c4cc);
}
a.mainmenu {
margin: 0px 12px;
color: #343233;
font: 12px Raleway;
text-transform: uppercase;
font-weight: bold;
letter-spacing: -1px;
position: relative;
}
a.mainmenu[href="/"]::before, a.mainmenu[href="/faq"]::before, a.mainmenu[href="/search"]::before, a.mainmenu[href="/memberlist"]::before, a.mainmenu[href="https://discord.gg/Snck7gk"]::before, a.mainmenu[href="/groups"]::before, a.mainmenu[href="/g31-infolettre"]::before, a.mainmenu[href*="/profile"]::before, a.mainmenu[href*="/privmsg"]::before, a.mainmenu[href*="/login"]::before, a.mainmenu[href*="/logout"]::before, a.mainmenu[href*="/register"]::before {
position: absolute;
margin: -13px 0px 0px -5px;
color: #d9d9d9;
opacity: 0.4;
font-size: 26px;
z-index: -1;
}
a.mainmenu[href="/"]:before {
content: "\ea62";
font-family: honeybee;
}
a.mainmenu[href="/faq"]:before {
content: "\eb30";
font-family: honeybee;
}
a.mainmenu[href="/search"]:before {
font-family:honeybee;
content: "\eaa5";
}
a.mainmenu[href="/memberlist"]:before {
font-family: honeybee;
content: "\eb9b";
}
a.mainmenu[href="https://discord.gg/Snck7gk"]:before {
font-family: honeybee;
content: "\ebd6";
}
a.mainmenu[href="/groups"]:before {
font-family:honeybee;
content: "\ea97";
}
a.mainmenu[href="/g31-infolettre"]:before {
font-family:honeybee;
content: "\ea2e";
}
a.mainmenu[href*="/profile"]:before {
font-family:honeybee;
content: "\ecb5";
}
a.mainmenu[href*="/privmsg"]:before {
font-family:honeybee;
content: "\ebda";
}
a.mainmenu[href*="/login"]:before {
font-family:honeybee;
content: "\ea9f";
}
a.mainmenu[href*="/logout"]:before {
font-family:honeybee;
content: "\eaa1";
}
a.mainmenu[href*="/register"]:before {
font-family:honeybee;
content: "\e90f";
}
.bann {
text-align: center;
margin: auto;
width: 914px;
position: relative;
box-sizing: border-box;
overflow: hidden;
}
.bann img {
width:100%;
}
Jawn
# Re: [INDEX TURQUOISE] - Sam 2 Oct - 23:00
la page d'accueil
Rendez-vous dans Panneau d'administration > Affichage > Page d'accueil > Généralités puis ajoutez-y :
- Code:
<meta charset="utf-8" /><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat|Raleway&display=swap" /><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>
<div class="pad">
<div class="context">
<img src="https://via.placeholder.com/150x115" /><strong>NOM DU VOTRE FORUM</strong> <br />Certaines images de fond ainsi que de bordures ont été modifié par Artemis et Sunhae d'<a target="_blank" href="/">Epicode</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere dui a nunc posuere luctus. Integer vulputate justo eget enim condimentum, eu volutpat purus volutpat. Proin sodales ut sem nec eleifend. Aliquam fringilla a arcu sit amet scelerisque. Donec id est pharetra, posuere sem eu, tincidunt lectus. Maecenas eu leo elit. Nullam dolor quam, consequat nec blandit quis, iaculis vitae mauris. Donec et pulvinar tellus, id aliquet leo. Phasellus molestie magna mauris, eu sagittis arcu hendrerit ut. Maecenas eleifend magna elementum lobortis porttitor. Sed maximus faucibus erat eu blandit. Donec ultrices dui ipsum, in viverra nulla scelerisque at. Nulla tristique tincidunt neque in vulputate. Pellentesque sit amet risus mauris. Suspendisse a auctor nulla.<br /><strong>Rejoignez-nous !</strong>
</div>
<div class="staffici">
<div class="tab">
<button onmouseover="openCity(event, 'Sydney')" style="background-image:url(https://via.placeholder.com/90x94); background-size:120%; background-position: center;" class="tablinks">
</button>
<button onmouseover="openCity(event, 'Detroit')" style="background-image:url(https://via.placeholder.com/90x94); background-size:100%; background-position: center;" class="tablinks">
</button>
<button onmouseover="openCity(event, 'Paris')" style="background-image:url(https://via.placeholder.com/90x94); background-size:100%; background-position: center;" class="tablinks">
</button>
</div>
<div class="blokinv">
Passe ta souris sur les staffeux !
</div>
<div class="tabcontent" id="Sydney">
<span><a href="/" target="_blank">nom & prénom - fonction</a></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus aliquet massa, at congue purus rutrum ut. Morbi cursus neque id nisl pharetra, a vehicula est rhoncus.
</div>
<div class="tabcontent" id="Detroit">
<span><a href="/" target="_blank">nom & prénom - fonction</a></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus aliquet massa, at congue purus rutrum ut. Morbi cursus neque id nisl pharetra, a vehicula est rhoncus.
</div>
<div class="tabcontent" id="Paris">
<span><a href="/" target="_blank">nom & prénom - fonction</a></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus aliquet massa, at congue purus rutrum ut. Morbi cursus neque id nisl pharetra, a vehicula est rhoncus.
</div>
<div class="recru">
<h1>
ils ont besoin de vous !
</h1>
<div style="background:#5577a4;" class="grppa">
groupe
</div>
<div style="background:#f57d27;" class="grppa">
groupe
</div>
<div style="background:#aa7ebb;" class="grppa">
groupe
</div>
<div style="background:#d6bc57;" class="grppa">
groupe
</div>
</div>
</div>
<div class="thirdb">
<div class="news">
<span style="color:#5e7679;font-weight:bold;font-family:Raleway;font-style:italic;">xx.xx.2021 :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a target="_blank" href="/">www</a>.<br /><span style="color:#5e7679;font-weight:bold;font-family:Raleway;font-style:italic;">xx.xx.2021 :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a target="_blank" href="/">www</a>.<br /><span style="color:#5e7679;font-weight:bold;font-family:Raleway;font-style:italic;">xx.xx.2021 :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a target="_blank" href="/">www</a>.<br /><span style="color:#5e7679;font-weight:bold;font-family:Raleway;font-style:italic;">xx.xx.2021 :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a target="_blank" href="/">www</a>.<br /><span style="color:#5e7679;font-weight:bold;font-family:Raleway;font-style:italic;">xx.xx.2021 :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a target="_blank" href="/">www</a>.<br /><span style="color:#5e7679;font-weight:bold;font-family:Raleway;font-style:italic;">xx.xx.2021 :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a target="_blank" href="/">www</a>.<br /><span style="color:#5e7679;font-weight:bold;font-family:Raleway;font-style:italic;">xx.xx.2021 :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a target="_blank" href="/">www</a>.<br /><span style="color:#5e7679;font-weight:bold;font-family:Raleway;font-style:italic;">xx.xx.2021 :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a target="_blank" href="/">www</a>.<br />
</div>
<div class="topp">
<h1>
Nos amis
</h1>
<a href="/" target="_blank"><span style="color:#91c4cc;" class="th th-flower-1"></span></a> <a href="/" target="_blank"><span style="color:#91c4cc;" class="th th-flower-1"></span></a> <a href="/" target="_blank"><span style="color:#91c4cc;" class="th th-flower-1"></span></a> <a href="/" target="_blank"><span class="th th-flower"></span></a> <a href="/" target="_blank"><span class="th th-flower"></span></a> <a href="/" target="_blank"><span class="th th-flower"></span></a> <a href="/" target="_blank"><span class="th th-flower"></span></a> <a href="/" target="_blank"><span class="th th-flower"></span></a> <a href="/" target="_blank"><span class="th th-flower"></span></a> <a href="/" target="_blank"><span class="th th-flower"></span></a> <a href="/" target="_blank"><span class="th th-flower"></span></a> <a href="/" target="_blank"><span class="th th-flower"></span></a>
</div>
</div>
<div class="gagna">
<div class="vavagaagn">
<img src="https://via.placeholder.com/100x70" />
</div>
<div class="bouya">
<h1>
nom & prénom
</h1>
<h2>
membre du mois
</h2>
</div>
<div class="iconga">
<a href="/" target="_blank"><img src="https://via.placeholder.com/280x60" /></a>
</div>
</div>
<div class="linkut">
<li>
<a href="/" target="_blank">Lien utile <span class="th th-bookmark-1"></span></a>
</li>
<li>
<a href="/" target="_blank">Lien utile <span class="th th-newspaper"></span></a>
</li>
<li>
<a href="/" target="_blank">Lien utile <span class="th th-plane"></span></a>
</li>
<li>
<a href="/" target="_blank">Lien utile <span class="th th-bubble-heart"></span></a>
</li>
<li>
<a href="/" target="_blank">Lien utile <span class="th th-forest"></span></a>
</li>
<li>
<a href="/" target="_blank">Lien utile <span class="th th-stars"></span></a>
</li>
<li>
<a href="/" target="_blank">Lien utile <span class="th th-stethoscope"></span></a>
</li>
<li>
<a href="/" target="_blank">Lien utile <span class="th th-coconut"></span></a>
</li>
</div>
</div>
<style>
.pad {
padding: 10px;
background: #eeeeee;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border: 1px solid #cacaca;
}
.context {
margin: 10px;
padding: 20px;
color: gray;
font: 10px arial;
text-align: justify;
background: #f4f4f4;
border: 1px solid #e5e5e5;
width: 354px;
height: 304px;
overflow: auto;
word-break: break-word;
}
.context strong {
text-transform:uppercase;
color:#91c4cc;
font-style:italic;
}
.context img {
float: left;
margin-right: 10px;
width: 150px;
border: solid 5px #eee;
transition: all 800ms;
}
.context img:hover {
filter:grayscale(70%);
transition:all 800ms;
}
.staffici {
background: #f4f4f4;
border: 1px solid #e5e5e5;
width:318px;
margin:10px;
padding-top:15px;
color: gray;
}
.tab {
width: 320px;
display:flex;
flex-wrap:wrap;
justify-content:space-evenly;
}
.tab button {
display: inline-block;
padding: 22px 16px;
margin: 5px 0 10 -1px;
width: 90px;
height: 94px;
border: 5px solid #eee;
text-align: left;
cursor: pointer;
font-size: 17px;
transition: all 800ms;
}
.tab button:before {
content: '';
display: none;
position: absolute;
margin: -51px 0px 0px -21px;
width: 134px;
height: 99px;
border-radius: 15px;
border: 1px solid #3c3a3b;
}
.blokinv {
width: 250px;
margin: auto;
margin-top: auto;
margin-top: 8px;
color: gray;
border: 1px solid #dddddd;
font: 11px Raleway;
text-align: center;
text-transform: uppercase;
padding: 27px 20px;
background: url(https://2img.net/imgur.com/99ZNjiV.png);
}
.tabcontent {
padding: 10px;
border: 1px solid #cacaca;
width: 284px;
height: 71px;
display: none;
background: #fafafa;
margin: -70px auto 0px auto;
overflow: auto;
text-align: justify;
color: gray;
position: relative;
font: 9px arial;
}
.tabcontent span {
text-transform: uppercase;
padding: 5px;
border-radius: 5px;
float: left;
margin: -3px 10px 0px 0px;
background: linear-gradient(to right, #5e7679, #91c4cc);
}
.tabcontent span a {
color: white;
}
.recru {
display:flex;
flex-wrap:wrap;
justify-content:center;
padding-top:10px;
}
.recru h1 {
margin: 0 auto;
text-align: center;
font: 11px calibri;
color: white;
width: 292px;
border-radius: 5px;
padding: 5px 0px;
text-transform: uppercase;
background: linear-gradient(to right, #5e7679, #91c4cc);
}
.grppa {
margin: 0px 3px 0px 3px;
padding: 10px;
width: 68px;
text-align: center;
margin-top: 10px;
color: white;
border-radius: 5px;
font: 9px Raleway;
text-transform: uppercase;
}
.thirdb {
background: #f4f4f4;
border: 1px solid #e5e5e5;
margin: 10px;
width: 160px;
padding: 10px;
}
.news {
font: 9px arial;
color: gray;
text-align: justify;
height: 190px;
overflow: auto;
padding-right: 5px;
word-break: break-word;
}
.news a {
color: #90c2ca;
font-weight: bold;
}
.topp {
text-align:center;
}
.topp h1 {
margin: 10px auto 10px auto;
text-align: center;
font: 11px calibri;
color: white;
width: 130px;
border-radius: 5px;
padding: 5px 0px;
text-transform: uppercase;
background: linear-gradient(to right, #5e7679, #91c4cc);
}
.topp span {
font-size:8px;
color:gray;
}
.gagna {
width: 374px;
padding: 10px;
margin: 10px;
background: #f4f4f4;
border: 1px solid #e5e5e5;
display:flex;
flex-wrap:wrap;
justify-content:space-evenly;
}
.vavagaagn {
width: 100px;
height: 70px;
overflow: hidden;
border-radius: 5px;
}
.vavagaagn img {
width:100%;
}
.vavagaagn:before {
content: '';
display: none;
position: absolute;
margin: -4px 0px 0px -4px;
width: 105px;
height: 75px;
border-radius: 15px;
border: 1px solid #3c3a3b;
}
.bouya {
width:150px;
}
.bouya h1 {
font: 15px Raleway;
text-transform: uppercase;
padding-bottom: 2px;
border-bottom: 2px solid #91c4cc;
letter-spacing: 1px;
color: #3c3a3b;
}
.bouya h2 {
color:grey;
font:9px Roboto Condensed;
text-align:justify;
font-style:italic;
border:none !important;
}
.iconga {
width:280px;
margin:0 auto;
}
.linkut {
width:478px;
background: #f4f4f4;
border: 1px solid #e5e5e5;
margin:10px;
padding:10px;
list-style:none;
text-align:right;
}
.linkut li {
border-bottom:1px solid #cacaca;
}
.linkut a {
font: 11px Arial;
text-transform: uppercase;
transition: all 800ms;
background: linear-gradient(to right, #5e7679, #91c4cc);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 1px;
}
.linkut a:hover {
transition:all 800ms;
letter-spacing:2px;
}
</style> <script>
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
/!\Le HTML, le CSS et le Javascript sont présents dans ce code, pour ainsi éviter de surcharger le CSS du forum.
les catégories
Remplacer l'intégralité de votre template index_box par le HTML :
- Code:
<div class="load-wrapp"><div class="load-3"><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cattitle">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="insidecat">
<div class="categories">
<div class="blok1">
<div class="statcat"><span class="th th-envelope"></span> {catrow.forumrow.TOPICS} s.</div>
<div class="statcat"><span class="th th-pencil"></span> {catrow.forumrow.POSTS} m.</div>
<!-- BEGIN avatar -->
<div class="lastpostva">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
<!-- END avatar -->
<div class="iconmess" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll 100%;"></div>
</div>
<div class="blok2">
<div class="forumtitle"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<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="forumdesc">{catrow.forumrow.FORUM_DESC}
</div>
<div class="sousfofo">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
</div>
</div>
</div>
<!-- END forumrow -->
<!-- END catrow -->
<div class="load-wrapp"><div class="load-3"><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<div class="linkbottom">
<!-- BEGIN switch_user_logged_in -->
<a href="{U_SEARCH_NEW}">Derniers messages</a>
<a href="{U_SEARCH_SELF}">Vos messages</a>
<!-- END switch_user_logged_in -->
<a href="{U_SEARCH_UNANSWERED}">Sans réponses</a>
<!-- BEGIN switch_user_logged_in -->
<a href="{U_MARK_READ}" accesskey="m">Marquer comme lus</a>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_on_index -->
<a href="{U_TODAY_ACTIVE}">Sujets du jour</a>
<a href="{U_TODAY_POSTERS}">Posteurs du jour</a>
<a href="{U_OVERALL_POSTERS}">Posteurs du forum</a>
<!-- BEGIN switch_delete_cookies -->
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">Supprimer les cookies</a>
<!-- END switch_delete_cookies -->
<!-- END switch_on_index --></div>
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.load-wrapp {
width: 100%;
height: 35px;
margin: 20px 0px 20px 0px;
}
.load-3 {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.load-3 .line:nth-last-child(3) {
animation: loadingC 1s 1.5s linear infinite;
background: #5f777a;
height: 15px;
width: 15px;
margin: 0px 10px;
}
.load-3 .line:nth-last-child(2) {
animation: loadingC 1s 1.6s linear infinite;
background: #7aa1a7;
height: 15px;
width: 15px;
margin: 0px 10px;
}
.load-3 .line:nth-last-child(1) {
animation: loadingC 1s 1.4s linear infinite;
background: #91c3cb;
height: 15px;
width: 15px;
margin: 0px 10px;
}
@keyframes loadingC {
0 {transform: translate(0,0);}
50% {transform: translate(0,15px);}
100% {transform: translate(0,0);}
}
.insidecat {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.cattitle {
text-align: center;
margin: 10px auto 0px auto;
padding: 20px 10px;
width: 900px;
background: linear-gradient(to right, #5e7679, #91c4cc);
background-size: 100%;
border-radius: 5px 5px 0px 0px;
}
.cattitle h2 {
font: 17px Raleway;
color: white;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
}
.categories {
margin: -10px auto 0px auto;
padding: 10px;
width: 900px;
border: solid 10px #fafafa;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
outline: 1px solid #cacaca;
outline-offset: -11px;
background: #eeeeee;
}
.blok1 {
width: 140px;
margin: 0 auto;
text-align: center;
padding: 10px;
background: #fafafa;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
border: 1px solid #e5e5e5;
}
.statcat {
width: 54px;
height: 20px;
color: white;
font: 8px arial;
text-transform: uppercase;
padding: 5px;
background: linear-gradient(to right, #5e7679, #91c4cc);
margin: 0px 5px 10px 0px;
}
.lastpostva {
width: 120px;
height: 80px;
overflow: hidden;
border-radius: 15px 15px 0px 0px;
}
.lastpostva img {
width:100%;
height: 100%;
object-fit: cover;
}
.iconmess {
background-size:100%;
width: 120px;
height: 20px;
margin-top: 10px;
}
.blok2 {
width: 708px;
background: #fafafa;
padding: 10px;
margin-left: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
border: 1px solid #e5e5e5;
}
.forumtitle, #postingbox .h3, #preview .h3, .panel .h3 {
padding: 5px 30px 5px 5px;
background: url(https://2img.net/imgur.com/99ZNjiV.png);
border-radius: 5px;
border: 1px solid #dedede;
text-align: right;
width: 100%;
margin-bottom: 10px;
color: #1a1a1a;
font:13px Raleway;
text-transform: uppercase;
}
.forumtitle a {
color: gray;
font: 19px Raleway;
text-transform: uppercase;
}
.lastpost {
width: 120px;
text-align: center;
font: 10px calibri;
color: #868686;
line-height: 26px;
padding-top: 20px;
border-right: solid 4px #cacaca;
text-transform: lowercase;
}
.lastpost a {
font: 11px Arial;
letter-spacing: 1px;
color: #5f787b;
text-transform: uppercase;
}
.forumdesc {
overflow: auto;
width: 250px;
height: 120px;
padding:0px 10px;
text-align: justify;
font: 10px arial;
color: #6b6b6b;
}
.sousfofo {
font-size: 0px;
width: 310px;
height: 120px;
padding: 5px;
overflow: auto;
text-align: right;
}
.sousfofo a {
font: 10px calibri;
text-transform: uppercase;
color: white;
background: linear-gradient(to right, #5e7679, #91c4cc);
padding: 5px;
margin: 0px 5px 10px 5px;
border-radius: 5px;
display: inline-block;
font-weight: bold;
font-style: italic;
}
.linkbottom{
text-align: center;
}
.linkbottom a {
background: linear-gradient(to right, #5e7679, #91c4cc);
padding: 5px;
margin: 0px 5px;
border-radius: 5px;
color: white;
font: 10px calibri;
text-transform: uppercase;
font-style: italic;
}
Les images des catégories
Catégorie :
- Code:
https://zupimages.net/up/21/39/dhrh.png
Catégorie - Nouveau :
- Code:
https://zupimages.net/up/21/39/g256.png
Forum :
- Code:
https://zupimages.net/up/21/39/dhrh.png
Forum - Nouveau :
- Code:
https://zupimages.net/up/21/39/g256.png
Jawn
# Re: [INDEX TURQUOISE] - Sam 2 Oct - 23:02
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">
<div class="modulco">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<h1>Connexion</h1>
<div>
<label>Votre nom d'utilisateur :</label>
<input class="input" class="inputbox fl_username" type="text" size="10" name="username"/>
</div>
<div>
<label>Votre mot de passe :</label>
<input class="input" type="password" size="10" name="password"/>
</div>
<br/><div style="width: 100%;height: 0px;margin-top: 10px;"></div>
<center><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}" /></center>
</form>
<script>$('form div .input').on('focus', function() {
if ($(this).val() === "") {
$(this).prev('label').animate({
fontSize: 13,
top: -25
}, 350);
}
});
$('form div .input').on('blur', function() {
if ($(this).val() === "") {
$(this).prev('label').animate({
fontSize: 17,
top: 0
}, 350);
}
});
// https://codepen.io/abdelrhman/pen/EXGKQN
// Code By Em An
// 4-4-2017</script>
</div>
</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 class="titleqeel">Qui déambule sur [nom du forum] ?</div>
<div class="qeelepi">
<div class="insideqeel">
<div class="premier">
<div id="coencem">{LOGGED_IN_USER_LIST}</div>
<script type="text/javascript">document.getElementById('coencem').innerHTML=document.getElementById('coencem').innerHTML.replace(/Utilisateurs enregistrés :/g,"MEMBRES EN LIGNE : ");</script>
<div id="totalus">{TOTAL_USERS_ONLINE}</div>
<script type="text/javascript">document.getElementById('totalus').innerHTML=document.getElementById('totalus').innerHTML.replace(/Il y a en tout/g,"AU TOTAL, IL Y A : ");</script>
<h1>Les crédits</h1>
<div class="creditsepi">
<strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. <em>Maecenas lobortis ornare</em> magna, in porta nisl finibus sit amet. Cras vitae tincidunt nibh, ut faucibus risus. Praesent dictum lectus vel dolor placerat, at sollicitudin risus elementum. Donec lacinia, lectus quis rutrum porttitor, augue ipsum faucibus ligula
</div>
</div>
<div class="second">
<h1>Souhaitons la bienvenue à</h1>
<div id="newmem">{NEWEST_USER}</div>
<script type="text/javascript">document.getElementById('newmem').innerHTML=document.getElementById('newmem').innerHTML.replace(/L'utilisateur enregistré le plus récent est /g," ");</script>
<div class="groups_epicode">
<div class="group"><span class="th th-bookmark-1"></span> groupe</div>
<div class="group"><span class="th th-notebook"></span> groupe</div>
<div class="group"><span class="th th-code"></span> groupe</div>
<div class="group"><span class="th th-picture"></span> groupe</div>
<div class="group"><span class="th th-umbrella"></span> groupe</div>
<div class="group"><span class="th th-microphone"></span> groupe</div>
<div class="group"><span class="th th-worldwide-o"></span> groupe</div>
<div class="group"><span class="th th-key"></span> groupe</div></div>
</div>
<div class="troisieme">
<div id="derniersco">{L_CONNECTED_MEMBERS}</div>
<script type="text/javascript">document.getElementById('derniersco').innerHTML=document.getElementById('derniersco').innerHTML.replace(/Membres connectés au cours des 72 dernières heures :/g,"ILS SONT PASSÉS PAR LÀ : ");</script>
<div id="ttpost">{TOTAL_POSTS}</div>
<script type="text/javascript">document.getElementById('ttpost').innerHTML=document.getElementById('ttpost').innerHTML.replace(/Nos membres ont posté un total de /g," ");</script>
<div id="ttuser">{TOTAL_USERS}</div>
<script type="text/javascript">document.getElementById('ttuser').innerHTML=document.getElementById('ttuser').innerHTML.replace(/Nous avons /g," ");</script>
<script type="text/javascript">document.getElementById('ttuser').innerHTML=document.getElementById('ttuser').innerHTML.replace(/enregistrés/g," ");</script>
<h1>les top sites</h1>
<div class="frmstaff">
<a target="_blank" href="/" title="/"><span class="th th-stars"></span></a>
<a target="_blank" href="/" title="/"><span class="th th-skull-o"></span></a>
<a target="_blank" href="/" title="Wooruru/"><span class="th th-picture"></span></a>
<a target="_blank" href="/" title="/"><span class="th th-diamond"></span></a>
<a target="_blank" href="/" title="/"><span class="th th-earth"></span></a>
</div>
</div>
</div>
</div>
<!-- END disable_viewonline -->
{AUTO_DST}
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.qeelepi {
background: linear-gradient(to right, #5e7679, #91c4cc);
margin: 20px auto 0px auto;
width: 900px;
padding: 10px;
border: solid 10px #fafafa;
outline: 1px solid #cacaca;
}
.insideqeel {
background-image: url(https://2img.net/imgur.com/99ZNjiV.png);
padding: 10px;
border-radius: 15px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.titleqeel {
padding: 20px;
background: url(https://2img.net/imgur.com/99ZNjiV.png);
border-radius: 5px;
text-align: center;
width: 95%;
margin: 30px auto 0px auto;
color: grey;
font: 20px Raleway;
text-transform: uppercase;
border: 1px solid #cacaca;
}
.premier, .troisieme {
width: 280px;
}
.premier h1 {
color: #3c3a3b;
font: 8px Arial;
text-transform: uppercase;
border-bottom: 1px solid #3c3a3b;
margin: 18px 0px 18px 0px;
padding-bottom: 5px;
text-align: right;
letter-spacing: 2px;
}
#coencem {
padding: 8px;
background: #fafafa;
border: 1px solid #cacaca;
font: 9px Raleway;
color: grey;
height: 80px;
overflow: auto;
text-align: justify;
}
#coencem br {
display:none;
}
#totalus {
background: linear-gradient(to right, #5e7679, #91c4cc);
padding: 5px 15px;
margin: 10px 0px;
border-radius: 5px;
text-align: right;
color: white;
font: 8px arial;
text-transform: uppercase;
font-style: italic;
}
.troisieme h1 {
color: #3c3a3b;
font: 8px Arial;
text-transform: uppercase;
border-bottom: 1px solid #3c3a3b;
margin: 18px 0px 18px 0px;
padding-bottom: 5px;
text-align: left;
letter-spacing: 2px;
}
.creditsepi {
height: 38px;
padding: 0px 10px 10px 10px;
overflow: auto;
font: 7px arial;
text-transform: uppercase;
color: #afafaf;
text-align: justify;
}
.creditsepi strong {
color: #92c5cd;
border-bottom: dotted 2px #a4cad1;
}
.creditsepi em {
font-size: 8px;
font-weight: bold;
color: #6f6f6f;
}
.second {
width: 280px;
padding:0px 20px;
text-align: center;
}
.second h1 {
color: #3c3a3b;
font: 8px Arial;
text-transform: uppercase;
border-bottom: 1px solid #3c3a3b;
margin: 18px 0px 18px 0px;
padding-bottom: 5px;
letter-spacing: 2px;
}
#newmem a {
font: 15px Montserrat;
text-transform: uppercase;
}
#derniersco {
padding: 8px;
background: #fafafa;
border:1px solid #cacaca;
font: 9px Raleway;
color: grey;
height: 80px;
overflow: auto;
text-transform: uppercase;
margin: 0px auto 10px 0px;
text-align: justify;
}
#ttpost {
background: linear-gradient(to right, #5e7679, #91c4cc);
border-radius: 5px;
text-align: center;
width: 130px;
display: inline-block;
font: 9px Montserrat;
color: white;
text-transform: uppercase;
padding: 10px;
}
#ttuser {
background: linear-gradient(to right, #5e7679, #91c4cc);
border-radius: 5px;
text-align: center;
width: 130px;
display: inline-block;
margin-left: 20px;
font: 9px Montserrat;
color: white;
text-transform: uppercase;
padding: 10px;
}
.frmstaff {
text-align: center;
}
.frmstaff span {
margin: 0px 5px;
font-size: 28px;
color: black;
}
.groups_epicode {
padding-top: 12px;
}
.group {
font: 9px arial;
text-transform: uppercase;
display: inline-block;
padding: 5px;
width: 115px;
text-align: center;
margin: 6px 5px 5px 0px;
}
.group:nth-child(1) {
color: #2a9d8e;
border-left: 4px solid #2a9d8e;
border-right: 4px solid #2a9d8e;
}
.group:nth-child(2) {
color: #50b660;
border-left: 4px solid #50b660;
border-right: 4px solid #50b660;
}
.group:nth-child(3) {
color: #D6BC57;
border-left: 4px solid #D6BC57;
border-right: 4px solid #D6BC57;
}
.group:nth-child(4) {
color: #dc94aa;
border-left: 4px solid #dc94aa;
border-right: 4px solid #dc94aa;
}
.group:nth-child(5) {
color: #aa7ebb;
border-left: 4px solid #aa7ebb;
border-right: 4px solid #aa7ebb;
}
.group:nth-child(6) {
color: #5577a4;
border-left: 4px solid #5577a4;
border-right: 4px solid #5577a4;
}
.group:nth-child(7) {
color: #f57d27;
border-left: 4px solid #f57d27;
border-right: 4px solid #f57d27;
}
.group:nth-child(8) {
color: #808080;
border-left: 4px solid #808080;
border-right: 4px solid #808080;
}
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 TURQUOISE] - Sam 2 Oct - 23:07
la mise en forme
Ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.panel {
box-shadow: none !important;
background: none !important;
}
a{text-decoration:none;}
a:hover{text-decoration:none !important;}
body {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 3px;
background: #f4f4f4;
}
::-webkit-scrollbar-thumb {
background-color: #d1cebd;
border-radius: 0px;
}
body, html {
background-image: url(https://2img.net/imgur.com/99ZNjiV.png);
}
.haut {
position: fixed;
bottom: 150px;
right: 40px;
z-index: 999;
}
.bas {
position: fixed;
bottom: 90px;
right: 40px;
z-index: 999;
}
.haut span {
font-size: 20px;
transition: 1s linear;
color: #343233;
}
.bas span {
font-size: 20px;
transition: 1s linear;
color: #343233;
}
.button, .button1, .button2, input[type="submit"] {
background: linear-gradient(to right, #5e7679, #91c4cc) !important;
border-radius: 15px !important;
box-shadow: none !important;
color: white;
font: 9px arial;
text-transform: uppercase;
display: inline-block;
overflow: hidden;
padding: 9px 18px;
position: relative;
text-decoration: none;
vertical-align: middle;
width: auto!important;
}
.button, .button1, .button2, input[type="submit"]:hover {
background: linear-gradient(to right, #5e7679, #91c4cc) !important;
color: white !important;
font: 10px arial !important;
letter-spacing:1px;
text-transform: uppercase;
}
#wrap {
padding: 58px 0px !important;
}
#page-footer {
border: 1px solid #cacaca;
border-radius: 5px;
text-transform: uppercase;
font: 9px arial;
margin: 20px auto;
background: #fafafa !important;
color: #f9f9f9 !important;
}
#page-footer a {
color: #828282;
font: 8px Arial;
text-transform: uppercase;
}
.footerbar-system {
padding: 5px !important;
}
#page-footer .copyright {
color: #000 !important;
}
.footerbar-system .rightside {
margin: 0;
text-align: right;
color: black !important;
font-size: 9px;
}
#page-footer .copyright .wrap {
padding:0px !important;
}
.copyright-body {
border-color: #d0d0d0 !important;
border-style: solid;
border-width: 1px 0 0;
margin: 0px 0 0 0 !important;
padding: 5px 0 0 0 !important;
width: 95%;
margin: auto !important;
}
Pour avoir un joli scroll de haut en bas avec les boutons, il vous faudra ajouter ceci dans les Javascripts. Pour ceci, suivez le chemin : Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript. Créez un nouveau JS et cochez bien, "Sur toutes les pages" après lui avoir donné un nom :
- Code:
$(function() {
$('a[href*="#"]:not([href="#"]):not(.pasdejs)').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});]
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|