![[INDEX ORANGE VIBE] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [INDEX ORANGE VIBE] - Jeu 19 Sep - 2:32
![[INDEX ORANGE VIBE] MC3xLsH](https://imgur.com/mC3xLsH.png)
Barre de navigation + bannière
Avant de commencer, rendez vous dans Panneau d'administration > Général > Forum > Configuration et descendez jusqu'à "Largeur du forum (nombre ou %)" puis entrez-y la valeur "1000".
Panneau d'administration > Affichage > Images et Couleurs > Couleurs, dans "couleur de fond de page" et "couleur intérieure du cadre du forum", entrez la valeur > #EEEEEE
Tout se trouvant dans le même template, il sera donc à copier coller entièrement. Rendez vous dans votre panneau d'administration > Affichage > Templates > Général > Overall_header :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<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="https://fonts.googleapis.com/css?family=Quicksand:700&display=swap" rel="stylesheet"/>
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
$('#fa_ticker_content').css('display','block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0)
{
$('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert)
{
var height_max = h_perso;
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if(report != null) { report.focus(); }
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function() {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
ga('send', 'pageview');
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
ga('bis.send', 'pageview');
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
</head>
<body id="modernbb">
<div class="bannorange"><a href="/"><img src="https://imgur.com/T00AVzx.png"/></a>
<div class="titlefo">so lost <div class="title2">in the night sky</div>i'm faded</div>
</div>
<div class="navbarr">
<div class="menuposition">{GENERATED_NAV_BAR}</div>
<div class="sep"></div>
<div class="imgstaff">
<div class="firsty"><img title="rôle du staffeux" src="https://via.placeholder.com/40"/></div>
<div class="second">nom - prénom</div>
<div class="firsty"><img title="rôle du staffeux" src="https://via.placeholder.com/40"/></div>
<div class="second">nom - prénom</div>
<div class="firsty"><img title="rôle du staffeux" src="https://via.placeholder.com/40"/></div>
<div class="second">nom - prénom</div>
<div class="firsty"><img title="rôle du staffeux" src="https://via.placeholder.com/40"/></div>
<div class="second">nom - prénom</div>
<div class="firsty"><img title="rôle du staffeux" src="https://via.placeholder.com/40"/></div>
<div class="second">nom - prénom</div>
</div>
<div class="sep"></div>
<div class="topsite"><a target="_blank" href="/">1</a></div>
<div class="topsite"><a target="_blank" href="/">2</a></div>
<div class="topsite"><a target="_blank" href="/">3</a></div>
<div class="topsite"><a target="_blank" href="/">4</a></div>
<div class="sep"></div>
<div class="copyrighttruc">
:copyright: Copyright : Tout le contenu du forum appartient à bla bla bla ne pas toucher sinon ça va mal se passer après tu connais la chanson on a des cookies tout ça faut être gentil et tout le bordel.
</div>
<div class="arrowdown"></div>
</div>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}" />
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<div id="page-header">
<div class="wrap">
<div class="wrap">
<div id="site-desc">
<!-- BEGIN switch_h1 -->
<div id="site-title">{switch_h1.MAIN_SITENAME}</div>
<!-- END switch_h1 -->
<!-- BEGIN switch_desc -->
<p>{switch_desc.SITE_DESCRIPTION}</p>
<!-- END switch_desc -->
</div>
</div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.bannorange img {
width:100%;
}
.navbarr {
background: #cb8a48;
position: absolute;
left: 0px;
color: black;
list-style: none;
padding: 10px;
text-align: center;
width: 62px;
top: 0;
}
.navbarr img{
width:25px;
}
.arrowdown {
width: 0px;
height: 0px;
border-left: 31px solid transparent;
border-right: 31px solid transparent;
border-top: 20px solid #cb8a48;
position: absolute;
margin-top: 10px;
left: 0;
}
.menuposition a[href="/"]:after {
content: "home";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href="/faq"]:after {
content: "f.a.q";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href="/search"]:after {
content: "search";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href="/memberlist"]:after {
content: "membres";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href="/groups"]:after {
content: "groupes";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href*="/profile"]:after {
content: "user";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href*="/privmsg"]:after {
content: "message";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href*="/login"]:after {
content: "leave";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href*="/register"]:after {
content: "join us";
color:black;
font:8px arial;
text-transform:uppercase;
}
.sep {
width: 100%;
height: 2px;
background: #2e2c29;
margin: 5px 0px 5px 0px;
}
.firsty {
padding: 10px 0px 10px 0px;
}
.firsty img {
width: 40px !important;
height: 40px;
border: 5px solid black;
outline: 2px solid #000;
outline-offset: 2px;
}
.second {
text-transform: uppercase;
letter-spacing: 1px;
font: 8px arial;
}
.topsite {
border-radius: 100%;
width: 38px;
border: solid 2px black;
height: 38px;
padding: 10px;
margin: 5px 0px 10px 2px;
}
.topsite a {
color: black;
font: 15px arial;
font-weight: bold;
}
.copyrighttruc {
text-align: justify;
font: 8px arial;
color: black;
line-height: 9px;
width: 42px;
text-transform: uppercase;
}
.titlefo {
top: 88px;
position: absolute;
left: 55%;
padding: 150px 10px 20px 10px;
border: solid 10px #2e2c29;
font: 50px quicksand;
text-transform: uppercase;
text-align: center;
background: rgba(250, 250, 250, 0.2);
}
.title2 {
font: 20px ptlight;
}
Jawn
# Re: [INDEX ORANGE VIBE] - Jeu 19 Sep - 2:33
La page d'accueil
Dans votre panneau d'administration, dans Affichage > Généralités, c'est ici que vous mettez votre HTML :
- Code:
<div class="contexteuh">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim nisl ligula, sit amet viverra justo laoreet quis. Quisque elementum imperdiet massa nec mattis. Donec fermentum id tortor at bibendum. Cras porttitor luctus felis, eu interdum ante vehicula sed. Aliquam efficitur at lacus vitae faucibus. Aenean nec ultricies purus. Vestibulum maximus accumsan enim, in ullamcorper eros. Suspendisse in vestibulum nulla. Praesent elementum arcu urna, in rutrum risus dignissim sed. Pellentesque varius ultrices lorem, quis laoreet nisl tincidunt in. Cras eleifend pretium ligula at congue. Proin lacinia vulputate semper. Proin lacinia at sapien varius pretium. Integer ultricies mollis justo, sed posuere nunc euismod vitae. Morbi mollis ut enim ut aliquam. Donec turpis mauris, gravida a pharetra vel, commodo nec metus. Donec sollicitudin mauris sed arcu rhoncus commodo. Sed consequat mauris est. Mauris aliquam eget dolor placerat dictum. Proin dapibus ullamcorper nulla, at imperdiet sapien posuere quis. Quisque egestas leo quis molestie mollis. Aenean eu dictum leo. Phasellus dignissim tincidunt tortor, a sodales ex porttitor id. Morbi viverra mauris eu dignissim lacinia. Aenean condimentum ante quis purus aliquam facilisis. Ut tempor lectus mauris, vitae scelerisque urna porttitor facilisis. Praesent elementum est eget odio euismod lobortis. Sed vel ultrices dolor. Sed commodo ipsum eu ornare fringilla. Vestibulum dapibus et metus eu tempor. Ut suscipit, lacus eget faucibus euismod, ex ex posuere sem, sit amet mollis turpis tellus nec urna. In dignissim odio in sapien finibus dapibus. Praesent vehicula vulputate nisi vel vehicula. Aenean at nulla tristique, pulvinar turpis eget, elementum nisi. Cras elementum, augue et vehicula vehicula, erat tellus ullamcorper lacus, vitae laoreet felis purus at arcu. Curabitur auctor lobortis nulla a auctor. Vivamus sagittis, sapien at luctus volutpat, purus sem bibendum odio, sit amet interdum lacus leo scelerisque sem. Nulla congue gravida elit, et ultricies tellus porta sit amet. Sed finibus non diam sit amet rutrum. Maecenas in euismod purus, eget consectetur massa. Pellentesque sed velit dapibus, dapibus justo sed, porttitor orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam suscipit ut nulla id aliquam. In consequat ac est non euismod. Curabitur congue nisi sit amet sapien convallis, non iaculis ex efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ultricies bibendum libero vel accumsan. Aliquam nec sem malesuada, ullamcorper velit a, auctor mauris.
</div>
<div class="linksut">
<a target="_blank" href="">Règlement</a> - <a target="_blank" href="">Questions</a> - <a target="_blank" href="">Partenariats</a> - <a target="_blank" href="">Prédéfinis</a>
</div>
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.contexteuh {
padding: 0px 20px 20px 20px;
text-align: justify;
color: #2e2c29;
font: 11px arial;
line-height: 17px;
height: 190px;
overflow: auto;
border-left: solid 50px #cb8a48;
}
.linksut {
padding: 20px 0px 20px 0px;
text-align: center;
color: #2e2c29;
font-size:25px;
}
.linksut a {
padding: 20px 0px 20px 0px;
text-transform: uppercase;
color: #2e2c29;
font: 34px quicksand;
}
.linksut a:hover {
color:#cb8a48;
font-style:italic;
}
Les catégories
Remplacer l'intégralité de votre template index_box par le HTML :
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="titcate">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="categorie">
<div class="iconcat" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll 50%; background-size: contain;"></div>
<div class="restecate">
<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>
<!-- END switch_topic_title -->{catrow.forumrow.USER_LAST_POST}</div>
<div id="titlecategorie"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="forumdesc">{catrow.forumrow.FORUM_DESC}</div>
<div class="statcat">{catrow.forumrow.TOPICS} {L_TOPICS}</div>
<div class="statcat">{catrow.forumrow.POSTS} {L_POSTS}</div>
</div>
</div>
<!-- END forumrow -->
<!-- END catrow -->
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.titcate {
padding: 20px;
border: solid 10px #2e2c29;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
background: rgba(250, 250, 250, 0.4);
margin: 100px 0px 20px 0px;
}
.titcate h2 {
font:30px quicksand;
}
.categorie {
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.lastpost {
padding-left: 50px;
color: #b5b5b5;
font: 8px arial;
text-transform: uppercase;
margin-top: 40px;
}
.lastpost a{
font: 10px quicksand;
color: #2e2c29;
}
.lastpost strong {
position: absolute;
margin: 1px 0px 0px -64px;
font: 22px quicksand;
opacity: 0.4;
font-style: italic;
text-align: right;
}
.lastpost img {
width: 20px;
}
.iconcat {
width: 130px;
height: 300px;
}
.restecate {
width: 660px;
padding-left: 10px;
}
.lastpost br {
display:none;
}
#titlecategorie {
padding: 20px 10px 10px 80px;
text-transform: uppercase;
}
#titlecategorie a {
letter-spacing: 2px;
color: #2e2c29 !important;
font: 25px quicksand;
}
.statcat {
display: inline-block;
vertical-align: top;
width: 273px;
margin: 7px 7px 7px 45px;
padding: 10px 0px 10px 0px;
text-align: center;
background: #2e2c29;
color: #eeeeee;
text-transform: uppercase;
letter-spacing: 2px;
}
.forumdesc {
height: 90px;
overflow: auto;
text-align: justify;
margin-bottom: 20px;
padding: 0px 10px 0px 50px;
color: #2e2c29;
font: 11px calibri;
line-height: 10px;
}
Jawn
# Re: [INDEX ORANGE VIBE] - Jeu 19 Sep - 2:33
Le qui est en ligne
Dans votre template index_body, entre les balises :
- Code:
<!-- BEGIN disable_viewonline -->
- Code:
<!-- END disable_viewonline -->
Puis rendez vous dans votre panneau d'administration > Affichage > Templates > Général > overall_footer_end et remplacez l'intégralité de votre template 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}
<div class="totalfooter">
<div id="newmember">{NEWEST_USER}</div><script type="text/javascript">
document.getElementById('newmember').innerHTML=document.getElementById('newmember').innerHTML.replace(/L'utilisateur enregistré le plus récent est/g," ");
</script>
<div class="restefooter">
<div class="titlefoo">Utilisateurs en ligne :</div>
<div id="onlineu">{LOGGED_IN_USER_LIST}</div>
<script type="text/javascript">
document.getElementById('onlineu').innerHTML=document.getElementById('onlineu').innerHTML.replace(/Utilisateurs enregistrés :/g," ");</script>
<div class="titlefoo">Connectés au cours des 48h :</div>
<div id="lastco">{L_CONNECTED_MEMBERS}</div>
<script type="text/javascript">
document.getElementById('lastco').innerHTML=document.getElementById('lastco').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/g," ");</script>
<div class="partoqeel">
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="https://via.placeholder.com/100x35"/></a>
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(window).scroll(function() {
var header_top = $('#headerbar-top');
if (header_top.hasClass('w-toolbar')) {
if ($(window).scrollTop() >= 42) {
header_top.addClass('is-sticky');
} else {
header_top.removeClass('is-sticky');
}
} else {
if ($(window).scrollTop() >= 1) {
header_top.addClass('is-sticky');
} else {
header_top.removeClass('is-sticky');
}
}
});
});
//]]>
</script>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready( function() {
$('div.fb-login-button, span.fb-login-button').attr({
"data-scope": "{switch_facebook_login.FB_SCOPE}",
"data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
"data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
"data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
"data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
});
$('div.fb-login-button, span.fb-login-button').each(function() {
if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
$(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
}
if($(this).html() == '') {
$(this).html('{switch_facebook_login.FB_LABEL}');
}
});
FB.init({
"appId" : "{switch_facebook_login.FB_APP_ID}",
"cookie" : {switch_facebook_login.FB_COOKIE},
"xfbml" : {switch_facebook_login.FB_XFBML},
"oauth" : {switch_facebook_login.FB_OAUTH},
"version" : "{switch_facebook_login.FB_VERSION}"
});
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
function onLoginFB() {
window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
}
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_topicit_connect -->
<script type="text/javascript">
$(document).ready( function() {
$('div.ti-connect, span.ti-connect').attr({
"data-loc": "{switch_topicit_connect.TOPICIT_URL}",
"data-login": "{switch_topicit_connect.BOARD_LOGIN}",
"data-version": "{switch_topicit_connect.TOPICIT_VERSION}",
"data-lang": "{switch_topicit_connect.BOARD_LANG}"
});
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'topicit-connect'));
});
</script>
<!-- END switch_topicit_connect -->
<script type="text/javascript">
//<![CDATA[
fa_endpage();
//]]>
</script>
</body>
</html>
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.totalfooter {
width: 100%;
height: 500px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
#newmember {
writing-mode: vertical-rl;
text-orientation: mixed;
text-align: center;
text-transform: uppercase;
}
#newmember a {
font: 36px quicksand;
}
.restefooter {
background: #cb8a48;
width: 70%;
padding: 20px 20px 0px 20px;
}
.titlefoo {
font: 20px ptlight;
text-transform: uppercase;
color: #2e2c29;
letter-spacing: 2px;
font-weight: bold;
font-style: italic;
}
#onlineu {
width: 80%;
height: 100px;
overflow: auto;
color: #2e2c29;
}
#onlineu a {
text-transform:uppercase;
font:15px arial;
}
#lastco {
width: 80%;
height: 200px;
overflow: auto;
color: #2e2c29;
}
#lastco a {
text-transform:uppercase;
font:15px arial;
font-style:italic;
}
.partoqeel {
width: 80%;
}
.partoqeel img {
border: solid 5px #2e2c29;
margin: 5px;
}
Jawn
# Re: [INDEX ORANGE VIBE] - Jeu 19 Sep - 2:34
LES IMAGES ET MISE EN PAGE :
Pour avoir un fond qui ne scroll pas de gauche à droite, Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
a{text-decoration:none;}
a:hover{text-decoration:none !important;}
body {
overflow-x: hidden;
padding: 0;
margin-left: 62px !important;
}
Pour avoir une jolie barre de scroll :
- Code:
::-webkit-scrollbar-thumb {
background-color:#cb8a48;
}
::-webkit-scrollbar {
width: 7px;
height: 8px;
border: 3px solid #eeeeee;
background-color: #cb8a48;
}
Pour éviter le cadre de base autour de la PA de forumactif, rajoutez :
- Code:
.panel {
box-shadow: none !important;
}
Pour ajouter la font de la bann (la plus petite) :
- Code:
@font-face {
font-family: ptlight;
src:url('https://files.jcink.net/uploads/noctuary/Skin___Historia/FuturaPTLight.otf');
format("opentype");
}
Pour le tooltip (l'effet au survol d'une image dans le footer) :
- Code:
#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:5px 12px 5px 12px;
background-color: #2e2c29;
letter-spacing:1px;
font:9px arial;
text-transform: uppercase;
color:#eeeeee;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
}
Pour les liens de bas de page :
- Code:
#page-footer {
border-radius: 15px;
text-transform: uppercase;
font: 9px calibri;
font-weight: 700;
margin: 0px auto;
padding: 1px;
width: 100%;
background: #eeeeee !important;
color: black !important;
}
#page-footer a {
color: black;
font: 9px calibri;
text-transform: uppercase;
}
Panneau d'administration > Affichage > Images et Couleurs > Gestion des images > Icônes du forum :
Catégorie / Forum
- Code:
https://imgur.com/aMUyNyG.png.png
Catégorie - Nouveau / Forum - Nouveau :
- Code:
https://imgur.com/5UvrOME.png
Si vous voulez le même effet de texte en gras et en italique sur le premier mot de la catégorie, allez dans Panneau d'administration > Général > Forum > Catégories et forums, cliquez sur la petite roue à côté du titre de votre catégorie (pas le gros en bleu mais ceux au-dessous) et entourez le premier mot de ces balises là, comme sur l'exemple qui suit :
- Code:
<em><b>le premier mot ici</b></em>
Et enfin dernier détail, pour ne pas afficher la barre toute moche de statistiques de forumactif de base dans le footer, rendez-vous dans panneau d'administration > Affichage > Templates > Général > overall_footer_begin et remplacez l'intégralité de votre template 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 -->
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|