Glacier style horizontal drop down menu for Subsilver

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
Locked
chadhar
Registered User
Posts: 9
Joined: Thu Aug 06, 2009 6:34 pm

Glacier style horizontal drop down menu for Subsilver

Post by chadhar »

I want to integrate a button style horizontal drop down menu similar to the one found in the Glacier style. However, I'm using a subsilver2 template. Is the Glacier style available in Subsilver or is there a way to just use a modified version of the code in subsilver2?

Thank you

-Chad

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: Glacier style horizontal drop down menu for Subsilver

Post by Raimon »

Open overall_header.html

search:

Code: Select all

<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>
after add:

Code: Select all

<div id="header_nav">
<span class="hovereffect2"></span>

    <ul id="nav">
		<li class="top"><img src="{T_THEME_PATH}/images/menu_corner_l.gif" title="" alt="" /></li>
		<li class="top"><a href="{U_INDEX}" class="top_link"><span>{L_INDEX}</span></a></li>
		<!-- IF not S_IS_BOT and not S_USER_LOGGED_IN -->
		<li class="top"><a href="{U_REGISTER}" class="top_link_alert"><span>{L_REGISTER}</span></a></li>
		<!-- ENDIF -->
        <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN -->
        <li class="top"><a href="{U_INDEX}" class="top_link_alert"><span>{L_BOARD_DISABLED}</span></a></li>
        <!-- ENDIF -->
        <!-- IF U_RESTORE_PERMISSIONS -->
        <li class="top"><a href="{U_RESTORE_PERMISSIONS}" class="top_link_alert"><span>{L_RESTORE_PERMISSIONS}</span></a></li>
        <!-- ENDIF -->
        <!-- IF not S_IS_BOT and S_USER_LOGGED_IN and S_DISPLAY_PM -->
		<!-- IF S_USER_NEW_PRIVMSG or PRIVATE_MESSAGE_INFO_UNREAD -->
		<li class="top"><a href="{U_PRIVATEMSGS}" class="top_link_alert"><span><!-- IF S_USER_NEW_PRIVMSG -->{PRIVATE_MESSAGE_INFO}<!-- ELSE -->{PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></span></a></li>
        <!-- ELSE -->
        <li class="top"><a href="{U_PRIVATEMSGS}" class="top_link"><span>{PRIVATE_MESSAGE_INFO}</span></a></li>
        <!-- ENDIF -->
		<!-- ENDIF -->
        <!-- IF S_USER_LOGGED_IN -->
        <li class="top"><a href="{U_PROFILE}" class="top_link"><span class="down">{L_PROFILE}</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
                <!-- IF S_USER_LOGGED_IN -->
                <li><b>Users</b></li>
                <li><a href="{U_PROFILE}" class="expand">{L_PROFILE}<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                            <li><a href="./ucp.php?i=163">Overview</a></li>
                            <li><a href="./ucp.php?i=164">Profile</a></li>
                            <li><a href="./ucp.php?i=165">Board Preferences</a></li>
                            <li><a href="./ucp.php?i=166">Private Messages</a></li>
                            <li><a href="./ucp.php?i=167">User Groups</a></li>
                            <li><a href="./ucp.php?i=168">Friends & Foes</a></li>
                        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <!-- ENDIF -->
                <!-- IF U_MCP -->
                <li><b>Moderators</b></li>
                <li><a href="{U_MCP}">{L_MCP}</a></li>
                <!-- ENDIF -->
                <!-- IF U_ACP -->
                <li><b>Administrators</b></li>
                <li><a href="{U_ACP}">{L_ACP}</a></li>
                <!-- ENDIF -->
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <!-- ENDIF -->
        <li class="top"><a href="{U_INDEX}" class="top_link"><span class="down">Forum</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
                <li><b>Information</b></li>
                <li><a href="{U_FAQ}">{L_FAQ}</a></li>
                <!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
				<!-- IF U_TEAM --><li><a href="{U_TEAM}">{L_THE_TEAM}</a></li><!-- ENDIF -->
				<!-- IF S_DISPLAY_ONLINE_LIST --><li><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></li><!-- ENDIF -->
				<li><b>Tools</b></li>
				<!-- IF not S_IS_BOT --><li><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a></li><!-- ENDIF -->
                <!-- IF not S_IS_BOT and U_MARK_FORUMS --><li><a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
                <!-- IF not S_IS_BOT and U_MARK_TOPICS --><li><a href="{U_MARK_TOPICS}">{L_MARK_TOPICS_READ}</a></li><!-- ENDIF -->
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <!-- IF S_DISPLAY_SEARCH -->
        <li class="top"><a href="{U_SEARCH}" class="top_link"><span class="down">{L_SEARCH}</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
                <li><b>Quick Search</b></li>
                <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
                <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
                <!-- IF S_USER_LOGGED_IN -->
                <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
                <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
                <!-- ENDIF -->
                <li><b>Find More</b></li>
                <li><a href="{U_SEARCH}">Advanced Search</a></li>
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <!-- ENDIF -->
        <li class="top"><a href="{U_INDEX}" class="top_link"><span class="down">Links</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
                <li><b>User Links</b></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><b>User Links 2</b></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
                <li><a href="#">Link 7</a></li>
                <!-- IF U_ACP -->
                <li><b>Admin Links</b></li>
                <li><a href="#">Link 8</a></li>
                <li><a href="#">Link 9</a></li>
                <li><a href="#">Link 10</a></li>
                <!-- ENDIF -->
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
		<li class="top_r"><img src="{T_THEME_PATH}/images/menu_corner_r.gif" title="" alt="" /></li>
		<!-- IF not S_IS_BOT -->
        <li class="top_r"><a href="{U_LOGIN_LOGOUT}" <!-- IF S_USER_LOGGED_IN -->class="top_link_r"<!-- ELSE -->class="top_link_r_alert"<!-- ENDIF -->><span>{L_LOGIN_LOGOUT}</span></a></li>
		<!-- ENDIF -->
    </ul>
</div>
add on the bottom of the stylesheet.css file;

Code: Select all

.hovereffect2 {
background: url('./images/navigation_bt1.gif');
}

#header_nav{
	background: #ccc url("./images/navigation_bg1.gif") repeat-x;
	font-size: 11px;
	height: 33px;
	width: 100%;
	margin: 0 0 5px 0;
	padding: 0;
}

#nav {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 33px;
	z-index: 200;
}

#nav li.top {
	display: block;
	float: left;
}

#nav li.top_r {
	display: block;
	float: right;
}

#nav li a.top_link,
#nav li a.top_link_alert,
#nav li a.top_link_r,
#nav li a.top_link_r_alert {
	display: block;
	height: 33px;
	line-height: 31px;
	color: #FFF;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	padding: 0;
	cursor: pointer;
}

#nav li a.top_link,
#nav li a.top_link_alert,
#nav li a.top_link span,
#nav li a.top_link_alert span,
#nav li a.top_link span.down {
	float: left;
}

#nav li a.top_link_r,
#nav li a.top_link_r_alert,
#nav li a.top_link_r span,
#nav li a.top_link_r_alert span,
#nav li a.top_link_r span.down {
	float: right;
}

#nav li a.top_link span,
#nav li a.top_link_alert span,
#nav li a.top_link_r span,
#nav li a.top_link_r_alert span {
	display: block;
	padding: 0 12px 0 12px;
	height: 33px;
	text-align: center;
}

#nav li a.top_link_alert span,
#nav li a.top_link_r_alert span {
	background: url('./images/navigation_bg2.gif');
}

#nav li a.top_link span.down,
#nav li a.top_link_r span.down {
	display: block;
	padding: 0 12px 0 12px;
	height: 33px;
	text-align: center;
}

#nav li:hover a.top_link,
#nav a.top_link:hover,
#nav li:hover a.top_link_r,
#nav a.top_link_r:hover {
	color: #FFF;
	background: url('./images/navigation_bt1.gif');
}

#nav li:hover a.top_link_r_alert,
#nav a.top_link_r_alert:hover,
#nav li:hover a.top_link_alert,
#nav a.top_link_alert:hover {
	color: #FFF;
	text-decoration: underline;
}

#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down,
#nav li:hover a.top_link_r span.down,
#nav a.top_link_r:hover span.down {
	background: url('./images/navigation_bt1.gif');
	padding-bottom: 3px;
}

#nav table {
	border-collapse: collapse;
	padding: 0;
	margin: 0;
	position: absolute;
	left: 0;
	top: 0;
}

#nav li:hover {
	position: relative;
	z-index: 200;
}

#nav a:hover {
	position: relative;
	white-space: normal;
	z-index: 200;
}

#nav :hover ul.sub {
	left: 1px;
	top: 34px;
	background: url('./images/navigation_ddbg.png') repeat;
	padding: 3px;
	border: 1px solid #FFF;
	white-space: nowrap;
	width: 185px;
	height: auto;
	z-index: 300;
}

