Header Image Link to website Home Page

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Ideas Centre
adkaraczun
Registered User
Posts: 36
Joined: Thu Sep 05, 2013 11:58 pm

Header Image Link to website Home Page

Post by adkaraczun »

I am using a commercially available style from http://www.gamesitetemplates.com/. I have added my logo to the background.jpg header image. What I want to do is make an area over the logo a hotspot link to my home page (http://www.mischiefinc.net). Following a Knowledge Base article on this site, I just created a blank, transparent site_logo.gif file and positioned it over the logo on the background. The code I added to the template and theme follow.


overall_header.html

Code: Select all

<div id="banner-pos">
<a href="http://www.mischiefinc.net"><img src="/phpBB3/styles/Medieval_phpBB/imageset/site_logo.gif" alt="" />
</div>

common.css

Code: Select all

#banner-pos {
position: relative;
margin-right: 80px;
float: right;
margin-top: 30px 
}
Everything works just fine, with one exception. The entire header image is separated from the rest of the body-wrapper images by a gap through which shows the black background fill.

Image

My question is, what else do I need to do to resolve this display issue? I am just proficient enough with this stuff to be dangerous, so while I can find and pretty much understand code I am directed to read, I can't look at a whole CSS or HTML file and figure out what is wrong.

Thanks,

Alex

User avatar
Lumpy Burgertushie
Registered User
Posts: 67236
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Header Image Link to website Home Page

Post by Lumpy Burgertushie »

I don't see what you are showing in your image . however, I see the code in your overall_header file but I can't figure out what it is doing. it is not creating a link.

please explain exactly what you want the final outcome to be.

I would suggest you go back and undo everything you have done so far about this and then we can start over.

I assume you want some or all of the header image to link back to your home page.

We can easily help you do this but we need to start without the changes you have already made.

luck,
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?

adkaraczun
Registered User
Posts: 36
Joined: Thu Sep 05, 2013 11:58 pm

Re: Header Image Link to website Home Page

Post by adkaraczun »

Lumpy,

I've updated the image in my original post to highlight the issue. Notice the gap between the header image and the body-wrapper image?

I have already reversed the changes I made.

I want the area only over the logo (upper right corner) to hotlink back to my home page (http://www.mischiefinc.net). This screenshot highlights what I mean.

Image

Also you might notice the UCP, new messages, view your posts, etc. links are not centered vertically in the black space where they are located. This is also true of the breadcrumbs in the parchment area to the right of the shield (both areas also have been highlighted). I would love to get them centered vertically in those areas.

Thanks,

Alex

User avatar
Lumpy Burgertushie
Registered User
Posts: 67236
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Header Image Link to website Home Page

Post by Lumpy Burgertushie »

your style is apparently created from image slices and I have never worked with that method before.

the whole top half of your page is all one image, the only way I know how to make only one part of an image a link is by using the old fashioned image map.

however, I do know that you can do it with css by using padding etc.

you will have to wait for someone else that is better with css that I am to tell you how to do it.

right now, you have part of the header image in the middle set to the logo and that is linked back to the board index like normal.

you have a h1 text of your forum name in the code but it is behind the main top image so it doesn't show at all.

etc.

I have had a hard time just figuring out exactly how any of it is working .

If you are using Firefox, right click on different sections of your header and choose"inspect element" , then when the tool bar pops up at the bottom, click on html. then you can choose different lines of html and see where they apply to the page.
you can also choose style and see what the css is for those spots as well.


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?

adkaraczun
Registered User
Posts: 36
Joined: Thu Sep 05, 2013 11:58 pm

Re: Header Image Link to website Home Page

Post by adkaraczun »

Well thanks for your help anyway! :) I'll wait for someone else to take a stab at this.

User avatar
Abhishek Srivastava
Registered User
Posts: 191
Joined: Mon Jul 01, 2013 12:48 pm
Location: India
Name: Abhishek
Contact:

Re: Header Image Link to website Home Page

Post by Abhishek Srivastava »

To verticall align navlinks do this:

Go to template/overall_header.html

Find:

Code: Select all

<ul class="linklist navlinks"

In line Add:

Code: Select all

 style="padding-top: 5px;"
Hope this works. :)
Follow me on twitter @Abh1shekS
Follow me on facebook Abhishek Srivastava
My LinkedIn: abhi5hek

adkaraczun
Registered User
Posts: 36
Joined: Thu Sep 05, 2013 11:58 pm

Re: Header Image Link to website Home Page

Post by adkaraczun »

Abhishek Srivastava wrote:Hope this works. :)
It needed 10px of padding, but it did work! Thanks!

Now for the link issue! Anyone?

adkaraczun
Registered User
Posts: 36
Joined: Thu Sep 05, 2013 11:58 pm

