Jawn
# INDEX JAUNE ET BLANC - Ven 13 Nov - 21:01
Remplacez l'intégralité de votre template overall_header par :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<link rel="icon" type="image/png" href="https://66.media.tumblr.com/3f94606f6d875f2ab4e850f37d4b8e70/tumblr_inline_p94wgpLwcX1rhwzwl_75sq.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}
<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="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"/>
<!--FICHES LS/COMMANDE---> <link href="https://www.aht.li/2973764/fiches.css" rel="stylesheet"/>
<!--FICHE DE PREZ--> <link href="https://www.aht.li/3403289/fichedeprez.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');
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
<!-- END google_analytics_code_bis -->
ga('send', 'pageview');
<!-- BEGIN google_analytics_code_bis -->
ga('bis.send', 'pageview');
<!-- END google_analytics_code_bis -->
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
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>
<div class="banniere_epicode">
<div class="title_epicode"><a href="/"><span class="th th-key-o"></span> nom du forum</a><br/>
<div class="presentation_epicode">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim egestas enim nec tempus. Aliquam erat volutpat. Vivamus in ligula leo. Curabitur porta ligula metus, non blandit purus fermentum eget. Aliquam commodo molestie semper. Nullam cursus porta mauris, eu congue tortor tincidunt vitae. Mauris consectetur pulvinar lobortis. Vestibulum eleifend enim et ante molestie porttitor. Vestibulum eget tempus urna, in porttitor urna. Aenean in elit vestibulum mi facilisis aliquam.
Sed sodales, eros in porttitor dapibus, metus quam blandit est, ac blandit diam odio rutrum lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sit amet lacus mollis, tempus mauris id, facilisis velit. Donec egestas consequat nibh, auctor ultricies purus pulvinar eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vehicula risus at massa gravida tempor. Nulla mollis leo at arcu bibendum, et tempor turpis tempor. Nulla nisl arcu, vehicula vel ornare vitae, tincidunt vel turpis. Praesent aliquet sit amet neque id hendrerit. Mauris hendrerit ultricies gravida. Nam tempus ante et felis rutrum fringilla. Sed vitae ipsum turpis. Sed hendrerit odio et laoreet tempor. Aliquam erat volutpat.
</div>
<div class="linksut">
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
</div>
<div class="info_membre">
<div class="name_member">entre donc, <span class="js-username"></span></div>
<div class="js-avatar"></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 -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<div id="page-header">
<div class="navigation_epicode navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</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 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:
.haut {
position: fixed;
bottom: 150px;
right: 20px;
z-index: 999;
}
.bas {
position: fixed;
bottom: 90px;
right: 20px;
z-index: 999;
}
.haut span {
font-size: 20px;
transition: 1s linear;
color: #cdb65c;
}
.bas span {
font-size: 20px;
transition: 1s linear;
color: #cdb65c;
}
.banniere_epicode {
height: 400px;
background-image: url(https://imgur.com/N2Ehhj9.png);
border-bottom: solid 5px #e8e8e8;
}
.banniere_epicode img {
width: 100%;
height:400px;
}
.title_epicode {
width: 100%;
text-align: center;
position: relative;
top: 10%;
}
.title_epicode a {
color: #e8e8e8;
font: 75px dontlook;
font-style: italic;
}
.title_epicode span {
color: #cdb65c;
}
.title_epicode span:hover {
animation: tada 900ms infinite;
}
.presentation_epicode {
padding: 10px;
overflow: auto;
text-align: justify;
color: #0d0c0b;
width: 24%;
margin: 0 auto;
height: 143px;
background: rgba(200, 200, 200, 0.5);
font: 11px calibri;
line-height: 12px;
display: inline-block;
}
.linksut {
width: 200px;
display: inline-block;
vertical-align: top;
padding-left: 20px;
}
.lesliens {
outline: 1px solid #000;
outline-offset: -2px;
padding: 4px;
background: #cdb65c;
margin-bottom: 6px;
}
.lesliens a {
font: 9px calibri;
text-transform: uppercase;
color: #0b0a0a;
display: block;
}
.info_membre {
display: inline-block;
vertical-align: top;
padding-left: 15px;
margin-top: -10px;
width: 7%;
height: 145px;
text-align: center;
}
.name_member {
color: #7b7b7b;
font: 9px calibri;
text-transform: uppercase;
width: 100px;
margin: 0 auto;
}
.js-avatar {
width: 100px;
height: 116px;
border: 5px solid #cdb65c;
overflow: hidden;
margin: 16px auto;
}
.js-avatar img {
width: 100% !important;
height: auto !important;
filter: grayscale(40%);
}
.navigation_epicode {
z-index: 999;
background: #cdb65c;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 5px 0;
position: fixed;
top: 0;
width: 100%;
box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #e8e8e8;
}
.navigation_epicode a {
color:black;
text-transform:uppercase;
font:9px calibri;
letter-spacing:1px;
font-weight:800;
padding:0px 5px 0px 5px;
}
.navigation_epicode img {
display:none;
}
Jawn
# Re: INDEX JAUNE ET BLANC - Ven 13 Nov - 21:03
La page d'accueil
Rendez-vous dans : Panneau d'administration > Affichage > Page d'accueil > Généralité et dans le cadre "message sur la page d'accueil", remplacez par :
- Code:
<div class="fond_pa_epicode">
<div class="premier_bloc">
<div class="title_pa">
Notre staff
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="text">
<div class="tete_staff_epicode">
<img src="https://via.placeholder.com/80" />
</div>
<div class="name_staffeux">
Nom & Prénom
<div class="fonction_staffeux">
Fonction
</div>
<div class="mp_staffeux">
<a target="_blank" href="/"><span class="th th-envelope"></span></a>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class="text">
<div class="tete_staff_epicode">
<img src="https://via.placeholder.com/80" />
</div>
<div class="name_staffeux">
Nom & Prénom
<div class="fonction_staffeux">
Fonction
</div>
<div class="mp_staffeux">
<a target="_blank" href="/"><span class="th th-envelope"></span></a>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class="text">
<div class="tete_staff_epicode">
<img src="https://via.placeholder.com/80" />
</div>
<div class="name_staffeux">
Nom & Prénom
<div class="fonction_staffeux">
Fonction
</div>
<div class="mp_staffeux">
<a target="_blank" href="/"><span class="th th-envelope"></span></a>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class="text">
<div class="tete_staff_epicode">
<img src="https://via.placeholder.com/80" />
</div>
<div class="name_staffeux">
Nom & Prénom
<div class="fonction_staffeux">
Fonction
</div>
<div class="mp_staffeux">
<a target="_blank" href="/"><span class="th th-envelope"></span></a>
</div>
</div>
</div>
</div>
</div><br />
<div style="text-align:center;margin-top:-36px;position:relative;">
<span class="dot" onclick="currentSlide(1)"> </span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span>
</div>
</div>
<div class="second_bloc">
<div class="presentation_contexte_epicode">
</div>
<div class="interne_presentation">
<span>Event en cours</span><br /><a href="/">Lien de l'event</a>
</div>
<div class="title_pa">
Event sur le forum !
</div>
</div>
<div class="troisieme_bloc">
<div class="title_pa">
Top copains
</div>
<div class="top_partos">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a>
</div>
</div>
<div class="separation_pa">
</div>
<div class="quatre_block">
<div class="title_pa">
Nous recrutons
</div>
<div style="background:#d6bc57;" class="total_recrut">
<em>groupe</em><br /><span class="th th-code"></span>
</div>
<div style="background:#aa7ebb;" class="total_recrut">
<em>groupe</em><br /><span class="th th-umbrella"></span>
</div>
<div style="background:#5577a4;" class="total_recrut">
<em>groupe</em><br /><span class="th th-microphone"></span>
</div>
<div style="background:#f57d27;" class="total_recrut">
<em>groupe</em><br /><span class="th th-worldwide-o"></span>
</div>
</div>
<div class="blok_news">
<div class="date_new">
xx/xx/20
</div>
<div class="txt_news">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim egestas enim nec tempus. Aliquam erat volutpat. Vivamus in ligula leo.
</div>
<div class="date_new">
xx/xx/20
</div>
<div class="txt_news">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim egestas enim nec tempus. Aliquam erat volutpat. Vivamus in ligula leo.
</div>
<div class="date_new">
xx/xx/20
</div>
<div class="txt_news">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim egestas enim nec tempus. Aliquam erat volutpat. Vivamus in ligula leo.
</div>
</div>
<div class="sixieme_bloc">
<div class="linku_pa">
<a target="_blank" href="/">Membre du mois</a>
</div>
<div class="linku_pa">
<a target="_blank" href="/">Rp du mois</a>
</div>
<div class="join_us">
<a target="_blank" href="/"><img src="https://via.placeholder.com/200x45" /></a>
</div>
</div>
</div>
<div class="crown_pa">
<div class="title_pa2">
Nos partenaires
</div><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a><a href="/" target="_blank"><img src="https://via.placeholder.com/50" /></a>
</div>
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.fond_pa_epicode {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
}
.premier_bloc {
width:300px;
}
.title_pa {
background-image: url(https://imgur.com/Q4Ochhl.png);
background-size: 100%;
margin-bottom: 15px;
padding: 10px;
text-align: center;
font: 12px calibri;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
color: #cdb65c;
text-shadow: 1px 1px 1px black;
box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
}
.title_pa2 {
background-image: url(https://imgur.com/QnxQARM.png);
background-size: 100%;
margin-bottom: 15px;
padding: 3px;
text-align: center;
font: 12px calibri;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
color: #cdb65c;
text-shadow: 1px 1px 1px black;
box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
}
.slideshow-container {
width: 300px;
height: 110px;
background: #e8e8e8;
position: relative;
margin: 0 auto;
border: solid 1px #cfcfcf;
overflow: hidden;
padding-bottom: 10px;
}
.text {
color:black;
font-size: 15px;
padding: 8px 12px;
width: 100%;
text-align: center;
text-align:justify;
}
.dot {
cursor: pointer;
height: 7px;
width: 50px;
margin: 0 2px;
background-color: #cdb65c;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #ac953c;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.tete_staff_epicode {
width:80px;
height:80px;
overflow:hidden;
border-radius:100%;
border:solid 5px #cdb65c;
display:inline-block;
}
.tete_staff_epicode img {
width: 100%;
object-fit: cover;
}
.name_staffeux {
display:inline-block;
vertical-align:top;
text-align:center;
padding-left:10px;
width:170px;
font:12px dontlook;
color:1c1d1c;
text-transform:lowercase;
}
.fonction_staffeux {
font:9px calibri;
text-transform:uppercase;
letter-spacing:1px;
border-top:solid 1px #1c1d1c;
padding-top:5px;
}
.mp_staffeux {
padding-top: 8px;
font-size: 22px;
}
.mp_staffeux a{
color:#1c1d1c;
}
.mp_staffeux span {
animation: tada 1500ms infinite;
}
.second_bloc {
width:350px;
margin:0px 15px 0px 15px;
}
.presentation_contexte_epicode {
background-image: url(https://www.zupimages.net/up/20/08/3cjp.png);
opacity: 0.5;
background-size: 100%;
background-position: center;
border: solid 1px #9e9e9e;
height: 110px;
margin-bottom: 15px;
}
.interne_presentation {
height: 90px;
position: absolute;
background: rgba(232, 232, 232, 0.6);
padding: 10px;
width: 325px;
margin: -115px auto -115px 15px;
border: solid 1px #cbcbcb;
text-align: center;
}
.interne_presentation span {
font: 15px dontlook;
color: #1c1c1c;
}
.interne_presentation a{
font: 12px calibri;
text-transform: uppercase;
letter-spacing: 2px;
}
.troisieme_bloc {
width: 210px;
}
.top_partos {
text-align:center;
}
.top_partos img {
margin: 1px;
}
.separation_pa {
width: 800px;
height: 1px;
background: #c3c3c3;
margin: -4px 0px 10px 0px;
}
.quatre_block {
width:300px;
}
.total_recrut {
display: inline-block;
vertical-align: top;
border-radius: 10px;
width: 68px;
height: 52px;
margin: -5px 2px;
padding: 10px;
color: #1c1c1c;
text-align: center;
font: 8px calibri;
text-transform: uppercase;
box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
}
.total_recrut em {
font-weight: bold;
font-style: normal !important;
}
.total_recrut span {
font-size:20px;
padding-top:2px;
}
.blok_news {
background-image: url(https://imgur.com/tBvRBS3.png);
background-size: 100%;
width: 360px;
height: 96px;
margin: 0px 15px 0px 15px;
padding: 10px;
overflow: auto;
}
.date_new {
width: 60px;
border-radius: 5px;
padding: 5px;
background: #cdb65c;
font: 11px calibri;
text-align: center;
color: #1c1c1c;
float: left;
margin: 0px 15px 5px 0px;
box-shadow: 0 5px 10px -8px black;
font-weight: bold;
}
.txt_news {
text-align:justify;
font:10px calibri;
margin-left:10px;
color:#e8e8e8;
padding-bottom:5px;
}
.sixieme_bloc {
width:200px;
text-align:center;
}
.linku_pa {
padding: 3px;
text-shadow: 1px 1px 1px black;
box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
}
.linku_pa a {
font: 11px calibri;
text-transform: uppercase;
color: #cdb65c;
display: block;
}
.linku_pa:nth-child(1) {
background-image: url(https://imgur.com/Q4Ochhl.png);
margin-bottom: 4px;
}
.linku_pa:nth-child(2) {
background-image:url(https://imgur.com/fjlOJZN.png);
}
.crown_pa {
text-align: center;
padding-top: 20px;
}
.crown_pa img {
box-shadow: 0 5px 10px -9px rgba(0, 0, 0, 0.8);
margin: 2.2px;
border: solid 2px #cdb65c;
width:50px;
}
.join_us {
padding-top: 12px;
}
.join_us img {
width: 200px;
height: 45px;
}
Jawn
# Re: INDEX JAUNE ET BLANC - Ven 13 Nov - 21:07
Les catégories
Remplacer l'intégralité de votre template index_box par le HTML :
- Code:
<div class="categorie_epicode"><!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="title_categorie">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="corps_categorie">
<div class="newmessage" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll"></div>
<div class="blokdes">
<div class="titalcat"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="description_cat">{catrow.forumrow.FORUM_DESC}</div>
<div class="stats">{catrow.forumrow.TOPICS} {L_TOPICS} - {catrow.forumrow.POSTS} {L_POSTS}</div>
</div>
<!-- BEGIN avatar --><div class="lastpostavatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div><!-- END avatar -->
<div class="lasblok">
<div class="lasttopipic"><!-- 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="sousfrms">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
<!-- END tablefoot -->
<!-- END catrow -->
<!-- BEGIN switch_on_index -->
<!-- END switch_on_index -->
</div>
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.categorie_epicode {
padding: 5px;
}
.title_categorie {
width: 100%;
text-align: center;
background-image: url(https://imgur.com/QnxQARM.png);
background-size: 100%;
border-radius: 30px 30px 0px 0px;
padding: 15px;
}
.title_categorie h2 {
color: #9c9c9c;
font: 40px dontlook;
font-style: italic;
text-shadow: 2px 2px 2px rgba(56, 56, 56, 0.8);
position: relative;
z-index: 9;
}
.sousligne {
font: 10px calibri !important;
text-shadow: 1px 1px 0px #77682c;
margin-top: -20px;
text-transform: uppercase;
color: #cdb65c;
z-index: -1;
position: relative;
}
.corps_categorie {
padding: 10px;
width: 100%;
border: 5px solid #dadada;
margin-bottom: 8px;
height: 160px;
display: flex;
flex-wrap: wrap;
}
.newmessage {
height: 130px;
width: 50px;
background: #dccc8f;
border: 5px solid #cdb65c;
}
.blokdes {
width: 50%;
}
.titalcat {
background-image: url(https://imgur.com/u1Tt9M9.png);
background-size: 100%;
text-align: center;
margin-left: 10px;
padding: 3px;
}
.titalcat a {
font: 10px calibri;
text-transform: uppercase;
color: black;
}
.description_cat {
height: 87px;
padding: 10px;
margin-left: 10px;
border: solid 4px #e0e0e0;
overflow: auto;
color: #4e4e4e;
font: 10px calibri;
text-align: justify;
line-height: 11px;
}
.stats {
padding: 3px;
color: black;
text-align: center;
font: 9px calibri;
text-transform: uppercase;
background: #cdb65c;
margin: 4px 0px 0px 10px;
border: solid 1px #b7b7b7;
}
.lastpostavatar {
height: 130px;
width: 110px;
overflow: hidden;
margin-left: 10px;
border: 5px solid #d2d2d2;
}
.lastpostavatar img {
width:100%;
filter:grayscale(40%);
}
.lasblok {
width: 268px;
}
.lasttopipic {
padding: 5px;
color: black;
text-align: center;
font: 9px calibri;
text-transform: uppercase;
background: #cdb65c;
margin: 4px 0px 0px 10px;
border: solid 1px #b7b7b7;
}
.lasttopipic br {
display:none;
}
.lasttopipic strong {
padding-left:5px;
}
.lasttopipic a{
padding-right: 3px;
}
.sousfrms {
height: 105px;
padding: 10px;
margin-left: 10px;
border: solid 4px #dadada;
overflow: auto;
color: #4e4e4e;
font: 10px calibri;
text-align: justify;
line-height: 11px;
background-image: url(https://imgur.com/An3ErbL.png);
background-size: 100%;
font-size: 0px;
}
.sousfrms a {
display: block;
width: 100%;
height: 17px;
background: #e2e2e2;
margin-bottom: 0px;
margin-top: -6px;
text-align: center;
text-decoration: none;
border: white 1px solid;
font: 9px calibri;
text-transform: uppercase;
line-height: 14px;
color: #000000;
}
.links_epicode {
text-align: center;
height: 30px;
margin-top: 40px;
border-top: solid 1px #ececec;
padding: 20px 0px 20px 0px;
}
.links_epicode a {
color: grey;
font-size: 16px;
text-transform: uppercase;
padding: 0px 20px 0px 20px;
}
Pensez aussi à remplacer votre template index_body par ceci :
- 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 class="links_epicode">
<a target="_blank" href="{U_SEARCH_NEW}" title="VOIR LES NOUVEAUX MESSAGES DEPUIS VOTRE DERNIÈRE VISITE"><span class="th th-fire-o"></span></a>
<a target="_blank" href="{U_SEARCH_SELF}" title="voir ses messages"><span class="th th-box-o"></span></a>
<a target="_blank" href="{U_SEARCH_UNANSWERED}" title="voir les messages sans réponses"><span class="th th-chat-bubbles"></span></a>
<a target="_blank" href="{U_TODAY_ACTIVE}" title="sujets actifs du jour"><span class="th th-calendar-2-o"></span></a>
<a target="_blank" href="{U_TODAY_POSTERS}" title="top 20 des posteurs du jour"><span class="th th-crystal-ball-o"></span></a>
<a target="_blank" href="{U_OVERALL_POSTERS}" title="top 20 des posteurs du forum"><span class="th th-calculator-o"></span></a>
<a href="{U_MARK_READ}" accesskey="m" title="marquer tous les forums comme lus"><span class="th th-check-o"></span></a>
<!-- BEGIN switch_delete_cookies -->
<a target="_blank" href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow" title="supprimer tous les cookies"><span class="th th-trash-o"></span></a>
<!-- END switch_delete_cookies -->
</div>
{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}
Cela permettra de retirer le QEEL de base de Forumactif afin de configurer celui prévu dans un autre template.
Les images des catégories
Catégorie :
- Code:
https://imgur.com/ZL6YS2i.png
Catégorie - Nouveau :
- Code:
https://imgur.com/iyDGsS0.png
Catégorie - Verrouillé :
- Code:
https://imgur.com/Dp8TOUB.png
Forum :
- Code:
https://imgur.com/ZL6YS2i.png
Forum - Nouveau :
- Code:
https://imgur.com/iyDGsS0.png
Forum - Verrouillé :
- Code:
https://imgur.com/Dp8TOUB.png
Jawn
# Re: INDEX JAUNE ET BLANC - Ven 13 Nov - 21:19
Le qui est en ligne et footer
Remplacez l'intégralité de votre template overall_footer_end par :
- Code:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
<div>
<ul>
<li>
<!-- END html_validation -->
</li>
</ul>
<!-- BEGIN switch_footer_links -->
<ul class="footerbar-user">
<li><i class="ion-clock"></i>{CURRENT_TIME}</li>
<!-- BEGIN footer_link -->
<li class="rightside">
<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">
{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}
</a>
</li>
<!-- END footer_link -->
</ul>
<!-- END switch_footer_links -->
</div>
<div class="copyright">
<div class="wrap">
<div class="copyright-body">
{ADMIN_LINK}
</div>
</div>
</div>
</div>
{PROTECT_FOOTER}
<!-- BEGIN disable_viewonline -->
<div class="fondqeel" style="height:220px">
<div class="totalstats">
<div class="total_users">{TOTAL_USERS_ONLINE}</div>
<div id="members_online">{LOGGED_IN_USER_LIST}</div>
<script type="text/javascript">
document.getElementById('members_online').innerHTML=document.getElementById('members_online').innerHTML.replace(/Utilisateurs enregistrés :/g," ");</script>
<script type="text/javascript">
document.getElementById('members_online').innerHTML=document.getElementById('members_online').innerHTML.replace(/Moteurs de recherche :/g," ");</script>
</div>
<div class="middlestat">
<div class="totalsta">{TOTAL_POSTS} <div class="mess">messages</div></div>
<div class="totalsta">{TOTAL_USERS}<div class="mess">membres</div></div>
</div>
<div class="newmember"><div class="welcomedude">bienvenue à</div>{NEWEST_USER}</div>
</div>
<div class="second_qeel">
<div id="last_co">{L_CONNECTED_MEMBERS}</div>
<script type="text/javascript">
document.getElementById('last_co').innerHTML=document.getElementById('last_co').innerHTML.replace(/Membres connectés au cours des 48 dernières heures :/g," ");
</script>
<div class="groups_epicode">
<div class="group"><span class="th th-bookmark-1"></span> xx groupe</div>
<div class="group"><span class="th th-notebook"></span> xx groupe</div>
<div class="group"><span class="th th-code"></span> xx groupe</div>
<div class="group"><span class="th th-picture"></span> xx groupe</div>
<div class="group"><span class="th th-umbrella"></span> xx groupe</div>
<div class="group"><span class="th th-microphone"></span> xx groupe</div>
<div class="group"><span class="th th-worldwide-o"></span> xx groupe</div>
<div class="group"><span class="th th-key"></span> xx groupe</div></div>
<div class="footer_total">
<div class="title_pa2">Coups de coeur</div>
<a target="_blank" href="/" title="nom du forum"><span class="th th-star"></span></a>
<a target="_blank" href="/" title="nom du forum"><span class="th th-star"></span></a>
<a target="_blank" href="/" title="nom du forum"><span class="th th-star"></span></a>
<a target="_blank" href="/" title="nom du forum"><span class="th th-star"></span></a>
<a target="_blank" href="/" title="nom du forum"><span class="th th-star"></span></a>
<div class="credits_epicode">
<b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit. Sed dignissim egestas enim nec tempus. Aliquam erat volutpat. Vivamus in ligula leo. Curabitur porta ligula metus, non blandit purus fermentum eget. Aliquam commodo molestie semper. Nullam cursus porta mauris, eu congue tortor tincidunt vitae. Mauris consectetur pulvinar lobortis. Vestibulum eleifend enim et ante molestie porttitor. Vestibulum eget tempus urna, in porttitor urna. Aenean in elit vestibulum mi facilisis aliquam.
</div>
</div>
</div>
<div class="basdepage">(:copyright:)EPSILON : Tous droits réservés, ne pas copier ou reproduire le design.</div>
<!-- END disable_viewonline -->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(window).scroll(function() {
var header_top = $('#headerbar-top');
if (header_top.hasClass('w-toolbar')) {
if ($(window).scrollTop() >= 42) {
header_top.addClass('is-sticky');
} else {
header_top.removeClass('is-sticky');
}
} else {
if ($(window).scrollTop() >= 1) {
header_top.addClass('is-sticky');
} else {
header_top.removeClass('is-sticky');
}
}
});
});
//]]>
</script>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready( function() {
$('div.fb-login-button, span.fb-login-button').attr({
"data-scope": "{switch_facebook_login.FB_SCOPE}",
"data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
"data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
"data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
"data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
});
$('div.fb-login-button, span.fb-login-button').each(function() {
if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
$(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
}
if($(this).html() == '') {
$(this).html('{switch_facebook_login.FB_LABEL}');
}
});
FB.init({
"appId" : "{switch_facebook_login.FB_APP_ID}",
"cookie" : {switch_facebook_login.FB_COOKIE},
"xfbml" : {switch_facebook_login.FB_XFBML},
"oauth" : {switch_facebook_login.FB_OAUTH},
"version" : "{switch_facebook_login.FB_VERSION}"
});
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
function onLoginFB() {
window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
}
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
$(document).ready( function() {
$('div.ti-connect, span.ti-connect').attr({
"data-loc": "{switch_topicit_connect.TOPICIT_URL}",
"data-login": "{switch_topicit_connect.BOARD_LOGIN}",
"data-version": "{switch_topicit_connect.TOPICIT_VERSION}",
"data-lang": "{switch_topicit_connect.BOARD_LANG}"
});
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'topicit-connect'));
});
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
fa_endpage();
//]]>
</script>
</body>
</html>
Remplacez l'intégralité de votre template overall_footer_begin par :
- Code:
<!-- BEGIN html_validation -->
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<!-- END html_validation -->
</div>
</div>
</div>
</div>
<div id="{ID_RIGHT}">
<!-- BEGIN giefmod_index2 -->
{giefmod_index2.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index2 -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page-footer">
<div class="wrap">
<ul class="footerbar-system">
<li class="footer-home">
<a class="icon-home" href="{U_INDEX}" accesskey="h"><i class="ion-ios-home"></i>{L_HOME}</a>
</li>
<li class="rightside">
<!-- BEGIN html_validation -->
</li>
</ul>
</div>
</div>
<!-- END html_validation -->
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.fondqeel {
width: 100%;
background-image: url(https://imgur.com/T12cuzT.png);
background-position: top center;
background-attachment: fixed;
background-size: 100% auto;
background-repeat: no-repeat;
margin-top: 30px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.totalstats {
width: 25%;
padding-top: 30px;
}
.mess {
font: 12px calibri;
border-top: solid 1px #6f6f6f;
color: #cdb65c;
font-style: italic;
text-transform: uppercase;
padding-top: 10px;
margin-top: 10px;
}
.total_users {
padding: 5px;
font: 8px arial;
text-transform: uppercase;
color: #8a8a8a;
text-align: center;
}
.middlestat {
width: 30%;
padding: 30px;
text-align: center;
}
.totalsta {
font-size: 0px;
text-align: center;
width: 200px;
margin: 0 auto;
padding: 15px 0px 15px 0px;
}
.totalsta strong {
font:12px calibri;
text-transform:uppercase;
color: #e8e8e8;
}
#members_online {
padding: 5px;
margin-top: 20px;
height: 106px;
overflow: auto;
text-align: justify;
color: #e8e8e8;
}
#members_online a {
font: 12px calibri;
text-transform: uppercase;
padding: 0px 1px 0px 5px;
color: white !important;
}
.newmember {
text-align: center;
font-size: 0px;
width: 20%;
height: 130px;
margin-top: 30px;
}
.newmember a {
font: 12px arial;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 1px 0 0 #000000, 1px 1px 0 #000000, 0 1px 0 #000000, -1px 1px 0 #000000, -1px 0 0 #000000, -1px -1px 0 #000000, 0 -1px 0 #000000, 1px -1px 0 #000000;
color: white !important;
}
.welcomedude{
color: #e8e8e8;
font: 33px dontlook;
font-style: italic;
}
.second_qeel {
width: 100%;
padding: 10px 0px 10px 0px;
display: flex;
margin-top: 20px;
flex-wrap: wrap;
justify-content: center;
}
#last_co {
width: 24%;
height: 100px;
overflow: auto;
padding: 10px;
text-align: justify;
margin-right: 10px;
color: black;
}
#last_co a {
font: 11px arial;
text-transform: uppercase;
font-style: italic;
padding: 0px 1px 0px 0px;
}
.groups_epicode {
width: 400px;
height: 100px;
}
.group {
font: 10px arial;
text-transform: uppercase;
display: inline-block;
padding: 0px 10px 0px 10px;
width: 194px;
text-align: left;
margin: 0px 5px 5px 0px;
}
.group span {
padding-right:20px;
font-size:20px;
}
.group:nth-child(1) {color:#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;}
.footer_total {
width: 25%;
text-align:center;
}
.footer_total a {
color: #cdb65c;
font-size: 20px;
margin: 0px 5px 0px 5px;
transition:all 800ms;
}
.footer_total a:hover {
color:#ac953c;
transition:all 800ms;
}
.footer_total span{
animation: tada 1900ms infinite;
}
.credits_epicode {
text-align: justify;
padding: 5px;
font: 8px arial;
text-transform: uppercase;
line-height: 15px;
height: 47px;
overflow: auto;
color: #b3b3b3;
letter-spacing: 1px;
}
.credits_epicode b {border-bottom: dotted 1px #cdb65c;font-weight: lighter;color: #cdb65c;font-style: italic;}
#page-footer {
text-transform: uppercase;
z-index: 7;
text-align: center;
background: #e8e8e8;
line-height: 0px;
}
#page-footer a {
color: #0b0b0a;
font: 9px calibri;
text-transform: uppercase;
}
.footerbar-system, .footerbar-user {
color: #303030 !important;
font: 10px calibri;
text-transform: uppercase;
}
.basdepage {
color: #1c1c1c;
font: 9px calibri;
text-transform: uppercase;
padding: 20px 20px 20px 0px;
margin-top: 20px;
text-align: right;
letter-spacing: 2px;
}
.copyright-body{
margin:18px 0px 18px!important;
}
Jawn
# Re: INDEX JAUNE ET BLANC - Ven 13 Nov - 21:24
Les petites décorations
Pour avoir un joli hover sur les liens :
- Code:
#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:5px;
background-color: #1c1c1c;
font-family:arial;
font-weight: 700;
text-transform: uppercase;
font-size:8px;
color:#dadada;
outline: 1px solid #e8e8e8;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
text-align:justify;
outline-offset: -1px;
}
Pour avoir de jolies décorations sur les mentions, les tags et le cadre autour des balises codes :
- Code:
.mentiontag {
background-color: #cdb65c;
border-radius: 3px;
color: #0a0a0a !important;
box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
text-transform: uppercase;
letter-spacing: 1px;
font-style: italic;
font-weight: bold;
font-family: calibri;
padding: 1px 3px 2px;
}
.panel {
box-shadow: none !important;
overflow: auto !important;
margin-bottom: 0px !important;
}
.selectCode {
float: right;
text-transform: uppercase;
cursor: url('https://66.media.tumblr.com/3040b9dc40cf4e0d8da0a3f910c76877/tumblr_inline_p8c0ynZtuK1rhwzwl_75sq.png'), auto;
position: relative;
color: grey;
}
L'animation sur les logos des MP du staff et en bas de forum :
- Code:
@-webkit-keyframes tada {0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
10%, 20% {-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);}
30%, 50%, 70%, 90% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}
40%, 60%, 80% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}
100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}}
@keyframes tada {0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
10%, 20% {-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);}
30%, 50%, 70%, 90% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}
100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
Pour avoir un corps forum correct qui ne dépasse pas :
- Code:
a{text-decoration:none;}
a:hover{text-decoration:none !important;}
body {overflow-x:hidden;
margin:0;
padding:0;}
Et enfin, une police d'écriture un peu spéciale à ajouter dans le CSS :
- Code:
@font-face {
font-family: "dontlook";
src: url("http://files.jcink.net/uploads/mortalsmonsters/Fonts/Gloss_And_Bloom.ttf");}
Pour faire apparaître l'avatar du membre ainsi que son nom sur l'en-tête, allez dans Panneau d'administration > Modules > HTML& Javascript > Gestion des cpdes Javascript. Créez une nouvelle page Javascript (en pensant bien à activer le JS juste au-dessus), puis rajoutez :
- Code:
$(function(){
$.each(_userdata, function(key, value){
$(".js-" + key).html(value);
})
});
Donnez un nom random, cochez "sur toutes les pages" et enregistrez.
À ce même endroit, il vous faudra ajouter :
- Code:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
Pour pouvoir activer les onglets sur la page d'accueil. Cochez seulement "sur l'index" cette fois-ci.
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|