#nav :hover ul.sub li {
	display: block;
	height: 20px;
	position: relative;
	float: left;
	width: 185px;
}

#nav :hover ul.sub li a {
	display: block;
	font-size: 11px;
	height: 18px;
	width: 183px;
	line-height: 18px;
	text-indent: 5px;
	color: #FFF;
	text-decoration: none;
}

#nav li ul.sub li a.expand {
	background: url('./images/arrow_over.gif') 175px 6px no-repeat;
}

#nav :hover ul.sub li a:hover {
	color: #3365ac;
	background-color: #FFF;
	border-color: #FFF;
}

#nav :hover ul.sub li a.expand:hover {
	background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
	color: #3365ac;
}

#nav li b {
	display: block;
	font-size: 11px;
	height: 18px;
	width: 183px;
	line-height: 18px;
	margin-bottom: 3px;
	text-indent: 6px;
	color: #FFF;
	border-bottom: 1px solid #3366FF;
	cursor: default;
}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul {
	left: 89px;
	top: -4px;
	padding: 3px;
	border: 1px solid #000;
	white-space: nowrap;
	width: 183px;
	z-index: 400;
	height: auto;
}

#nav ul, 
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav li:hover li:hover > ul {
	left: 183px; /* distance from right margin of main drop */
	top: -4px;
	background: url('./images/navigation_ddbg.png') repeat-x;
	padding: 3px;
	border: 1px solid #FFF;
	white-space: nowrap;
	width: 185px; /* width of secondary drop */
	z-index: 400;
	height: auto;
}

#nav li:hover > ul ul {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav li:hover li:hover > a.expand {
	background: #FFF url('./images/arrow.gif') 175px 6px no-repeat; 
	color: #3365ac;
	text-decoration: none;
} 

#nav li:hover li:hover > li a.expand {
	background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
	color: #3365ac;
	text-decoration: none;
}
Upload the next images to the theme/images/ directory;

Image Image Image Image Image Image
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

apnaitaly
Registered User
Posts: 323
Joined: Tue Jun 30, 2009 6:13 pm

Re: Glacier style horizontal drop down menu for Subsilver

Post by apnaitaly »

i have tried to add but i cant search Overall_header.html edits


i am using pro_MylCastel style


here is my overall_header.html can you please Help me , Thanks

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!-- MOD : MSSTI RSS Feeds (V1.2.1) - Start //-->
<!-- IF S_FEEDS -->
<link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {SITENAME}" href="{U_RSS}" />
<!-- IF U_FEEDS_NEWS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_RSS_NEWS}" href="{U_FEEDS_NEWS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_NEWPOST --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_RSS_NEWPOST}" href="{U_FEEDS_NEWPOST}" /><!-- ENDIF -->
<!-- IF U_FEEDS_FORUMS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_ALL_FORUMS}" href="{U_FEEDS_FORUMS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_THREADS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_ALL_TOPICS}" href="{U_FEEDS_THREADS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_POSTS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_ALL_POSTS}" href="{U_FEEDS_POSTS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_ATTACH --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_RSS_ATTACH}" href="{U_FEEDS_ATTACH}" /><!-- ENDIF -->
<!-- IF U_FEEDS_EGOSEARCH --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_YOUR_POSTS}" href="{U_FEEDS_EGOSEARCH}" /><!-- ENDIF -->
<!-- IF U_FEEDS_FORUM --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_FORUM} {FORUM_NAME}" href="{U_FEEDS_FORUM}" /><!-- ENDIF -->
<!-- IF U_FEEDS_THREAD --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_TOPIC} {TOPIC_TITLE}" href="{U_FEEDS_THREAD}" /><!-- ENDIF -->
<!-- ENDIF -->
<!-- MOD : MSSTI RSS Feeds (V1.2.1) - End //-->

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:      
	
	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
		}
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

			<span class="corners-bottom"><span></span></span></div>
		</div>

<!-- IF not $S_IN_PORTAL or not S_DISPLAY_MAINMENU -->
		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlinks">
				<li class="icon-home"><a href="{U_PORTAL}">{L_PORTAL}</a> &#187; <a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul>

			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> &bull; 
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">
				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
                        <li class="icon_members"><a href="{U_CHAT}" title="{L_CHAT_EXPLAIN}">{L_CHAT}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>

			<span class="corners-bottom"><span></span></span></div>
		</div>
<!-- ENDIF -->

	</div>

	<a name="start_here"></a>
	<div id="page-body">
		
		 <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) --> 
		<div id="message" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: Glacier style horizontal drop down menu for Subsilver

