Jawn
she/her mais n'importe quel pronom fera l'affaire - codeuse - accro à Genshin Impact - vive les fleurs et la nature - créditez les codes
73227/01/2018
![[INDEX SO DEEP DARK AND RED] 7DBTqUW](https://imgur.com/7DBTqUW.png)
Bannière + barre de navigation
Ceci est l'entiéreté du template overall_header. Remplacez ce template par tout le code suivant : (il contient la barre de navigation, la bannière ainsi que toutes les polices d'écritures dont vous aurez besoin). Rendez-vous dans Panneau d'administration > Affichage > Templates > Général > Overall_header et copiez collez tout le template suivant :
- 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>
<center><div class="alignrect"><div class="rectspin"></div></div></center>
<div class="lesmachins">
<div class="rectangletruc"></div>
<div class="rectangletruc"></div>
</div>
<div class="titlefo"><a href="/">Nom du forum</a>
<div class="subphrase">Petite phrase descriptive pour votre forum</div>
</div>
<div class="citationtruk">
« Une citation parce que cay la classe » <br/>
<span>Auteur de la citation</span>
</div>
<div class="contexte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis tincidunt dui, in feugiat lacus. Sed dignissim orci et sapien aliquam, eu cursus odio eleifend. Mauris imperdiet leo nisi, bibendum bibendum arcu varius quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent sed libero tortor. Sed quis semper nibh, nec lobortis justo. Sed venenatis, lacus interdum laoreet convallis, tellus lacus condimentum purus, ut congue neque nisl gravida felis. Nunc ac neque a nisl malesuada mattis. Vestibulum nec ullamcorper lorem. Vivamus vel dapibus magna, at rhoncus velit.
cilisis sapien scelerisque sit amet. Vestibulum varius feugiat ultricies. Pellentesque sodales non diam vitae dapibus. Nam at luctus arcu, ut luctus elit. Duis ac orci at est auctor lobortis in in turpis. Etiam vestibulum purus in enim varius, a maximus diam finibus. Nulla facilisi. Aenean quis nulla in sem pulvinar iaculis sed ut lacus. Suspendisse facilisis condimentum nibh, in imperdiet dolor. Ut euismod interdum nisl, vitae dignissim mauris lobortis quis. Mauris scelerisque est eros, id aliquam lorem ullamcorper non. Aenean molestie in libero id tincidunt.
</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}
<script type='text/javascript' src='http://files.jcink.net/html/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='http://files.jcink.net/html/jquery.cookie-1.3.1.js'></script>
<script type='text/javascript' src='http://files.jcink.net/html/catcollapse.js'></script>
<script src="http://greatdivide.b1.jcink.com/uploads/greatdivide/styletooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:300
});
});
})(jQuery);
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
</script>
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" 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>
<div class="haut"><a href="#top"><span class="sf sf-arrow-up"></span></a></div>
<div class="bas"><a href="#bottom"><span class="sf sf-arrow-down"></span></a></div>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<!-- 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="Navegacion">
<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</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 -->
Ensuite, il faut rajouter le CSS. Pour cela, allez dans Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS puis copiez collez le code suivant :
- Code:
/****BARRE NAV*******/
.Navegacion {
width: 100%;
position: fixed;
top: 0;
background: #161010;
left: 0;
padding: 10px 0;
height: 38px;
text-align: center;
z-index: 9999999999!important;
box-shadow: 1px 0px 20px black;
}
.Navegacion ul.linklist {
display: inline-block!important;
margin-top: 8px;
width: 900px;
list-style-type: none;
}
a.mainmenu {
font-size: 11px;
text-transform: uppercase;
font-family: arial;
padding: 3px;
color: #5a1c1a;
text-shadow: 1px 1px 1px black;
}
/******HEADER*******/
@keyframes spinner{0%{-webkit-transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg);}
}
.lesmachins {
text-align:center;
margin-top:0px;
}
.alignrect {
position:relative;
top:200px;
}
.rectspin {
animation: spinner 10s linear infinite;
width: 200px;
height: 200px;
border: 1px solid #d9d9d9;
background: rgba(24, 15, 16, 0.5);
}
.rectangletruc {
width:200px;
height:200px;
background:#180f10;
display:inline-block;
vertical-align:top;
transform:rotate(45deg);
}
.titlefo {
text-align:center;
position:relative;
top:-175px;
width:1000px;
margin:0 auto;
padding:40px;
border:solid 1px #d9d9d9;
}
.titlefo a {
font:50px Raleway;
color:#d9d9d9;
text-transform:uppercase;
letter-spacing:10px;
text-shadow: 1px 0px 1px black;
animation-name:spreadText;
animation-duration:4s;
animation-delay:0.2s;
animation-iteration-count:1;
animation-fill-mode: forwards;
animation-timing-function:ease-out;
}
.subphrase {
color:#d9d9d9;
font:11px arial;
text-transform:uppercase;
letter-spacing:2px;
text-shadow: 1px 0px 1px black;
}
.citationtruk {
text-align: center;
margin-top: -84px;
color: #d9d9d9;
font: 15px Raleway;
text-transform: uppercase;
font-style: italic;
text-shadow: 1px 0px 1px black;
position: relative;
}
.citationtruk span {
text-transform:none;
font-style:normal;
color:#b36964;
border-bottom:1px solid #b36964;
}
.contexte {
margin: 0 auto;
width: 800px;
height: 120px;
margin-top: 50px;
text-align: justify;
color: #d9d9d9;
text-shadow: 1px 0px 1px black;
font: 12px arial;
line-height: 18px;
}
![[INDEX SO DEEP DARK AND RED] Empty](https://2img.net/i/empty.gif)
# [INDEX SO DEEP DARK AND RED] - Dim 5 Mai - 23:48Jawn
she/her mais n'importe quel pronom fera l'affaire - codeuse - accro à Genshin Impact - vive les fleurs et la nature - créditez les codes
73227/01/2018
Les catégories :
Panneau d'administration > Affichage > Templates > Général > Index_box; remplacez la totalité de votre template par ce HTML :
- Code:
<div class="entourecate">
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="entourtitle">
<center><div class="rectangletruc2"></div>
<div class="rectangletruc2"></div></center>
<div class="titlecat">{catrow.tablehead.L_FORUM}</div></div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="categorie">
<div class="blokimg"><div class="feeling">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
<div class="infoscat">
<div class="newsmessages">
<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" />
</div>
<div class="name"><a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a></div>
<div class="description">{catrow.forumrow.FORUM_DESC}</div>
<div class="lastpost">{catrow.forumrow.LAST_POST}</div>
</div>
<div class="statscat">
<div class="topicscat">{catrow.forumrow.TOPICS} sujets</div>
<div class="messcat">{catrow.forumrow.POSTS} messages</div>
</div>
</div>
<!-- END forumrow -->
<!-- END catrow -->
</div>
Ensuite, Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, venez mettre votre CSS :
- Code:
.rectangletruc2 {
width:200px;
height:200px;
background:#180f10;
display:inline-block;
vertical-align:top;
transform:rotate(45deg);
}
.titlecat {
text-align: center;
position: relative;
top: -156px;
width: 1000px;
margin: 0 auto;
padding: 0px;
border: solid 1px #d9d9d9;
}
.titlecat h2 {
font: 40px Raleway;
color: #d9d9d9;
text-transform: uppercase;
letter-spacing: 10px;
text-shadow: 1px 0px 1px black;
}
.entourecate {
margin-top:50px;
}
.categorie {
width:980px;
height:200px;
margin:0 auto 20px auto;
background:#571b1b;
border:solid 4px black;
display:flex;
flex-wrap:wrap;
}
.blokimg {
width: 500px;
overflow: hidden;
display: block;
height: 200px;
border-right: 4px solid black;
position: relative;
z-index: 9;
}
.feeling {
width:480px;
color: #000;
font-family: calibri;
font-size:10px;
background-image:url(https://imgur.com/qw4dF2d.png);
height:180px;
padding:10px;
display:block;
text-align:center;
margin-top:-200px;
transition-duration: 1s;
transition-timing-function: ease;
}
.blokimg:hover .feeling {
margin-top: 0px;
transition-duration: 1s;
transition-timing-function: ease;
}
.feeling a {
background: #571b1b;
color: #d9d9d9;
text-shadow: 1px 0px 1px black;
font-family: Raleway;
font-size: 10px;
font-weight: bold;
margin: 3px;
padding: 6px;
text-align: center;
text-transform: uppercase;
width: 196px;
display: inline-block;
box-shadow: 1px 1px 10px black;
}
.feeling a:hover {
color: #d9d9d9;
}
.blokimg img {
width:500px;
height:200px;
-moz-filter: grayscale(80%);
-ms-filter: grayscale(80%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(80%);
filter: gray;
}
.infoscat {
border-right:4px solid black;
width:380px;
}
.name {
padding: 16px;
text-align: right;
position: relative;
}
.name a {
color: #d1cccc;
font-family: Raleway;
font-size: 30px;
letter-spacing: -1px;
text-shadow: 1px 0px 1px black;
}
.description {
border-left: 2px solid #d1cccc;
color: #9e9e9e;
display: block;
font-family: calibri, arial;
font-size: 10px;
line-height: 10px;
height: 40px;
overflow: auto;
padding: 10px;
text-align: justify;
text-transform: uppercase;
margin: 0px auto;
width: 300px;
text-shadow: 1px 0px 1px black;
}
.description img {
margin-left: -545px;
margin-top: -77px;
position: absolute;
width: 500px;
height: 200px;
}
.lastpost {
color: #777;
font-family: roboto bold;
font-size: 9px;
letter-spacing: 1px;
margin-right: 30px;
text-align: right;
margin-top: 20px;
position: relative;
text-transform: uppercase;
}
.lastpost a {
font-size: 14px;
color: #d1cccc;
font-family: Raleway;
text-shadow: 1px 0px 1px black;
}
.lastpost strong {
font-size: 12px;
letter-spacing: -1px;
margin-top: 3px;
padding: 0 5px;
}
.statscat {
width: 72px;
padding: 10px;
text-align: center;
color: #050505;
font: 11px arial;
text-transform: uppercase;
}
.topicscat {
padding: 10px;
height: 50px;
width: 50px;
margin: 40px auto;
}
.messcat {
padding: 10px;
height: 50px;
width: 60px;
margin: -52px auto -52px -3px;
}
.newsmessages {
position: absolute;
width: 260px;
}
.newsmessages img {
width: 260px;
margin-left: -2px;
opacity: 0.5;
}
Pas de nouveau message > https://imgur.com/hpLuQK5.png
Nouveaux messages > https://imgur.com/b6hz08U.png
# Re: [INDEX SO DEEP DARK AND RED] - Dim 5 Mai - 23:49Jawn
she/her mais n'importe quel pronom fera l'affaire - codeuse - accro à Genshin Impact - vive les fleurs et la nature - créditez les codes
73227/01/2018
Le qui est en ligne :
Panneau d'administration > Affichage > Templates > Général > Index_body; entre les balises :
- Code:
<!-- BEGIN disable_viewonline -->
- Code:
<!-- END disable_viewonline -->
- Code:
<div class="entourtitle5">
<center><div class="rectangletruc3"></div>
<div class="rectangletruc3"></div></center>
<div class="titleqeel">Qui est en ligne ?</div></div>
<div class="fondqeel">
<div class="ouilsont"><table>{L_CONNECTED_MEMBERS}</table></div>
<div class="statsqeel">
<div class="statsonline">{TOTAL_USERS_ONLINE}</div>
<div id="cadre-qeel-header">
<div>{TOTAL_POSTS} {TOTAL_USERS}</div>
</div>
<div class="titlenew">Bienvenue à :</div>
<div class="newest">{NEWEST_USER}</div>
</div>
<div class="online">{LOGGED_IN_USER_LIST}</div>
</div>
<div class="fonfoo">
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
<a target="_blank" href="/" class="tooltip" title="/"><img src="https://placehold.it/50x50"/></a>
</div>
Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, venez mettre votre CSS :
- Code:
.entourtitle5 {
margin-top:80px;
}
.rectangletruc3 {
width:200px;
height:200px;
background:#180f10;
display:inline-block;
vertical-align:top;
transform:rotate(45deg);
}
.titleqeel {
text-align: center;
position: relative;
top: -156px;
width: 1000px;
margin: 0 auto;
padding: 30px;
border: solid 1px #d9d9d9;
font: 40px Raleway;
color: #d9d9d9;
text-transform: uppercase;
letter-spacing: 10px;
text-shadow: 1px 0px 1px black;
}
.fondqeel {
width:1000px;
margin:0 auto 50px auto;
height:500px;
display:flex;
flex-wrap:wrap;
text-align:center;
}
.ouilsont {
width: 650px;
height: 180px;
background-image: url(https://imgur.com/SWUXw71.png);
box-shadow: 0 15px 20px -12px rgba(0,0,0,.8);
text-align: justify;
padding: 10px;
}
.ouilsont a {
font:12px Raleway;
}
.ouilsont .gensmall {
letter-spacing: 0px;
font-size: 11px;
}
.ouilsont .row1 {
font-family: 'Raleway';
color: #d9d9d9;
}
.online {
background-image: url(https://imgur.com/YyWS778.png);
width: 280px;
margin-left: 30px;
margin-top: -240px;
padding: 10px;
height: 440px;
box-shadow: 0 15px 20px -12px rgba(0,0,0,.8);
text-align: justify;
font: 11px raleway;
}
.online a {
margin: 2px;
font: 16px raleway;
font-style: italic;
text-transform: uppercase;
}
.statsqeel {
width:650px;
padding:10px;
height:200px;
}
.statsonline {
text-align:center;
font:12px Raleway;
color: #d9d9d9;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 1px 0px 1px black;
}
.titlenew {
font: 40px Raleway;
color: #d9d9d9;
text-transform: uppercase;
letter-spacing: 10px;
text-shadow: 1px 0px 1px black;
margin-top: 98px;
}
.newest {
font-size:0px;
}
.newest a {
font:13px Raleway;
font-style:italic;
}
.fonfoo {
width: 100%;
margin: 0 auto;
text-align: center;
}
.fonfoo img {
width:50px;
height:50px;
outline: 1px solid #efefef;
outline-offset:2px;
margin:5px;
}
#cadre-qeel-header {
font-size: 0;
margin-top: 30px;
position: relative;
left: -160px;
}
#cadre-qeel-header strong {
font-size: 20px;
color: #cccccc;
width: 290px;
height: 60px;
padding: 4px;
text-align: center;
background-color: #471916;
text-transform: uppercase;
box-shadow: 0 15px 20px -12px rgba(0,0,0,.8);
}
#cadre-qeel-header strong:nth-child(1) {
position: absolute;
right: -148px;
font-family: raleway;
letter-spacing: 2px;
}
#cadre-qeel-header strong:nth-child(1):before {
content: "messages";
position: absolute;
top: 25px;
left: 0;
width: 100%;
font-size: 20px;
font-weight: 100;
}
#cadre-qeel-header strong:nth-child(2) {
position: absolute;
font-family: Raleway;
letter-spacing: 2px;
margin-left: -160px;
}
#cadre-qeel-header strong:nth-child(2):before {
content: "monstres";
position: absolute;
top: 25px;
left: 0;
width: 100%;
font-size: 20px;
font-weight: 100;
}
.clear {
clear: both;
}
# Re: [INDEX SO DEEP DARK AND RED] - Dim 5 Mai - 23:50Jawn
she/her mais n'importe quel pronom fera l'affaire - codeuse - accro à Genshin Impact - vive les fleurs et la nature - créditez les codes
73227/01/2018
Les images et mise en page :
Pour éviter le surlignement automatique des liens ainsi que l'image de fond, rajoutez dans votre CSS : Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, venez mettre votre CSS :
- Code:
a{text-decoration:none;}
a:hover{text-decoration:none !important;}
body {
background-image:url(https://imgur.com/lMBsDjl.png);
background-attachement:fixed;
background-size:100%;
margin:0;
padding:0;
}
Pour avoir une jolie barre de scroll (uniquement sous Chrome), aussi à rajouter à la suite dans votre CSS :
- Code:
::-webkit-scrollbar {
width: 8px;
height: 10px;
background:#161010;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
-webkit-border-radius: 2px;
background-color: #3a1715;
}
::-webkit-scrollbar-thumb:horizontal{
height: 30px;
-webkit-border-radius:5px;
background-color:#3a1715;
}
Pour l'effet d'étirement du texte du nom du forum à l'ouverture de la page, toujours dans votre CSS :
- Code:
@keyframes spreadText{
from{letter-spacing:-0px;opacity:2;}
to{letter-spacing: 10px;opacity:1;}
}
Pour styliser les boutons haut et bas, toujours dans votre CSS :
- Code:
.haut {
position: fixed;
bottom: 110px;
right: 70px;
z-index: 999;
}
.bas {
position: fixed;
bottom: 108px;
right: 30px;
z-index: 999;
}
.haut span {
font-size:50px;
transition:1s linear;
}
.bas span {
font-size:50px;
transition:1s linear;
}
.haut span:hover {
color:#d9d9d9;
transition:1s linear;
}
.bas span:hover {
transition:1s linear;
color:#d9d9d9;
}
Et toujours dans le CSS, pour avoir une jolie barre en bas du forum pour les liens utiles (comme le panneau d'administration) :
- Code:
#page-footer {
text-transform: uppercase;
word-spacing: 2px;
z-index: 7;
box-sizing: border-box;
clear: both;
color: #ccc;
font-size: 1em;
padding: 20px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
width: 100%!important;
border-top: solid 2px #3a1715;
}
#page-footer a {
font:8px Raleway;
color:#d9d9d9;
letter-spacing:2px;
}
Et enfin, pour l'effet au survol des partenaires footer, rajoutez dans votre CSS :
- Code:
#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:5px;
background-color: #fff;
font-family:arial;
font-weight: 700;
text-transform: uppercase;
font-size:8px;
color:#571b1b;
border: 1px solid #f6f6f6;
}
# Re: [INDEX SO DEEP DARK AND RED] - Dim 5 Mai - 23:50Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|
