![[INDEX MONTAGNES BLEUES] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [INDEX MONTAGNES BLEUES] - Mar 29 Oct - 1:49
![[INDEX MONTAGNES BLEUES] Kzyl0sO](https://i.imgur.com/Kzyl0sO.png)
BANNIÈRE + NAVIGATION + PAGE D'ACCUEIL
Avant de commencer, on va installer l'image de fond. Rendez-vous dans : Panneau d'administration > Affichage > Images & Couleurs > Gestion des Images > Image de fond de page :
- Code:
https://imgur.com/eYVkfXs.png
Tout se trouvant dans le même template, il sera donc à copier coller entièrement. Rendez vous dans votre panneau d'administration > Affichage > Templates > Général > Overall_header :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
<script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam ) {
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
var w_cont = $('#fa_ticker_container').width();
if (w_cont > 0) {
$('#fa_ticker_container').width(w_cont);
/* Affichage de la liste */
$('#fa_ticker_content').css('display','block');
/* Calcul des dimensions du conteneur et des elements */
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
var height_max = h_perso;
/* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max) {
height_max = $(this).height();
}
} );
/* Redimensionnement des elements et des images trop larges */
$('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
if ($(this).width() > width_item) {
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
/* Redimensionnement et centrage du conteneur en mode vertical */
if (slid_vert) {
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
}
/* Initialisation du caroussel */
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
} else {
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if(report != null) { report.focus(); }
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function() {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<!-- BEGIN switch_ticker_new -->
<style>
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
</style>
<!-- END switch_ticker_new -->
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
ga('send', 'pageview');
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
ga('bis.send', 'pageview');
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<div class="bannfond">
<div class="bannimg"><a href="/"><img src="https://imgur.com/CYLkEsf.png"/></a></div></div>
<div class="sousphrase">Phrase descriptive du forum</div>
<div class="contour">
<div class="contexteuh">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pretium felis eget velit porttitor, et molestie nunc gravida. Fusce et metus non enim euismod hendrerit. Mauris sit amet justo molestie, porttitor nisi eget, congue sapien. Nullam lacinia dignissim magna, vitae lobortis ante luctus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ultrices arcu sed augue posuere, et sodales dolor vulputate. Donec a ante vitae odio ullamcorper malesuada. Proin ornare turpis ultricies est pulvinar, in consectetur libero condimentum. Morbi tincidunt ex arcu. Vestibulum sem quam, cursus id velit eu, molestie placerat ligula. Phasellus sit amet sem nec nulla mollis fringilla. In consectetur, lectus in elementum rutrum, felis leo cursus risus, at aliquam orci mauris sed mi. Duis fringilla urna non dolor eleifend laoreet. Sed dignissim turpis ipsum, eget sodales purus consequat ac. Phasellus tempus convallis convallis.
In et magna eu nulla rhoncus semper. Duis scelerisque, orci sed bibendum gravida, nibh ante tristique leo, nec commodo lorem neque quis nisi. Cras tristique aliquam tellus faucibus rutrum. Pellentesque egestas sem vitae lectus aliquet, non congue nunc dapibus. Vestibulum efficitur massa gravida, venenatis metus ut, congue erat. Phasellus elementum fringilla arcu a sagittis. Suspendisse potenti. Sed vitae eros consequat, viverra metus ac, rhoncus nisl.
<div class="linku"><a href="/">Lire la suite <i class="fa fa-star" aria-hidden="true"></i></a></div>
</div>
<div class="crocrown">♛<div class="hovyy">hover me</div></div></div>
<div class="trucnwar">
<div class="bouyaautour">
<div class="titlepredef">Les scénarios</div>
<div id="admin"><div id="parent"><div id="child">
<span class="name1">Nom du prédéfini</span><span class="subtitle">Groupe</span></div><div class="per"><a href="/">sa fiche</a><div class="sha"></div></div></div><img src="https://via.placeholder.com/190x100" class="admin"/></div>
<div id="admin"><div id="parent"><div id="child">
<span class="name2">Nom du prédéfini</span><span class="subtitle">Groupe</span></div><div class="per"><a href="/">sa fiche</a><div class="sha"></div></div></div><img src="https://via.placeholder.com/190x100" class="admin"/></div>
<div id="admin"><div id="parent"><div id="child">
<span class="name3">Nom du prédéfini</span><span class="subtitle">Groupe</span></div><div class="per"><a href="/">sa fiche</a><div class="sha"></div></div></div><img src="https://via.placeholder.com/190x100" class="admin"/></div>
<div id="admin"><div id="parent"><div id="child">
<span class="name4">Nom du prédéfini</span><span class="subtitle">Groupe</span></div><div class="per"><a href="/">sa fiche</a><div class="sha"></div></div></div><img src="https://via.placeholder.com/190x100" class="admin"/></div>
</div>
<div class="titlepredef1">Le staff</div>
<div align="center"><div class="staffer">
<div style="background-image:url(https://via.placeholder.com/150x150);background-position:center;" class="imagen"></div>
<div class="name">♛ Nom du staffeux</div><div class="charges">Fonction du staffeux</div>
<a href="/">Profil</a><a href="/">Message</a>
</div>
<div class="staffer">
<div style="background-image:url(https://via.placeholder.com/150x150);background-position:center;" class="imagen"></div>
<div class="name">♛ Nom du staffeux</div><div class="charges">Fonction du staffeux</div>
<a href="/">Profil</a><a href="/">Message</a>
</div>
<div class="staffer">
<div style="background-image:url(https://via.placeholder.com/150x150);background-position:center;" class="imagen"></div>
<div class="name">♛ Nom du staffeux</div><div class="charges">Fonction du staffeux</div>
<a href="/">Profil</a><a href="/">Message</a>
</div>
<div class="staffer">
<div style="background-image:url(https://via.placeholder.com/150x150);background-position:center;" class="imagen"></div>
<div class="name">♛ Nom du staffeux</div><div class="charges">Fonction du staffeux</div>
<a href="/">Profil</a><a href="/">Message</a>
</div></div>
<div class="topsitesici">
<div class="toptop"><a href="/"><img src="https://imgur.com/QfQOe2H.png"/></a></div>
<div class="toptop"><a href="/"><img src="https://imgur.com/QfQOe2H.png"/></a></div>
<div class="toptop"><a href="/"><img src="https://imgur.com/QfQOe2H.png"/></a></div>
<div class="toptop"><a href="/"><img src="https://imgur.com/QfQOe2H.png"/></a></div>
</div>
</div>
<div class="toppy">
<div class="partenaires">
<div class="hoverparto"><a href="/" class="bouton_part_pa" target="_blank"><img src="https://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><a href="/" class="bouton_part_pa" target="_blank"><img src="https://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><a href="/" class="bouton_part_pa" target="_blank"><img src="https://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><a href="/" class="bouton_part_pa" target="_blank"><img src="https://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><a href="/" class="bouton_part_pa" target="_blank"><img src="https://via.placeholder.com/50x50"/></a></div>
<div class="hoverparto"><a href="/" class="bouton_part_pa" target="_blank"><img src="https://via.placeholder.com/50x50"/></a></div>
</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="" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
<tr height="25">
<td class="catLeft">
<span class="genmed module-title">{SITENAME}</span>
</td>
</tr>
<tr height="{LOGIN_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="mainoption" value="{L_LOGIN}" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
<span class="genmed">{LOGIN_POPUP_MSG}</span>
</td>
</tr>
</table>
</div>
<!-- END switch_login_popup -->
<a name="top"></a>
{JAVASCRIPT}
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />
<!-- END switch_logo_center -->
<div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="gen">{SITE_DESCRIPTION}<br /> </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
</tr>
</table>
<div class="barredenav">{GENERATED_NAV_BAR}</div>
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top" width="{C1SIZE}">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
</td>
<td valign="top" width="100%">
<!-- BEGIN html_validation -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- END html_validation -->
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none !important;
}
#page-footer {
text-transform: uppercase;
word-spacing: 2px;
z-index: 7;
box-sizing: border-box;
clear: both;
color: #aec1bf !important;
font-size: 1em;
padding: 20px;
text-align: center;
background: #636363;
position: absolute;
right: 0;
width: 100% !important;
}
#page-footer a {
color: #aec1bf;
font: 10px 'Roboto', sans-serif;
}
::-webkit-scrollbar {
width: 3px;
height: 10px;
background: #eae4e2;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
-webkit-border-radius: 10px;
background-color: #aec1bf;
}
::-webkit-scrollbar-thumb:horizontal {
height: 30px;
-webkit-border-radius: 10px;
background-color: #aec1bf;
}
/********* BARRE DE NAV *********/
.barredenav {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 10px;
text-align: center;
background-color: rgba(50, 50, 50, 0.5);
z-index: 999;
border-bottom: 1px solid #f0f0f0;
}
.barredenav a {
color: #f0f0f0;
font: 11px 'Roboto', sans-serif;
text-transform: uppercase;
}
/********* PAGE D'ACCUEIL *********/
.topsitesici {
text-align: center;
position: relative;
margin-top: -35px;
}
.toptop {
display: inline-block;
}
.staffer {
background: #eee;
width: 70px;
height: 70px;
border: 5px solid #9fc5c1;
margin: 0 10px;
text-align: left;
position: relative;
top: -60px;
transition: ease-in-out 0.6s;
overflow: hidden;
display: inline-block;
vertical-align: top;
box-shadow: 1px 1px 5px #454545;
}
.staffer:hover {
width: 280px;
height: 150px;
top: -70px;
}
.staffer .imagen {
width: 70px;
height: 70px;
transition: ease-in-out 0.7s;
background-size: 100%;
position: absolute;
left: 0px;
z-index: 55;
}
.staffer:hover .imagen {
width: 150px;
height: 150px;
transition-delay: 0.1s;
left: 160px;
}
.staffer .name {
width: 150px;
font: 9px 'Calibri', sans-serif;
padding: 8px 0;
background: #9fc5c1;
position: absolute;
top: -100px;
left: -100px;
transition: ease-in-out 0.8s;
text-align: center;
text-transform: uppercase;
color: #454545;
letter-spacing: 3px;
}
.staffer:hover .name {
top: 0px;
left: 0px;
}
.staffer .charges {
background: rgba(255, 255, 255, 0.5);
position: absolute;
width: 150px;
height: 20px;
top: 35px;
padding: 2px;
box-sizing: border-box;
font: 10px 'Calibri', sans-serif;
text-transform: uppercase;
font-style: italic;
text-align: center;
-webkit-transform: rotateX(100deg) rotateY(90deg) rotateZ(0deg);
-moz-transform: rotateX(100deg) rotateY(90deg) rotateZ(0deg);
-o-transform: rotateX(100deg) rotateY(90deg) rotateZ(0deg);
-ms-transform: rotateX(100deg) rotateY(90deg) rotateZ(0deg);
transform: rotateX(100deg) rotateY(90deg) rotateZ(0deg);
transition: ease-in-out 0.9s;
}
.staffer:hover .charges {
transition-delay: 0.6s;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.staffer a {
display: block;
width: 130px;
font: 9px 'Calibri', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
background: rgba(250, 250, 250, 0.1);
box-shadow: 1px 1px 5px #454545;
position: relative;
top: -40px;
margin: -45px 0 0 10px;
color: #9fc5c1;
padding: 5px 0;
text-align: center;
text-decoration: none;
opacity: 0;
transition: ease-in-out 1s;
}
.staffer:hover a {
top: 155px;
transition-delay: 1s;
opacity: 1;
}
.staffer:hover a:first-of-type {
transition-delay: 1.5s;
}
.titlepredef {
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
font-size: 20px;
transition: all 500ms;
color: #eaeaea;
text-shadow: 1px 1px 2px #454545, 1px 1px 1px #9fc5c1, 1px 1px #9fc5c1;
}
.titlepredef1 {
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
font-size: 20px;
text-align: center;
position: relative;
top: -70px;
transition: all 500ms;
color: #eaeaea;
text-shadow: 1px 1px 2px #454545, 1px 1px 1px #9fc5c1, 1px 1px #9fc5c1;
}
.titlepredef:hover {
transition: all 800ms;
text-transform: lowercase;
}
.bouyaautour {
width: 100%;
position: relative;
top: 30px;
text-align: center;
}
#admin {
position: relative;
display: inline-block;
margin: 10px;
}
#parent {
width: 170px;
height: 80px;
background: transparent;
border: 10px solid rgba(255, 255, 255, 0.7);
position: relative;
box-shadow: 1px 1px 2px #454545, 0px 1px 1px #9fc5c1, 1px 1px #9fc5c1;
z-index: 5;
}
#parent + .admin {
position: relative;
z-index: 3;
top: -100px;
}
#parent #child {
width: 170px;
height: 80px;
background: rgba(250, 250, 250, 0.7);
transform: scale(0.2);
z-index: 5;
-webkit-transform: scale(0.2);
opacity: 0;
transition: ease 0.5s;
}
#parent:hover #child {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
#parent a {
background: #454545;
width: 80px;
height: 10px;
padding: 10px 0;
display: block;
font: 9px 'Roboto Condensed', sans-serif;
text-transform: uppercase;
color: #fff;
text-align: center;
letter-spacing: 1px;
text-decoration: none;
position: relative;
left: 110px;
bottom: 25px;
}
#parent a::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent #454545 transparent transparent;
position: absolute;
left: -15px;
top: 0px;
}
#parent a::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent #454545 transparent;
position: absolute;
left: -15px;
bottom: 0px;
}
#parent .sha::after {
content: "";
position: absolute;
width: 0;
height: 0;
right: -20px;
bottom: 55px;
border-width: 5px 5px;
border-style: solid;
border-color: transparent transparent black black;
}
.per {
display: block;
-webkit-transform: rotateY(160deg);
transform: rotateY(160deg);
position: relative;
left: 100px;
z-index: 2;
transition: ease-in-out 0.9s;
opacity: 0;
}
#parent:hover .per {
left: 0px;
transition-delay: 0.3s;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
#child {
text-align: center;
}
.name1 {
font: 20px 'Roboto Condensed', sans-serif;
display: block;
color: #53aa98;
}
.name2 {
font: 20px 'Roboto Condensed', sans-serif;
display: block;
color: #87262A;
}
.name3 {
font: 20px 'Roboto Condensed', sans-serif;
display: block;
color: #3B4B8C;
}
.name4 {
font: 20px 'Roboto Condensed', sans-serif;
display: block;
color: #9fc5c1;
}
.subtitle {
font: 10px 'Roboto Condensed', sans-serif;
opacity: 1;
text-transform: uppercase;
}
.imagetop {
margin: -25px auto 0;
text-align: center;
}
.hoverparto {
border: solid 5px #60acb3;
display: inline-block;
filter: grayscale(70%);
height: 50px;
position: relative;
top: 6px;
width: 50px;
margin: 3px;
box-shadow: 1px 1px 8px #454545;
}
.hoverparto:hover {
filter: grayscale(0%);
transition: all 500ms;
}
.partenaires {
margin: 0 auto;
text-align: center;
}
.toppy {
height: 80px;
position: relative;
width: 100%;
margin-left: -18px;
}
.crocrown {
position: relative;
width: 730px;
height: 0px;
font-family: 'PT Sans', sans-serif;
font-size: 25px;
padding: 5px;
color: white;
text-align: center;
}
.hovyy {
font-size: 10px;
margin-left: -5px;
position: relative;
top: -5px;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
transition: 1s;
background-color: rgba(50, 50, 50, 0.8);
}
.contour {
position: relative;
top: -90px;
text-align: center;
margin: 0 auto;
width: 730px;
transition: all 800ms;
}
.contexteuh {
background-color: rgba(250, 250, 250, 0.6);
color: #454545;
font-family: 'Roboto Condensed', sans-serif;
font-size: 12px;
height: 0px;
overflow: auto;
position: relative;
text-align: justify;
transition: all 500ms ease;
width: 710px;
margin: auto;
}
.linku {
text-align: center;
margin-top: 15px;
}
.linku a {
text-decoration: none;
color: lightgrey;
}
.contexteuh p {
color: #0f0f0f;
font-size: 12px;
font-weight: bold;
line-height: 12px;
margin: 5px;
text-align: center;
font-family: 'Poiret One', sans-serif;
text-transform: uppercase;
}
.sousphrase {
font-family: 'Roboto Condensed', sans-serif;
font-style: italic;
font-size: 12px;
color: lightgrey;
text-transform: uppercase;
position: relative;
top: -120px;
width: 100%;
text-align: center;
text-shadow: 2px 2px 1px black;
}
.contour:hover .contexteuh {
height: 130px;
transition: all 800ms;
}
.bannimg {
text-align: center;
}
.bannfond {
width: 1000px;
height: 600px;
margin: 0 auto;
}
.trucnwar {
background-color: rgba(50, 50, 50, 0.5);
height: 380px;
outline: 1px solid #d3d3d3;
outline-offset: -10px;
width: 100%;
}
Jawn
# Re: [INDEX MONTAGNES BLEUES] - Mar 29 Oct - 1:50
LeS CATÉGORIES
Remplacer l'intégralité de votre template index_box par le HTML
- Code:
<div class="stpentour">
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="mdlCAT">
<div class="blocFRM">
<div class="newsmessages">
<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" />
</div>
<div class="tleFRM">
<a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a>
<div class="descFRM">{catrow.forumrow.FORUM_DESC}</div>
</div>
<div class="separation"><img src="https://imgur.com/qBGk54Z.png"/></div>
<div class="right">
<div class="sjtFRM">
{catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages
</div>
<div class="lastpost">{catrow.forumrow.LAST_POST}</div>
</div>
<div class="ava-dernier">
<!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
<div class="sousforumFRM">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
<script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script>
</div>
</div>
</div>
<!-- END forumrow -->
<!-- END catrow -->
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
/******** CATEGORIES *********/
.stpentour {
width: 100%;
}
.tleCAT {
text-align: center;
position: relative;
height: 50px;
margin-left: -520px;
}
.tleCAT h2 {
text-transform: uppercase;
font-style: italic;
margin-left: 500px;
font-size: 45px;
color: #eaeaea;
text-shadow: 0px 1px 2px #000;
font-family: 'Roboto Condensed', sans-serif;
}
.mdlCAT {
width: 900px;
min-height: 226px;
margin: 0 auto;
background-color: rgba(250, 250, 250, 0.7);
box-shadow: 1px 1px 8px #454545;
margin-bottom: 20px;
}
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
.newsmessages .imgFRM {
margin: 10px;
position: absolute;
width: 200px;
height: 200px;
}
.tleFRM {
position: absolute;
height: 50px;
text-decoration: none;
}
.tleFRM a {
text-decoration: none !important;
color: #454545;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
font-style: italic;
border-bottom: 1px solid #9fc5c1;
margin-left: 214px;
position: relative;
top: 15px;
text-transform: uppercase;
}
.descFRM {
position: relative;
width: 400px;
height: 120px;
margin-left: 205px;
top: 29px;
padding: 5px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 12px;
overflow: auto;
color: #454545;
line-height: 18px;
}
.separation {
text-align: center;
position: relative;
left: 640px;
top: 34px;
width: 20px;
}
.right {
float: right;
margin: 5px;
}
.sjtFRM {
font-family: 'Roboto Condensed', sans-serif;
text-transform: lowercase;
font-size: 10px;
margin-top: -100px;
text-align: center;
margin-right: 46px;
width: 150px;
border-bottom: 1px solid #9fc5c1;
}
.lastpost {
font-family: 'Roboto condensed', sans-serif;
font-size: 10px;
color: #454545;
margin-top: 50px;
}
.lastpost a {
font-family: 'Roboto condensed', sans-serif;
font-size: 12px;
color: #454545 !important;
text-decoration: none !important;
text-transform: uppercase;
font-style: italic;
}
.ava-dernier {
float: right;
margin-right: -251px;
margin-top: -80px;
background: #eaeaea;
border: 5px solid #9fc5c1;
height: 80px;
overflow: hidden;
right: 0;
transition: 0.8s all;
filter: grayscale(50%);
transform: rotate(45deg);
width: 80px;
z-index: 9;
}
.ava-dernier:hover {
transition: 0.8s all;
filter: grayscale(0%);
opacity: 1;
}
.ava-dernier img {
width: 178%;
position: relative;
left: -20px;
top: -83px;
transform: rotate(-45deg);
}
.sousforumFRM {
width: 880px;
margin-top: 60px;
margin-left: 10px;
}
.sousforumFRM a {
border-top: 1px solid #9fc5c1;
text-decoration: none !important;
color: #454545 !important;
font-size: 11px;
text-transform: uppercase;
}
Image pour "pas de nouveaux messages" :
- Code:
https://imgur.com/kHId6j8.png
Image pour "nouveau message" :
- Code:
https://imgur.com/t2SJbEX.png
Jawn
# Re: [INDEX MONTAGNES BLEUES] - Mar 29 Oct - 1:50
LE QUI EST EN LIGNE
Remplacez l'intégralité de votre template index_body par :
- Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN message_admin_titre -->
<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>
<!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">
<table>
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<!-- BEGIN switch_social_login -->
<td width="10%" align="center" valign="middle" class="row1">
<span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
</td>
<td width="40%" class="align_gauche row1">
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
</td>
<!-- END switch_social_login -->
</tr>
</table>
</form>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="50%" valign="top" align="right" class="row1">
<table>
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<!-- BEGIN switch_social_login -->
<td width="10%" align="center" valign="middle" class="row1">
<span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
</td>
<td width="40%" class="align_gauche row1">
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
</td>
<!-- END switch_social_login -->
</tr>
</table>
</form>
<!-- END switch_user_login_form_footer -->
<!-- BEGIN disable_viewonline -->
<div class="linepng"><img src="https://imgur.com/kUhQX83.png"/></div>
<div class="textequeel">Want to see<p>MORE ?</p></div>
<!--<div style="width:100%; position:absolute;height:836px;left:0;margin-top:-290px;">
<div class="monta"><img src="https://imgur.com/JJFRCgj.png"/></div></div>-->
<div id="qeel">
<div class="fondqeel" style="height:838px;"></div>
<div class="titleqeel">Board statistics</div>
<div class="lesliensutiles"><a href="/memberlist?mode=today_posters">Top 20 du jour</a><a href="/memberlist?mode=overall_posters">Top 20 du forum</a><a href="/search?search_id=activetopics">Sujets actifs du jour</a><a href="/?mode=delete_cookies">Supprimer les cookies</a><a href="/search?search_id=newposts">Voir les messages non lus</a><a href="/?mark=forums">Marquer tous les forums comme lus</a></div>
<div class="boxonline">
<div class="statsonline">{TOTAL_USERS_ONLINE}</div>
<div id="oukisson">{LOGGED_IN_USER_LIST}</div>
<script type="text/javascript">
document.getElementById('oukisson').innerHTML=document.getElementById('oukisson').innerHTML.replace(/Utilisateurs enregistrés :/g," ");
</script>
<div id="totalonline"><table>{L_CONNECTED_MEMBERS}</table></div>
<script type="text/javascript">
document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Membres connectés au cours des 48 dernières heures :/g," ");
</script>
<div class="newmember">{NEWEST_USER}</div>
<div id="cadre-qeel-header">
<div>{TOTAL_POSTS} {TOTAL_USERS}</div>
</div>
<div class="topmilieu1">
<div class="entouretop1"><img src="https://imgur.com/Zvr1x49.png"/><div class="chiffregroup1">0</div></div>
<div class="entouretop1"><img src="https://imgur.com/LchqrRi.png"/><div class="chiffregroup2">0</div></div>
<div class="entouretop1"><img src="https://imgur.com/NAQYSTJ.png"/><div class="chiffregroup3">0</div></div>
</div></div>
<div class="little-text">:copyright:️ Copyright : Thème réalisé par <a href="http://www.epicode-entraide.com/">Myrddin</a>. Merci de ne pas retirer le crédit par respect pour le travail du codeur/de la codeuse. Merci également de ne pas voler les codes.</div>
<div class="fondfooter">
<div class="Border-AFF img">
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
<a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
</div></div>
</div>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<!-- END switch_legend -->
{AUTO_DST}
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.lesliensutiles {
text-align: center;
width: 825px;
margin: 0 auto;
padding: 2px;
position: relative;
}
.lesliensutiles a {
color: #2d112c;
font-size: 11px;
font-family: 'Calibri', sans-serif;
text-transform: uppercase;
margin: 5px;
}
.little-text {
border: solid 1px;
font-family: 'Calibri', sans-serif;
font-size: 10px;
position: relative;
letter-spacing: 0;
line-height: 0px;
margin: 18px auto 0;
width: 880px;
padding: 2px;
text-shadow: 0 0;
color: #eaeaea;
text-transform: uppercase;
}
.little-text a {
background: #000;
color: #fff;
display: inline-block;
font-family: 'Calibri', sans-serif;
font-size: 10px;
letter-spacing: 2px;
margin: 2px;
padding: 5px;
text-decoration: none;
text-shadow: 0px 1px 2px #60acb3;
text-transform: uppercase;
}
.actual-footer {
height: 200px;
margin-top: -4px;
padding-top: 3px;
z-index: 99;
}
.monta img {
width: 100%;
}
#footer {
color: #222;
height: 139px;
padding-bottom: 3%;
font-size: 10px;
}
.mili {
text-align: center;
width: 1000px;
}
.truky {
display: inline-block;
width: 290px;
}
#footer .wrapper {
height: 174px;
}
#footer .three {
display: inline-block;
width: 300px;
}
#footer .four {
margin-left: -2%;
position: relative;
top: -0px;
display: inline-block;
width: 300px;
}
#footer .title {
color: #eaeaea;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 26px;
top: 10px;
letter-spacing: 1px;
text-shadow: 0px 1px #454545;
font-style: italic;
position: relative;
}
#footer .title2 {
color: #eaeaea;
text-transform: lowercase;
font-family: 'Anisha', sans-serif;
font-size: 53px;
letter-spacing: 1px;
text-shadow: 0px 1px #454545;
font-style: italic;
position: relative;
left: 125px;
}
#footer .left {
width: 300px;
padding: 10px;
color: #222;
text-align: justify;
font-family: 'Calibri', sans-serif;
font-size: 11px;
font-weight: bold;
}
#footer .left img {
width: 300px;
}
#footer .lefty {
width: 350px;
padding: 10px;
color: #222;
text-align: justify;
font-family: 'Calibri', sans-serif;
font-size: 11px;
font-weight: bold;
}
#footer .lefty img {
width: 350px;
margin-left: -20px;
}
#main-reqa-hv1 {
width: auto;
height: 100px;
position: relative;
overflow: hidden;
left: -10px;
}
.main-reqa-hv2 {
position: relative;
left: 0px;
top: 0px;
background-color: rgba(255, 255, 255, 0.6);
transition: 0.3s all ease-in-out;
-webkit-transition: 0.3s all ease-in-out;
-moz-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
-ms-transition: 0.3s all ease-in-out;
opacity: 0;
}
#main-reqa-hv1:hover .main-reqa-hv2 {
top: -102px;
opacity: 1;
}
.main-reqa-hv8 {
width: 290px;
height: 190px;
padding: 20px;
}
.main-reqa-hv9 {
width: 210px;
background: #fff;
border: 1px solid #e1e1e1;
font-family: 'Calibri', sans-serif;
text-align: justify;
line-height: 125%;
color: #222;
font-size: 11px;
padding: 20px;
}
.main-reqa-hv10 {
height: 25px;
text-align: center;
}
.main-reqa-hv10 span {
padding-top: 50px;
position: relative;
top: 5px;
}
.main-reqa-hv10 span a {
font-size: 25px;
font-style: italic;
color: #d2cab7;
text-shadow: 1px 1px #636363;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: normal;
text-transform: lowercase;
}
#cadre-qeel-header {
font-size: 0;
}
#cadre-qeel-header strong {
font-size: 16px;
background: rgba(50, 50, 50, 0.8);
box-shadow: 1px 1px 1px #454545;
color: #eaeaea;
width: 80px;
height: 56px;
display: block;
margin-bottom: 146px;
margin-right: -30px;
text-align: center;
padding: 10px 0px 0px 0px;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
border: 5px solid #aec1bf;
}
#cadre-qeel-header strong:nth-child(1) {
position: absolute;
bottom: -60px;
right: 48px;
font-family: OPen Sans Condensed;
letter-spacing: 2px;
}
#cadre-qeel-header strong:nth-child(1)::before {
content: "épitaphes";
position: absolute;
top: 36px;
left: 0;
width: 100%;
font-size: 9px;
font-weight: 100;
}
#cadre-qeel-header strong:nth-child(2) {
position: absolute;
bottom: 20px;
right: 48px;
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 2px;
}
#cadre-qeel-header strong:nth-child(2)::before {
content: "écrivains";
position: absolute;
top: 36px;
left: 0;
width: 100%;
font-size: 9px;
font-weight: 100;
}
.laligne {
text-align: center;
margin: 0 auto;
}
.Border-AFF img {
border: 2px solid #aec1bf;
box-shadow: 1px 1px #454545;
display: inline;
margin: 3px;
width: 42px;
height: 42px;
}
.Border-AFF {
text-align: center;
margin: 0 auto;
position: relative;
top: 20px;
width: 940px;
}
.fondfooter {
min-height: 176px;
padding: 3px 0;
width: 1000px;
z-index: 6;
margin: auto;
}
.chiffregroup1 {
color: #53aa98;
font-family: 'Poiret One', sans-serif;
font-weight: bold;
font-size: 20px;
}
.chiffregroup2 {
color: #87262A;
font-family: 'Poiret One', sans-serif;
font-weight: bold;
font-size: 20px;
}
.chiffregroup3 {
color: #3B4B8C;
font-family: 'Poiret One', sans-serif;
font-weight: bold;
font-size: 20px;
}
.entouretop1 {
display: inline-block;
margin: 10px;
text-align: center;
position: relative;
left: 100px;
top: 75px;
}
.topmilieu1 {
height: 100px;
width: 373px;
position: relative;
left: 37%;
margin-top: 62px;
}
.linepng {
text-align: center;
margin-top: 0px;
margin-bottom: 20px;
}
.textequeel {
font-size: 15px;
text-transform: lowercase;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
color: #e8e2e0;
height: 80px;
margin-bottom: 150px;
}
.textequeel p {
font-size: 50px;
text-transform: lowercase;
text-align: center;
margin-top: -25px;
letter-spacing: 6px;
font-style: normal;
font-family: watermelon_script_demoregular;
font-weight: normal;
color: #454545;
}
.fondqeel {
left: 0px;
text-shadow: 0 0 5px #000;
position: absolute;
width: 100%;
background: #2d112c;
background-image: url(https://imgur.com/2yUUlW1.png);
background-position: top center;
background-size: 100% auto;
background-color: transparent;
background-repeat: no-repeat;
margin-top: -169px;
}
.titleqeel {
color: #eaeaea;
text-shadow: 0px 1px 2px #2d112c;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 60px;
font-style: italic;
width: 1000px;
text-transform: lowercase;
position: relative;
letter-spacing: 6px;
word-spacing: 10px;
text-align: center;
margin: auto;
}
.boxonline {
background-color: rgba(250, 250, 250, 0.8);
color: #000;
font-weight: lighter;
height: 300px;
margin: 10px auto 0px;
padding: 10px;
position: relative;
text-align: justify;
width: 810px;
box-shadow: 1px 1px 8px #454545;
z-index: 9;
}
.statsonline {
border-bottom: 1px solid #d2cab7;
color: #454545;
font-family: 'Roboto Condensed', sans-serif;
font-size: 11px;
min-height: 10px;
padding: 20px;
width: 356px;
}
#oukisson {
border-bottom: 1px solid #d2cab7;
height: 95px;
margin-top: -15px;
padding: 20px;
width: 300px;
overflow: auto;
}
.oukisson a {
font-size: 11px;
letter-spacing: 0px;
margin: 2px;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
}
#totalonline {
font-size: 12px;
height: 66px;
margin-top: 10px;
padding: 14px;
width: 300px;
overflow: auto;
}
#totalonline a {
font-size: 11px;
letter-spacing: 0px;
margin: 2px;
}
.newmember {
font-size: 0;
position: relative;
height: 50px;
left: 48%;
margin-top: -286px;
padding: 5px;
width: 440px;
}
.newmember strong a {
font-size: 14px;
letter-spacing: 2px;
padding: 33px 0 5px;
position: absolute;
right: 143px;
width: 280px;
margin-top: 22px;
font-family: 'Open Sans condensed', sans-serif;
}
.newmember strong a::before {
bottom: 20px;
color: #aec1bf;
content: "Notre dernier écrivain :";
font-family: 'Calibri', sans-serif;
font-style: italic;
font-weight: bold;
left: 4px;
position: absolute;
text-transform: uppercase;
width: 315px;
top: -5px;
letter-spacing: 5px;
}
N'oubliez pas d'activer les avatars sur les catégories. Pour ça, allez dans Panneau d'Administration > Affichage > Page d'Accueil > Structure et Hiérarchie et plus bas > Afficher les avatars dans la colonne "Derniers messages" > OUI.
- "Longueur du titre du sujet affiché dans la colonne "Derniers messages" :" 16
- "Afficher les liens vers les sous-forums :" OUI
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|