Bande noire génant
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Bande noire génant
Détails techniques
Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 21/08/2022
Lien du forum : https://pokemon-mileva.forumactif.com/
Description du problème
Bonjour,J'ai une bande noire entre header/PA et les catégories.
- Template overall_header:
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-style-type" content="text/css"/>
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
{T_HEAD_STYLESHEET}
{CSS}
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Roboto:wght@300&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 async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
<!-- BEGIN google_analytics_code_bis -->
gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
<!-- END google_analytics_code_bis -->
</script>
<!-- END google_analytics_code -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
<body id="modernbb">
<div class="header_pa_arte">
<div class="header_img">
<a href="LIENDUFORUM"><img src="https://www.zupimages.net/up/21/05/p15i.png" alt="bannière"/></a>
<div>
Le forum est la propriété du staff et de ses membres. Toute copie, même partielle, est prohibée.
</div>
</div>
<div class="pa_content">
<h2>Nom du forum<span>FORUM CITY · AVATARS MANGA · 250*400</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget lectus in ligula luctus feugiat id vitae nisi. Pellentesque lobortis, felis vel faucibus feugiat, tortor nunc suscipit ante, laoreet mollis turpis arcu nec mi. Sed vestibulum malesuada ante sit amet malesuada. In dapibus quam ac placerat gravida. Sed sodales urna non risus accumsan consequat.
<a href="LIENDUCONTEXTE">Lire la suite</a>
</p>
<div class="staff_content">
<div class="hover_staff">
<img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/>
</div>
<div class="hover_staff">
<img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/>
</div>
<div class="hover_staff">
<img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/>
</div>
<div class="hover_staff">
<img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/>
</div>
<div class="hover_staff">
<img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/>
</div>
</div>
<div class="nouveautes_pa">
<span>00.00.00</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget lectus in ligula luctus feugiat id vitae nisi.
<hr/>
<span>00.00.00</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum arcu iaculis nisl porttitor sodales.
</div>
<div class="liens_pa">
<a href="LIEN">règlement</a>
<a href="LIEN">bottin</a>
<a href="LIEN">annexes</a>
<a href="LIEN">prédéfinis</a>
<a href="LIEN">groupes</a>
<a href="LIEN">invités</a>
<a href="LIEN">crédits</a>
<a href="LIEN">partenariats</a>
</div>
<div class="predefinis_content">
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
</div>
<div class="topsites_a">
<a href="LIEN" >V</a>
<a href="LIEN">O</a>
<a href="LIEN">T</a>
<a href="LIEN">E</a>
<a href="LIEN">Z</a>
<p>
Le forum a été créé le 00.00.00. La page d'accueil a été designée et codée par <strong>Artemis</strong>, pour <a href="https://artifices.forumactif.com/">Artifices</a>. Le reste du design a été pensé et codé par xxx.
</p>
<span>Toutes les deux heures !</span>
</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="" loading="lazy" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br/>
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN inactive_users_modal -->
<div id="inactive_popup" style="z-index: 10000 !important;">
<div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div>
<div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div>
<div id="inactive_popup_buttons">
<button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button>
<button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button>
</div>
</div>
<script type="text/javascript">
$('#inactive_popup #inactive_popup_close').on('mouseup', function () {
document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
$('#inactive_popup').hide(50);
});
$('#inactive_popup #inactive_popup_url').on('mouseup', function () {
document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
location.href = '{inactive_users_modal.U_MODAL}'
})
</script>
<!-- END inactive_users_modal -->
<!-- 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>
<!-- BEGIN switch_quick_login -->
<br/>
<div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div>
<div>
<div class="mt10">
<div class="social_btn">
<!-- BEGIN fb_quick_connect -->
<div class="fb-login-button"></div>
<!-- END fb_quick_connect -->
<!-- BEGIN topicit_quick_connect -->
<div class="ti-connect"></div>
<!-- END topicit_quick_connect -->
</div>
</div>
</div>
<br/>
<!-- END switch_quick_login -->
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}"/>
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
</form>
</div>
</div>
<!-- END switch_login_popup -->
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="like_popup_message">
{LIKE_POPUP_MSG}
</div>
<div id="like_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}"/>
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
<input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
</form>
</div>
</div>
<!-- END switch_like_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<div id="page-header">
<div class="headerbar">
<div id="headerbar-top">
<div class="wrap">
<a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap" rel="stylesheet"/>
<div class="navbar_arte">
<div class="avatar_navbar js-avatar"></div>
<div class="bloc_pseudo_search">
<span>Bienvenue, <span class="js-username"></span></span>
<li>
<form action="/search" method="get">
<input type="hidden" name="mode" value="searchbox"/>
<input placeholder="Rechercher" type="text" name="search_keywords"/>
<input type="hidden" name="tt" value="1"/>
<input style="display:none" id="rposts" type="radio" name="show_results" value="posts"/>
<input style="display:none" id="rtopics" type="radio" name="show_results" value="topics" checked="checked"/>
<input type="submit" value="OK"/>
</form>
</li>
</div>
<div class="link_navbar">
{GENERATED_NAV_BAR}
</div>
</div>
</div>
</div>
<div class="wrap">
<div id="site-desc">
<!-- BEGIN switch_h1 -->
<div id="site-title">{switch_h1.MAIN_SITENAME}</div>
<!-- END switch_h1 -->
<!-- BEGIN switch_desc -->
<p>{switch_desc.SITE_DESCRIPTION}</p>
<!-- END switch_desc -->
</div>
</div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
- template index_box:
- 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>
- CSS:
- Code:
/*******CATEGORIES*******/
.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;
}
/***************QEEEL****************/
.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;
}
/**************LA MISE EN FORME*************/
.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;
}
/** PA PAR ARTEMIS POUR ARTIFICES **/
:root
{
--couleur-bleue: #647a49;
--couleur-deux: #be744a;
}
.header_pa_arte
{
width: 900px;
height: 550px;
margin: auto;
display: flex;
background: #F7F7F7;
position: relative;
}
.header_pa_arte:before
{
width: 445px;
height: 550px;
position: absolute;
top: 0;
left: 0;
content: " ";
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
z-index: 0;
}
.header_img
{
width: 425px;
height: 530px;
z-index: 99;
position: relative;
padding:10px;
}
.header_img > div
{
position: absolute;
bottom: 50%;
left: 30%;
width: 200px;
text-align: justify;
background: white;
border-radius: 10px;
padding: 10px;
font: 9px roboto, sans-serif;
color: gray;
text-transform: uppercase;
visibility: hidden;
}
.header_img:hover div
{
visibility: visible;
}
.header_img img
{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.pa_content
{
width: 50%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
padding: 0 15px 15px 15px;
}
.pa_content > h2
{
width: 100%;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font: 65px oswald, sans-serif;
text-transform: uppercase;
margin: 0;
height:80px;
position: relative;
}
.pa_content > h2 span
{
position: absolute;
padding: 2px 5px;
width: auto;
top: 56%;
background: #F7F7F7;
left: 0;
display: inline-block;
color: black !important;
font: 10px calibri, sans-serif;
-webkit-text-fill-color: #b5b5b5;
letter-spacing: 0.5px;
}
.pa_content > p
{
width: 100%;
margin: 0;
border: 1px solid var(--couleur-deux);
outline: 1px solid var(--couleur-deux);
outline-offset: -5px;
height: 120px;
box-sizing: border-box;
padding: 20px;
font: 12px roboto, sans-serif;
color: grey;
text-align: justify;
line-height: 12px;
overflow: auto;
}
.pa_content > p > a
{
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
font: 12px calibri, sans-serif;
text-transform: uppercase;
}
.staff_content
{
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
}
.hover_staff
{
border: 10px solid #e3e2e2;
width: 80px;
height: 80px;
text-align: center;
box-sizing: border-box;
position: relative;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.hover_staff img
{
width: 60px;
height: 60px;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.hover_staff img:hover
{
-webkit-filter: none;
filter: none;
}
.nouveautes_pa
{
width: 250px;
height: 110px;
border: 1px solid var(--couleur-deux);
box-sizing: border-box;
padding: 12px;
font: 10px calibri, sans-serif;
color: grey;
text-transform: uppercase;
line-height: 9px;
text-align: justify;
overflow:auto;
}
.nouveautes_pa > span
{
display: block;
float: left;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
color: white;
padding: 3px 5px;
border-radius: 2px;
margin: 0 3px 0 0;
line-height: 10px;
}
.nouveautes_pa hr
{
opacity: 0.3;
margin: 0.5em 0;
}
.liens_pa
{
width: 165px;
height:110px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
box-sizing: border-box;
padding: 0;
}
.liens_pa a
{
display: block;
width: 80px;
background:linear-gradient(var(--couleur-bleue), var(--couleur-deux));
color: white;
border-radius: 2px;
height: 24px;
font: 10px roboto, sans-serif;
text-align: center;
text-transform: uppercase;
text-decoration: none;
line-height: 24px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.predefinis_content
{
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
}
.predefinis_content div
{
width: 55px;
height: 55px;
border: 1px solid var(--couleur-deux);
text-align: center;
box-sizing: border-box;
padding:7px;
}
.predefinis_content div img
{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border: 1px solid var(--couleur-deux);
box-sizing: border-box;
}
.topsites_a
{
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
margin-top: 5px;
position: relative;
}
.topsites_a > a
{
text-decoration: none;
font: 50px oswald, sans-serif;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 45px;
}
.topsites_a > a:hover
{
text-decoration: none !important;
}
.topsites_a p
{
background: #e3e2e2;
height: 100%;
margin: 0 0 0 10px;
width: 290px;
box-sizing: border-box;
padding: 10px;
font: 10px calibri, sans-serif;
color: #717171;
text-align: justify;
line-height: 10px;
}
.topsites_a > span
{
position: absolute;
left: 6px;
bottom: -8px;
font: 10px roboto, sans-serif;
text-transform: lowercase;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.2px;
}
/* NAVBAR - ARTEMIS POUR ARTIFICES */
:root
{
--couleur-bleue: #91b5bf;
}
.bodylinewidth
{
margin-top: 72px;
}
.navbar_arte
{
width: 100%;
background: #f9f9f9;
height: 70px;
-webkit-box-shadow: 0 2px 1px #e6e6e6;
box-shadow: 0 2px 1px #e6e6e6;
position: fixed;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 15px 0 5px;
z-index: 999;
}
.avatar_navbar
{
width: 60px;
height: 60px;
border: 1px solid white;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
background: #e9e9e9;
display: inline-block;
float: left;
}
.avatar_navbar img
{
width: 48px;
height: 48px;
-o-object-fit: cover;
object-fit: cover;
}
.bloc_pseudo_search
{
font: 9px montserrat;
width: 240px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
height: 60px;
vertical-align: top;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 5px;
color: #6f6f6f;
float: left;
text-align: left;
margin-left: 5px;
}
.bloc_pseudo_search li
{
list-style-type: none;
}
.navbar_arte form
{
height: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
background: white;
padding: 0;
margin-top: 8px;
}
.navbar_arte form input[type="submit"]
{
border: none!important;
background: var(--couleur-bleue)!important;
color: white !important;
padding: 0 10px!important;
margin:0!important;
border-radius:0!important;
-webkit-box-shadow:none!important;
box-shadow:none!important;
}
.navbar_arte form input[type="text"]
{
cursor: text;
border: none!important;
width: 100%;
min-width: 150px;
padding: 0 8px!important;
margin:0!important;
background: rgba(255,255,255,0.05)!important;
color: lightgray;
font-size:11px;
border-radius:0!important;
-webkit-box-shadow:none!important;
box-shadow:none!important;
text-transform: uppercase !important;
font: 10px calibri !important;
letter-spacing: 2px !important;
}
.navbar_arte form input
{
outline: none;
font-size:11px;
}
.link_navbar
{
float: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 25px 15px;
font: 10px montserrat;
text-transform: uppercase;
}
.link_navbar a
{
text-decoration: none;
margin: 0 5px;
color: var(--couleur-bleue);
font-weight: 600;
}
.link_navbar a img
{
display: none;
}
.link_navbar a:hover
{
text-decoration: none !important;
color: var(--couleur-bleue);
}
.link_navbar a::before,.link_navbar a::after
{
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-webkit-transition: opacity 0.2s, -webkit-transform 0.3s;
transition: opacity 0.2s, -webkit-transform 0.3s;
-o-transition: transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s}
.link_navbar a::before
{
content: '[';
-webkit-transform: translateX(25px);
-ms-transform: translateX(25px);
transform: translateX(25px);
}
.link_navbar a::after
{
content: ' ]';
-webkit-transform: translateX(-25px);
-ms-transform: translateX(-25px);
transform: translateX(-25px);
}
.link_navbar a:hover::before,.link_navbar a:hover::after
{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.link_navbar a[href^="/search"]
{
display: none;
}
.link_navbar li
{
list-style-type: none;
display: inline-block;
}
Screeen- Nouveau membre
- Messages : 25
Inscrit(e) le : 25/03/2012
Re: Bande noire génant
Bonjour,
Il s'agit de l'en-tête du forum en version ModernBB, qui contient normalement le logo, le nom et la description du forum, et la barre de navigation :
En plaçant votre code d'accueil avant l'en-tête, celle-ci se retrouve en dessous...
Il serait plus logique d'avoir votre code d'accueil à l'intérieur de l'en-tête :
Overall_header :
J'en ai profité pour réindenter le code afin qu'il soit plus lisible.
Pour l'instant le fond noir est toujours là mais la PA est à l'intérieur, et il y a quelques bugs qu'on va corriger :
- Vous pouvez mettre votre image de bannière directement dans l'endroit prévu du panneau d'administration.
( Affichage > Images > Logo : https://www.zupimages.net/up/21/05/p15i.png )
Puis dans votre css :
- Pour une meilleure structure de la page et reconnaissance par les moteurs de recherche, j'ai supprimé le h2 dans le template qui contenait le titre du forum : L'affichage s'en trouve perturbé, on va régler le css :
- Localisez les codes suivants :
- Puis ajoutez le code css suivant :
- Pour retirer le fond noir de l'en-tête ajoutez le code suivant :
- Pour régler la barre de navigation, localisez le code css suivant :
Et normalement c'est tout bon tout propre !
Css final :
Il s'agit de l'en-tête du forum en version ModernBB, qui contient normalement le logo, le nom et la description du forum, et la barre de navigation :
En plaçant votre code d'accueil avant l'en-tête, celle-ci se retrouve en dessous...
Il serait plus logique d'avoir votre code d'accueil à l'intérieur de l'en-tête :
Overall_header :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-style-type" content="text/css"/>
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
{T_HEAD_STYLESHEET}
{CSS}
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Roboto:wght@300&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 async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
<!-- BEGIN google_analytics_code_bis -->
gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
<!-- END google_analytics_code_bis -->
</script>
<!-- END google_analytics_code -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap" rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" loading="lazy" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br/>
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN inactive_users_modal -->
<div id="inactive_popup" style="z-index: 10000 !important;">
<div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div>
<div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div>
<div id="inactive_popup_buttons">
<button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button>
<button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button>
</div>
</div>
<script type="text/javascript">
$('#inactive_popup #inactive_popup_close').on('mouseup', function () {
document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
$('#inactive_popup').hide(50);
});
$('#inactive_popup #inactive_popup_url').on('mouseup', function () {
document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
location.href = '{inactive_users_modal.U_MODAL}'
})
</script>
<!-- END inactive_users_modal -->
<!-- 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>
<!-- BEGIN switch_quick_login -->
<br/>
<div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div>
<div>
<div class="mt10">
<div class="social_btn">
<!-- BEGIN fb_quick_connect -->
<div class="fb-login-button"></div>
<!-- END fb_quick_connect -->
<!-- BEGIN topicit_quick_connect -->
<div class="ti-connect"></div>
<!-- END topicit_quick_connect -->
</div>
</div>
</div>
<br/>
<!-- END switch_quick_login -->
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}"/>
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
</form>
</div>
</div>
<!-- END switch_login_popup -->
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="like_popup_message">
{LIKE_POPUP_MSG}
</div>
<div id="like_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}"/>
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
<input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
</form>
</div>
</div>
<!-- END switch_like_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<div id="page-header">
<div class="headerbar">
<!-- DEBUT BARRE DE NAVIGATION -->
<div id="headerbar-top">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap" rel="stylesheet"/>
<div class="avatar_navbar js-avatar"></div>
<div class="bloc_pseudo_search">
<span>Bienvenue, <span class="js-username"></span></span>
<form action="/search" method="get">
<input type="hidden" name="mode" value="searchbox"/>
<input placeholder="Rechercher" type="text" name="search_keywords"/>
<input type="hidden" name="tt" value="1"/>
<input style="display:none" id="rposts" type="radio" name="show_results" value="posts"/>
<input style="display:none" id="rtopics" type="radio" name="show_results" value="topics" checked="checked"/>
<input type="submit" value="OK"/>
</form>
</div>
<div class="link_navbar">
{GENERATED_NAV_BAR}
</div>
</div>
<!-- FIN BARRE DE NAVIGATION -->
<!-- DEBUT PA HEADER -->
<div class="header_pa_arte">
<div class="header_img">
<a href="{U_INDEX}"><img src="{LOGO}" alt="{L_INDEX}"/></a>
<div>Le forum est la propriété du staff et de ses membres. Toute copie, même partielle, est prohibée.</div>
</div>
<div class="pa_content">
<div id="forum_titre">
<!-- BEGIN switch_h1 -->{switch_h1.MAIN_SITENAME}<!-- END switch_h1 -->
<!-- BEGIN switch_desc --><span>{switch_desc.SITE_DESCRIPTION}</span><!-- END switch_desc -->
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget lectus in ligula luctus feugiat id vitae nisi. Pellentesque lobortis, felis vel faucibus feugiat, tortor nunc suscipit ante, laoreet mollis turpis arcu nec mi. Sed vestibulum malesuada ante sit amet malesuada. In dapibus quam ac placerat gravida. Sed sodales urna non risus accumsan consequat.
<a href="LIENDUCONTEXTE"> Lire la suite</a>
</p>
<div class="staff_content">
<div class="hover_staff"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/></div>
<div class="hover_staff"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/></div>
<div class="hover_staff"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/></div>
<div class="hover_staff"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/></div>
<div class="hover_staff"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/></div>
</div>
<div class="nouveautes_pa">
<span>00.00.00</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget lectus in ligula luctus feugiat id vitae nisi.
<hr/>
<span>00.00.00</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum arcu iaculis nisl porttitor sodales.
</div>
<div class="liens_pa">
<a href="LIEN">règlement</a>
<a href="LIEN">bottin</a>
<a href="LIEN">annexes</a>
<a href="LIEN">prédéfinis</a>
<a href="LIEN">groupes</a>
<a href="LIEN">invités</a>
<a href="LIEN">crédits</a>
<a href="LIEN">partenariats</a>
</div>
<div class="predefinis_content">
<div><a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a></div>
<div><a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a></div>
<div><a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a></div>
<div><a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a></div>
<div><a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a></div>
<div><a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a></div>
<div><a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a></div>
</div>
<div class="topsites_a">
<a href="LIEN" >V</a>
<a href="LIEN">O</a>
<a href="LIEN">T</a>
<a href="LIEN">E</a>
<a href="LIEN">Z</a>
<p>Le forum a été créé le 00.00.00. La page d'accueil a été designée et codée par <strong>Artemis</strong>, pour <a href="https://artifices.forumactif.com/">Artifices</a>. Le reste du design a été pensé et codé par xxx.</p>
<span>Toutes les deux heures !</span>
</div>
</div>
</div>
<!-- FIN PA HEADER -->
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
J'en ai profité pour réindenter le code afin qu'il soit plus lisible.
Pour l'instant le fond noir est toujours là mais la PA est à l'intérieur, et il y a quelques bugs qu'on va corriger :
- Vous pouvez mettre votre image de bannière directement dans l'endroit prévu du panneau d'administration.
( Affichage > Images > Logo : https://www.zupimages.net/up/21/05/p15i.png )
Puis dans votre css :
- Pour une meilleure structure de la page et reconnaissance par les moteurs de recherche, j'ai supprimé le h2 dans le template qui contenait le titre du forum : L'affichage s'en trouve perturbé, on va régler le css :
- Localisez les codes suivants :
- Code:
.pa_content > h2
{
width: 100%;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font: 65px oswald, sans-serif;
text-transform: uppercase;
margin: 0;
height:80px;
position: relative;
}
.pa_content > h2 span
{
position: absolute;
padding: 2px 5px;
width: auto;
top: 56%;
background: #F7F7F7;
left: 0;
display: inline-block;
color: black !important;
font: 10px calibri, sans-serif;
-webkit-text-fill-color: #b5b5b5;
letter-spacing: 0.5px;
}
- Code:
#forum_titre
{
width: 100%;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font: 65px oswald, sans-serif;
text-transform: uppercase;
margin: 0;
height:80px;
position: relative;
}
#forum_titre span
{
position: absolute;
padding: 2px 5px;
width: auto;
top: 56%;
background: #F7F7F7;
left: 0;
display: inline-block;
color: black !important;
font: 10px calibri, sans-serif;
-webkit-text-fill-color: #b5b5b5;
letter-spacing: 0.5px;
}
- Puis ajoutez le code css suivant :
- Code:
#forum_titre h1 {
display: inline;
font-size: inherit;
font-weight: inherit;
}
- Pour retirer le fond noir de l'en-tête ajoutez le code suivant :
- Code:
.headerbar {
background: none;
height: unset;
}
- Pour régler la barre de navigation, localisez le code css suivant :
- Code:
.navbar_arte
{
width: 100%;
background: #f9f9f9;
height: 70px;
-webkit-box-shadow: 0 2px 1px #e6e6e6;
box-shadow: 0 2px 1px #e6e6e6;
position: fixed;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 15px 0 5px;
z-index: 999;
}
- Code:
#headerbar-top {
width: 100%;
background: #f9f9f9 !important;
height: 70px !important;
box-shadow: 0 2px 1px #e6e6e6 !important;
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
padding: 5px 15px 0 5px !important;
z-index: 999;
}
- Code:
.header_pa_arte
{
width: 900px;
height: 550px;
margin: auto;
margin-top:80px;
display: flex;
background: #F7F7F7;
position: relative;
}
Et normalement c'est tout bon tout propre !
Css final :
- Code:
/*******CATEGORIES*******/
.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;
}
/***************QEEEL****************/
.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;
}
/**************LA MISE EN FORME*************/
.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;
}
/** PA PAR ARTEMIS POUR ARTIFICES **/
:root
{
--couleur-bleue: #647a49;
--couleur-deux: #be744a;
}
.headerbar {
background: none;
height: unset;
}
.header_pa_arte
{
width: 900px;
height: 550px;
margin: auto;
margin-top:80px;
display: flex;
background: #F7F7F7;
position: relative;
}
.header_pa_arte:before
{
width: 445px;
height: 550px;
position: absolute;
top: 0;
left: 0;
content: " ";
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
z-index: 0;
}
.header_img
{
width: 425px;
height: 530px;
z-index: 99;
position: relative;
padding:10px;
}
.header_img > div
{
position: absolute;
bottom: 50%;
left: 30%;
width: 200px;
text-align: justify;
background: white;
border-radius: 10px;
padding: 10px;
font: 9px roboto, sans-serif;
color: gray;
text-transform: uppercase;
visibility: hidden;
}
.header_img:hover div
{
visibility: visible;
}
.header_img img
{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.pa_content
{
width: 50%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
padding: 0 15px 15px 15px;
}
#forum_titre
{
width: 100%;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font: 65px oswald, sans-serif;
text-transform: uppercase;
margin: 0;
height:80px;
position: relative;
}
#forum_titre span
{
position: absolute;
padding: 2px 5px;
width: auto;
top: 56%;
background: #F7F7F7;
left: 0;
display: inline-block;
color: black !important;
font: 10px calibri, sans-serif;
-webkit-text-fill-color: #b5b5b5;
letter-spacing: 0.5px;
}
#forum_titre h1 {
display: inline;
font-size: inherit;
font-weight: inherit;
}
.pa_content > p
{
width: 100%;
margin: 0;
border: 1px solid var(--couleur-deux);
outline: 1px solid var(--couleur-deux);
outline-offset: -5px;
height: 120px;
box-sizing: border-box;
padding: 20px;
font: 12px roboto, sans-serif;
color: grey;
text-align: justify;
line-height: 12px;
overflow: auto;
}
.pa_content > p > a
{
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
font: 12px calibri, sans-serif;
text-transform: uppercase;
}
.staff_content
{
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
}
.hover_staff
{
border: 10px solid #e3e2e2;
width: 80px;
height: 80px;
text-align: center;
box-sizing: border-box;
position: relative;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.hover_staff img
{
width: 60px;
height: 60px;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.hover_staff img:hover
{
-webkit-filter: none;
filter: none;
}
.nouveautes_pa
{
width: 250px;
height: 110px;
border: 1px solid var(--couleur-deux);
box-sizing: border-box;
padding: 12px;
font: 10px calibri, sans-serif;
color: grey;
text-transform: uppercase;
line-height: 9px;
text-align: justify;
overflow:auto;
}
.nouveautes_pa > span
{
display: block;
float: left;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
color: white;
padding: 3px 5px;
border-radius: 2px;
margin: 0 3px 0 0;
line-height: 10px;
}
.nouveautes_pa hr
{
opacity: 0.3;
margin: 0.5em 0;
}
.liens_pa
{
width: 165px;
height:110px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
box-sizing: border-box;
padding: 0;
}
.liens_pa a
{
display: block;
width: 80px;
background:linear-gradient(var(--couleur-bleue), var(--couleur-deux));
color: white;
border-radius: 2px;
height: 24px;
font: 10px roboto, sans-serif;
text-align: center;
text-transform: uppercase;
text-decoration: none;
line-height: 24px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.predefinis_content
{
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
}
.predefinis_content div
{
width: 55px;
height: 55px;
border: 1px solid var(--couleur-deux);
text-align: center;
box-sizing: border-box;
padding:7px;
}
.predefinis_content div img
{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border: 1px solid var(--couleur-deux);
box-sizing: border-box;
}
.topsites_a
{
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
margin-top: 5px;
position: relative;
}
.topsites_a > a
{
text-decoration: none;
font: 50px oswald, sans-serif;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 45px;
}
.topsites_a > a:hover
{
text-decoration: none !important;
}
.topsites_a p
{
background: #e3e2e2;
height: 100%;
margin: 0 0 0 10px;
width: 290px;
box-sizing: border-box;
padding: 10px;
font: 10px calibri, sans-serif;
color: #717171;
text-align: justify;
line-height: 10px;
}
.topsites_a > span
{
position: absolute;
left: 6px;
bottom: -8px;
font: 10px roboto, sans-serif;
text-transform: lowercase;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.2px;
}
/* NAVBAR - ARTEMIS POUR ARTIFICES */
:root
{
--couleur-bleue: #91b5bf;
}
.bodylinewidth
{
margin-top: 72px;
}
#headerbar-top
{
width: 100%;
background: #f9f9f9 !important;
height: 70px !important;
box-shadow: 0 2px 1px #e6e6e6 !important;
position: fixed;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 15px 0 5px !important;
z-index: 999;
}
.avatar_navbar
{
width: 60px;
height: 60px;
border: 1px solid white;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
background: #e9e9e9;
display: inline-block;
float: left;
}
.avatar_navbar img
{
width: 48px;
height: 48px;
-o-object-fit: cover;
object-fit: cover;
}
.bloc_pseudo_search
{
font: 9px montserrat;
width: 240px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
height: 60px;
vertical-align: top;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 5px;
color: #6f6f6f;
float: left;
text-align: left;
margin-left: 5px;
}
.bloc_pseudo_search li
{
list-style-type: none;
}
.navbar_arte form
{
height: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
background: white;
padding: 0;
margin-top: 8px;
}
.navbar_arte form input[type="submit"]
{
border: none!important;
background: var(--couleur-bleue)!important;
color: white !important;
padding: 0 10px!important;
margin:0!important;
border-radius:0!important;
-webkit-box-shadow:none!important;
box-shadow:none!important;
}
.navbar_arte form input[type="text"]
{
cursor: text;
border: none!important;
width: 100%;
min-width: 150px;
padding: 0 8px!important;
margin:0!important;
background: rgba(255,255,255,0.05)!important;
color: lightgray;
font-size:11px;
border-radius:0!important;
-webkit-box-shadow:none!important;
box-shadow:none!important;
text-transform: uppercase !important;
font: 10px calibri !important;
letter-spacing: 2px !important;
}
.navbar_arte form input
{
outline: none;
font-size:11px;
}
.link_navbar
{
float: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 25px 15px;
font: 10px montserrat;
text-transform: uppercase;
}
.link_navbar a
{
text-decoration: none;
margin: 0 5px;
color: var(--couleur-bleue);
font-weight: 600;
}
.link_navbar a img
{
display: none;
}
.link_navbar a:hover
{
text-decoration: none !important;
color: var(--couleur-bleue);
}
.link_navbar a::before,.link_navbar a::after
{
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-webkit-transition: opacity 0.2s, -webkit-transform 0.3s;
transition: opacity 0.2s, -webkit-transform 0.3s;
-o-transition: transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s}
.link_navbar a::before
{
content: '[';
-webkit-transform: translateX(25px);
-ms-transform: translateX(25px);
transform: translateX(25px);
}
.link_navbar a::after
{
content: ' ]';
-webkit-transform: translateX(-25px);
-ms-transform: translateX(-25px);
transform: translateX(-25px);
}
.link_navbar a:hover::before,.link_navbar a:hover::after
{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.link_navbar a[href^="/search"]
{
display: none;
}
.link_navbar li
{
list-style-type: none;
display: inline-block;
}
Dernière édition par MlleAlys le Dim 21 Aoû 2022 - 19:45, édité 2 fois (Raison : ajout d'un code oublié et css final)
MlleAlys- Membre actif
- Messages : 5971
Inscrit(e) le : 12/09/2012
Re: Bande noire génant
Tout est bon ! Cela marche nickel !
Je vous remercie de votre aide
Je vous remercie de votre aide
Screeen- Nouveau membre
- Messages : 25
Inscrit(e) le : 25/03/2012
Re: Bande noire génant
de rien, pensez à éditer votre premier message pour passer votre sujet en résolu !
MlleAlys- Membre actif
- Messages : 5971
Inscrit(e) le : 12/09/2012
Re: Bande noire génant
Screeen a écrit:Tout est bon ! Cela marche nickel !
Je vous remercie de votre aide
Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à :
|
Sujets similaires
» apparition barre noire en bas
» Supprimer bande noire de partage
» Bande noire qui bloque l'envoi des messages
» Ligne noire
» Les boutons en noire ??
» Supprimer bande noire de partage
» Bande noire qui bloque l'envoi des messages
» Ligne noire
» Les boutons en noire ??
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum