Page 2 of 2

Re: Add a top navigation menu bar

Posted: Fri Jul 08, 2016 10:16 pm
by Lumpy Burgertushie
yes, you can use that in the overall_header.html file of your style.
however, it is not as simple as adding it to a normal html file.

first, the only part of that you will need is the style section and the html section.

you do not use this:

Code: Select all

<!DOCTYPE html>
<html>
<head>
or this:

Code: Select all

</body>
</html>
open your overall header .html file in a good text editor.

find:
</head>

right above it, put this:

Code: Select all

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #336699;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 12px 13px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #FF9933;
}

.active {
    background-color: #336699;
}
</style>
find:

<div class="navbar">
right above it , put this:

Code: Select all

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">Articles</a></li>
  <li><a href="#contact">Blog</a></li>
  <li><a href="#contact">Ebooks</a></li>
  <li><a href="#contact">Podcasts</a></li>
  <li><a href="#contact">Photos</a></li>
  <li><a href="#contact">Videos</a></li>
  <li><a href="#contact">Forum</a></li>
  <li><a href="#contact">Personals</a></li>
  <li><a href="#contact">About Us</a></li>
</ul>
edit the links to your liking.

upload the file back to the server, refresh the template in your admin panel, styles tab.
refresh your browser.


robert

Re: Add a top navigation menu bar

Posted: Sat Jul 09, 2016 4:44 pm
by WWu777
Hi Robert,
I did what you said. But the coding screwed up my forum. The entire layout is distorted. So the parts in the header file affected the whole forum layout. See screen shot below. What happened? How to make the code not conflict with the template codes?
Untitled.png

Re: Add a top navigation menu bar

Posted: Sat Jul 09, 2016 5:05 pm
by Lumpy Burgertushie
looks like you did not close a div or you put it in the wrong place.

hard to tell since you removed it. put the code back in the overall_header.html file and then copy and paste the overall header file here so we can see it.

robert

Re: Add a top navigation menu bar

Posted: Sat Jul 09, 2016 5:36 pm
by WWu777
Lumpy Burgertushie wrote:looks like you did not close a div or you put it in the wrong place.

hard to tell since you removed it. put the code back in the overall_header.html file and then copy and paste the overall header file here so we can see it.

robert
Ok here it is:

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>

<title>{PAGE_TITLE} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{SITENAME}</title>
<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="keywords" content="" />
<meta name="description" content="" />
{META}

<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:
-->

<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 and 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_SUPER_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_SUPER_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 -->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-6755596-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #336699;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 12px 13px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #FF9933;
}

.active {
    background-color: #336699;
}
</style>

</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 align="right">

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=wwu777" async="async"></script>
<div class="addthis_sharing_toolbox" style="margin-right: 0%; margin-left: 50%; padding-left: 0%;"></div>

<br>

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="http://happierabroad.us6.list-manage2.com/subscribe/post?u=bdabee6344a679613fc9d742a&id=41def779a8" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<label for="mce-EMAIL"><font size=2 color="#FFFFFF">Subscribe to Mailing List </font></label><br><br>
	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
	<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<!--End mc_embed_signup-->
</div>

		<!-- ENDIF -->

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

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">Articles</a></li>
  <li><a href="#contact">Blog</a></li>
  <li><a href="#contact">Ebooks</a></li>
  <li><a href="#contact">Podcasts</a></li>
  <li><a href="#contact">Photos</a></li>
  <li><a href="#contact">Videos</a></li>
  <li><a href="#contact">Forum</a></li>
  <li><a href="#contact">Personals</a></li>
  <li><a href="#contact">About Us</a></li>
</ul>

		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlinks">
				<li class="icon-home"><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="return fontsizeup(event);" 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 -->

<li class="rightside">
<form action="http://www.google.com" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-0412206603726231:6454000366" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="20" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</li>
			</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="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>

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

	</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="information" 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 -->

<div align="center">
<br>

<font size=3 face=Arial> 
<ul>
<a href="http://www.happierabroad.com">Home</a> &bull; <a href="http://www.happierabroad.com/articles.php">Articles</a> &bull; <a href="http://blog.happierabroad.com">Blog</a> &bull; <a href="http://www.happierabroad.com/ebooks.php">Ebooks</a> &bull; <a href="http://www.happierabroad.com/Photos.htm">Photos</a> &bull; <a href="http://www.happierabroad.com/videos.php">Videos</a> &bull; <a href="http://www.happierabroad.com/podcasts.php">Podcasts</a> &bull; <a href="http://www.happierabroad.com/forum/index.php">Forum</a> &bull; <a href="http://www.happierabroad.com/MeetForeignWomen.htm">Personals</a> &bull; <a href="http://www.happierabroad.com/WhyForeignWomen.htm">Why Foreign Women?</a> &bull; <a href="http://www.happierabroad.com/secrets.php">Big Secrets!</a> &bull; <a href="http://www.happierabroad.com/team.php">About Us</a> 
</ul>
</font>

</div>

<br><br>

<div align="center">

<!-- INCLUDEPHP ./random.php -->

<br><br>

