Welcome

Halloween Header & Navigation

Magical State

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

ModernBB

Optimisé Les liens de navigation sont centrés sur une barre fixe. Boutons "up" et "down" sur la droite. Un message & profil, un index complet et une liste des sujets sont également disponibles.

Retour

Codage header Magical State ModernBB Forumactif

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}" 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" />
	
		<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}" />
	{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>

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

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
                    });
                });
            });
		
		//]]>
	</script>

{GREETING_POPUP}

ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
			display: inline !important;
		}

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

{HOSTING_JS}

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

ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
		ga('bis.send', 'pageview');
		ga('bis.set', 'anonymizeIp', true);
		
		//]]>
	</script>

<body id="modernbb">
	
		<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>

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

<a id="top" name="top" accesskey="t"></a>
	{JAVASCRIPT}

<div id="page-header">
          
          	<div class="navigation">
                  	<div class="barre_nav">
                          	{GENERATED_NAV_BAR}
                  	</div>
                  
                  	<div class="up_down">( 
                          	<a href="#top">
                                  	Haut 
                         	</a>	
                          
                          	 | 
                          
                          	<a href="#bottom">
                                  	Bas
                          	</a>
                           	)
                  	</div>
          	</div>
		<div>
			<div class="wrap">
				<div id="site-desc">
					
						<div id="site-title">{switch_h1.MAIN_SITENAME}</div>
					
					
						<p>{switch_desc.SITE_DESCRIPTION}</p>
					
				</div>
			</div>
		</div>

<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">
							
							<li>{switch_ticker.ticker_row.ELEMENT}</li>
							
						</ul>
					</div>
				</div>
			</div>
		</div>
		
	</div>

<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">
									
									<div>{switch_ticker.ticker_row.ELEMENT}</div>
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
				<div id="outer-wrapper">
					<div id="wrapper">
						<div id="{ID_LEFT}">
							
								{giefmod_index1.MODVAR}
								
									<div style="height:{SPACE_ROW}px"></div>
								
							
						</div>

CSS

/********************************************************* NAVIGATION ET HEADER *********************************************************/
/* NAVIGATION */
.navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #f4f4f4;
        border-bottom: 2px solid #759dac;
        z-index: 99;
        padding: 1rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
  	font-family: Arial, sans-serif;
        color: #8f8a9e;
        text-transform: uppercase;
}

.navigation img {
    	display: none;
}

.barre_nav {
        display: flex;
        margin: auto;
}

.barre_nav li {
        list-style-type: none;
        padding: 0 .5rem;
}

.barre_nav .mainmenu {
        font-weight: bold;
        font-size: 10px;
        color: #8f8a9e;
}

/* BOUTONS HAUT BAS */
.up_down {
        color: #8f8a9e;
        font-size: 10px;
        font-weight: 700;
        padding: 0 2rem 0 0;
        position: absolute;
        right: 0;
}

.up_down a:first-child {
    	color: #429679;
}

.up_down a:last-child {
    	color: #b88749;
}

/* CACHER LA DESCRIPTION */
#site-desc {
    	display: none;
}

/* HEADER */
a.header_ban {
        margin: 3.7rem 0 0;
        display: block;
}

Javascript

Créer un nouveau code Javascript pour supprimer le pseudo du membre dans "déconnexion".

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

#magicalstate #ModernBB #navigation #forumactif #codage #libreservice

Halloween