Post by Raimon »

Search for ;

Code: Select all

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
on your overall_header.html :).
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

apnaitaly
Registered User
Posts: 323
Joined: Tue Jun 30, 2009 6:13 pm

Re: Glacier style horizontal drop down menu for Subsilver

Post by apnaitaly »

Thanks Raimon for Great Help , its working for me , Thanks

apnaitaly
Registered User
Posts: 323
Joined: Tue Jun 30, 2009 6:13 pm

Re: Glacier style horizontal drop down menu for Subsilver

Post by apnaitaly »

one question


if i want to add new button how i can ? Like ( contact us , Chat )

Thanks

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: Glacier style horizontal drop down menu for Subsilver

Post by Raimon »

Where do you want to show those links, under faq etc, or the "User Links" ?
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

apnaitaly
Registered User
Posts: 323
Joined: Tue Jun 30, 2009 6:13 pm

Re: Glacier style horizontal drop down menu for Subsilver

Post by apnaitaly »

i want to add Buttons where is main button , Like Board Index . Forum , Search ,,


i want to set like this ,

Portal , Board Index ,Chat , Radio, Forum , Search , Contact us , Links

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: Glacier style horizontal drop down menu for Subsilver

Post by Raimon »

Search:

Code: Select all

<li><a href="{U_FAQ}">{L_FAQ}</a></li>
add before:

Code: Select all

<li><a href="http://link">A link</a></li>
Replace http://link with the link you like, and rename A link with the text you want.
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

apnaitaly
Registered User
Posts: 323
Joined: Tue Jun 30, 2009 6:13 pm

Re: Glacier style horizontal drop down menu for Subsilver

Post by apnaitaly »

Thanks Raimon , i got it , Thanks


can you please tell me how i can remove this line bcz now i dont need this line ,,


Image


Thanks

User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: Glacier style horizontal drop down menu for Subsilver

Post by Raimon »

Open overall_header.html

search:

Code: Select all

			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
					<!-- IF S_DISPLAY_SEARCH --> &bull;
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- ENDIF -->
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">
				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>
and remove it.
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!

User avatar
caragadatacenter
Registered User
Posts: 43
Joined: Wed Jan 12, 2011 12:54 am
Name: caraga data
Contact:

Re: Glacier style horizontal drop down menu for Subsilver

Post by caragadatacenter »

collapse forum or category subsilver?

User avatar
mat_solar
Registered User
Posts: 23
Joined: Sun Jul 08, 2012 3:47 am
Contact:

Re: Glacier style horizontal drop down menu for Subsilver

Post by mat_solar »

Raimon wrote:Open overall_header.html

search:

Code: Select all

<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>
after add:

Code: Select all