<b><font size=2 face=Arial color="#D92222">Join John Adams, world renowned <a href="http://www.loveme.com/go/happierabroad" target="_blank" rel="nofollow">Intl Matchmaker</a>, Thurs nights 8:30 EST for <a href="http://www.loveme.com/go/happierabroad&path=/live/" target="_blank" rel="nofollow">Live Webcasts</a> with FREE Prizes! <br>
And check out Five Reasons why you should attend a<a href="http://www.loveme.com/go/happierabroad&path=/information/seminar/seminar.htm" target="_blank" rel="nofollow"> FREE Live AFA Seminar! See locations and details.</a></font></b>

<br><br>

<b><font size=2 face=Arial color="#D92222">Scam free! </font><font size=2 face=Arial>Check out <a href="https://christianfilipina.com/?bannerid=26&location=forum" target="_blank" rel="nofollow" title="Christian Filipina">Christian Filipina</a> - Meet Asian women with Christian values! Members screened. </font></b>

<br><br>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Forum banner -->
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-0412206603726231"
     data-ad-slot="2126904855"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<br><br>

<font size=3 face=Arial> 
<a href="http://www.happierabroad.com/forum/search.php?search_id=active_topics">View Active Topics</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.happierabroad.com/forum/latesttopics.php"> Latest 100 Topics</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.happierabroad.com/forum/search.php?search_id=egosearch">View Your Posts</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.happierabroad.com/forum/viewtopic.php?t=10859">FAQ Topics</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.happierabroad.com/forum/index.php?mobile=mobile">Switch to Mobile</a>
</font>

</div>

<br><br>

 <table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
            <tr>
                <td>
Do you see what went wrong? Where is the conflict that causes the whole template layout to be screwed up? Can it be corrected by closing some tags?

Re: Add a top navigation menu bar

Posted: Sat Jul 09, 2016 8:24 pm
by Talk19Zehn
Hi, normally the #wrap and #page-body are closes into the overall_footer.html. The closing tag </div> in line *)177 in your code above is in my opinion set at least incorrectly.
In this Abstract of your overall_header.html I find ...
  • Line 176
    <!--End mc_embed_signup-->
    and then look into your *) line 177:
    </div>

BUT: There are more mistakes, so I can not examine accurately enough.

Best wishes and regards

Re: Add a top navigation menu bar

Posted: Sun Jul 10, 2016 1:19 am
by Lumpy Burgertushie
my mistake.

replace the style code in the head section with this:

Code: Select all

<style>
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #336699;
}

.menu li {
    float: left;
    border-right:1px solid #bbb;
}

.menu li:last-child {
    border-right: none;
}

.menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 12px 13px;
    text-decoration: none;
}

.menu li a:hover:not(.active) {
    background-color: #FF9933;
}

.menu active {
    background-color: #336699;
}
</style>
replace the menu html before the navbar with this:

Code: Select all

<div class="menu">
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">Articles</a></li>
  <li><a href="#contact">Blog</a></li>
  <li><a href="#contact">Ebooks</a></li>
  <li><a href="#contact">Podcasts</a></li>
  <li><a href="#contact">Photos</a></li>
  <li><a href="#contact">Videos</a></li>
  <li><a href="#contact">Forum</a></li>
  <li><a href="#contact">Personals</a></li>
  <li><a href="#contact">About Us</a></li>
</ul></div>
see what happens.
you will need to add some padding between the menu and the navbar.


robert

Re: Add a top navigation menu bar

Posted: Mon Jul 11, 2016 9:50 pm
by WWu777
Lumpy Burgertushie wrote:my mistake.

replace the style code in the head section with this:

Code: Select all

<style>
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #336699;
}

.menu li {
    float: left;
    border-right:1px solid #bbb;
}

.menu li:last-child {
    border-right: none;
}

.menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 12px 13px;
    text-decoration: none;
}

.menu li a:hover:not(.active) {
    background-color: #FF9933;
}

.menu active {
    background-color: #336699;
}
</style>
replace the menu html before the navbar with this:

Code: Select all

<div class="menu">
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">Articles</a></li>
  <li><a href="#contact">Blog</a></li>
  <li><a href="#contact">Ebooks</a></li>
  <li><a href="#contact">Podcasts</a></li>
  <li><a href="#contact">Photos</a></li>
  <li><a href="#contact">Videos</a></li>
  <li><a href="#contact">Forum</a></li>
  <li><a href="#contact">Personals</a></li>
  <li><a href="#contact">About Us</a></li>
</ul></div>
see what happens.
you will need to add some padding between the menu and the navbar.


robert
Wow thanks!!! It finally worked!!! You must be a genius!!! Whew. See here:

http://www.happierabroad.com/forum/index.php

How do I remove that white line above the navigation bar though? Any way to do that?

You know, you should add this simple code to the phpbb knowledge base, so that people looking for a simple one line navigation bar without drop down menus, can use it easily without any mods. It's too bad such a code as this is hard to find.

Re: Add a top navigation menu bar

Posted: Mon Jul 11, 2016 11:06 pm
by 3Di
Teh phpBB 3.0 line is EOL. Instead the 3.1 one, the same is for 3.2, use extensions..
also for this kind of small thinghies.

You will be not in the need of modify the core-code, in any case. ;)

Re: Add a top navigation menu bar

Posted: Tue Jul 12, 2016 4:57 am
by Lumpy Burgertushie
If this was for a 3.1 board I would have explained how to create a child/custom style for this purpose.
that way there would be no edits needed to the default prosilver style.


robert