Adding a new link in the header

[jcayala]

Hello all:

Thank you to all who makes the life more easy. I also try to help to the people with my forum.

i would like insert a link to my blog from my pfpBB forum. I'd like in the menu, but any option would be wellcomed.

Can you hepl me?

Thank you very much.

[Lumpy Burgertushie]

need to see your board so we can give you precise instructions.
basically, you would edit the overall_header.html file for whatever style(s) you are using and add the link wherever you want it to show up.


robert

[jcayala]

Thank you very much. You can see the forum is here:

www.guitarra-acustica.com/foro

[Lady_G]

Here is my test site showing several example links in the menu, meaning the two rows under the site logo, description, and search box.

Test site - full size.png

An important consideration is the introduction of the prosilver responsive style to phpBB 3.1. You can decide if your link should collapse into an icon when viewing as a mobile device.

Here is my test site using Chrome's mobile Emulator to show the header in the responsive mode.

I intentionally wanted the MySite text to remain. The remaining links are collapsed to show only the icon.

Test site - mobile.png

The code modifications are in 3 files. The lower menu rows are in the "navbar" (navigation bar) file, navbar_header.html.

You can add links in the top-left corner by inserting links after the Rules link. (I have a custom Rules link.) In navbar_header.html:

Code: Select all

		<!-- EVENT overall_header_navigation_prepend -->
		<li class="small-icon icon-faq" <!-- IF not S_USER_LOGGED_IN -->data-skip-responsive="true"<!-- ELSE -->data-last-responsive="true"<!-- ENDIF -->><a href="{U_FAQ}" rel="help" title="{L_FAQ_EXPLAIN}" role="menuitem">{L_FAQ}</a></li>
		<li class="small-icon icon-board_rules" <!-- IF not S_USER_LOGGED_IN -->data-skip-responsive="true"<!-- ELSE -->data-last-responsive="true"<!-- ENDIF -->><a href="/phpBB3.1/viewtopic.php?t=999" title="Terms and conditions" role="menuitem">Rules</a></li>
		<!-- EVENT overall_header_navigation_append -->

The lower-right links are near the end of navbar_header.html:

Code: Select all

		<!-- EVENT overall_header_breadcrumbs_after -->
		<li class="rightside small-icon icon-home"><a href="http://www.example.com" title="My site link">MySite</a></li>
		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<li class="rightside responsive-search" style="display: none;"><a href="/moresearch.htm" title="Search using Google or the forum's search engine." role="menuitem">{L_SEARCH}</a></li>
		<!-- ENDIF -->
		<li class="rightside responsive-amazon"><a href="http://www.amazon.com" title="Amazon">Amazon</a></li>
		<li class="rightside responsive-support"><a href="http://www.example.com/support" title="Tech support">Tech support</a></li>
	</ul>

Using Chrome's inspect element, I can see how phpBB utilizes the CSS properties:

- "Normal" mode: common.css --> links.css --> colours.css

- "Responsive" mode: common.css --> links.css --> colours.css --> responsive.css

First, I define the lower-right link properties inside colours.css:

Code: Select all

/* Icon images
---------------------------------------- */
.icon-amazon, .responsive-amazon a	{ padding-left: 20px; background-image: url("./images/icon_topic_poll.gif"); background-repeat: no-repeat; background-position: 0% 50%; }
.icon-support, .responsive-support a	{ padding-left: 15px; background-image: url("./images/icon_bump.gif"); background-repeat: no-repeat; background-position: 0% 50%; }

Responsive mode (responsive.css) will override the properties of colours.css, so I must correct the padding-left used in colours.css. This is a copy of the "Search" code block with the addition of "padding-left: 0 px;" to reset my modification in colours.css.

Code: Select all

/* Support
----------------------------------------*/
.responsive-support, .responsive-amazon { display: block !important; }
.responsive-support a, .responsive-amazon a {
	display: block;
	width: 16px;
	height: 22px;
	padding-left: 0 px;	
	overflow: hidden;
	text-indent: 99px;
	background-position: 0% 50%;
	background-repeat: no-repeat;
	text-decoration: none;
}

(I requested this topic be moved to the [3.1.x] Styles Support & Discussion forum.)

[Kailey]

basically, you would edit the overall_header.html file

It's a little overkill for just a link, but you could accomplish this with an extension so they don't have to edit core files.

[jcayala]

Thank you very much for your reply, but this sollution is too dificult for me. I can see that you have done a detailed explanation but can't understand it. Thank you!!!

[Lumpy Burgertushie]

Thank you very much. You can see the forum is here:

http://www.guitarra-acustica.com/foro

using ftp, download styles/prosilver/template/overall_header.html to your computer
using a good text editor only, open the file.

find:

Code: Select all

<li class="small-icon icon-faq" <!-- IF not S_USER_LOGGED_IN -->data-skip-responsive="true"<!-- ELSE -->data-last-responsive="true"<!-- ENDIF -->><a href="{U_FAQ}" rel="help" title="{L_FAQ_EXPLAIN}" role="menuitem">{L_FAQ}</a></li>

