Welcome

Halloween Header & Navigation

Halloween

Halloween, LS codage Forumactif Templates & Eléments Header & Navigation Header Halloween

Invision

Optimisé Un header comprenant à gauche votre logo, et à droite une illustration ainsi qu'un extrait du contexte. Un index complet est disponible

Retour

Overall_header

<!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}" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB} {NAMESPACE_FB_LIKE} {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" />
	
	<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
	
	
	<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
	
	{META_FAVICO}
	{META}
	{META_FB_LIKE}
	<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
  	<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet">
	{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>
    
    <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>
    
	<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
    {RICH_SNIPPET_GOOGLE}

<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>

<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
	<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>

var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = 'box-content';

$(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
				});
		});
	});
	
	//]]>
	</script>
	{GREETING_POPUP}
	<script src="{JS_DIR}invision.js" type="text/javascript"></script>

<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>

.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>
	
	{HOSTING_JS}
    
    <script type="text/javascript">
        //<![CDATA[
        var _gaq = _gaq || [];
        _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
        _gaq.push(["_trackPageview"]);
        _gaq.push(['_trackPageLoadTime']);

_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
        _gaq.push(['b._trackPageview']);

</div>
</div>

<div id="login_popup" class="module borderwrap" style="z-index: 10000 !important;">
	<div id="login_popup_content">
		<div id="login_popup_background">
			<div id="login_popup_title" class="maintitle"><h3>{SITENAME}</h3></div>
			<div class="box-content">
				{LOGIN_POPUP_MSG}
				<div id="login_popup_buttons">
					<form action="{S_LOGIN_ACTION}" method="get" target="_parent">
						<input type="submit" class="button" value="{L_LOGIN}" />
						<input type="button" class="button" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
						<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

  
<div id="banniere_navigation">
  	<a href="{U_INDEX}" class="lien_forum">
  	</a>
  
  	<div class="navigation">
          	{GENERATED_NAV_BAR}
  	</div>
</div>

<div class="header_forum">
                                  	<img src="https://i.imgur.com/A5Xqnni.png" class="img_header" alt="" />
                          
                                  	<a href="{U_INDEX}">
                                  		<img src="https://i.imgur.com/VvTqjyQ.jpg" class="banniere_header" alt="" />
                                  	</a>
                                  
                                  	<div class="contexte_header">
                                          	<img src="https://i.imgur.com/x34vQzk.jpg" alt="" />
                                          	<p>
                                                  	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum nisl ex, id bibendum nulla fringilla eget. Nunc lectus erat, feugiat cursus tellus sed, tincidunt varius ipsum. Maecenas accumsan dictum lorem, quis convallis justo euismod suscipit. Quisque aliquet varius nibh porta faucibus. Vestibulum arcu nisl, convallis sed volutpat a, laoreet quis enim. Sed blandit metus velit.
                                                  	<a href="#">Plus</a>
                                          	</p>
                                  	</div>
                                  
                                  	<div class="clear">
                                  	</div>
                          	</div>
                          
                          	
				
				<div class="liens_utiles">
					<a id="nouveaux_mess" href="{U_SEARCH_NEW}">
                                          	{L_SEARCH_NEW}
                                  	</a>
                                  	<a href="{U_SEARCH_SELF}">
                                          	{L_SEARCH_SELF}
                                  	</a>
                                  	<a href="{U_SEARCH_UNANSWERED}">
                                  		{L_SEARCH_UNANSWERED}
                                  	</a>
				</div>
                          
                          	<script type="text/javascript">document.getElementById('nouveaux_mess').innerHTML=document.getElementById('nouveaux_mess').innerHTML.replace(/Voir les nouveaux messages depuis votre dernière visite/,"Voir les nouveaux messages");</script> 
                          	
				
				
				<div id="userlinks" class="not-connected clearfix">
					<span class="guest">{L_NOT_CONNECTED}</span> <span>{L_LOGIN_REGISTER}</span>
				</div>

<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
					<div class="module borderwrap">
						<div class="box-content">
							<div id="fa_ticker_container">
								<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
									
									<li>{switch_ticker.ticker_row.ELEMENT}</li>
									
								</ul>
							</div>
						</div>
					</div>
				</div>

<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
					<div class="module borderwrap">
						<div class="box-content">
							<div id="fa_ticker_container">
								<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
									<div class="fa_ticker_content">
										
										<div>{switch_ticker.ticker_row.ELEMENT}</div>
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

<div id="{ID_LEFT}">
										
										{giefmod_index1.MODVAR}
										
										<div style="height:{SPACE_ROW}px"></div>
										
										
									</div>

CSS

#ipbwrapper {
        padding: 0;
        width: 1000px;
  	background: rgba(57,50,51,.5);
}

a, a:hover {
  	text-decoration: none !important;
  	transform: all;
  	transition: .5s;
}

.clear {
  	clear: both;
}

::-webkit-scrollbar {
        background: #38303b;
        height: 9px;
        width: 9px;
}

::-webkit-scrollbar-thumb {
        background-color: #be6233;
        border-radius: 10px;
        height: auto;
        width: 5px;
}

/****************************************************** HEADER ******************************************************/
.header_forum {
        position: relative;
        width: 100%;
  	color: #c3c3c3;
        font-family: 'Heebo', sans-serif;
        line-height: 1.5;
        font-size: .8em;
}

.img_header {
        position: absolute;
        width: 1000px;
}

.banniere_header {
    	float: left;
}

/* BLOC CONTEXTE */
.contexte_header {
        float: right;
        width: 42%;
        background: url('https://i.imgur.com/g8TCQaO.jpg');
}

.contexte_header img {
        float: left;
        margin: 0 5% 0 0;
}

.contexte_header p {
        font-size: 1.07em;
        text-align: justify;
        font-style: italic;
        letter-spacing: -1px;
        margin: 15% 0 0 0;
        width: 65%;
        height: 203px;
        overflow: auto;
        padding: 0 2% 0 0;
}

.contexte_header p a {
        display: inline-block;
        background: #d16630;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        margin: 0 0 0 2%;
        width: 50px;
}

.contexte_header p a:hover {
  	background: #3f3943;
}

/* LIENS UTILES */
.liens_utiles {
  	text-align: center;
  	font-family: 'Heebo', sans-serif;
}

.liens_utiles a {
        display: inline-block;
        background: #39313c;
        padding: 1%;
        text-align: center;
        color: #fff;
        margin: 4% 2%;
        text-transform: uppercase;
        font-size: 9px;
}

.liens_utiles a:hover {
  	background: #c1662f;
}

Dernière modification : 25 April 2020 23 : 33.

#halloween #navigation #forumactif #codage #libreservice

Halloween