![[INDEX MONTAGNES] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [INDEX MONTAGNES] - Mar 20 Aoû - 21:24
![[INDEX MONTAGNES] 0ncy](https://zupimages.net/up/19/33/0ncy.png)
La barre de navigation + bannière
Tout se trouvant dans le même template, il sera donc à copier coller entièrement. Rendez vous dans votre panneau d'administration > Affichage > Templates > Général > Overall_header :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<div class="bannierefo"><a href="/"><img src="https://imgur.com/81E5sqK.png"/></a></div>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet" />
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet" />
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
$('#fa_ticker_content').css('display','block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0)
{
$('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert)
{
var height_max = h_perso;
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if(report != null) { report.focus(); }
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function() {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
<!-- END google_analytics_code_bis -->
ga('send', 'pageview');
<!-- BEGIN google_analytics_code_bis -->
ga('bis.send', 'pageview');
<!-- END google_analytics_code_bis -->
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}" />
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<div id="page-header">
<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
<div class="wrap">
</div>
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.boutonhautbas {
bottom: 40px;
right: 10px;
position: fixed;
z-index: 100;
}
.boutonhautbas a {
color:black;
}
.bannierefo img{
width:100%;
margin:0;
}
body#modernbb{
margin:0;
padding:0;
}
.navbar{
background-image: url(https://imgur.com/JWLQNIP.png);
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 10px;
z-index: 999;
text-align:center
}
.navbar li{
margin:0;
}
a.mainmenu > img{
display:none;
}
a.mainmenu{
height:32px;
padding:7px 10px;
font-family:Reem Kufi;
font-size:14px;
font-weight:bold;
letter-spacing:1px;
text-transform: uppercase;
color: #eae3d3;
text-shadow: 1px 1px 1px black;
}
a.mainmenu[href="/faq"]{
display:none;
}
a.mainmenu:hover {
background:none !important;
color:white !important;
}
#logout{
font-size:0;
letter-spacing:0;
}
#logout:after{
content:"Déconnexion";
font-size:14px;
letter-spacing:1px;
}
Jawn
# Re: [INDEX MONTAGNES] - Mar 20 Aoû - 21:24
Page d'accueil
Dans votre panneau d'administration, dans Affichage > Généralités, c'est ici que vous mettez votre HTML :
- Code:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Reem+Kufi" /> <link rel="stylesheet" href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" /><link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<div class="fondpa">
<div class="blok1">
<div class="contexte">
<div class="fondcontexte">
Epicode vous propose un libre service de code, ainsi que graphique, allant des avatars à des thèmes complets ! <br /><br />Si vous ne trouvez pas ce qu'il vous faut, vous pouvez passer commande. Nos graphistes et nos codeurs sont là pour vous !<br /><br /> Nous aidons aussi les membres à la recherche d'un staff ou d'un avis pour leur forum. Vous avez aussi la possibilité de faire la publicité de votre forum.<br /><br /> Epicode, c'est avant tout une ambiance chaleureuse, un staff disponible et un forum actif !
</div>
</div>
<div style="text-align:center;margin-top:-20px;">
<img src="https://imgur.com/tpRGnZO.png" />
</div>
<div style="display:flex;flex-wrap:wrap;">
<div class="recrut" style="background-image:url(https://imgur.com/BNUm6d2.png);background-size: cover;border:solid 2px #f1c776;color:#f1c776;">
Mini à Maxi codeurs
</div>
<div class="recrut" style="background-image:url(https://imgur.com/BNUm6d2.png);background-size: cover;border:solid 2px #ef7e34;color:#ef7e34;">
Conseillers
</div>
<div class="recrut" style="background-image:url(https://imgur.com/BNUm6d2.png);background-size: cover;border:solid 2px #6b8db3;color:#6b8db3;">
Animateurs
</div>
<div class="recrut" style="background-image:url(https://imgur.com/BNUm6d2.png);background-size: cover;border:solid 2px #ddd;color:#ddd;">
///
</div>
</div>
</div>
<div class="blok">
<div class="avagagnant">
<img src="https://i.imgur.com/3TrhsNW.gif" />
<div class="namegagnant">
Neph
</div>
</div>
<div class="contconcours">
<div class="titreconc">
Gagnante du concours d'écriture n°9
</div>
<div class="photogagnant">
<img src="https://www.zupimages.net/up/19/09/957k.png" />
</div>
</div>
<div class="staffcrea">
<a href="http://www.epicode-entraide.com/t3257-le-staff-d-epicode" target="_blank"><img src="https://imgur.com/44aQfGH.png" /></a>
</div>
<div class="BlocStaff">
<img alt="Avatar d'Eskimo" id="eskimo" class="AvatarStaff" src="https://www.zupimages.net/up/19/08/xq7y.png" />
<div class="StaffInfos">
<div class="Pseudo">
Eskimo
</div>
<div class="Contact">
<a href="http://www.epicode-entraide.com/u144" target="_blank"><span class="sf sf-user"></span></a><a href="http://www.epicode-entraide.com/privmsg?mode=post&u=144"><span class="sf sf-envelope-1"></span></a>
</div>
</div>
</div>
<div class="BlocStaff">
<img alt="Avatar de Yozora" class="AvatarStaff" id="yozora" src="https://www.zupimages.net/up/19/11/ede9.png" />
<div class="StaffInfos">
<div class="Pseudo">
Yozora
</div>
<div class="Contact">
<a href="http://epicode.bbactif.com/u5923" target="_blank"><span class="sf sf-user"></span></a><a href="http://epicode.bbactif.com/privmsg?mode=post&u=5923"><span class="sf sf-envelope-1"></span></a>
</div>
</div>
</div>
<div class="BlocStaff">
<img alt="Avatar d'Azalée" id="aza" class="AvatarStaff" src="https://www.zupimages.net/up/19/05/5tcu.png" />
<div class="StaffInfos">
<div class="Pseudo">
Azalée
</div>
<div class="Contact">
<a href="http://www.epicode-entraide.com/u2839" target="_blank"><span class="sf sf-user"></span></a><a href="http://www.epicode-entraide.com/privmsg?mode=post&u=2839"><span class="sf sf-envelope-1"></span></a>
</div>
</div>
</div>
<div class="BlocStaff">
<img alt="Avatar de Myrddin" class="AvatarStaff" id="myrddin" src="https://i.imgur.com/6t2vSrx.png" />
<div class="StaffInfos">
<div class="Pseudo">
Myrddin
</div>
<div class="Contact">
<a href="http://www.epicode-entraide.com/u5357" target="_blank"><span class="sf sf-user"></span></a><a href="http://www.epicode-entraide.com/privmsg?mode=post&u=5357"><span class="sf sf-envelope-1"></span></a>
</div>
</div>
</div>
</div>
<div class="blok1">
<div class="news">
<div class="insidenews">
<strong>13/03</strong> Naütilus nous a quitté<br /><br /> <strong>01/03</strong> Batty nous a quitté<br /><br /> <strong>20/02</strong> La newsletter de février est disponible
</div>
</div>
<div class="blokvote">
<a href="http://www.epicode-entraide.com/t14832-concours-de-codage-n9" target="_blank">Lancement du concours de codage n°9</a>
</div>
<div class="blokvote">
<a href="http://www.epicode-entraide.com/t14808-resultats-concours-d-ecriture-n9" target="_blank">Résultats du concours d'écriture n°9</a>
</div>
<div class="InfolettreBloc">
<div class="Clic">
Clique sur la bouteille ...
</div>
<div class="Hover">
<a href="http://www.epicode-entraide.com/g31-infolettre" target="_blank"> <img src="https://2img.net/r/hpimg15/pics/332596bouteillemessage.png" class="ImageInfoLettre" /></a>
<div class="InfoLettre">
... pour recevoir les nouveautés par MP !
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center;">
<a href="http://www.epicode-entraide.com/f24-recrutement" target="_blank"><img src="https://imgur.com/Dg8zHW4.png" /> </a>
</div>
<div style="text-align:center;margin:auto;width:980px;" class="imgparto">
<a href="/" target="_blank"> <img src="http://placehold.it/100x35/" /></a> <a href="/" target="_blank"> <img src="http://placehold.it/100x35/" /></a> <a href="/" target="_blank"> <img src="http://placehold.it/100x35/" /></a> <a href="/" target="_blank"> <img src="http://placehold.it/100x35/" /></a> <a href="/" target="_blank"> <img src="http://placehold.it/100x35/" /></a> <a href="/" target="_blank"> <img src="http://placehold.it/100x35/" /></a> <a href="/" target="_blank"> <img src="http://placehold.it/100x35/" /></a> <a href="/" target="_blank"> <img src="http://placehold.it/100x35/" /></a>
</div>
Pour le CSS :
- Code:
a{
text-decoration:none!important;
}
/* PAGE D'ACCUEIL */
.fondpa{
position:relative;
display:flex;
width:970px;
margin:0 auto;
background-color:#ebe4d3;
}
/* Bloc du contexte */
.blok1{
width:280px;
}
.contexte{
height:230px;
margin:30px auto;
background-image:url('https://imgur.com/czkWtyT.png');
background-size:cover;
background-repeat:no-repeat;
box-shadow:1px 1px 1px #0d0f27;
}
.fondcontexte{
height:210px;
margin:0 10px;
padding:10px;
background-color:rgba(57, 59, 81, 0.6);
font:13px calibri;
text-align:justify;
color:#eaeaea;
transform:translateY(10px);
box-sizing: border-box;
overflow:auto;
}
/* Blocs central et de droite */
.blok{
position:relative;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
width:360px;
margin:0 20px;
}
.contconcours{ /* Gagnants du concours */
width:310px;
height:102px;
margin:30px 0 0 20px;
padding:10px;
background-image:url('https://imgur.com/nPKeGwZ.png');
box-shadow:1px 1px 1px #0d0f27;
}
.titreconc{ /* Type de concours */
width:230px;
font:11px Roboto;
font-weight:800;
text-transform:uppercase;
text-shadow:1px 1px 1px #0d0f27;
color:#eaeaea;
}
.avagagnant{ /* Bloc de l'avatar du gagnant */
position: absolute;
top:30px;
right:10px;
width:80px;
height:113px;
border:solid 5px #393b51;
overflow:hidden;
}
.avagagnant img{ /* Image de l'avatar du gagnant */
width:100%;
}
.namegagnant{ /*Pseudo du gagnant du concours */
font:16px Roboto;
font-weight:800;
text-transform:uppercase;
text-align:center;
text-shadow:1px 1px 1px #eaeaea;
color:#393b51;
}
.photogagnant{ /* Bloc de la création du gagnant du concours */
position:relative;
width:230px;
height:65px;
margin-top:5px;
overflow:hidden;
box-shadow: 1px 1px 1px #0d0f27;
}
.photogagnant img{ /* Image de la création du gagnant du concours */
position:absolute;
top:-50%;
width:100%;
}
.staffcrea{ /* Lien menant au sujet du staff créatif */
width:350px;
margin:-14px auto;
font-size:0;
}
.staffcrea img{
width:100%;
}
.AvatarStaff{ /* Membres du staff administratif */
position:absolute;
top:-50%;
left:0;
max-width:100%;
-webkit-transform:scale(1);
transform:scale(1);
-webkit-filter:blur(0px);
filter:blur(0px);
-webkit-transition:all 300ms;
transition:all 300ms;
}
.BlocStaff:hover .AvatarStaff,
.BlocStaff2:hover .AvatarStaff{
-webkit-transform:scale(1.2);
transform:scale(1.2);
-webkit-filter:blur(1.5px);
filter:blur(1.5px);
}
.BlocStaff{
position:relative;
width:170px;
height:80px;
overflow:hidden;
font-family:'Cinzel';
background-color:#f5f1ec;
box-shadow: 1px 1px 1px #0d0f27;
text-align:center;
transition:all 500ms;
}
.BlocStaff2{
position:relative;
width:100px;
height:120px;
overflow:hidden;
font-family:'Cinzel';
background-color:#f5f1ec;
box-shadow:1px 1px 1px #0d0f27;
text-align:center;
transition:all 500ms;
}
.BlocStaff:hover .StaffInfos,
.BlocStaff2:hover .StaffInfos{
opacity:1;
visibility:visible;
-webkit-transform:scale(1);
transform:scale(1);
}
.StaffInfos{
position:absolute;
width:100%;
top:0;
left:0;
opacity:0;
-webkit-transform:scale(0);
transform:scale(0);
-webkit-transition:all 300ms;
transition:all 300ms;
}
.StaffInfos .Pseudo{
padding:5px;
margin:5px;
background-color:#393b51;
font-family:roboto;
letter-spacing:1px;
color:#eae3d3;
font-size:13px;
}
.StaffInfos .Contact{
padding:9px 0;
background-color: rgba(57, 59, 81, 0.6);
}
.StaffInfos a{
text-shadow:1px 1px 1px #454545;
font-size:24px;
color:#eae3d3;
letter-spacing:7px;
}
.news{ /* Bloc des actualités du forum */
height:220px;
margin-bottom:60px;
background-image:url('https://imgur.com/qxCGs03.png');
background-size: cover;
box-shadow:1px 1px 1px #0d0f27;
transform:translateY(30px);
}
.insidenews{ /* Blocs des annonces */
height:200px;
margin:0 10px;
padding:10px;
background-color: rgba(57, 59, 81, 0.6);
overflow:auto;
text-align:justify;
font:13px calibri;
color:#eaeaea;
transform:translateY(10px);
box-sizing: border-box;
}
.insidenews strong{ /* Dates des annonces */
float:left;
margin:5px 10px;
font:700 20px/1 calibri;
text-shadow:1px 1px 1px #0d0f27;
}
.blokvote{ /* Blocs des annonces des votes en concours */
margin:0 auto 14px;
padding:10px;
background-color:#393b51;
box-shadow:1px 1px 1px #0d0f27;
text-align:center;
}
.blokvote a{
font:13px calibri;
text-shadow:1px 1px 1px #0d0f27;
color:#eaeaea;
}
.InfolettreBloc{ /* Bloc de l'infolettre */
position:absolute;
right:5px;
width:270px;
height:50px;
}
.Clic{
position:absolute;
left:0;
top:15px;
font-size:15px;
font-family:Roboto;
font-weight:bold;
letter-spacing:1px;
color:#393b51;
}
.ImageInfoLettre{
position:absolute;
top:10px;
right:0;
height:30px;
}
.InfoLettre{
position:absolute;
left:0;
top:5px;
width:195px;
background-color:#eae3d3;
text-align:center;
font-size:15px;
font-family:Roboto;
font-weight:bold;
letter-spacing:1px;
color:#393b51;
visibility:hidden;
opacity:0;
-webkit-transition: all 300ms;
transition: all 300ms;
}
.Hover:hover .InfoLettre{
opacity:1;
visibility:visible;
}
.recrut {
width: 120px;
height: 26px;
margin: 2px 2px 20px 2px;
padding: 6px;
box-shadow: 1px 1px 1px #0d0f27;
font: 11px Roboto;
text-transform: uppercase;
text-align: center;
text-shadow: 1px 1px 1px #0d0f27;
}
#eskimo{
position:absolute;
top:0px;
}
#yozora{
position:absolute;
top:-100px;
}
#aza{
position:absolute;
top:-100px;
}
#myrddin{
position:absolute;
top:-40px;
}
.imgparto img {
box-shadow: 1px 1px 1px #0d0f27;
text-shadow: 1px 1px 1px #0d0f27;
margin:5px;
}
Jawn
# Re: [INDEX MONTAGNES] - Mar 20 Aoû - 21:25
Les catégories
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="titlecat">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="bodyl">
<div class="fondcat">
<div class="avadernier">
<!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar -->
</div>
<div class="sousforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
<div class="infoscat">
<div class="titlepeticat">
<a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</div>
<div class="descricat">{catrow.forumrow.FORUM_DESC}</div>
</div>
<div class="lastpost">
<div class="lastmess">
<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" />
</div>
<div class="lastsuj">{catrow.forumrow.LAST_POST}</div>
</div>
<div class="statscat">
<div class="totalsuj">{catrow.forumrow.POSTS}<br /> Messages</div>
<div class="totalsuj">{catrow.forumrow.TOPICS}<br /> Sujets</div>
</div>
</div>
</div>
<!-- END forumrow --><!-- END catrow -->
Pour le CSS :
- Code:
.titlecat img{ /* Titre des catégories */
width:100%;
margin-bottom: -250px;
}
.fondcat{ /* Bloc englobant les catégories */
position:relative;
display:flex;
flex-wrap:wrap;
margin-bottom:20px;
padding:10px;
background:#393b51;
box-shadow:1px 1px 1px #454545;
}
.avadernier{ /* Bloc de l'avatar du dernier posteur */
position:absolute;
top:-15px;
left:-50px;
width:150px;
height:170px;
background-color:#393b51;
border:solid 8px #2a2c3e;
box-shadow: 1px 1px 5px #2e3044;
overflow:hidden;
}
.avadernier img{ /* Image de l'avatar du dernier posteur */
position:absolute;
top:-25%;
width:100%;
}
.sousforums{ /* Bloc des sous-forums */
width:90%;
max-height:34px;
margin-left:115px;
margin-bottom:10px;
padding-top:2px;
overflow:auto;
font-size:0px;
}
.sousforums a{
display:inline-block;
margin:3px;
padding:3px 7px;
background-color:#eae3d3;
box-shadow:1px 1px 1px #0d0f27;
font:1.4rem Roboto;
font-weight:bold;
}
.infoscat{ /* Bloc contenant le titre et les descriptions des forums */
width:380px;
margin-left:110px;
}
.titlepeticat{ /* Blocs du titre du forum */
text-align:center;
}
.titlepeticat a{
font:20px Reem Kufi;
font-weight:bold;
text-transform:uppercase;
letter-spacing:2px;
line-height:23px;
color:#dac09f;
text-shadow:1px 2px 1px #0d0f27;
}
.descricat{ /* Bloc contenant la description des forums */
height:90px;
margin-top:10px;
padding-right:5px;
overflow:auto;
font:1.5rem calibri;
text-align:justify;
line-height:23px;
color:#eae3d3;
}
.lastpost{ /* Blocs du dernier message posté dans le forum */
width:200px;
height:130px;
margin:0 20px;
}
.lastmess{ /* Images New - Old - Lock */
margin-top:-5px;
}
.lastsuj{
font:1.35rem calibri;
text-align:center;
color:#eae3d3;
}
.lastsuj a{
font:15px Reem Kufi;
font-weight:bold;
text-transform:uppercase;
color:#dac09f;
text-shadow:1px 2px 1px #0d0f27;
}
.statscat {
height: 150px;
margin: 0 auto;
text-align: center;
}
.totalsuj{
width:100px;
margin:16px 0;
padding:5px 0;
background-color:#eae3d3;
outline:1px solid #eae3d3;
outline-offset:3px;
box-shadow:1px 1px 1px #0d0f27;
font:12px Reem Kufi;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1px;
text-align:center;
color:#393b51;
}
Jawn
# Re: [INDEX MONTAGNES] - Mar 20 Aoû - 21:26
Le QEEL/FOOTER
Dans votre template index_body, entre les balises :
- Code:
<!-- BEGIN disable_viewonline -->
- Code:
<!-- END disable_viewonline -->
- Code:
<div id="title_qeel">
<img src="https://i.imgur.com/MZ7yy2m.png" alt=" Qui est en ligne ?" />
</div>
<div id="main_qeel">
<div id="left_qeel">
<div class="subtitle_qeel">
<img src="https://imgur.com/7GTq5G9.png" alt="24H" />
</div>
<div id="bloc_left_qeel">
<div id="last_online_qeel">{L_CONNECTED_MEMBERS}</div>
<div id="title_birthday_qeel">
Anniversaires
<div id="birthday_qeel">{L_WHOSBIRTHDAY_TODAY}</div>
</div>
</div>
</div>
<div id="right_qeel">
<div class="subtitle_qeel">
<img src="https://imgur.com/3SUrg4H.png" alt="En ligne" />
</div>
<div id="online_qeel">{LOGGED_IN_USER_LIST}</div>
<div id="members_qeel" class="stats_qeel">{TOTAL_USERS}</div>
<div id="messages_qeel" class="stats_qeel">{TOTAL_POSTS}</div>
<div id="last_member_qeel">{NEWEST_USER}</div>
</div>
<script type="text/javascript">document.getElementById('members_qeel').innerHTML=document.getElementById ('members_qeel').innerHTML.replace(/Nous avons /,"");</script>
<script type="text/javascript">document.getElementById('members_qeel').innerHTML=document.getElementById ('members_qeel').innerHTML.replace(/membre enregistré/,"<br />Epicodien");</script>
<script type="text/javascript">document.getElementById('members_qeel').innerHTML=document.getElementById ('members_qeel').innerHTML.replace(/membres enregistrés/,"<br />Epicodiens");</script>
<script type="text/javascript">document.getElementById('messages_qeel').innerHTML=document.getElementById ('messages_qeel').innerHTML.replace(/Nos membres ont posté un total de /,"");</script>
<script type="text/javascript">document.getElementById('messages_qeel').innerHTML=document.getElementById ('messages_qeel').innerHTML.replace(/message/,"<br />Message");</script>
<script type="text/javascript">document.getElementById('messages_qeel').innerHTML=document.getElementById ('messages_qeel').innerHTML.replace(/messages/,"<br />Messages");</script>
<script type="text/javascript">document.getElementById('last_member_qeel').innerHTML=document.getElementById ('last_member_qeel').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"Bienvenue à ");</script>
<ul id="groups_qeel">
<li style="color:#2a9d8e;">Administrateurs</li>
<li style="color:#50b660;">Modérateurs</li>
<li style="color:#D6BC57;">Codeurs</li>
<li style="color:#dc94aa;">Graphistes</li>
<li style="color:#aa7ebb;">Designers</li>
<li style="color:#f57d27;">Conseillers</li>
<li style="color:#5577a4;">Animateurs</li>
<li style="color:#808080;">Membres</li>
</ul>
</div>
Pour le CSS :
- Code:
#main_qeel{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
width:1000px;
margin:-100px auto 0;
font-family:Reem Kufi;
font-size:15px;
color:#eae3d3;
}
#title_qeel img{
width:100%;
}
.subtitle_qeel{
margin-bottom:-37px;
}
#online_qeel > br,
#birthday_qeel > br{
display:none;
}
#right_qeel .subtitle_qeel{
margin-top:22px;
}
#last_online_qeel a,
#online_qeel a{
font-size:15px;
}
#last_online_qeel a:not(:first-of-type):before,
#online_qeel a:not(:first-of-type):before{
content:"-";
font-size:15px;
margin:2px 5px;
}
#left_qeel{
width:340px;
margin:20px 20px 30px;
}
#bloc_left_qeel{
position:relative;
height:385px;
background-image:url('https://i.imgur.com/sljOXyE.png');
background-size:100% 100%;
box-shadow:1px 1px 2px #454545;
}
#bloc_left_qeel a{
color: white;
}
#title_birthday_qeel{
width:100%;
padding:55px 0 10px;
text-align:center;
font-size:33px;
font-weight:bold;
letter-spacing:1px;
}
#last_online_qeel{
height:270px;
padding:30px 30px 15px;
overflow:auto;
text-align:justify;
font-size:0;
}
#birthday_qeel {
position: absolute;
top: 230px;
left: 0;
width: 100%;
height: 270px;
padding: 30px 30px 15px;
text-align: justify;
font-size: 15px;
letter-spacing: 0px;
font-weight: normal;
overflow: auto;
background:#393b51;
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
transition: all 500ms;
}
#title_birthday_qeel:hover #birthday_qeel{
opacity:1;
-webkit-transform:scale(1);
transform:scale(1);
margin-top:-230px;
}
#right_qeel{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
width:590px;
margin:15px;
}
#online_qeel{
width:100%;
height:130px;
margin-bottom:30px;
padding:15px;
overflow:auto;
background-color:#393b51;
box-shadow:1px 1px 2px #454545;
text-align:justify;
font-size:0;
}
#online_qeel a{
color: white;
}
.stats_qeel {
width: 283px;
height: 153px;
padding: 15px 0;
background-image: url(https://i.imgur.com/rYvX9jX.png);
background-size: 100%;
background-position-y: center;
box-shadow: 1px 1px 2px #454545;
text-align: center;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
}
#last_member_qeel{
width:100%;
margin-top:20px;
text-align:center;
font-size:33px;
font-weight:bold;
letter-spacing:1px;
color:#393b51;
}
#groups_qeel{
display:flex;
justify-content:space-between;
width:100%;
margin-bottom:30px;
}
#groups_qeel > li {
width: 121px;
padding: 5px 0 4px;
border-width: 7px;
border-style: solid;
box-shadow: 1px 1px 1px #454545;
text-align: center;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.5px;
}
Dans votre template overall_footer_end, après la balise :
- Code:
{PROTECT_FOOTER}
- Code:
<div class="fondfooter">
<div class="agauche">
<div class="logoici"><img src="https://imgur.com/Bn1RNfr.png"/></div>
<div class="linksut">
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
<div class="lesliens"><a href="/">Lien utile</a></div>
</div>
</div>
<div class="adroite">
<div style="text-align:center;font:35px roboto;color:#eae3d3;margin-top:100px;text-transform:uppercase;font-weight:800;text-shadow:1px 1px 1px black;">Nos partenaires</div>
<div class="entoureparto">
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div>
<div class="partoepi"><a href="/"><img src="http://via.placeholder.com/50x50"/></a></div></div>
<div style="text-align:center;font:35px roboto;color:#eae3d3;margin-top:100px;text-transform:uppercase;font-weight:800;text-shadow:1px 1px 1px black;">Le forum des staffeux</div>
<div class="entourefost">
<div class="fofostaff"><a href="/"><img src="http://via.placeholder.com/88x31"/></a></div>
<div class="fofostaff"><a href="/"><img src="http://via.placeholder.com/88x31"/></a></div>
<div class="fofostaff"><a href="/"><img src="http://via.placeholder.com/88x31"/></a></div>
<div class="fofostaff"><a href="/"><img src="http://via.placeholder.com/88x31"/></a></div>
<div class="fofostaff"><a href="/"><img src="http://via.placeholder.com/88x31"/></a></div>
</div>
<div class="creditos">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere bibendum neque eget vulputate. Fusce ac commodo neque. In mi mi, pulvinar in placerat ac, facilisis ut ligula. Aliquam volutpat justo sit amet vulputate pellentesque. Proin et metus in augue luctus mattis eget eu felis. Morbi semper erat enim, vel pharetra justo malesuada vitae. Fusce eget tempor augue, quis iaculis eros. Mauris sodales enim erat, in suscipit quam posuere quis. Donec non nisi condimentum, imperdiet purus malesuada, volutpat nunc. Pellentesque leo ex, efficitur a nibh non, tristique maximus mauris. Integer egestas turpis quis neque euismod consequat. Aliquam vel suscipit justo. Vivamus suscipit rutrum neque, vel eleifend odio iaculis eget. Aenean feugiat lacinia ante ut porta. Nullam in euismod erat, eu consequat urna. Nullam aliquet sem eu justo maximus, eu maximus ipsum blandit.
Quisque facilisis varius sapien non consequat. Mauris fringilla vehicula arcu, vitae viverra nulla dignissim ac. Quisque et semper nunc. Vestibulum porttitor, nisl et porta rutrum, ipsum justo convallis velit, non aliquam nulla mauris tincidunt velit. Etiam eleifend, nulla a faucibus consectetur, metus purus ornare augue, vel porttitor turpis sapien id nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vel purus quam. Aenean ligula leo, tincidunt id dictum a, gravida sed sem. Nulla facilisi. Integer dictum elementum mattis. Etiam pharetra maximus odio sit amet eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin commodo felis id porta gravida. Nunc eget dignissim ipsum, ut rhoncus mauris. Praesent cursus mi nec lectus laoreet luctus. Quisque vel aliquet quam.
Vestibulum interdum purus est, eget egestas lectus placerat nec. Sed elementum est in est feugiat, ac congue nunc tempor. Maecenas vulputate risus convallis libero pellentesque, id sollicitudin nunc ornare. Ut nulla purus, molestie eu eros et, condimentum dictum neque. Etiam et porta lorem. Pellentesque dui elit, gravida eget venenatis quis, tristique non tellus. Aliquam augue ante, bibendum in justo eu, eleifend rutrum dolor. Suspendisse consequat velit ut dolor convallis vulputate aliquet tempor tortor. Praesent aliquam, odio ut laoreet congue, ex diam accumsan eros, vel viverra massa risus nec odio. Cras at nulla orci. Aenean facilisis scelerisque augue, sit amet eleifend leo scelerisque pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum sed tellus felis. Maecenas volutpat justo eget tellus lacinia bibendum. Vestibulum venenatis libero sit amet ullamcorper viverra. Nullam condimentum neque vel lorem interdum, at ultricies turpis efficitur.
</div></div></div>
Pour le CSS :
- Code:
.fondfooter {
padding: 0 20px 50px;
background-image: url(https://imgur.com/JWLQNIP.png);
display: flex;
flex-wrap: wrap;
width: 100%;
}
.agauche {
margin-right: 10px;
width: 48%;
}
.adroite {
width: 50%;
margin: 5px;
}
.entoureparto {
width:480px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
}
.partoepi {
margin: 5px;
text-align:center;
}
.partoepi img {
box-shadow:1px 1px 1px black;
width:50px;
height:50px;
}
.logoici {
text-align:center;
}
.logoici img{
width:650px;
}
.entourefost {
width:490px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
}
.fofostaff {
margin:5px;
}
.fofostaff ig {
box-shadow:1px 1px 1px black;
width:88px;
height:31px;
}
.linksut {
margin:0 auto;
width:600px;
text-align:center;
}
.lesliens {
margin:5px;
text-align:center;
display:inline-block;
width:200px;
background:#eae3d3;
padding:20px;
transition:800ms linear;
box-shadow:1px 1px 1px black;
}
.lesliens a {
display:block;
color:#393b51;
text-transform:uppercase;
font:12px Roboto;
font-weight:800;
transition:800ms linear;
}
.lesliens:hover {
transition:800ms linear;
background-color:#393b51;
}
.lesliens a:hover {
transition:800ms linear;
color:#eae3d3;
}
.creditos {
padding:20px;
width:600px;
text-align:justify;
color:#eae3d3;
margin:0 auto;
font:12px calibri;
margin-top:50px;
border:solid 1px #eae3d3;
}
Jawn
# Re: [INDEX MONTAGNES] - Mar 20 Aoû - 21:26
Les images dont vous aurez besoin
Pour les catégories > pas de nouveau message :
- Code:
https://imgur.com/vxnrc5T.png
Pour les catégories > nouveau message :
- Code:
https://imgur.com/xfY1ZBg.png
Pour les catégories > message verrouillé :
- Code:
https://imgur.com/152b3qc.png
Icône de la dernière réponse :
- Code:
https://2img.net/i/fa/modernbb/icon_topic_newest.png
Icône de la dernière réponse > nouveau message
- Code:
https://imgur.com/AIaX4uj.png
Pour une jolie toolbar de notifications, rajoutez à votre CSS :
- Code:
/* Cacher les bout de la toolbar que je ne veux pas */
.fa_tbMainElement#fa_left,
.fa_tbMainElement#fa_search,
.fa_tbMainElement#fa_share,
#fa_menu,
.rightHeaderLink#fa_hide,
.fa_tbMainElement#fa_right a.rightHeaderLink {
display:none!important;
}
/* Supprimer la couleur de fond et positionnement du bloc */
#fa_toolbar {
background-color:transparent!important;
position:fixed;
top:0px;
padding:5px;
width:99%;
z-index:1;
}
/* Mise en page du bouton Notification */
.fa_tbMainElement#fa_right a.rightHeaderLink#fa_notifications {
display: block!important;
position: absolute;
top: 68px;
right: 0;
width: 160px;
padding: 3px;
text-align: center;
background: url(https://i.imgur.com/JWLQNIP.png);
background-size: cover;
font-family: Reem Kufi;
border-radius: 0px;
font-size: 16px;
font-weight: bold;
color: #eae3d3;
text-shadow: 1px 1px 1px black;
text-decoration: none!important;
}
#fa_toolbar #fa_right #notif_list li:first-child{
padding-top:10px;
}
#fa_toolbar #fa_right #notif_list li hr{
margin:0 -10px 9px;
}
/* Mise en page bouton "notification" - Au clic */
#fa_menu:hover:visited,
#fa_toolbar > #fa_right.notification > #fa_notifications {
background:#564f75!important;
color:#e2e0dc!important;
text-shadow:none;
}
/* Référence pour la liste des notifications */
#fa_toolbar #fa_right.fa_tbMainElement {
position:relative;
}
/* Mise en page de la liste des notifications */
#fa_toolbar #fa_right.notification #notif_list {
top:110px!important;
right:0;
left:auto!important;
max-width:400px;
min-width:160px;
border:none;
background: url(https://zupimages.net/up/18/35/4agm.jpg);
background-position:bottom;
border-radius:3px;
}
/* Mise en page des notifications */
#fa_toolbar #fa_right #notif_list li .content,
#fa_toolbar #fa_right #notif_list li {
font-size:12px;
}
#fa_toolbar #fa_right #notif_list li{
padding:10px;
}
/* Taille des blocs textes des points de la liste de notif' */
#fa_toolbar #fa_right #notif_list li .contentText {
overflow:visible!important;
width:340px !important;
height:auto!important;
color:#eaeaea!important;
font-family:Calibri;
}
/* Bloc "notifs non lues" */
.fa_tbMainElement#fa_right a.rightHeaderLink.unread#fa_notifications {
width:180px;
/* On supprime 1px à la largeur car la bordure fera 1px d'épaisseur */
border-left:1px solid black;
}
#fa_toolbar #fa_right #notif_list li.unread {
background:rgba(57, 59, 81, 0.6)!important;
}
/* Mise en page du bloc "voir toutes les notifications" */
#fa_toolbar #fa_right #notif_list li.see_all {
text-align:center!important;
background:rgba(57, 59, 81, 0.4)!important;
padding:5px!important;
font-size:12px!important;
}
#fa_toolbar #fa_right #notif_list li.see_all a{
color:#eae3d3;
}
#fa_toolbar #fa_right #notif_list li .contentText a {
color: #cfd0d4!important;
}
#fa_toolbar #fa_right #notif_list li a.delete{
color:#393b51;
}
Pour la box de recherche rapide, ajoutez à votre CSS :
- Code:
#search_menu .overview{
background: #393b51;
background-size: 100% auto;
color:#eae3d3!important;
}
#search_menu .inputbox{
background-color: #eae3d3!important;
}
#search_menu label{
color:#eae3d3!important;
}
#search_menu label{
color:#eae3d3!important;
}
#search_menu a{
color:#eae3d3!important;
}
#search_menu a:hover{
background:transparent!important;
}
Pour une jolie scrollbar (sous Chrome uniquement), ajoutez à votre CSS :
- Code:
::-webkit-scrollbar{
width:10px;
height:10px;
background:#ebe4d3;
}
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal{
height:30px;
background-color:#2a2c3e;
}
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|