<div id="header_nav">
<span class="hovereffect2"></span>

    <ul id="nav">
		<li class="top"><img src="{T_THEME_PATH}/images/menu_corner_l.gif" title="" alt="" /></li>
		<li class="top"><a href="{U_INDEX}" class="top_link"><span>{L_INDEX}</span></a></li>
		<!-- IF not S_IS_BOT and not S_USER_LOGGED_IN -->
		<li class="top"><a href="{U_REGISTER}" class="top_link_alert"><span>{L_REGISTER}</span></a></li>
		<!-- ENDIF -->
        <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN -->
        <li class="top"><a href="{U_INDEX}" class="top_link_alert"><span>{L_BOARD_DISABLED}</span></a></li>
        <!-- ENDIF -->
        <!-- IF U_RESTORE_PERMISSIONS -->
        <li class="top"><a href="{U_RESTORE_PERMISSIONS}" class="top_link_alert"><span>{L_RESTORE_PERMISSIONS}</span></a></li>
        <!-- ENDIF -->
        <!-- IF not S_IS_BOT and S_USER_LOGGED_IN and S_DISPLAY_PM -->
		<!-- IF S_USER_NEW_PRIVMSG or PRIVATE_MESSAGE_INFO_UNREAD -->
		<li class="top"><a href="{U_PRIVATEMSGS}" class="top_link_alert"><span><!-- IF S_USER_NEW_PRIVMSG -->{PRIVATE_MESSAGE_INFO}<!-- ELSE -->{PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></span></a></li>
        <!-- ELSE -->
        <li class="top"><a href="{U_PRIVATEMSGS}" class="top_link"><span>{PRIVATE_MESSAGE_INFO}</span></a></li>
        <!-- ENDIF -->
		<!-- ENDIF -->
        <!-- IF S_USER_LOGGED_IN -->
        <li class="top"><a href="{U_PROFILE}" class="top_link"><span class="down">{L_PROFILE}</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
                <!-- IF S_USER_LOGGED_IN -->
                <li><b>Users</b></li>
                <li><a href="{U_PROFILE}" class="expand">{L_PROFILE}<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                            <li><a href="./ucp.php?i=163">Overview</a></li>
                            <li><a href="./ucp.php?i=164">Profile</a></li>
                            <li><a href="./ucp.php?i=165">Board Preferences</a></li>
                            <li><a href="./ucp.php?i=166">Private Messages</a></li>
                            <li><a href="./ucp.php?i=167">User Groups</a></li>
                            <li><a href="./ucp.php?i=168">Friends & Foes</a></li>
                        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <!-- ENDIF -->
                <!-- IF U_MCP -->
                <li><b>Moderators</b></li>
                <li><a href="{U_MCP}">{L_MCP}</a></li>
                <!-- ENDIF -->
                <!-- IF U_ACP -->
                <li><b>Administrators</b></li>
                <li><a href="{U_ACP}">{L_ACP}</a></li>
                <!-- ENDIF -->
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <!-- ENDIF -->
        <li class="top"><a href="{U_INDEX}" class="top_link"><span class="down">Forum</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
                <li><b>Information</b></li>
                <li><a href="{U_FAQ}">{L_FAQ}</a></li>
                <!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
				<!-- IF U_TEAM --><li><a href="{U_TEAM}">{L_THE_TEAM}</a></li><!-- ENDIF -->
				<!-- IF S_DISPLAY_ONLINE_LIST --><li><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></li><!-- ENDIF -->
				<li><b>Tools</b></li>
				<!-- IF not S_IS_BOT --><li><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a></li><!-- ENDIF -->
                <!-- IF not S_IS_BOT and U_MARK_FORUMS --><li><a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
                <!-- IF not S_IS_BOT and U_MARK_TOPICS --><li><a href="{U_MARK_TOPICS}">{L_MARK_TOPICS_READ}</a></li><!-- ENDIF -->
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <!-- IF S_DISPLAY_SEARCH -->
        <li class="top"><a href="{U_SEARCH}" class="top_link"><span class="down">{L_SEARCH}</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
                <li><b>Quick Search</b></li>
                <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
                <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
                <!-- IF S_USER_LOGGED_IN -->
                <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
                <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
                <!-- ENDIF -->
                <li><b>Find More</b></li>
                <li><a href="{U_SEARCH}">Advanced Search</a></li>
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <!-- ENDIF -->
        <li class="top"><a href="{U_INDEX}" class="top_link"><span class="down">Links</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
                <li><b>User Links</b></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><b>User Links 2</b></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
                <li><a href="#">Link 7</a></li>
                <!-- IF U_ACP -->
                <li><b>Admin Links</b></li>
                <li><a href="#">Link 8</a></li>
                <li><a href="#">Link 9</a></li>
                <li><a href="#">Link 10</a></li>
                <!-- ENDIF -->
            </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
		<li class="top_r"><img src="{T_THEME_PATH}/images/menu_corner_r.gif" title="" alt="" /></li>
		<!-- IF not S_IS_BOT -->
        <li class="top_r"><a href="{U_LOGIN_LOGOUT}" <!-- IF S_USER_LOGGED_IN -->class="top_link_r"<!-- ELSE -->class="top_link_r_alert"<!-- ENDIF -->><span>{L_LOGIN_LOGOUT}</span></a></li>
		<!-- ENDIF -->
    </ul>
</div>
add on the bottom of the stylesheet.css file;

Code: Select all

.hovereffect2 {
background: url('./images/navigation_bt1.gif');
}

#header_nav{
	background: #ccc url("./images/navigation_bg1.gif") repeat-x;
	font-size: 11px;
	height: 33px;
	width: 100%;
	margin: 0 0 5px 0;
	padding: 0;
}

#nav {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 33px;
	z-index: 200;
}

#nav li.top {
	display: block;
	float: left;
}

#nav li.top_r {
	display: block;
	float: right;
}

#nav li a.top_link,
#nav li a.top_link_alert,
#nav li a.top_link_r,
#nav li a.top_link_r_alert {
	display: block;
	height: 33px;
	line-height: 31px;
	color: #FFF;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	padding: 0;
	cursor: pointer;
}

