![[INDEX BLEU BOISÉ] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [INDEX BLEU BOISÉ] - Lun 17 Déc - 16:43
![[INDEX BLEU BOISÉ] Dqpz71N](https://imgur.com/Dqpz71N.png)
La barre de navigation et sidebar :
Rendez vous dans votre panneau d'administration > Affichage > Templates > Général > Overall_header; remplacez la totalité de votre template :
- 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="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" 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() {
var w_cont = $('#fa_ticker_container').width();
if (w_cont > 0) {
$('#fa_ticker_container').width(w_cont);
/* Affichage de la liste */
$('#fa_ticker_content').css('display','block');
/* Calcul des dimensions du conteneur et des elements */
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
var height_max = h_perso;
/* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max) {
height_max = $(this).height();
}
} );
/* Redimensionnement des elements et des images trop larges */
$('ul#fa_ticker_content li').width(width_item).height(height_max).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);
}
});
/* Redimensionnement et centrage du conteneur en mode vertical */
if (slid_vert) {
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
}
/* Initialisation du caroussel */
$('#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;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(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}
<!-- BEGIN switch_ticker_new -->
<style>
.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;
}
</style>
<!-- END switch_ticker_new -->
{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 -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<div class="navii"></div>
<div class="sidebar"></div>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="https://2img.net/i/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;">
<table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
<tr height="25">
<td class="catLeft">
<span class="genmed module-title">{SITENAME}</span>
</td>
</tr>
<tr height="{LOGIN_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="mainoption" value="{L_LOGIN}" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
<span class="genmed">{LOGIN_POPUP_MSG}</span>
</td>
</tr>
</table>
</div>
<!-- END switch_login_popup -->
<a name="top"></a>
{JAVASCRIPT}
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />
<!-- END switch_logo_center -->
<div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="gen">{SITE_DESCRIPTION}<br /> </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
</tr>
</table>
<!-- DEBUT BARRE NAVIG -->
<div id="userlinkss">
<div id="avatar_nav">
<div class="js-avatar"><div class="js-avatar2"></div></div>
<div class="menuposition">{GENERATED_NAV_BAR}</div></div></div>
<!-- FIN BARRE NAVIG -->
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<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>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<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>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top" width="{C1SIZE}">
<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>
</td>
<td valign="top" width="100%">
<!-- BEGIN html_validation -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- END html_validation -->
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
/******NAV********/
#userlinkss {
text-align:left;
}
.menuposition {
position: absolute;
width: 135px;
margin-left: -210px;
margin-top: -28px;
}
.js-avatar {
width: 60px;
height: 60px;
padding: 5px;
border: 5px solid #527c7c;
transform: rotate(45deg);
float: left;
left: -60px;
position: relative;
overflow: hidden;
top: -20px;
}
.js-avatar img {
width: 165%;
margin-top: -40px;
margin-left: 10px;
transform: rotate(-45deg);
}
.menuposition a[href="/"]:before {
font-family: 'saturnicons';
content: "\e0b7";
font-size: 20px;
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
}
.menuposition a[href="/faq"]:before {
font-family:'saturnicons';
font-size: 15px;
content: "\e1e7";
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
}
.menuposition a[href="/search"]:before {
font-family:'saturnicons';
font-size: 20px;
content: "\e319";
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
}
.menuposition a[href="/memberlist"]:before {
font-family:'saturnicons';
font-size: 20px;
content: "\e2b6";
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
}
.menuposition a[href="/groups"]:before {
font-family:'saturnicons';
font-size: 20px;
content: "\e123";
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
}
.menuposition a[href*="/profile"]:before {
font-family:'saturnicons';
font-size: 20px;
content: "\e0d4";
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
}
.menuposition a[href*="/privmsg"]:before {
font-family:'saturnicons';
font-size: 20px;
content: "\e0ef";
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
}
.menuposition a[href*="/login"]:before {
font-family:'saturnicons';
font-size: 20px;
content: "\e29a";
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
}
.menuposition a[href*="/register"]:before {
font-family:'saturnicons';
font-size: 20px;
content: "\e0e9";
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
}
a.mainmenu.M14_newMp:before {
content: "\e0ed";
font-family:'saturnicons';
color: #eaeaea;
}
.M14_newMp {
position: relative;
}
a.mainmenu.M14_newMp:after {
content: "!";
position: absolute;
top: 30px;
right: 126px;
font-size: 15px;
font-family: roboto;
background-image: url(https://imgur.com/KikxU8E.png);
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
line-height: 20px;
}
a.mainmenu.M14_newMp:hover:before {
color: #eaeaea !important;
transition: 0.6s all;
}
a.mainmenu.M14_newMp{color:#454545 !important;}
/*Apparence MP sur la Toolbar*/
a.M14_alertMp {
color: white !important;
font-size: 12px !important;
text-decoration: none !important;
margin-right: 50px;
line-height: 30px;
background-color: red;
padding: 0 5px;
}
a.mainmenu {
color: #527c7c;
font-family: 'Roboto Condensed';
text-transform: uppercase;
margin: 5px;
}
/*********SIDEBAR******/
.navii {
position:fixed;
top:0;
left:0;
width:100%;
background:#4abcbb;
height:20px;
z-index: 999;
}
.sidebar {
position:fixed;
top:20px;
left:0;
background:#111111;
height:100%;
width:200px;
}
/********FOND DU FORUM*******/
.bodylinewidth {
width: 840px;
margin-left: 200px;
margin-top: 40px;
padding: 10px;
position: relative;
}
Le Javascript & JQuery
Pour afficher sur la barre latérale l'avatar du membre connecté/l'invité, il vous faudra ajouter ceci dans les Javascripts. Pour ceci, suivez le chemin : Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript. Créez un nouveau JS et cochez bien, "Sur toutes les pages" après lui avoir donné un nom :
- Code:
$(function(){
$.each(_userdata, function(key, value){
$(".js-" + key).html(value);
})
});
Pour afficher un MP lorsqu'il sera reçu, répétez la même manoeuvre mais rajoutez :
- Code:
jQuery(function(){
$('a.mainmenu[href="/privmsg?folder=inbox"]').html('');
$.get('/privmsg?folder=inbox' , function(data){
var mp= $(data).find('form[action="/privmsg?folder=inbox"] img[title="Message Non-lu"]').length;
if(mp==1)
{
$('a.mainmenu[href="/privmsg?folder=inbox"]').html(''+mp+' Message').addClass('M14_newMp');
$('#fa_menu').before('<a href="/privmsg?folder=inbox"class="M14_alertMp">Vous avez un message privé</a>');
}
else if(mp>1)
{
$('a.mainmenu[href="/privmsg?folder=inbox"]').html(''+mp+'').addClass('M14_newMp');
$('#fa_menu').before('<a href="/privmsg?folder=inbox"class="M14_alertMp">Vous avez '+mp+' messages privés</a>');
}
});
});
La page d'accueil :
Dans votre panneau d'administration > Affichage > Page d'accueil > Généralités, copiez votre HTML :
- Code:
<div class="lesliens">
<div class="liens">
<a href="/">Réglement</a>
</div>
<div class="liens">
<a href="/">Groupes</a>
</div>
<div class="liens">
<a href="/">contexte</a>
</div>
<div class="liens">
<a href="/">L'univers</a>
</div>
<div class="liens">
<a href="/">Avatars</a>
</div>
<div class="liens">
<a href="/">Métiers</a>
</div>
<div class="liens">
<a href="/">Compte pris</a>
</div>
<div class="liens">
<a href="/"><span class="sf sf-discord"></span></a>
</div>
</div>
<div class="banniere">
<div class="cadreuh">
<div class="titlefo">
<a href="/">Epsilon — <br /> This war of mine</a>
</div>
<div class="trukkisor">
forum rpg city - avatar 250*400
</div>
<div class="contexte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus diam eget tellus interdum, aliquam porttitor justo hendrerit. Etiam aliquam eleifend augue ac tristique. Cras lacinia mauris vitae nunc viverra, a auctor nisl vestibulum. Cras venenatis finibus sagittis. Mauris urna neque, pretium quis pellentesque id, tempor at felis. Sed laoreet, nisl sit amet consectetur consectetur, libero urna aliquet mauris, sit amet gravida risus lacus sed tellus. Duis sed quam finibus, pretium eros eu, mattis tellus. In luctus porttitor ipsum, et pulvinar ante suscipit in. Etiam faucibus in diam ac consectetur. Mauris viverra vitae sapien in euismod. Quisque non justo eu ipsum congue consequat. Nullam porta molestie erat in tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sit amet lobortis ex. Sed interdum lorem at enim fermentum dictum. Nunc consequat semper scelerisque. Nam ellentesque aliquam elit, sit amet pellentesque arcu varius eu. Morbi rhoncus posuere ultricies. Donec dignissim in justo ut interdum. Aenean at justo nulla. Maecenas molestie elit vel dapibus laoreet. Fusce ac ligula faucibus, rhoncus ipsum sed, scelerisque lorem. Suspendisse a velit consequat, molestie ante sed, pretium justo. Vestibulum eu consequat ligula. Donec vel rutrum dui, in imperdiet elit.
</div>
</div>
</div>
<div class="topparto">
<div class="square">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50/5f9c9c/ffffff" /></a>
</div>
<div class="square">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50/5f9c9c/ffffff" /></a>
</div>
<div class="square">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50/5f9c9c/ffffff" /></a>
</div>
<div class="square">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50/5f9c9c/ffffff" /></a>
</div>
<div class="square">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50/5f9c9c/ffffff" /></a>
</div>
<div class="square">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50/5f9c9c/ffffff" /></a>
</div>
<div class="square">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50/5f9c9c/ffffff" /></a>
</div>
<div class="square">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50/5f9c9c/ffffff" /></a>
</div>
<div class="square">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50/5f9c9c/ffffff" /></a>
</div>
</div>
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.lesliens {
display: flex;
flex-wrap: wrap;
margin-top: -204px;
margin-left: 72px;
}
.liens {
padding: 10px;
width: 150px;
background: #111111;
text-align: center;
margin: 5px;
}
.liens span {
font-size: 16px;
}
.liens a{
text-transform:uppercase;
color:#52b0b1;
font:12px Roboto;
font-style:italic;
display:block;
}
.banniere {
margin-top: 18px;
border: solid 8px #111111;
margin-left: -105px;
background-image: url(https://imgur.com/OaKKCZ1.png);
background-size: 100%;
height: 430px;
position: relative;
}
.cadreuh {
background: white;
border: solid 5px #527c7c;
width: 450px;
height: 320px;
padding: 10px;
float: left;
margin: 28px;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
}
.titlefo {
text-align:left;
}
.titlefo a{
font:60px Anton;
text-transform:uppercase;
color:#111111;
letter-spacing:1px;
line-height:80px;
font-style:italic;
}
.trukkisor {
background: linear-gradient(to left,#4abcbb, #5e9c9b);
text-align:center;
width:250px;
padding:15px;
box-shadow:1px 2px 8px black;
position:absolute;
margin-top:-110px;
text-transform:uppercase;
color:black;
font:14px roboto;
}
.contexte {
overflow:auto;
padding:15px;
outline: 1px solid #fff;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
outline-offset: -2px;
text-align:justify;
height:125px;
font:12px calibri;
}
.topparto {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
}
.square {
width: 50px;
height: 50px;
margin: 15px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
overflow: hidden;
text-align: center;
box-shadow:1px 2px 5px black;
transition: 1s linear;
}
.square img {
width: 50px;
height: 50px;
transition: 1s linear;
}
.square:hover {
transition:1s linear;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.square img:hover {
transition:1s linear;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width:50px;
height:50px;
margin-top:0px;
}
Jawn
# Re: [INDEX BLEU BOISÉ] - Lun 17 Déc - 16:46
Les catégories :
Remplacer l'intégralité de votre template index_box par le HTML :
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="tlteCAT">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="categorie">
<div class="stats2">{catrow.forumrow.POSTS} messages</div>
<div class="stats">{catrow.forumrow.TOPICS} sujets</div>
<!-- BEGIN avatar -->
<div class="lastposter" style="background-image: url(http://via.placeholder.com/100x100);">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
<!-- END avatar -->
<div class="blokg">
<div class="titreFRM"><a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a></div>
<div class="lastpost">{catrow.forumrow.LAST_POST}</div>
<div class="description">{catrow.forumrow.FORUM_DESC}</div></div>
</div>
<!-- END forumrow -->
<!-- END catrow -->
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.tlteCAT {
background: linear-gradient(to left,#4abcbb, #5e9c9b);
padding: 20px;
text-align: left;
box-shadow: 1px 2px 5px #454545;
margin-top: 20px;
margin-left: -75px;
width: 835px;
}
.tlteCAT h2 {
color:#111111;
font:50px Anton;
font-style:italic;
text-transform:uppercase;
letter-spacing:1px;
}
.categorie {
background: #ebebeb;
height: 200px;
box-shadow: 1px 2px 5px #454545;
margin: 20px 20px 0px -20px;
width: 820px;
display: flex;
flex-wrap: wrap;
}
.lastposter {
width: 100px;
height: 100px;
margin: 15px 15px 15px -58px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
overflow: hidden;
text-align: center;
box-shadow: 1px 2px 5px black;
border: solid 5px #111111;
position: relative;
top: 36px;
}
.lastposter img {
width: 150px;
margin: -93px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.blokg {
width: 400px;
}
.titreFRM {
width: 400px;
text-align: center;
padding-top: 20px;
}
.titreFRM a {
font:30px Anton;
text-transform:uppercase;
color:black;
}
.lastpost {
text-align: center;
font: 10px roboto;
color: black;
height: 45px;
}
.lastpost a {
color:#59a4a4;
text-transform:uppercase;
text-shadow:1px 0px 1px black;
}
.lastpost strong {
font: 13px Anton;
font-style: italic;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: none;
}
.description {
width: 350px;
text-align: justify;
height: 76px;
overflow: auto;
font: 11px calibri;
padding: 5px;
margin-left: 16px;
}
.description img {
position: absolute;
z-index: 3;
right: 40px;
margin-top: -114px;
width: 300px;
height: 200px;
outline: 1px solid #ffffff;
outline-offset: -4px;
}
.stats2 {
position: absolute;
color: #58a6a6;
font: 12px calibri;
transform: rotate(-45deg);
margin-left: -77px;
margin-top: 54px;
text-transform: uppercase;
}
.stats {
position: absolute;
color: #58a6a6;
font: 12px calibri;
transform: rotate(45deg);
margin-left: -70px;
margin-top: 140px;
text-transform: uppercase;
}
Le QEEL + footer :
Remplacer l'intégralité de votre template index_body par le HTML :
- Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN message_admin_titre -->
<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>
<!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">
<table>
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<!-- BEGIN switch_social_login -->
<td width="10%" align="center" valign="middle" class="row1">
<span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
</td>
<td width="40%" class="align_gauche row1">
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
</td>
<!-- END switch_social_login -->
</tr>
</table>
</form>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="50%" valign="top" align="right" class="row1">
<table>
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<!-- BEGIN switch_social_login -->
<td width="10%" align="center" valign="middle" class="row1">
<span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
</td>
<td width="40%" class="align_gauche row1">
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
</td>
<!-- END switch_social_login -->
</tr>
</table>
</form>
<!-- END switch_user_login_form_footer -->
<div class="jesaispas">
<a href="/memberlist?mode=today_posters">Top 20 du jour</a>
<a href="/memberlist?mode=overall_posters">Top 20 du forum</a>
<a href="/search?search_id=activetopics">Sujets actifs du jour</a>
<a href="/?mode=delete_cookies">Supprimer les cookies</a>
<a href="/search?search_id=newposts">Voir les messages non lus</a>
<a href="/?mark=forums">Marquer tous les forums comme lus</a></div>
<!-- BEGIN disable_viewonline -->
<div class="titleqeel">
<div class="gauche">statistiques du forum</div>
<div class="droite">Who was there ?</div>
</div>
<div class="QEELici">
<div id="cadre-qeel-header">
<div>{TOTAL_POSTS} {TOTAL_USERS}</div>
</div>
<div class="first">
<div class="welcome">
<div id="dernier_membre">{NEWEST_USER}</div>
<span id="avatar_dernier_membre"></span>
</div>
<div class="totalonline"><table>{L_CONNECTED_MEMBERS}</table></div>
</div>
<div class="secondlol">
<div class="enligne">En ligne</div>
<div class="online">{LOGGED_IN_USER_LIST}</div>
<div class="shoutbox">Cette place est pour la shoutbox !</div>
<div class="copyright">
COPYRIGHT : Le forum, son contenu écrit, le code ainsi que le graphisme appartient à ses créateurs. Index codé par <a href="http://epsilon-ls.forumactif.com/">E P S I L O N</a>. Toute reproduction, même partielle, est interdite.</div>
</div>
</div>
<div class="footerparto">
<a target="_blank" href="/"><img src="http://placehold.it/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
<a target="_blank" href="/"><img src="https://via.placeholder.com/88x31/5f9c9c/000000" class="tooltip" title="/"/></a>
</div>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<!-- END switch_legend -->
{AUTO_DST}
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.jesaispas {
text-align: center;
padding: 2px;
position: relative;
margin-left: -22px;
margin-top: 40px;
}
.jesaispas a {
color:#111111;
font-size:11px;
font-family:calibri;
text-transform:uppercase;
margin:5px;
}
.titleqeel {
background: linear-gradient(to left,#4abcbb, #5e9c9b);
padding: 20px;
box-shadow: 1px 2px 5px #454545;
display: flex;
flex-wrap: wrap;
width: 835px;
margin-left: -75px;
}
.gauche {
background:#4abcbc;
padding:20px;
height:20px;
margin-top:20px;
font:15px roboto;
text-transform:uppercase;
box-shadow: 1px 2px 5px #454545;
width:300px;
text-align:center;
}
.welcome {
width:355px;
padding:10px;
height:100px;
background:#5f9c9c;
}
#avatar_dernier_membre {
margin-left: 145px;
position: relative;
top: 48px;
overflow: hidden;
text-align: center;
box-shadow: 1px 2px 5px black;
border: 2px solid #111111;
}
#avatar_dernier_membre img {
width: 110px;
height: 110px;
margin: -25px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#dernier_membre {
text-align:center;
font-size:0px;
}
#dernier_membre a {
font:20px Anton;
text-transform:uppercase;
letter-spacing:1px;
}
.totalonline {
padding: 10px;
height: 110px;
margin: 80px auto;
width: 320px;
overflow: auto;
color: #111111;
font: 11px calibri;
}
#dernier_membre strong {
color: #ebebeb;
text-shadow: 1px 1px 2px #121212;
}
.totalonline a {
font:12px calibri;
text-transform:uppercase;
}
.droite {
padding:20px;
text-align:right;
width:450px;
font:40px Anton;
text-transform:uppercase;
letter-spacing:2px;
font-style:italic;
}
.QEELici {
height: 400px;
display: flex;
flex-wrap: wrap;
}
.first {
width: 375px;
background:#ebebeb;
margin-top: 50px;
box-shadow: 8px 15px 20px -12px rgba(0,0,0,.8);
}
.secondlol {
width: 400px;
background: #ebebeb;
margin-top: 50px;
margin-left: 25px;
box-shadow: 8px 15px 20px -12px rgba(0,0,0,.8);
}
.enligne {
text-align:center;
text-shadow:1px 0px 2px black;
font:40px Anton;
letter-spacing:1px;
color:#5f9c9c;
text-transform:uppercase;
font-style:italic;
}
.online {
padding: 10px;
height: 75px;
margin: 15px auto;
width: 350px;
overflow: auto;
color: #111111;
font: 11px calibri;
}
.online a {
font:15px Calibri;
text-transform:uppercase;
letter-spacing:1px;
}
.shoutbox {
background: #5f9c9c;
height: 100px;
margin: 15px auto;
width: 380px;
}
.copyright {
text-align: justify;
color: #111111;
font: 11px calibri;
overflow: auto;
width: 340px;
margin: -10px auto;
height: 45px;
padding: 5px;
}
#cadre-qeel-header {
font-size: 0;
position: relative;
}
#cadre-qeel-header strong {
font-size: 20px;
background: #5d9d9d;
color: #111111;
width: 80px;
height: 60px;
display: block;
margin-bottom: 180px;
margin-right: -27px;
text-align: center;
padding: 10px 0px 0px 0px;
text-transform: uppercase;
border: 5px solid #111111;
}
#cadre-qeel-header strong:nth-child(1) {
position: absolute;
bottom: -120px;
right: 48px;
font-family: calibri;
letter-spacing: 2px;
}
#cadre-qeel-header strong:nth-child(1):before {
content: "messages";
position: absolute;
top: 36px;
left: 0;
width: 100%;
font-size: 12px;
font-weight: 100;
}
#cadre-qeel-header strong:nth-child(2) {
position: absolute;
bottom: 20px;
right: 48px;
font-family: calibri;
letter-spacing: 2px;
}
#cadre-qeel-header strong:nth-child(2):before {
content: "membres";
position: absolute;
top: 36px;
left: 0;
width: 100%;
font-size: 12px;
font-weight: 100;
}
.footerparto {
display: flex;
flex-wrap: wrap;
margin: 20px auto 20px 10px;
text-align: center;
width: 780px;
}
.footerparto img {
width: 88px;
height: 31px;
border: solid 1px #5f9c9c;
outline: 1px solid #fff;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
outline-offset: -2px;
margin: 3.7px;
}
Les images dont vous aurez besoin :
Image de fond de page (fixée) :
- Code:
https://imgur.com/PG63RyU.png.png
Tooltip et CSS pour décorer :
Pour avoir une jolie barre de scroll sous Chrome :
- Code:
::-webkit-scrollbar {
width: 5px;
height: 10px;
background:#111111;
}
::-webkit-scrollbar-thumb:vertical {
height: 10px;
background-color:#4abcbb;
}
::-webkit-scrollbar-thumb:horizontal{
height: 30px;
background-color: #4abcbb;
}
Styliser le tooltip (le machin qui bouge en même temps que votre souris au survol de certains éléments) :
- Code:
#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:5px;
background-color: #fff;
font-family:arial;
font-weight: 700;
text-transform: uppercase;
font-size:8px;
color:#111111;
border: solid 1px #5f9c9c;
outline: 1px solid #fff;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
outline-offset: -2px;
}
Pour avoir une jolie barre de bas de forum, avec le panneau d'admin et les liens forumactif :
- Code:
#page-footer {
border: solid 1px #5f9c9c;
outline: 1px solid #fff;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
outline-offset: -2px;
background: #ebebeb;
padding: 10px;
color:#111111;
}
#page-footer a {
color:#111111;
font:11px calibri;
letter-spacing:1px;
}
Pour que tout soit bien calé, rajoutez :
- Code:
body {
margin:0;
padding:0;
}
Dernier point : Pour que votre image dans le QEEL s'affiche correctement, rendez-vous dans votre panneau d'administration > Affichage > Templates > Profil > profil_view_body reperez la ligne suivante :
- Code:
<td width="80%"><b><span class="gen">{AVATAR_IMG}</span></b></td>
- Code:
<td width="80%"><b><span class="gen"><span id="avatar_membre">{AVATAR_IMG}</span></span></b></td>
Puis allez dans l'onglet > Modules > HTML & Javascript > Gestion des codes Javascript. Créez un nouveau JS (sur l'index) et rajoutez :
- Code:
$(function(){
$.get($("#dernier_membre a[href^='/u']")[0].href,function(d){
(a=$("#avatar_membre img",$(d))).length&&$("#avatar_dernier_membre").html(a);})
});
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|