Adding a new link in the header

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Scam Warning
jcayala
Registered User
Posts: 4
Joined: Fri Nov 21, 2014 3:23 pm

Adding a new link in the header

Post by 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.
User avatar
Lumpy Burgertushie
Registered User
Posts: 67986
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Adding a new link in the header

Post by 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
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
jcayala
Registered User
Posts: 4
Joined: Fri Nov 21, 2014 3:23 pm

Re: Adding a new link in the header

Post by jcayala »

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

www.guitarra-acustica.com/foro
Lady_G
Registered User
Posts: 247
Joined: Fri Jun 08, 2012 12:38 pm
Location: US

Re: Adding a new link in the header

Post by 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
Test site - full size.png (20.53 KiB) Viewed 5697 times
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
Test site - mobile.png (47.43 KiB) Viewed 5697 times
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.)
User avatar
kinerity
Community Team Member
Community Team Member
Posts: 2767
Joined: Mon Sep 01, 2014 1:00 am
Location: sudo rm -rf /
Name: Kailey Truscott
Contact:

Re: Adding a new link in the header

Post by kinerity »

Lumpy Burgertushie wrote: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.
Kailey Truscott - Community Team
GitHub repositories (including un-released extensions)
jcayala
Registered User
Posts: 4
Joined: Fri Nov 21, 2014 3:23 pm

Re: Adding a new link in the header

Post by 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!!!
User avatar
Lumpy Burgertushie
Registered User
Posts: 67986
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Adding a new link in the header

Post by Lumpy Burgertushie »

jcayala wrote: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
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
User avatar
spacefem
Registered User
Posts: 65
Joined: Sun Dec 22, 2002 1:06 am
Contact:

Re: Adding a new link in the header

Post by 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
Registered User
Posts: 247
Joined: Fri Jun 08, 2012 12:38 pm
Location: US

Re: Adding a new link in the header

Post by 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
Registered User
Posts: 247
Joined: Fri Jun 08, 2012 12:38 pm
Location: US

Re: Adding a new link in the header

Post by Lady_G »

Lumpy Burgertushie wrote:
jcayala wrote: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
Registered User
Posts: 4
Joined: Fri Nov 21, 2014 3:23 pm

Re: Adding a new link in the header

Post by jcayala »

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

Thank you.
User avatar
P_I
Registered User
Posts: 1203
Joined: Tue Mar 01, 2011 8:35 pm
Location: Staying home - Calgary
Contact:

Re: Adding a new link in the header

Post by 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
Add header link.PNG (2.67 KiB) Viewed 5533 times
Changing the icon is left as an exercise for the reader, as I haven't gotten that far yet!
Normal people… believe that if it ain’t broke, don’t fix it. Engineers believe that if it ain’t broke, it doesn’t have enough features yet. – Scott Adams
Lady_G
Registered User
Posts: 247
Joined: Fri Jun 08, 2012 12:38 pm
Location: US

Re: Adding a new link in the header

Post by 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
Registered User
Posts: 247
Joined: Fri Jun 08, 2012 12:38 pm
Location: US

Re: Adding a new link in the header

Post by Lady_G »

P_I wrote: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.
User avatar
P_I
Registered User
Posts: 1203
Joined: Tue Mar 01, 2011 8:35 pm
Location: Staying home - Calgary
Contact:

Re: Adding a new link in the header

Post by 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.
Normal people… believe that if it ain’t broke, don’t fix it. Engineers believe that if it ain’t broke, it doesn’t have enough features yet. – Scott Adams
Locked

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