#nav li a.top_link,
#nav li a.top_link_alert,
#nav li a.top_link span,
#nav li a.top_link_alert span,
#nav li a.top_link span.down {
	float: left;
}

#nav li a.top_link_r,
#nav li a.top_link_r_alert,
#nav li a.top_link_r span,
#nav li a.top_link_r_alert span,
#nav li a.top_link_r span.down {
	float: right;
}

#nav li a.top_link span,
#nav li a.top_link_alert span,
#nav li a.top_link_r span,
#nav li a.top_link_r_alert span {
	display: block;
	padding: 0 12px 0 12px;
	height: 33px;
	text-align: center;
}

#nav li a.top_link_alert span,
#nav li a.top_link_r_alert span {
	background: url('./images/navigation_bg2.gif');
}

#nav li a.top_link span.down,
#nav li a.top_link_r span.down {
	display: block;
	padding: 0 12px 0 12px;
	height: 33px;
	text-align: center;
}

#nav li:hover a.top_link,
#nav a.top_link:hover,
#nav li:hover a.top_link_r,
#nav a.top_link_r:hover {
	color: #FFF;
	background: url('./images/navigation_bt1.gif');
}

#nav li:hover a.top_link_r_alert,
#nav a.top_link_r_alert:hover,
#nav li:hover a.top_link_alert,
#nav a.top_link_alert:hover {
	color: #FFF;
	text-decoration: underline;
}

#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down,
#nav li:hover a.top_link_r span.down,
#nav a.top_link_r:hover span.down {
	background: url('./images/navigation_bt1.gif');
	padding-bottom: 3px;
}

#nav table {
	border-collapse: collapse;
	padding: 0;
	margin: 0;
	position: absolute;
	left: 0;
	top: 0;
}

#nav li:hover {
	position: relative;
	z-index: 200;
}

#nav a:hover {
	position: relative;
	white-space: normal;
	z-index: 200;
}

#nav :hover ul.sub {
	left: 1px;
	top: 34px;
	background: url('./images/navigation_ddbg.png') repeat;
	padding: 3px;
	border: 1px solid #FFF;
	white-space: nowrap;
	width: 185px;
	height: auto;
	z-index: 300;
}

#nav :hover ul.sub li {
	display: block;
	height: 20px;
	position: relative;
	float: left;
	width: 185px;
}

#nav :hover ul.sub li a {
	display: block;
	font-size: 11px;
	height: 18px;
	width: 183px;
	line-height: 18px;
	text-indent: 5px;
	color: #FFF;
	text-decoration: none;
}

#nav li ul.sub li a.expand {
	background: url('./images/arrow_over.gif') 175px 6px no-repeat;
}

#nav :hover ul.sub li a:hover {
	color: #3365ac;
	background-color: #FFF;
	border-color: #FFF;
}

#nav :hover ul.sub li a.expand:hover {
	background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
	color: #3365ac;
}

#nav li b {
	display: block;
	font-size: 11px;
	height: 18px;
	width: 183px;
	line-height: 18px;
	margin-bottom: 3px;
	text-indent: 6px;
	color: #FFF;
	border-bottom: 1px solid #3366FF;
	cursor: default;
}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul {
	left: 89px;
	top: -4px;
	padding: 3px;
	border: 1px solid #000;
	white-space: nowrap;
	width: 183px;
	z-index: 400;
	height: auto;
}

#nav ul, 
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav li:hover li:hover > ul {
	left: 183px; /* distance from right margin of main drop */
	top: -4px;
	background: url('./images/navigation_ddbg.png') repeat-x;
	padding: 3px;
	border: 1px solid #FFF;
	white-space: nowrap;
	width: 185px; /* width of secondary drop */
	z-index: 400;
	height: auto;
}

#nav li:hover > ul ul {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav li:hover li:hover > a.expand {
	background: #FFF url('./images/arrow.gif') 175px 6px no-repeat; 
	color: #3365ac;
	text-decoration: none;
} 

#nav li:hover li:hover > li a.expand {
	background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
	color: #3365ac;
	text-decoration: none;
}
Upload the next images to the theme/images/ directory;

Image Image Image Image Image Image
Hi Raimon, I used the navigation menu in my forum using subsilver style. Works perfect! :P

Just came by to say thank you for the tips.

Martine M
Registered User
Posts: 53
Joined: Wed Apr 30, 2014 10:22 pm

Re: Glacier style horizontal drop down menu for Subsilver

Post by Martine M »

I want to try this out but the first image is missing does anyone know which image that is?

Locked

Return to “[3.0.x] Styles Support & Discussion”