![[INDEX JAUNE ÉTOILÉ] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [INDEX JAUNE ÉTOILÉ] - Lun 17 Déc - 4:50
![[INDEX JAUNE ÉTOILÉ] C4ztI3g](https://imgur.com/c4ztI3g.png)
LA PAGE D'ACCUEIL :
- 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 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}" />
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<!--'ROBOTO CONDENSED'-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<!--Open Sans Condensed-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<!-------MONTSERRAT----->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-------POIRET ONE---------->
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<script src="https://use.fontawesome.com/c9dc62c48f.js"></script>
<link rel='stylesheet' href='http://www.aht.li/3031956/font-awesome.css' />
<link rel='stylesheet' href='http://www.aht.li/3031957/font-awesomemin.css' />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- 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="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JS_DIR}jquery/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;
</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');
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}');
report.focus();
<!-- END switch_report_popup --><!-- BEGIN switch_ticker -->ticker_start({
switch_ticker.HEIGHT
}
, {
switch_ticker.SPACING
}
, {
switch_ticker.SPEED
}
, '{switch_ticker.DIRECTION}', {
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[
r _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
}
)();
//]]>
</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="haut">
<a href="#top"><img src="https://imgur.com/YIl9LU0.png" alt="RSS" style="border:none" /></a>
</div>
<div class="bas">
<a href="#bottom"><img src="https://imgur.com/2r398lR.png" alt="RSS" style="border:none" /></a>
</div>
<table style="position: fixed; bottom: 40px; left: 0px;background-color: transparent;z-index:10000;">
<tr>
</tr>
</table>
<!-- DEBUT BARRE NAVIG -->
<div id="userlinkss">
<div class="userlinkcontrols">
<div class="userlinkav">
<div class="userav1">
<div class="userav">
<div id="avatar_nav">
<div class="js-avatar"></div>
<div class="bonjour">
Bienvenue
<span class="js-username"></span>
!
</div>
</div>
</div>
</div>
</div>
<div class="menuposition">
{GENERATED_NAV_BAR}
</div>
</div>
<div class="g-3" style="display: none;" align="center">
<div class="username">Bonjour invité!</div>
</div>
<ul id="menuki">
<li><a href="#">Navigation</a></li>
<li><a href="/">Top 20 du jour</a></li>
<li><a href="/">Top 20 du forum</a></li>
<li><a href="/">Sujet actif du jour</a></li>
<li><a href="/">Supprimer les cookies</a></li>
<li><a href="/">Marquer tout comme lus</a></li>
</ul>
</div>
<!-- FIN BARRE NAVIG -->
<div class="sidebar">
<div class="pin">
<img src="http://wfarm4.dataknet.com/static/resources/icons/set2/a86aba4c5f34.png" style="width:50px; height:50px;" />
</div>
<div class="firsttarace">
<span>Rumeur</span>
</div>
<div id="blblbl">
<div class="ensemble">
<div class="titreuh">Nom du membre</div>
<div class="endessous">Sous titre </div>
<div class="teeete"> <img src="http://via.placeholder.com/50x50" alt="image" style="width: 50px; height: 50px;" /> </div>
<div class="plusbas">Ton texte ici.</div>
</div>
</div>
<div class="firsttarace">
<span>Rp voulus</span>
</div>
<div class="padd">
<div class="baton2">
<a href="h/">Lien</a>
</div>
<div class="baton2">
<a href="h/">Lien</a>
</div>
<div class="baton2">
<a href="h/">Lien</a>
</div>
<div class="baton2">
<a href="h/">Lien</a>
</div>
<div class="baton2">
<a href="h/">Lien</a>
</div>
<div class="firsttarace">
<span>Coups de ??</span>
</div>
<div class="teteun">
<div class="coude">
<a href="LIEN_FIRST" class="coudeimg" target="_blank"><img src="http://via.placeholder.com/70x70"/></a>
<a href="LIEN_FIRST" class="coudeimg" target="_blank"><img src="http://via.placeholder.com/70x70"/></a>
</div>
</div>
</div>
<div class="art">
<a href="http://epsilon-ls.forumactif.com/">E P S I L O N</a>
</div>
</div>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1>
<img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" />
Hit
<em>skin</em>
.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">
<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">
<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 {CLASS_TABLE_TYPE} 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 {CLASS_TABLE_TYPE} 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>
<div id="cadrouh">
<div class="banniereuh"></div>
<div class="contexte">
<span>C</span>contexte
<p>La petite phrase qui met bien.</p>
<div class="linku">
<a href="/">Lire la suite <i class="fa fa-star" aria-hidden="true"></i></a>
</div>
</div>
<div class="news_credits">
<div class="news">
<span>date</span> News<br/><span>date</span> News
</div>
</div>
<div class="liensutiles">
<div id="padd">
<div class="baton"><a href="/">Lien</a></div>
<div class="baton"><a href="/">Lien</a></div>
<div class="baton"><a href="/">Lien</a></div>
<div class="baton"><a href="/">Lien</a></div>
</div>
</div>
<div class="predefinis">
<div class="predefini">
<img src="http://via.placeholder.com/70x70"/>
<div class="hover_predef">
<div class="hover_predef_text">Prédéfini</div>
</div>
</div>
<div class="predefini">
<img src="http://via.placeholder.com/70x70"/>
<div class="hover_predef">
<div class="hover_predef_text">Prédéfini</div>
</div>
</div>
<div class="predefini">
<img src="http://via.placeholder.com/70x70"/>
<div class="hover_predef">
<div class="hover_predef_text">Prédéfini</div>
</div>
</div>
</div>
<div class="jambon">
<div class="infobulle">
<img src="https://imgur.com/lnnr4wO.png"/>
<div class="ici">
<div class="staff_pseudo">Staffeux</div>
<div class="staff_text"><a href="/">MP</a> ? <a href="/">Profil</a></div>
</div>
</div>
<div class="infobulle">
<img src="https://imgur.com/lnnr4wO.png"/>
<div class="ici">
<div class="staff_pseudo">Staffeux</div>
<div class="staff_text"><a href="/">MP</a> ? <a href="/">Profil</a></div>
</div>
</div>
<div class="infobulle">
<img src="https://imgur.com/lnnr4wO.png"/>
<div class="ici">
<div class="staff_pseudo">Staffeux</div>
<div class="staff_text"><a href="/">MP</a> ? <a href="/">Profil</a></div>
</div>
</div>
<div class="infobulle">
<img src="https://imgur.com/lnnr4wO.png"/>
<div class="ici">
<div class="staff_pseudo">Staffeux</div>
<div class="staff_text"><a href="/">MP</a> ? <a href="/">Profil</a></div>
</div>
</div>
<div class="endu"><img src="https://imgur.com/j7rIMmV.png"></div>
</div>
<div class="colonne_milieu_pa">
<div id="rotator1492882490182">
<a id="" style="opacity: 0;" href="/" title="Diaporama deux" target="_blank"><img src="http://via.placeholder.com/330x165" alt="Diaporama deux"></a>
<a href="/" title="Diaporama trois" target="_blank" style="opacity: 0;" id=""><img src="http://via.placeholder.com/330x165" alt="Diaporama trois"></a>
<a href="/" title="Diaporama trois" target="_blank" style="opacity: 1; z-index: 999;" id="itemActif1492882490182"><img src="http://via.placeholder.com/330x165" alt="Diaporama trois"></a>
</div>
<script type="text/javascript">(function(){var r = document.getElementById("rotator1492882490182"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {var a = document.getElementById("itemActif1492882490182"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1492882490182";n.style.zIndex = 999})},3500)})();</script>
</div>
<div class="lesrectangles">
<div class="authors">
<div class="colorinside1"><span>groupe</span></div><img class="pourcentage">
</div>
<div class="creations">
<div class="colorinside2"><span>groupe</span></div><img class="pourcentage">
</div>
<div class="indep">
<div class="colorinside3"><span>groupe</span></div><img class="pourcentage">
</div>
</div>
<div id="boutons_vote_pa">
<a href="h/" target="_blank"><img class="votes_pa" src="http://via.placeholder.com/50x50"></a>
<a href="/" target="_blank"><img class="votes_pa" src="http://via.placeholder.com/50x50"></a>
<a href="/" target="_blank"><img class="votes_pa" src="http://via.placeholder.com/50x50"></a>
<a href="/" target="_blank"><img class="votes_pa" src="http://via.placeholder.com/50x50"></a>
</div>
<div class="partenaires_pa">
<div class="noireuh">
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
<div class="hoverparto"><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50" /></a></div>
</div>
<div class="etwal2"><img src="https://imgur.com/zFfKHjW.gif" /></div>
</div>
<div class="credou"><a href="http://epsilon-ls.forumactif.com/">E P S I L O N</a>.</div>
</div>
<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 -->
AVANT DE METTRE VOTRE CSS, PENSEZ A DÉSACTIVER L'OPTIMISATION DE CSS !
Dans ce template, se trouvent la barre de navigation, la page d'accueil ainsi que la barre latérale.
Dans l'ordre donc, le CSS pour ces trois là :
LA BARRE DE NAVIGATION :
- Code:
#userlinkss {
background: #000;
background-image: url('https://www.textures.com/system/gallery/photos/Landscapes/Skies%20Partial/19586/Skies0258_2_download600.jpg');
height: 40px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.js-avatar {
background: #171116;
border: 2px solid #d09f01;
height: 70px;
overflow: hidden;
position: absolute;
right: 100px;
top: 16px;
width: 70px;
border-radius:50%
}
.js-avatar img {
width: 72px;
}
.bonjour {
color: #d09f01;
font-family: 'Roboto Condensed';
font-variant: normal;
font-size: 14px;
font-weight: bold;
font-style: normal;
position: absolute;
text-transform: uppercase;
right: 185px;
top: 22px;
}
.menuposition img {
display: none;
}
.menuposition a:hover {
color: white !important;
transition: 0.6s all;
}
.menuposition a {
height: 18px;
width: 18px;
padding: 10px;
text-align: center;
transition: 0.6s all;
}
.menuposition {
position: absolute;
top:10px;
left: 20px;
}
.menuposition a[href="/faq"]:before {
font-family: FontAwesome;
font-size: 15px;
content: "\f29c";
margin: 5px;
}
.menuposition a[href="/search"]:before {
font-family: FontAwesome;
font-size: 15px;
content: "\f002";
margin: 5px;
}
.menuposition a[href="/memberlist"]:before {
font-family: FontAwesome;
font-size: 13px;
content: "\f0c0";
margin: 5px;
}
.menuposition a[href="/groups"]:before {
font-family: FontAwesome;
font-size: 15px;
content: "\f2c3";
margin: 5px;
}
.menuposition a[href*="/profile"]:before {
font-family: FontAwesome;
font-size: 15px;
content: "\f007";
margin: 5px;
}
.menuposition a[href*="/privmsg"]:before {
font-family: FontAwesome;
font-size: 15px;
content: "\f2b7";
margin: 5px;
}
.menuposition a[href*="/login"]:before {
font-family: FontAwesome;
font-size: 15px;
content: "\f011";
margin: 5px;
}
.menuposition a[href*="/register"]:before {
font-family: FontAwesome;
font-size: 15px;
content: "\f234";
margin: 5px;
}
a.mainmenu.M14_newMp:before {
content: "\f2b6";
color: #a33f3f;
}
.M14_newMp {
position: relative;
}
a.mainmenu.M14_newMp:after {
content: "!";
position: absolute;
top: -4px;
right: -2px;
font-size: 15px;
font-family: roboto;
background: red;
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
line-height: 20px;
}
a.mainmenu.M14_newMp:hover:before {
color: white !important;
transition: 0.6s all;
}
a.mainmenu.M14_newMp{color:red !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: #d09f01;
font-size: 8px;
font-family: 'Roboto Condensed';
text-transform:uppercase;
}
#menuki {
list-style: none;
margin: 0 auto;
padding: 10px 0 0;
position: relative;
float: left;
left: 408px;
top: 5px;
}
#menuki li{
float: left;
padding: 0 0 10px 0;
position: relative;
font-family:'Roboto Condensed';
text-transform:uppercase;
}
#menuki a{
float: left;
height: 25px;
padding: 0 25px;
color: #d09f01;
text-transform:uppercase;
font: bold 12px/12px;
text-decoration:none;
font-family:'Roboto Condensed';
}
#menuki li:hover > a{
color: #d09f01;
}
*html #menuki li a:hover{ /* IE6 */
color: #d09f01;
}
#menuki li:hover > ul {
color: #000!important;
display: block;
font-family:'Roboto Condensed';
text-transform:uppercase;
background-color: black;
border: solid 1px darkgrey;
}
/* Sous-menu */
#menuki ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 999;
}
#menuki ul li{
float: none;
margin: 0;
padding: 0;
display: block;
}
#menuki ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color:black !important;
}
#menuki ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menuki ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menuki ul a:hover{
background: none;
transition: all 900ms;
}
#menuki ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menuki ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
}
#menuki ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menuki ul li:last-child a{
border-radius: 0 0 0px 0px;
}
/* Rétablissement du flottement */
#menuki:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menuki { zoom: 1; } /* IE6 */
*:first-child+html #menuki { zoom: 1; } /* IE7 */
LA PAGE D'ACCUEIL :
- Code:
.credou {
color: grey;
font-size: 11px;
height: 14px;
position: relative;
}
.credou a {
color: #d09f01!important;
text-decoration: none;
}
.partenaires_pa {
background-color: #000;
background-image: url(https://www.textures.com/system/gallery/photos/Landscapes/Skies%20Partial/19586/Skies0258_2_download600.jpg);
left: 0;
margin: -59px auto 0;
position: relative;
width: 1001px;
clear: both;
}
.hoverparto {
display: inline-block;
height: 40px;
padding: 10px;
width: 40px;
}
.noireuh {
height: 70px;
margin: 90px 5px 5px 32px;
width: 970px;
}
#boutons_vote_pa {
display: block;
text-align: center;
margin-top:20px;
position:relative;
width: 219px;
float: right;
}
.etwal2 {
float: right;
height: 0;
margin-right: 100px;
margin-top: 0;
position: relative;
top: -83px;
width: 0;
}
.predefinis {
right: 45px;
position: absolute;
top: 300px
}
.predefini {
width: 50px;
height: 50px;
padding: 10px;
display:inline-block;
margin:10px;
}
.hover_predef{
position: absolute;
min-width:40px;
margin-left:15px;
margin-top:-10px;
background-color:#f5edd5;
border:1px solid #d09f01;
padding:3px 5px;
height:15px;
color:#d09f01;
opacity:0;
transition:all 900ms;
}
.predefini:hover .hover_predef{
opacity: 0.8;
}
.hover_predef_text{
text-align:center;
font-size:10px;
font-family:'Roboto';
font-style:italic;
text-transform:uppercase;
}
.lesrectangles {
margin:5px;
display:inline-block;
float:right;
text-align:justify;
position:relative;
}
.authors {
height:15px;
width: 200px;
border: solid 5px #9E5423;
}
.colorinside1 {
height:15px;
width: 80px;
background-color: #9E5423;
text-align:justify;
}
.colorinside1 span {
color:white;
font-size:15px;
font-family:Economica;
}
.colorinside2 span {
color:white;
font-size:15px;
font-family:Economica;
}
.colorinside3 span {
color:white;
font-size:15px;
font-family:Economica;
}
.colorinside4 span {
color:white;
font-size:15px;
font-family:Economica;
}
.creations {
height:15px;
width: 200px;
border: solid 5px #87262A;
margin-top:5px;
}
.colorinside2 {
height:15px;
width: 160px;
background-color: #87262A;
}
.indep {
height:15px;
width: 200px;
border: solid 5px #3B4B8C;
margin-top:5px;
}
.colorinside3 {
height:15px;
width: 150px;
background-color: #3B4B8C;
text-align:justify;
}
.colorinside4 {
height:25px;
width: 40px;
background-color: #388553;
text-align:justify;
}
.colonne_milieu_pa {
display: inline-block;
float: left;
height: 165px;
width: 330px;
position: relative;
z-index:99;
padding:5px;
}
#rotator1492882490182 {
height: 165px;
width: 330px;
}
#rotator1492882490182 a {
border-radius: 5px;
position: absolute;
}
#rotator1492882490182 img {
height: 165px;
width:330px;
}
.clear {
clear: both;
}
.endu {
display:inline-block;
float:right;
margin-top:25px;
}
.jambon {
background-color: white;
border: solid 1px lightgrey;
width: 558px;
height: 100px;
display: inline-block;
left: 5px;
float: left;
position: relative;
}
.infobulle{
position:relative;
display:inline-block;
width:70px;
height:70px;
vertical-align: middle;
margin-top: 15px;
margin-left: 10px;
border-radius: 50%;
background-color: black;
border: solid 1px #d09f01;
}
.infobulle img{
border-radius:100%;
height:70px;
width:70px;
}
.infobulle .ici{
position:absolute;
top:0px;
left:0px;
z-index:2;
width:70px;
height:70px;
opacity:0;
visibility: hidden;
background:rgba(200, 200, 200, 0.5);
border-radius:100%;
transition: all 1s;
}
.infobulle:hover .ici{
opacity:1;
visibility: visible;
}
.staff_pseudo {
text-align: center;
font-size: 11px;
font-family: 'Roboto';
font-style: italic;
text-transform: uppercase;
margin-top:20px;
color: black;
}
.staff_text {
color: black;
font-family: 'Open Sans Condensed', serif;
font-size: 9px;
text-align: center;
margin-left: 0px;
}
#cadrouh {
background-color:#fff; /*Couleur de fond PA*/
width:1000px;
height:755px;
position:relative;
margin:auto;
}
.contexte {
width: 510px;
height: 150px;
background: #eaeaea;
float: left;
padding: 25px;
padding-top: 15px;
padding-bottom: 35px;
text-align: justify;
font-size: 11px;
line-height: 12px;
margin:5px;
font-family: 'Times New Roman';
color: #0f0f0f;
}
.contexte p {
color: #0f0f0f;
font-size: 12px;
font-weight: bold;
line-height: 12px;
margin: 5px;
text-align: justify;
font-family: 'Poiret One';
text-transform:uppercase;
}
.contexte span {
font-family: vibur;
text-transform: uppercase;
color:#d09f01;
font-size:25px;
text-align:justify;
}
.linku {
text-align:center;
margin-top:15px;
color:lightgrey;
}
.banniereuh {
height:678px;
display:inline-block;
float:left;
width:420px;
background-color:pink;
background-image:url('http://via.placeholder.com/420x678');
margin:5px;
}
.news_credits {
width: 190px;
display: inline-block;
vertical-align: top;
margin-top: 42px;
margin:5px;
}
.news {
background-color: #eaeaea;
color: #181818;
padding: 5px;
font-size: 11px;
height: 185px;
line-height: 13px;
overflow: auto;
padding: 0px;
text-align: justify;
width: 190px;
}
.news span {
font-family: 'Poiret One';
text-transform: uppercase;
font-weight: 900;
font-size: 12px;
background-color: #d09f01;
color: #fff;
margin-left:5px;
}
.liensutiles {
width:360px;
height:68px;
background-color:#eaeaea;
float:right;
display:inline-block;
position:relative;
margin:5px;
}
#padd {
margin:5px;
float:left;
display:inline-block;
}
.baton {
display: inline-block;
float: left;
height: 26px;
min-width: 172px;
border:solid 1px lightgrey;
background: rgba(249, 249, 249, 0.95);
margin-right: 1px;
margin-bottom: 1px;
text-align: center;
line-height: 32px;
font-family: lato;
font-weight: 700;
text-transform: uppercase;
color: #0f0f0f;
font-size: 11px;
}
LA BARRE LATERALE :
- Code:
.art {
margin-top:70px;
text-align:center;
}
.art a {
font-size:10px;
color:grey;
text-decoration:none;
}
.coude {
margin-left:15px;
}
.coudeimg {
padding:5px;
width:70px;
height:70px;
}
.teteun {
width: 200px;
height: 15px;
text-align: center;
display: inline-block;
}
.pin {
z-index:99;
margin-top:-40px;
}
.baton2 {
background: #f0e0aa;
text-decoration: none;
padding: 5px;
margin-top: 5px;
width: 190px;
height: 10px;
margin-left: 10px;
text-align: center;
}
.baton2 a {
color: black !important;
font-family: 'Roboto Condensed';
font-size: 11px;
text-decoration:none;
}
.sidebar {
height:540px;
width:220px;
background-color:black;
left:10px;
top:100px;
position:fixed;
border: solid 1px #eaeaea;
}
.firsttarace {
background-color:#d09f01;
width:200px;
margin:10px;
height:25px;
}
.firsttarace span {
color:black;
margin-left:70px;
border-bottom:solid 1px black;
margin-top:20px;
font-family:'Poiret One';
font-weight: 600;
}
.firsttarace2 {
background-color:#d09f01;
width:200px;
margin-left:42px;
margin-top:10px;
height:25px;
}
.firsttarace2 span {
color:black;
margin-left:60px;
border-bottom:solid 1px black;
margin-top:20px;
font-family:'Poiret One';
font-weight: 600;
}
#blblbl {
width:180px;
height:180px;
margin:0 auto;
background-color:#eaeaea;
border:solid 5px #d09f01;
}
.ensemble{
display:inline;
vertical-align:baseline;
}
.teeete {
border: solid 5px #d09f01;
float: left;
height: 50px;
margin: -15px 5px 5px;
width: 50px;
}
.endessous{
font-size:11px;
float:right;
margin-top:3px;
margin-right:20px;
font-family :'Roboto';
color:#000;
}
.plusbas{
overflow:auto;
width:164px;
height:96px;
font-size:11px;
margin-left:8px;
text-align:justify;
line-height: 11px;
margin-top:-35px;
padding:3px;
color:#000;
}
.titreuh {
border-bottom: 1px solid #5b5367;
color: #000;
font-family: 'Roboto Condensed';
font-size: 14px;
font-style: italic;
margin-left: 75px;
text-transform: uppercase;
width: 105px;
}
Pour rajouter les boutons haut et bas sur le côté, il vous faut ajouter à votre CSS :
- Code:
.haut{
position: fixed;
bottom: 42px;
right: 35px;
z-index: 999;
}
.bas{
position: fixed;
bottom: 14px;
right: 9px;
z-index: 999;
}
LES CATEGORIES :
Rendez-vous dans Panneau d'administration > Affichage > Templates > Général > Index_box. Remplacez la totalité de votre template par le code suivant :
- Code:
<div id="stpentoure">
<div class="borderwrap_index">
<div class="cat-nav">
<div class="planou">
<img src="https://imgur.com/dvHrd8D.png" />
</div>
<!-- BEGIN switch_user_logged_in -->
<a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> /
<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> /
<!-- END switch_user_logged_in -->
<a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</div>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="categorie">
<h2>{catrow.tablehead.L_FORUM}</h2>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="cat-full">
<div class="forum-wrap">
<div class="dernier-post inline-cat">
<div class="dernier-post-content"><span class="cat-stats">{catrow.forumrow.TOPICS} sujets / {catrow.forumrow.POSTS} messages</span><br />{catrow.forumrow.LAST_POST}</div>
<div class="ava-dernier">
<!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar --></div>
</div>
<div class="titre-descr-sous inline-cat">
<h3><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></h3>
<div class="description-cat">{catrow.forumrow.FORUM_DESC}</div>
</div>
<img class="new-old-lock inline-cat" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
<div class="sous-forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</div><!-- END tablefoot --><!-- END catrow -->
</div>
Et ensuite, votre CSS (Panneau de Configuration > Affichage > Couleurs > Feuille de style CSS) :
- Code:
/* CATEGORIE */
.planou {
height: 109px;
margin: 0 auto;
position: relative;
top: 92px;
margin-bottom: 90px;
width: 250px;
}
.hola {
background-color: blue;
background-image: url('https://imgur.com/j9RksYW.png');
width: 350px;
height: 205px;
z-index: 999;
margin-left: 25px;
}
#stpentoure {
background: #fff;
margin-left: 1px;
margin-top: -180px;
width: 1000px;
}
.cat-nav {
font-family: 'Roboto Condensed';
text-transform: uppercase;
font-size: 9px;
margin-top: 0px;
text-align: center;
}
.categorie h2 {
background-image: url(https://imgur.com/879xzD0.gif);
background-position: top center;
background-repeat: no-repeat;
background-size: 100%;
color: #d09f01;
font-family: 'Poiret One';
font-size: 35px;
font-weight: 100;
height: 40px;
left: -60px;
margin: 70px 0 20px;
padding: 90px 10px 10px;
position: absolute;
text-align: right;
text-transform: uppercase;
top: -181px;
width: 980px;
}
.categorie {
margin-bottom: -8px;
margin-left: 60px;
margin-top: 114px;
padding: 0 20px 33px;
position: relative;
width: 850px;
}
.cat-full {
background: #e4e4e4;
height: 136px;
margin-bottom: 36px;
margin-top: 34px;
position: relative;
top: 29px;
}
.cat-full .titre-descr-sous h3 a {
color: rgb(56, 56, 56);
font-family: roboto condensed;
font-size: 13px;
font-style: italic;
left: 80px;
letter-spacing: 0;
position: absolute;
top: 41px;
z-index: 999;
display: block;
width: 279px;
height: 50Px;
}
.forum-wrap {
background: #2a2a2a;
height: 120px;
position: relative;
z-index: 10;
}
.description-cat {
background: #1b1b1b;
background-image: url(https://imgur.com/OWlug38.png);
color: #fff;
font-size: 11px;
height: 69px;
line-height: 11px;
opacity: .5;
overflow: auto;
padding: 10px;
position: absolute;
right: 89px;
text-align: justify;
top: 31px;
transition: .5s all;
width: 320px;
font-family: 'Roboto condensed';
}
.ava-dernier:hover {
opacity: 1;
transition: 2.2s all;
width: 81px;
height: 79px;
}
.ava-dernier img {
width: 100%;
}
.ava-dernier {
background: #a33f3f;
border: 5px solid #d09f01;
float: right;
height: 79px;
opacity: .8;
overflow: hidden;
position: absolute;
right: 0;
top: 63%;
transform: translateY(-50%);
transition: 1.2s all;
width: 81px;
z-index: 9;
}
.ava-dernier img {
width: 100%;
}
.dernier-post-content {
background-color: #f0e0aa;
color: black;
position: absolute;
right: 0;
width: 429px;
z-index: 99;
}
.cat-stats {
background-color: #f0e0aa;
color: #000;
display: block;
float: left;
font-size: 10px;
height: 16px;
left: -421px;
position: absolute;
text-transform: uppercase;
top: 104px;
width: 420px;
}
.dernier-post-content span:nth-child(3) {
display: block;
float: right;
font-family: 'BenchNine';
font-size: 10px;
position: absolute;
right: 1%;
color:white;
text-align: right;
top: 19px;
width: 100%;
}
.dernier-post-content span:nth-child(3) a[href*="/t"] {
font-family: BenchNine;
font-size: 14px;
position: absolute;
right: 42px;
text-align: left;
top: -18px;
width: 363px;
color: black;
}
.dernier-post-content span:nth-child(3) a[href*="/t"] img {
position: relative;
left: -15px;
top: 2px;
}
.dernier-post-content span:nth-child(3) br {
display: none;
}
.dernier-post-content span:nth-child(3) strong {
font-size: 16px;
position: absolute;
right: 0px;
top: -11px;
width: 150px;
}
.dernier-post-content span:nth-child(3) strong a span strong:before {
content: "par ";
font-weight: 100;
color: black;
}
.new-old-lock {
left: 68px;
position: absolute;
border: solid 1px white;
top: 45%;
transform: translateY(-50%);
}
.sous-forums a {
color: black;
font-size: 10px;
text-transform: uppercase;
}
.sous-forums {
background: #d09f01;
left: 0;
min-height: 20px;
padding: 2px 5px;
position: relative;
top: 0px;
z-index: 99;
width: calc(100% + -10px);
}
Jawn
# Re: [INDEX JAUNE ÉTOILÉ] - Lun 17 Déc - 4:53
LE QUI EST EN LIGNE :
Rendez-vous dans Panneau d'administration > Affichage > Templates > Général > Index_body. Remplacez la totalité de votre template par le code suivant : (il comprend le QEEL -qui permet de mettre soit une shoutbox, soit le Discord, soit une image sur la gauche- ainsi que le footer pour les partenariats)
- 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 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">
<!-- BEGIN switch_fb_connect_no -->
<div class="cor">
<div class="cort1">petit titre du module</div>
<div class="cor2">
<div class="cor3">
<div class="cortexte">Sed quid est quod in hac causa maxime homines admirentur et reprehendant meum consilium, cum ego idem antea multa decreve.</div>
<div class="corins"><a href="f=lien vers la page d'inscription">inscription</a></div>
</div>
<div class="cor4">
<div class="corapi">
<input class="coo" size="11" type="text" name="username" value="Pseudo" onFocus="this.value='';" /><br/>
<input class="coo" size="11" type="password" name="password" value="Mot de passe" onFocus="this.value='';"/><br/>
<input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
<label for="autologin">Connexion automatique</label>
<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
</div>
</div>
</div>
</div>
<!-- END switch_fb_connect_no -->
<!-- BEGIN switch_fb_connect -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td valign="top" width="100%" class="row1" align="center">
<table width="100%">
<tr>
<td width="55%" valign="middle" align="right">
<table class="right">
<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>
<td width="10%" align="center" valign="middle">
<span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
</td>
<td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END switch_fb_connect -->
</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">
<!-- BEGIN switch_fb_connect_no -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td class="row1" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<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>
</tr>
</table>
<!-- END switch_fb_connect_no -->
<!-- BEGIN switch_fb_connect -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td valign="top" width="100%" class="row1" align="center">
<table width="100%">
<tr>
<td width="55%" valign="middle">
<table class="right">
<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>
<td width="10%" align="center" valign="middle">
<span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
</td>
<td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->
<!-- BEGIN disable_viewonline -->
<div class="titleqeel">
<div class="textqeel"> Statistiques du forum</div></div>
<div class="qeelfond"><div class="stats_left">
<div class="stats_info">{TOTAL_USERS_ONLINE}</div>
<div class="stats_info">{TOTAL_POSTS}</div>
<div class="stats_info">{TOTAL_USERS}</div>
<div class="stats_info">Ils ont foulés notre sol :</div></div>
<div class="stats_info2">Ils sont sur nos terres :</div>
<div class="onlineuh"><table><script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('onlineuh').innerHTML.replace(/Utilisateurs enregistrés :/," ") .replace(/test/," ");</script>{L_CONNECTED_MEMBERS}</table></div>
<div class="box"><img src="https://via.placeholder.com/430x287"/>
</div>
<div class="newet_user">{NEWEST_USER}</div>
<div id="qeel-stats">
<div class="ausersb">{LOGGED_IN_USER_LIST}</div></div>
<div class="lineuh"></div>
<div class="credouww">
Copyright : Tous droits réservés. Thème code - graphisme réalisé par <a href="http://epsilon-ls.forumactif.com/">E P S I L O N</a>. Toute reproduction même partielle est interdite -demander l'autorisation ne coûte rien et en plus on a des cookies-.</div>
</div>
</div>
</br><center><img src="https://imgur.com/UY1P2IE.gif"/></center>
<!-- BEGIN switch_chatbox_activate -->
<!-- END switch_chatbox_activate -->
<script type="text/javascript">
document.getElementById('qeel-welcome').innerHTML=document.getElementById('qeel-welcome').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
document.getElementById('cadre-qeel-header').innerHTML=document.getElementById('cadre-qeel-header').innerHTML.replace(/Nos membres ont posté un total de /,"");
document.getElementById('cadre-qeel-header').innerHTML=document.getElementById('cadre-qeel-header').innerHTML.replace(/Il y a /,"");
document.getElementById('cadre-qeel-header').innerHTML=document.getElementById('cadre-qeel-header').innerHTML.replace(/enregistré/,"");
document.getElementById('cadre-qeel-header').innerHTML=document.getElementById('cadre-qeel-header').innerHTML.replace(/écrivains/," ");
</script>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<div class="titleparto">
<h4>Nos partenaires</h4>
</div>
<div class="Border-AFF img">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="/" width="40px" height="40px"/></a>
</div>
{AUTO_DST}
<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
FB.init({
appId : {switch_fb_index_login.FACEBOOK_APP_ID},
cookie : true,
xfbml : true,
oauth : true,
version : 'v2.3'
});
(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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->
</td>
</table>
Et ensuite, votre CSS (Panneau de Configuration > Affichage > Couleurs > Feuille de style CSS) :
- Code:
.credouww {
color: grey;
font-size: 11px;
height: 14px;
margin: 20px;
position: relative;
top: 100px;
}
.credouww a {
color: #d09f01!important;
text-decoration: none;
}
.newet_user {
font-size: 0;
}
.newet_user strong a {
background: #e0e0e0;
border: 1px solid #d4d4d4;
bottom: 15px;
font-size: 14px;
max-height: 46px;
padding: 33px 0 5px;
position: absolute;
text-align: center;
width: 100%;
}
.newet_user strong a:before {
color: #000;
content: "Dernier utilisateur :";
border-bottom: solid 1px #d09f01;
width: 350px;
font-weight: 400;
left: 0;
position: absolute;
font-family: 'Roboto Condensed';
text-transform: uppercase;
font-style: italic;
top: 10px;
width: 100%;
}
td.row1, td.row3.over:hover {
background-color: white;
font-family:'Poiret One';
}
.titleqeel {
position:relative;
width:1000px;
height:100px;
background-color:black;
background-image: url('https://www.textures.com/system/gallery/photos/Landscapes/Skies%20Partial/19586/Skies0258_2_download600.jpg');
background-size:100%;
background-repeat:no-repeat;
margin:0 auto;
}
.textqeel {
color: #d09f01;
font-family: 'Poiret One';
font-size: 55px;
padding: 15px;
font-weight: 100;
text-align: center;
}
.qeelfond {
position:relative;
border-bottom: 35px solid #d09f01;
width:1000px;
height:400px;
background-color:#eaeaea;
margin:0 auto;
}
.box {
height: 250px;
padding: 20px;
position: relative;
top: 40px;
right: 10px;
width: 450px;
}
.stats_left {
width: 240px;
overflow: hidden;
padding: 5px;
margin-right:-30px;
float:right;
}
.stats_info {
border-bottom: 1px solid lightgrey;
font-family: roboto condensed;
font-size: 10px;
letter-spacing: 2px;
width:190px;
color: #000;
text-transform: uppercase;
text-align: right;
padding: 8px;
}
.stats_info2 {
border-bottom: 1px solid lightgrey;
font-family: roboto condensed;
font-size: 10px;
letter-spacing: 2px;
width:190px;
float:right;
margin-right:9%;
color: #000;
text-transform: uppercase;
text-align: right;
padding: 8px;
margin-top: 15px;
}
.ausersb {
background-color: #fff;
border: 1px solid #d3d3d3;
color: #000;
float: right;
font-family: 'Poiret One';
font-size: 6px;
font-weight: lighter;
height: 102px;
line-height: 12px;
margin-right: 5px;
margin-top: -106px;
padding: 10px;
position: relative;
text-align: justify;
width: 240px;
overflow: auto;
}
.onlineuh {
background-color: #fff;
border: 1px solid #d3d3d3;
content:"";
float: right;
font-family: 'Poiret One';
font-size: 12px;
height: 237px;
margin-right: -230px;
margin-top: 40px;
padding: 5px;
top: 20px;
position: relative;
text-align: justify;
width: 230px;
}
#page-footer {
margin-top: 75px;
position: absolute;
right: 0;
width: 87%;
}
.titleparto {
background-color: #000;
background-image: url('https://imgur.com/WXQQfTA.gif');
background-repeat: no-repeat;
background-size: 100%;
height: 150px;
width: 994px;
margin-bottom: 10px;
border: 3px solid #fff;
display: block;
}
.titleparto h4 {
position: relative;
color: #d09f01;
padding: 40px 20px 10px 10px;
font-size: 50px;
font-weight: 100;
text-align: center;
margin: 0px !important;
font-family: 'Poiret One';
}
.Border-AFF {
background-color: #d3d3d3;
margin-top: -13px;
min-height: 304px;
padding: 20px 20px 10px -20px;
text-align: center;
width: 994px;
margin-left: 3px;
}
.Border-AFF img {
border: 5px solid #000;
box-shadow: 1px 1px #d18f00;
display: inline;
margin: 3px;
position: relative;
top: 10px;
}
JAVASCRIPT & JQUERY :
Vous aurez besoin de différents éléments pour afficher l'avatar de la personne connecté ainsi que son nom d'utilisateur sur la barre de navigation (ou un invité) ainsi qu'une configuration qui permet d'afficher quand même les MPs même si la barre ne contient que des icones !
Allez dans Panneau d'administration > Modules > Gestion de Modules Javascript. Créez en un, donnez lui le nom que vous voulez et mettez le "toutes les pages". Ajoutez ceci et sauvegardez. Pensez à bien activer le Javascript ! Ce sera pour ajouter l'avatar du membre en ligne ainsi que son nom sur la barre de navigation.
- Code:
$(function(){
$.each(_userdata, function(key, value){
$(".js-" + key).html(value);
})
});
Pour que les nouveaux MPs s'affichent, il vous faudra rajouter ce Javascript. Même manipulation que la précédente mais avec le JQuery suivant :
- Code:
jQuery(function(){
$('a.mainmenu[href="/privmsg?folder=inbox"]').html('0 Message');
$.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>');
}
});
});
Et le tour est joué pour toute la partie code !
Jawn
# Re: [INDEX JAUNE ÉTOILÉ] - Lun 17 Déc - 4:54
LES IMAGES ET ADAPTATIONS :
L'image de fond du forum :
- Code:
https://imgur.com/GZoMkrY.png
Les icones nouveaux messages/pas de nouveaux messages sur les catégories :
Rendez-vous dans Panneau d'Administration > Affichage > Images et Couleurs > Gestion des images > Icônes du forum :
Pas de nouveaux messages :
- Code:
https://imgur.com/AJsvPnT.png
- Code:
https://imgur.com/mBUVYTu.png
Comme ceci :
![[INDEX JAUNE ÉTOILÉ] XDKEO23](https://imgur.com/xDKEO23.png)
Icône des messages :
Rendez-vous dans Panneau d'Administration > Affichage > Images et Couleurs > Gestion des images > Mini Icônes :
Mini-sujet :
- Code:
https://imgur.com/8ES3XWf.png
Mini-sujet - Nouveau :
- Code:
https://imgur.com/mD9zK6g.png
Mini Sujet - Participation :
- Code:
https://imgur.com/mD9zK6g.png
Lien dernière réponse :
- Code:
https://imgur.com/mD9zK6g.png
Lien dernière réponse - Nouveau :
- Code:
https://imgur.com/omxiC27.png
Boutons nouveau sujet/répondre :
Rendez-vous dans Panneau d'Administration > Affichage > Images et Couleurs > Gestion des images > Boutons :
Poster un nouveau sujet :
- Code:
https://imgur.com/B7JTVAz.png
Répondre au sujet :
- Code:
https://imgur.com/jMHBVk6.png
Nouveaux messages [Vérouillé] :
- Code:
https://imgur.com/jGqS3Eo.png
Icônes dans les sujets (édition, suppression, etc...)
Répondre en citant :
- Code:
https://image.noelshack.com/fichiers/2017/40/1/1506902160-cit.png
Éditer un sujet :
- Code:
https://imgur.com/d8UKcsQ.png
Supprimer ce message :
- Code:
https://imgur.com/SVIIH26.png
Profil :
- Code:
https://imgur.com/i0LweES.png
Visiter le site web du posteur :
- Code:
https://imgur.com/SfQI6Uy.png
E-mail :
- Code:
https://image.noelshack.com/fichiers/2017/40/1/1506901702-mail.png
Message privé :
- Code:
https://image.noelshack.com/fichiers/2017/40/1/1506901651-message.png
Skype :
- Code:
https://image.noelshack.com/fichiers/2017/40/1/1506901600-skype.png
Poster un nouveau message privé :
- Code:
https://imgur.com/B7JTVAz.png
Boîte de réception :
- Code:
https://imgur.com/C6T25wY.png
Messages envoyés :
- Code:
https://imgur.com/533DMqX.png
Boîte d'envoi :
- Code:
https://imgur.com/JMytnB8.png
Archives :
- Code:
https://imgur.com/ypafLXv.png
Couleur des liens :
Et enfin pour finir, voici la liste complète des couleurs à utiliser sur le forum.
Panneau d'Administration > Affichage > Images et Couleurs > Couleurs :
Couleur du Texte : #666666
Couleur du Lien : #404040
Couleur du Lien Visité : #ABABAB
Couleur du Lien Actif : #ABABAB
Couleur du Lien survolé : #D09F01
Couleur Police En-tête : #4D4D4D
Couleur du fond de page : #EAEAEA
Couleur intérieure du cadre du forum : #EAEAEA
Table Rangée Couleur 1 : #E6E5E8
Table Rangée Couleur 2 et surbrillance : #E6E5E8
Table Rangée Couleur 3 et séparations : #E6E5E8
Couleur des citations, codes et boutons : #E6E5E8
Couleur zones de saisie, menus déroulants et cadre de l'en-tête : #E6E5E8
Couleur du cadre du forum : #EAEAEA
Couleur du cadre des tables : #EAEAEA
Couleur du cadre des cellules : #EAEAEA
Couleur Fond En-tête Catégorie : #000000
Couleur Fond Catégorie : #D09F01
Couleur Cadre Catégorie : #EAEAEA
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|