![[BARRE LATÉRALE ROSE ET FLORALE] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [BARRE LATÉRALE ROSE ET FLORALE] - Lun 4 Nov - 16:08
![[BARRE LATÉRALE ROSE ET FLORALE] 5HCGobH](https://i.imgur.com/5HCGobH.png)
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 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="barre_laterale"></div>
<div class="barre_late2">
<div class="title_barre">contexte</div><div class="subtitles">ce que vous devez savoir</div>
<div class="contexte_barre">
Barre latérale réalisée par <a href="http://www.epicode-entraide.com/">Myrddin d'Epicode</a>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et lacinia ex. Morbi gravida pretium ullamcorper. Ut nec scelerisque felis. Pellentesque elementum eros et semper tincidunt. Maecenas quis vulputate massa. Mauris convallis volutpat urna. Vestibulum ultricies mi vitae turpis maximus viverra. Nunc id sapien non massa congue molestie. Etiam maximus eleifend erat egestas posuere. Nunc placerat nulla sit amet aliquam cursus. In felis nisl, semper in commodo quis, posuere ac arcu. In efficitur lacus a libero laoreet convallis.
Duis dictum massa quis pellentesque ullamcorper. Nam vulputate sed ipsum at iaculis. Pellentesque non lectus a orci semper ullamcorper nec quis libero. Vestibulum viverra lobortis lectus vitae fringilla. Donec bibendum ligula vel tincidunt fermentum. Nulla faucibus, nisl vel tristique congue, risus sem pharetra nibh, a pulvinar massa mi auctor lorem. Duis eget ex sit amet enim sagittis laoreet id in nisi. Cras auctor turpis nec sagittis eleifend. Vestibulum id maximus ipsum, nec lacinia justo. Praesent semper pulvinar massa id sollicitudin. Curabitur blandit sapien ac est cursus, vel cursus magna scelerisque. Vestibulum lacinia augue non scelerisque luctus.
Ut at pretium magna, non gravida purus. Pellentesque eu mattis nisl. Phasellus a convallis dui, et ultrices urna. Mauris bibendum arcu in mauris pulvinar gravida. Integer fermentum est est, quis rutrum est tempor ac. Curabitur est quam, viverra et lobortis et, rhoncus eget sapien. Aliquam scelerisque nibh luctus pretium rhoncus. Nam ornare erat nunc.
</div>
<div class="title_barre">prédéfinis</div><div class="subtitles">adoptez-nous !</div>
<div class="predef_barre">
<a target="_blank" href="/"><img src="http://placehold.it/60x200/"/></a>
<a target="_blank" href="/"><img src="http://placehold.it/60x200/"/></a>
<a target="_blank" href="/"><img src="http://placehold.it/60x200/"/></a>
<a target="_blank" href="/"><img src="http://placehold.it/60x200/"/></a>
</div>
<div class="title_barre">les liens</div><div class="subtitles">c'est très utile</div>
<div class="lien_utile">
<div class="linku"> <a target="_blank" href="/">liens utile ici</a></div>
<div class="linku"> <a target="_blank" href="/">liens utile ici</a></div>
<div class="linku"> <a target="_blank" href="/">liens utile ici</a></div>
<div class="linku"> <a target="_blank" href="/">liens utile ici</a></div>
<div class="linku"> <a target="_blank" href="/">liens utile ici</a></div>
</div>
<div class="title_barre">le staff</div><div class="subtitles">si vous avez une question</div>
<div class="staffeux">
<div class="P1" style="background-image:url(http://placehold.it/125x50)">
<div class="S0">
<div class="texte">
<a href="/" target="_blank">nom staffeux</a></div>
</div></div>
<div class="P1" style="background-image:url(http://placehold.it/125x50)">
<div class="S0">
<div class="texte">
<a href="/" target="_blank">nom staffeux</a></div>
</div></div>
<div class="P1" style="background-image:url(http://placehold.it/125x50)">
<div class="S0">
<div class="texte">
<a href="/" target="_blank">nom staffeux</a></div>
</div></div>
<div class="P1" style="background-image:url(http://placehold.it/125x50)">
<div class="S0">
<div class="texte">
<a href="/" target="_blank">nom staffeux</a></div>
</div></div>
</div>
<div class="title_barre">credits</div><div class="subtitles">c'est important de remercier...</div>
<div class="contexte_barre">
Barre latérale réalisée par <a href="http://epsilon-ls.forumactif.com/">EPSILON</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac nisinon felis hendrerit vehicula. Duis vitae aliquam nisi, ut ornare dolor.
Phasellus nec porta justo. Morbi at libero arcu. Sed hendrerit vitae neque eu semper. Duis ultricies euismod odio nec vehicula. Integer feugiat
, augue at dignissim tempus, mauris nunc faucibus enim, in eleifend diam augue eu eros. Duis pharetra vestibulum nibh sed pulvinar. Suspendiss
e potenti. Morbi mollis justo quis faucibus placerat. Fusce bibendum malesuada ullamcorper. Praesent vitae ante eu risus varius porta id eget n
isl. Suspendisse ornare sem velit, quis eleifend sapien varius quis.Aliquam vel ipsum a felis dignissim gravida congue ut elit. Maecenas eg
estas, lectus vitae pulvinar rutrum, dui urna interdum ligula, a pretium massa lectus ac lacus. Quisque hendrerit consequat bibendum. Cras vit
ae tristique ipsum. Pellentesque pharetra sagittis erat eget rhoncus. Morbi erat tortor, congue in mi eu, ornare ornare odio. Quisque vestibul
um elementum tempus. Cras a urna orci. Mauris sit amet tincidunt risus.Nunc vitae interdum nibh. Cras justo mi, vestibulum vel nisi in, dignis
sim hendrerit nisl. Donec vel semper dui, vitae eleifend arcu. Aliquam laoreet pretium pretium. Donec at lobortis tortor. Duis dictum ullamcor
per arcu at viverra. Pellentesque gravida magna in dictum tristique. Nunc vestibulum, leo id dapibus lacinia, sem nulla interdum sem, a condim
entum lacus velit at nisl. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas
suscipit turpis odio, vitae posuere orci tempus ultrices. Nullam vehicula massa ut elit ultricies, convallis condimentum arcu consequat.
Fusce id leo magna. Curabitur eu dui in tortor placerat ultricies. Curabitur non interdum lectus. Nam mollis nibh in velit bibendum blandit. D
onec vestibulum mollis libero. Integer in mauris placerat, rutrum nisl in, congue enim.
</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 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:
/******BARRE LATE******/
@font-face {
font-family: jasper;
src: url(https://files.jcink.net/uploads/keepsakerp/Jasper.ttf);
}
.barre_laterale {
background: #9a898f;
height: 100%!important;
left: 0;
position: absolute;
top: 970px;
width: 295px;
}
.barre_late2 {
background-image: url(https://imgur.com/5kdtd8c.png);
background-size: 100%;
padding: 10px;
left: 0px;
position: absolute;
width: 275px;
}
.title_barre {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
font: 94px jasper;
background: -webkit-linear-gradient(#b65757, #773b3b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
letter-spacing: -5px;
margin-top: -55px;
margin-left: -15px;
}
.subtitles {
text-align: right;
margin-top: 76px;
color: #ede6e4;
padding-right: 20px;
font: 12px calibri;
text-transform: uppercase;
letter-spacing: 2px;
}
.contexte_barre {
text-align: justify;
padding: 20px;
color: #ede6e4;
font: 12px calibri;
}
.predef_barre {
padding-top: 20px;
text-align: center;
padding-bottom: 30px;
}
.predef_barre img {
margin: 2px;
border: solid 2px #8f4646;
width: 60px;
height: 200px;
box-shadow: 0 15px 20px -12px rgb(76, 44, 44);
}
.lien_utile {
padding-top: 36px;
text-align: center;
padding-bottom: 45px;
}
.linku {
padding:5px;
}
.linku a {
color: black;
font: 15px jasper;
transition: all 800ms;
font-weight: bold;
letter-spacing: 2px;
}
.linku a:hover {
transition:all 800ms;
border-left:solid 10px #ede6e4;
}
.staffeux {
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
.P1 {
position:relative;
width:125px;
height: 50px;
display: inline-block;
margin:2px;
vertical-align:top;
border:solid 1px black;
outline: 1px solid #fff;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
outline-offset: -2px;
}
.S0 {
background: -webkit-linear-gradient(#b65757, #773b3b);
color: #fff;
padding-top: 15px;
height:35px;
width:125px;
font-size: 8px;
font-family: calibri;
opacity: 0;
transform: scale(0.5);
transition: all 800ms;
}
.S0 a {
font-size:8px;
font-family:calibri;
color:white;
}
.P1:hover .S0 { opacity:1; transition:0.8s linear; transform:scale(1);
}
.texte {
text-align:center;
margin-top:2px;
}
.texte a {
padding: 8px;
background: #2c2c2c;
color: #dadada;
text-transform: uppercase;
font:13px calibri;
transition: all 800ms;
}
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|