Re: Header Image Link to website Home Page

Post by adkaraczun »

Ok, my best guess is that the gap between body images is either 60px (the height of the logo), or 90px (the height of the logo plus the banner-pos top margin of 30px). Shouldn't there be somewhere I can insert of margin or padding with a negative value (either -60px or -90px) to get that body-wrapper image back up to where it belongs?

adkaraczun
Registered User
Posts: 36
Joined: Thu Sep 05, 2013 11:58 pm

Re: Header Image Link to website Home Page

Post by adkaraczun »

Anyone? My post immediately above seems to be the solution. I've researched negative padding and margins and it is possible, but I still can't find the position in the overall_header.html, or common.php file to place the new code.

User avatar
Lumpy Burgertushie
Registered User
Posts: 67236
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Header Image Link to website Home Page

Post by Lumpy Burgertushie »

I am going to jump back in here.

I don't believe this is about the images.

log out of your board and check. when I view the board as a guest there is no gap .

your image shows being logged in and the nav links are all centered and too far down on the page.
the nav links should all be in the bar above.

there is something in your navlinks that is causing it to push the next section down which moves the image.


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?

adkaraczun
Registered User
Posts: 36
Joined: Thu Sep 05, 2013 11:58 pm

Re: Header Image Link to website Home Page

Post by adkaraczun »

Lumpy Burgertushie wrote:I am going to jump back in here.

I don't believe this is about the images.

log out of your board and check. when I view the board as a guest there is no gap .

your image shows being logged in and the nav links are all centered and too far down on the page.
the nav links should all be in the bar above.

there is something in your navlinks that is causing it to push the next section down which moves the image.


robert
I reversed the changes so the board looks normal to our customers. When I reapply the changes, be assured the gap reappears.

The navlinks are all where they should be. If you look at the style on the website where I bought it, the designer's screen shots all show them where they are.

http://www.gamesitetemplates.com/phpbb- ... d_173.html

User avatar
Lumpy Burgertushie
Registered User
Posts: 67236
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Header Image Link to website Home Page

Post by Lumpy Burgertushie »

look at your post here:
viewtopic.php?p=13379923#p13379923

notice how the nav links are all run together and centered?

notice how the link to the index is below the area it is supposed to be?

check your page when logged out.

every thing is fine.

there is something wrong with how the code is displaying the nav links and probably other things.

I would start with a brand new copy of your overall_header.html file and see how it works.

as I said, I see absolutely no gap when viewing your site as a guest. I tried different browsers etc. removed all cookies etc.

you should do the same to test it. you may be looking at a cached copy from either your board or your browser.
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?

adkaraczun
Registered User
Posts: 36
Joined: Thu Sep 05, 2013 11:58 pm

Re: Header Image Link to website Home Page

Post by adkaraczun »

Lumpy Burgertushie wrote:as I said, I see absolutely no gap when viewing your site as a guest. I tried different browsers etc. removed all cookies etc.
I rolled back the changes. I don't see the gap either because it currently isn't there. However, if I reapply the hotspot code the gap reappears.

Use the screenshots, not the current forums to understand the problem.

User avatar
Lumpy Burgertushie
Registered User
Posts: 67236
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Header Image Link to website Home Page

Post by Lumpy Burgertushie »

ok, sorry. from what I can see, your whole method of trying to make that one part of the image a link is flawed.

you have several different images fighting for the same space.

you have the blank gif, you have the whole background image
you have site logo, site description etc. etc. etc.
you also have a h1 with text of the site name as well as the background image includes the site name.

I would start over. If it was me, I would not do it the way you are doing it.

I would create two images. One with the main Mischeif Inc. Forums on it that fills the header as the background for the headerbar.

the second one would be the small one on the right.

now, you overlay the small one on top of the background image and make it float right with whatever other settings you need.

make that div a link as you tried to do with the blank site logo gif thing.

I think that would work.


luck,
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?

adkaraczun
Registered User
Posts: 36
Joined: Thu Sep 05, 2013 11:58 pm

Re: Header Image Link to website Home Page

Post by adkaraczun »

Lumpy Burgertushie wrote:now, you overlay the small one on top of the background image and make it float right with whatever other settings you need.

make that div a link as you tried to do with the blank site logo gif thing.

I think that would work.


luck,
robert
I don't have the expertise to make more than what amount to minor changes. This style was bought, as is, from the site I linked above. The designer has pointed me to forums here to resolve the issue, but has been less than helpful. I don't see the difference between floating a transparent PNG over the logo in the flattened header JPG, or removing the logo from the JPG and floating it over the header as a separate graphic, but if it will work I'm all ears. Is it that the code I am using isn't correct to accomplish what I want to do?

Locked

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