Jawn
# INDEX ROUGE ET NOIR - Lun 8 Mar - 22:03
En tête + barre latérale + 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}>
<link rel="icon" type="image/png" href="https://64.media.tumblr.com/414502a306b33c79ad8b014d463182f1/tumblr_inline_p94wgvKqxj1rhwzwl_75sq.gif"/>
<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/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"/>
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" 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 () {
$('#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 async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
<!-- BEGIN google_analytics_code_bis -->
gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
<!-- 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&display=swap"
rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
<div class="sidebar"></div>
<div class="sidebar_inside">
<div class="avatar_side"><img src="https://imgur.com/K4sJFgP.png"/></div>
<div class="welcome_side">welcome <span>invité</span></div>
<div class="search_bar">
<form id="toggle-search" action="/search" method="get">
<input id='searchBar' type="hidden" name="mode" value="searchbox"/>
<input id='searchBar' placeholder="Rechercher" type="text" name="search_keywords"/>
<input id='searchBar' style="display:none" id="rtopics" type="radio" name="show_results" value="topics" checked="checked"/>
</form>
</div>
</div>
<div class="barnav_epsi">{GENERATED_NAV_BAR}</div>
<div class="bann_epsi"><a href="/"><img src="https://imgur.com/ch51I6p.png"/></a></div>
<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 -->
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="like_popup_message">
{LIKE_POPUP_MSG}
</div>
<div id="like_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="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
</form>
</div>
</div>
<!-- END switch_like_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<div id="page-header">
<div class="wrap">
<a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
<div class="wrap">
<a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
<div class="wrap">
<div id="site-desc">
<!-- BEGIN switch_h1 -->
<div id="site-title">{switch_h1.MAIN_SITENAME}</div>
<!-- END switch_h1 -->
<!-- BEGIN switch_desc -->
<p>{switch_desc.SITE_DESCRIPTION}</p>
<!-- END switch_desc -->
</div>
</div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<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>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</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 le CSS qui va avec :
- Code:
select {
color: #cbcbcb !important;
}
body, html {
background-image: url(https://imgur.com/SufZzI1.png);
background-size: 100%;
background-attachment: fixed;
background-position: 50% 50%;
}
* {
scrollbar-width: thin;
scrollbar-color:#5a1e1e #070707;
}
.button, .button1, .button2, input[type="submit"] {
background-color: transparent;
border-radius: 3px;
overflow: hidden;
padding: 5px !important;
position: relative;
text-decoration: none;
width: auto !important;
font: 8px Roboto;
text-transform: uppercase;
letter-spacing: 2px;
color: #ccc !important;
}
dl.codebox {
background-color: #171717 !important;
border-color: rgb(134, 60, 60) !important;
font: 12px roboto !important;
}
.selectCode {
float: right;
color: #cbcbcb;
font: 8px roboto;
text-transform: uppercase;
letter-spacing: 2px;
}
.button, .button1, .button2, input[type="submit"]:hover {
background-color: transparent !important;
}
#wrap {
background: rgba(0, 0, 0, 0.3);
}
body {
margin: 0;
padding: 0;
margin-left: 100px;
overflow-x: hidden;
}
#page-footer {
background-color: transparent !important;
display: block !important;
margin: 0 auto;
width: 100%;
line-height: 10px;
}
#page-footer a, #page-footer, .wrap {
color: #cbcbcb;
font: 8px roboto;
text-transform: uppercase;
letter-spacing: 2px;
}
.footerbar-system .rightside {
color: #707070 !important;
}
#page-footer, .copyright-body {
border-color: #5a1e1e !important;
margin: 5px 0px 5px 0px !important;
padding-top: 5px !important;
}
::-webkit-scrollbar {
background: #070707;
width: 8px;
}
::-webkit-scrollbar-thumb {
height: 30px;
background: -webkit-linear-gradient(#5a1e1e, #070707);
}
.selectCode {
float:right;
}
a{text-decoration:none;cursor: grab;}
a:hover{text-decoration:none !important;cursor: grab;}
.search_bar {
padding: 10px 0px;
}
#searchBar {
background-color: #171717;
border: none;
color: #4e4e4e !important;
padding: .25em .75em;
text-align: center;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
font: 9px roboto;
max-width: 90px;
margin-top: -10px;
}
.sidebar {
position: fixed;
left: 0;
padding: 5px;
width: 100px;
top: 0;
background: #070707;
height: 100%;
}
.sidebar_inside {
position: fixed;
left: 0;
top: 20px;
width: 100px;
padding: 5px;
}
.avatar_side {
width: 60px;
height: 60px;
overflow: hidden;
border-radius: 100%;
margin: 20px auto 0px auto;
}
.avatar_side img {
width: 100%;
cursor: auto;
}
.welcome_side {
color: #cbcbcb;
font: 8px roboto;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
padding: 20px 0px;
margin: 0px auto 20px auto;
border-bottom: solid 1px #863c3c;
width: 60%;
}
.welcome_side span {
color: #863c3c;
font-style: italic;
}
.barnav_epsi {
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
list-style:none;
}
a.mainmenu {
color: #cbcbcb;
font: 8px roboto;
text-transform: uppercase;
letter-spacing: 2px;
vertical-align:top;
}
.bann_epsi {
text-align: center;
padding: 150px 0px 120px 0px;
}
.bann_epsi img {
width: 700px;
}
Jawn
# Re: INDEX ROUGE ET NOIR - Lun 8 Mar - 22:07
Les catégories
Remplacer l'intégralité de votre template index_box par le HTML :
- Code:
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="big_cat_title">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<div class="total_cat">
<!-- BEGIN forumrow -->
<div class="cat_epsi">
<div class="blokun">
<div class="last_ava">
<!-- BEGIN avatar -->
<div class="inside_lastvava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
<!-- END avatar -->
</div>
<div class="lastpost_epsi">
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</div>
</div>
<div class="desc_epsi">{catrow.forumrow.FORUM_DESC}</div>
<div class="sousfo_epsi">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
</div>
<div class="title_epsi"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<!-- END forumrow -->
</div>
<!-- BEGIN tablefoot -->
<!-- END tablefoot -->
<!-- END catrow -->
<!-- BEGIN switch_on_index -->
<div class="markasread"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></div>
<!-- END switch_on_index -->
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.imgparto {
text-align:center;
}
.imgparto img {
width: 30px;
height: 30px;
}
.big_cat_title {
text-align: center;
border-bottom: solid 1px #863c3c;
width: 50%;
margin: 40px auto 20px auto;
padding: 5px 0px;
}
.big_cat_title h2 {
color: #cbcbcb;
font: 8px roboto;
text-transform: uppercase;
letter-spacing: 2px;
}
.total_cat {
display: inline-block;
margin: 0 auto;
vertical-align: top;
}
.cat_epsi {
width: 434px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 30px 30px 30px 30px;
background: rgba(0, 0, 0, 0.3);
margin: 20px 15px;
border: solid 1px #111;
height: 330px;
}
.blokun {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
width: 100%;
margin-bottom: 20px;
height: 82px;
}
.last_ava {
padding: 15px;
border: solid 1px #111;
width: 81px;
height: 81px;
}
.inside_lastvava {
width: 50px;
height: 50px;
overflow: hidden;
}
.inside_lastvava img {
width:100%;
}
.lastpost_epsi {
color: #333;
font: 8px roboto;
font-style: normal;
text-transform: uppercase;
letter-spacing: 2px;
}
.lastpost_epsi a {
background: #863c3c;
padding: 4px 5px;
color: #cbcbcb;
letter-spacing: 2px;
font: 9px roboto;
text-transform: uppercase;
line-height: 31px;
}
.lastpost_epsi a:last-child {
background:transparent !important;
}
.lastpost_epsi a.gensmall {
background:transparent;
}
.lastpost_epsi, a.last-post-icon {
background:transparent;
}
.desc_epsi {
text-align: justify;
height: 100px;
padding: 10px;
overflow: auto;
font: 9px roboto;
text-transform: lowercase;
line-height: 12px;
letter-spacing: 1px;
color: #cbcbcb;
}
.desc_epsi strong {
color: #2b9158;
}
.sousfo_epsi {
text-align: center;
width: 100%;
padding: 20px 20px 0px 20px;
font-size: 0px;
transition:all 800ms;
}
.sousfo_epsi a {
color: #863c3c;
font: 9px roboto;
text-transform: uppercase;
letter-spacing: 2px;
font-style: italic;
margin: 0px 5px;
transition:all 800ms;
}
.sousfo_epsi a:hover {
color:#f1f1f1;
transition:all 800ms;
}
.title_epsi {
width: 434px;
background: #cbcbcb;
padding: 15px;
text-align: center;
margin: -20px auto 0px auto;
}
.title_epsi a {
font: 8px times New Roman;
text-transform: uppercase;
letter-spacing: 4px;
color: black;
display: block;
}
.markasread {
text-align: right;
margin: 10px 0px -10px 0px;
}
.markasread a {
color: #333;
font: 8px Roboto;
text-transform: uppercase;
letter-spacing: 2px;
}
Le qui est en ligne
Dans votre template index_body, remplacez tout le template par votre HTML :
- Code:
{JAVASCRIPT}
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
<input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
<br />
<label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_social_login -->
<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>
<!-- END switch_social_login -->
</div>
</form>
</div>
<!-- END switch_user_login_form_header -->
<!-- BEGIN message_admin_index -->
<div class="panel introduction">
<!-- BEGIN message_admin_titre -->
<div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
<!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->
{CHATBOX_TOP}
{BOARD_INDEX}
<!-- BEGIN disable_viewonline -->
<div class="qeel_epsi">
<div class="blokg">
<div class="contexte_epsi"><a target="_blank" href="/">EPSILON</a> est un forum de libre service fondé <strong>il y a trois ans</strong> et dirigé par deux amies, qui propose plusieurs choses. Tout d'abord, des codes pour vos forums ainsi que pour vos rps, qui font des templates les plus fourbes aux signatures en passant par les fiches RP. Nous proposons également du graphisme; des maquettes dont vous pouvez vous inspirer ainsi que des avatars et des bannières. Tout est bien sûr personnalisable, sauf indication contraire.<br/><br/>
Nous travaillons avec passion mais merci de ne pas voler notre contenu, merci également de <em>laisser les crédits</em> ou d'en rajouter vous-même. <strong>Parce que oui, si vous ne le faites pas, on le voit</strong>.</div>
<div class="shoutbos_epsi"><iframe src="https://www5.cbox.ws/box/?boxid=918352&boxtag=y6CtIL" width="100%" height="250" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe></div>
</div>
<div class="cred_epsi">
<div class="epsi_logo"><span class="th th-meteorite-o"></span></div>
<div class="follow_epsi"><a target="_blank" href="/">epsilon</a> v.5 - 3 ans</div>
<div class="donot">do not steal, do not copy</div>
</div>
</div>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<div class="user_login_form center">
<input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
<input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
<br />
<label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
{S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
<!-- BEGIN switch_social_login -->
<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>
<!-- END switch_social_login -->
</div>
</form>
</div>
<!-- END switch_user_login_form_footer -->
<!-- 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:
.qeel_epsi {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin-top: 60px;
border-top: solid 2px #5a1e1e;
padding: 20px;
}
.blokg {
width: 434px;
}
.contexte_epsi {
width: 434px;
background: #cbcbcb;
padding: 15px;
text-align: justify;
color: #333;
font: 8px Times New Roman;
text-transform: uppercase;
letter-spacing: 2px;
border: solid 1px gray;
}
.contexte_epsi a {
color: #5a1e1e;
}
.contexte_epsi strong {
font-weight: normal;
border-bottom: 2px dotted #5a1e1e;
}
.shoutbos_epsi {
width: 100%;
margin-top: 20px;
}
.cred_epsi {
width: 454px;
padding-left: 30px;
}
.epsi_logo {
text-align: center;
}
.epsi_logo span {
color: #cbcbcb;
font-size: 300px;
}
.follow_epsi {
text-align: center;
margin: 40px 0px 15px 0px;
background: rgba(0, 0, 0, 0.3);
padding: 5px;
border: solid 1px #131313;
color: #cbcbcb;
font: 8px roboto;
text-transform: uppercase;
letter-spacing: 2px;
}
.follow_epsi a {
color: #863333;
}
.donot {
background: rgba(0, 0, 0, 0.3);
padding: 21px;
border: solid 1px #131313;
color: #cbcbcb;
font: 8px roboto;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
Remplacez ensuite la totalité de votre template overall_footer_begin :
- Code:
<!-- BEGIN html_validation -->
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<!-- END html_validation -->
</div>
</div>
</div>
</div>
<div id="{ID_RIGHT}">
<!-- BEGIN giefmod_index2 -->
{giefmod_index2.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index2 -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page-footer">
<div class="wrap">
<ul class="footerbar-system">
<li class="rightside">
<!-- BEGIN html_validation -->
</li>
</ul>
</div>
</div>
<!-- END html_validation -->
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|