on a new line right above it, copy and paste this:

Code: Select all

<li class="small-icon icon-home" <!-- IF not S_USER_LOGGED_IN -->data-skip-responsive="true"<!-- ELSE -->data-last-responsive="true"<!-- ENDIF -->><a href="../index.php" title="BLOG" role="menuitem">Blog</a></li>

save the file and upload back to the server using your ftp.

refresh your browser.

done

robert

[spacefem]

do you still have to refresh styles when you change a template like in 3.0? I can't find that option... I added a link in my navbar_header.html but no changes I make seem to be showing up.

[Lady_G]

Yes, but there is no "refresh styles" option in phpBB 3.1. Instead, refresh the system cache (General --> Purge the cache).

[Lady_G]

Thank you very much. You can see the forum is here:

http://www.guitarra-acustica.com/foro

using ftp, download styles/prosilver/template/overall_header.html to your computer
using a good text editor only, open the file....

I think you mean navbar_header.html, not overall_header.html.

jcayala - This will place a "home" icon in the lower right menu as my example shows. In navbar_header.html:

Find:

Code: Select all

      <!-- EVENT overall_header_breadcrumbs_after -->

Add after:

Code: Select all

      <li class="rightside small-icon icon-home"><a href="http://www.example.com" title="My site link">MySite</a></li>

FTP the file to your server.

Perhaps an extension would make this easier.

[jcayala]

Thank you very much for your valuables replies. I'll tryboth options.

Thank you.

[P_I]

There is also discussion in phpBB • Extension to add links in menu in Nav Bar. Hopefully an extension writer recognizes the need and an extension will result.

In the meantime, I've found a way, although it is still a hack rather than a proper solution. I started with phpBB • "Hello World!" - Extension which provides a simple framework to learn about writing extensions and adds a "Hello World" link to the header. I figured I could change the information about the link that was being added.

My hack was to change the file ext/acme/demo/styles/prosilver/template/event/overall_header_navigation_prepend.html and make the following change

Code: Select all

< <li class="small-icon icon-faq no-bulletin"><a href="{U_DEMO_PAGE}">{L_DEMO_PAGE}</a></li>
---
> <li class="small-icon icon-faq no-bulletin"><a href="http://www.example.org/blog/" title="Visit our blog" >Blog</a></li>

which results in:

Add header link.PNG

Changing the icon is left as an exercise for the reader, as I haven't gotten that far yet!

[Lady_G]

P_I is referring to modification with the extension. If you wish to use a new icon, place the icon in the prosilver directory styles/prosilver/theme/images/.

Icons are modified from within colours.css (as detailed in my previous post). Here is the home icon.

Find:

Code: Select all

.icon-home					{ background-image: url("./images/icon_home.gif"); }

Add after:

Code: Select all

.icon-MySite					{ background-image: url("./images/icon_MySite.gif"); }

The icon filename is icon_MySite.gif, change as you wish.

In navbar_header.html, change the class="rightside small-icon icon-home" to the new icon. For example:

Change:

Code: Select all

      <li class="rightside small-icon icon-home"><a href="http://www.example.com" title="My site link">MySite</a></li>

To:

Code: Select all

      <li class="rightside small-icon icon-MySite"><a href="http://www.example.com" title="My site link">MySite</a></li>

[Lady_G]

There is also discussion in phpBB • Extension to add links in menu in Nav Bar. Hopefully an extension writer recognizes the need and an extension will result.

In the meantime, I've found a way, although it is still a hack rather than a proper solution....

Changing the icon is left as an exercise for the reader, as I haven't gotten that far yet!

First, my modifications to navbar_header.html are directly inside the prosilver style. This is not the recommended approach as updates to the style will overwrite the modifications (but it works...).

Until someone writes an extension, the "clean" approach is described in Creating & Modifying Styles.

The sections of interest are described under Template Inheritance. CSS properties are implemented by Asset "Inheritance" (there are several methods).

Helpful info (for me): Category:Events and Listeners - from the Area51 wiki (I think of events as "hooks").

I will try this approach next.

I believe P_I's code is triggered from an event in navbar_header.html:

Code: Select all

<!-- EVENT overall_header_navigation_prepend -->

As navbar_header.html has EVENTs in several locations within the file, changing the EVENT trigger will put the icon in the desired location. I don't know how responsive.css will work, though.

[P_I]

Does anyone know if there are any design notes/guidelines from the development team that discuss how the choice(s) of location of various elements of the navigation bar were determined? I've searched a bit on Area51 -Development Discussion Board without success.

On a desktop there appears to be significant screen real-estate to add a link or two in the header, either beside the FAQ, or perhaps one line lower on the right side of the breadcrumbs bar. In trying to add a couple of links to our forum, for a blog and a wiki, I'm trying to adhere to the coding standards for the new responsive prosilver design so that my additional links are consist with prosilver's responsive design.