Assistance with banner location {CLOSED}.

[z0ne1.]

Hey guys.

This one is a little more complicated.

I've created a new banner (which changes when the cursor hovers over the banner). I've uploaded the images, but for some strange reason, the banner isn't started where I want it to (although it's centred). Result of this, means the right-hand side is out too.

createituk.boards.net - any assistance on this would be great. I will also need help with the navigation menu bar, but that can wait until we have the alignment of the banners set correct.

Thanks,
~z0ne1.

[Tumbleweed]

Feb 25, 2016 13:57:05 GMT -8 z0ne1. said:

Hey guys.

This one is a little more complicated.

I've created a new banner (which changes when the cursor hovers over the banner). I've uploaded the images, but for some strange reason, the banner isn't started where I want it to (although it's centred). Result of this, means the right-hand side is out too.

createituk.boards.net - any assistance on this would be great. I will also need help with the navigation menu bar, but that can wait until we have the alignment of the banners set correct.

Thanks,
~z0ne1.

Try adding this to the bottom of your style sheet. That will make it fit proportionately in the space you have:


#banner {
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

I didn't check where you added your banner so if that doesn't work, try contain instead of cover. Also I wanted you to know, in Chrome, for me, that bottom image is off by one pixel it looks like. In FF it looks fine. Not sure about IE.

[z0ne1.]

Feb 26, 2016 21:50:33 GMT -8 Tumbleweed said:

Feb 25, 2016 13:57:05 GMT -8 z0ne1. said:

Hey guys.

This one is a little more complicated.

I've created a new banner (which changes when the cursor hovers over the banner). I've uploaded the images, but for some strange reason, the banner isn't started where I want it to (although it's centred). Result of this, means the right-hand side is out too.

createituk.boards.net - any assistance on this would be great. I will also need help with the navigation menu bar, but that can wait until we have the alignment of the banners set correct.

Thanks,
~z0ne1.

Try adding this to the bottom of your style sheet. That will make it fit proportionately in the space you have:


#banner {
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

I didn't check where you added your banner so if that doesn't work, try contain instead of cover. Also I wanted you to know, in Chrome, for me, that bottom image is off by one pixel it looks like. In FF it looks fine. Not sure about IE.

I've tried to add the above to my style sheet, but no luck (that also includes changing the cover command with contain). I'm pretty sure my banner is banner is added via. Forum Wrapper, with the following ...


<div id="banner-container" role="banner">
<h2 id="banner">
                   
                       <script language="javascript">
function MouseRollover(MyImage) {
MyImage.src = "http://i.imgur.com/dovbJlO.jpg";
}
function MouseOut(MyImage) {
MyImage.src = "http://i.imgur.com/OMXpzCZ.jpg";
}
</script>

                       <a href="/"><div align="centre">
                           <img src="http://i.imgur.com/OMXpzCZ.jpg" title="CreateITUK" style="border-style:none" boarder="0px" width="1172px" height="175px"
onMouseOver="MouseRollover(this)"
   onMouseOut="MouseOut(this)" /></a>
</div>
Oo, I see, yes you're correct, it's off my a pixel in IE. I use Firefox, so probably why I didn't notice it. I think I'll have to review all the images, etc. once I've got the design finished off I reckon

Thank you,
~z0ne1.

[Tumbleweed]

Feb 28, 2016 1:33:29 GMT -8 z0ne1. said:

Feb 26, 2016 21:50:33 GMT -8 Tumbleweed said:

Try adding this to the bottom of your style sheet. That will make it fit proportionately in the space you have:


#banner {
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

I didn't check where you added your banner so if that doesn't work, try contain instead of cover. Also I wanted you to know, in Chrome, for me, that bottom image is off by one pixel it looks like. In FF it looks fine. Not sure about IE.

I've tried to add the above to my style sheet, but no luck (that also includes changing the cover command with contain). I'm pretty sure my banner is banner is added via. Forum Wrapper, with the following ...


<div id="banner-container" role="banner">
<h2 id="banner">
                   
                       <script language="javascript">
function MouseRollover(MyImage) {
MyImage.src = "http://i.imgur.com/dovbJlO.jpg";
}
function MouseOut(MyImage) {
MyImage.src = "http://i.imgur.com/OMXpzCZ.jpg";
}
</script>

                       <a href="/"><div align="centre">
                           <img src="http://i.imgur.com/OMXpzCZ.jpg" title="CreateITUK" style="border-style:none" boarder="0px" width="1172px" height="175px"
onMouseOver="MouseRollover(this)"
   onMouseOut="MouseOut(this)" /></a>
</div>
Oo, I see, yes you're correct, it's off my a pixel in IE. I use Firefox, so probably why I didn't notice it. I think I'll have to review all the images, etc. once I've got the design finished off I reckon

Thank you,
~z0ne1.

As for the bottom image, I'm sure there isn't anything wrong with your image. Just Chrome and evidently IE doesn't maybe like the way you added it or something since it matches up perfect in FF. I might take a closer look tomorrow.

As for using that code, it's rather outdated. Why not just use css? If you are game, your wrapper template area where you put all that javascript, just empty it out so it looks like this in bold below: (Save your code in case this doesn't work for you but it should.)

<div id="banner-container" role="banner">
<h2 id="banner">

</h2>
</div>


And then add the non-hover  image to your Visual editor (Admin>Themes> Advanced Styles & CSS> Visual Editor>Header (Top)>Forum Banner>Banner Image) making sure you set the height to 175px, the repeat to no-repeat, the background position to center-center.

And then switch tabs to the style sheet and at the bottom add this:

#banner {
background-repeat:no-repeat;
-webkit-background-size:contain;
-moz-background-size:contain;
-o-background-size:contain;
background-size:contain;
}
#banner:hover:hover{background-image:url(http://i.imgur.com/dovbJlO.jpg);
}

Let me know if you try it and that does the trick.
But I have to say, wouldn't you wan't that banner image more like the footer image so it wraps the whole site as it seems it was made to do that. Just wondering.

[z0ne1.]

Hi.

Yep, that's exactly how I want it (similar to the footer image). I've added the codes, and amended the above as you've asked, but now displays no banner, until you rollover in the area where it should appear. I've left it how it is, so you can view it's current state.

Unsure with JavaScript, I'm not good with coding, so it's probably a real mess as I've requests the codes needed to fit this all together, so it's probably mixed with multiple flavours. Doh!

~z0ne1.

[Tumbleweed]

Feb 28, 2016 3:53:34 GMT -8 z0ne1. said:

Hi.

Yep, that's exactly how I want it (similar to the footer image). I've added the codes, and amended the above as you've asked, but now displays no banner, until you rollover in the area where it should appear. I've left it how it is, so you can view it's current state.

Unsure with JavaScript, I'm not good with coding, so it's probably a real mess as I've requests the codes needed to fit this all together, so it's probably mixed with multiple flavours. Doh!

~z0ne1.

O.K. I can give you the whole wrapper template coding once I find out where you want things. Are you going to want your menu bar to be attached to the bottom of the banner like it is now except the image will instead be wider to match up with the background border thingy?

[z0ne1.]

Erm. I haven't thought about the Menu Bar, as of yet. Yeah, I reckon get it moved within the banner area. What's your thoughts on it? Open to suggestions

Thanks.
~z0ne1.

[Tumbleweed]

Feb 29, 2016 12:26:40 GMT -8 z0ne1. said:

Erm. I haven't thought about the Menu Bar, as of yet. Yeah, I reckon get it moved within the banner area. What's your thoughts on it? Open to suggestions

Thanks.
~z0ne1.

I'll just give you what I have and if you don't like the menu where it is, we can remedy that. First in your wrapper template, save what you have now as I know you added some things to the footer (back to top/copyright,etc) so you'll want to add that back.

Here is your wrapper template:


<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
           <div id="wrapper2">
               <div id="header_img"></div>
               <div id="wrapper">
<header>
<!--<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>-->
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a {if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.  
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span>  $[logout_link]
{/if}
</p>
</div>
</header>

$[participated_threads_link]
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
$[header]
<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>
$[footer]
</div>
       <div id="footer_img"></div>
           </div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>
And here is your css: (add to the bottom of your style sheet and get rid of any css you have associated with any css you have that you added to the bottom of your style sheet or elsewhere associated the images we are dealing with.



#header_img{
background-image:url("http://i.imgur.com/OMXpzCZ.jpg");
background-repeat:no-repeat;
height:175px;
margin:auto;
}
#header_img:hover:hover{background-image:url(http://i.imgur.com/dovbJlO.jpg);
}
#footer_img{
background-image:url("http://storage.proboards.com/2955945/i/Z5dxPHltStTmC3afrw2V.jpg");
background-repeat:no-repeat;
height:66px;
margin:auto;
}
/*this is the middle border*/
#wrapper2{
width:1172px;
margin: 0 auto;
overflow-x: hidden;
background-image:url(http://storage.proboards.com/3028697/i/nrHmGMNpnt4uY_lIJThZ.jpg);
background-repeat:repeat-y;    
}
#navigation-menu{margin-top:22px;
}

Now switch to your visual editor tab and add this image...... 

storage.proboards.com/3028697/i/mcnqfEOII7wtSrvsCUQB.png


....as your background and set it to repeat. (I now have the scan lines all by themselves instead of incorporating the border, which was problematic as before it continued down to the bottom of the page, showing those border below the bottom image.)

Then set your forum width to 96% (You can tweak that later if you want it a tiny bit wider/narrower)

And here are all your images in case you want to rehost them but I'd upload them via your theme editor since imgur is making changes. (There is a stickied thread about it in support.)
Middle border: storage.proboards.com/3028697/i/nrHmGMNpnt4uY_lIJThZ.jpg
Background: storage.proboards.com/3028697/i/mcnqfEOII7wtSrvsCUQB.png

Footer Image: storage.proboards.com/2955945/i/Z5dxPHltStTmC3afrw2V.jpg
Header Image:  i.imgur.com/OMXpzCZ.jpg

and the one for hover: i.imgur.com/dovbJlO.jpg

And that should be it aside from you re-adding what you want in the footer and you should be able to add that right into this part....
<div id="footer_img">Your links and back to top here</div>
....where I have the blue.

[z0ne1.]

Hey Tumbleweed.

Wow, thank so much for the work and effort you've put into helping me out. I really really do appreciate it. I've applied all you've requested, and just a couple of small snagging issues ...

1. I can't get my affiliate table to go above the ProBoards advertisements.
2. Looks like it's applying 2 footer images.
3. Is it possible to get the banner as a HyperLink (so it goes back to the homepage, as at the moment, it's non-clickable).
4. I'm guessing the side-bars of the background isn't lining up correctly due to the above at the moment, but we may have to wait and see.

Thanks so much!! You're making great progress, I greatly appreciate this.
~z0ne1.

[z0ne1.]

UPDATE.

I've played around, and done the majority of the above.

Just need to hyperlink the banner, and also the footer (to go to top of page).

~z0ne1.

[Tumbleweed]

Mar 3, 2016 9:14:58 GMT -8 z0ne1. said:

Hey Tumbleweed.

Wow, thank so much for the work and effort you've put into helping me out. I really really do appreciate it. I've applied all you've requested, and just a couple of small snagging issues ...

1. I can't get my affiliate table to go above the ProBoards advertisements.
2. Looks like it's applying 2 footer images.
3. Is it possible to get the banner as a HyperLink (so it goes back to the homepage, as at the moment, it's non-clickable).
4. I'm guessing the side-bars of the background isn't lining up correctly due to the above at the moment, but we may have to wait and see.

Thanks so much!! You're making great progress, I greatly appreciate this.
~z0ne1.

I'm glad you didn't wait around for me and worked it out on your own. If you still need the hyperlink for the banner you should just be able to add that around the div. 

<a href="http://linktowhereever.com"><div id="header_img"></div></a>

Mar 3, 2016 9:32:29 GMT -8 z0ne1. said:

UPDATE.

I've played around, and done the majority of the above.

Just need to hyperlink the banner, and also the footer (to go to top of page).

~z0ne1.

For the back to top, just put this....<a name="top"></a> below the body tag in the wrapper template.

<body>
<a name="top"></a>


And then you can just do like you did for the banner but the footer:



<a href="#top"><div id="footer_img"></div></a>

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 3, 2016 16:37:23 GMT -8 Tumbleweed said:

Mar 3, 2016 9:14:58 GMT -8 z0ne1. said:

Hey Tumbleweed.

Wow, thank so much for the work and effort you've put into helping me out. I really really do appreciate it. I've applied all you've requested, and just a couple of small snagging issues ...

1. I can't get my affiliate table to go above the ProBoards advertisements.
2. Looks like it's applying 2 footer images.
3. Is it possible to get the banner as a HyperLink (so it goes back to the homepage, as at the moment, it's non-clickable).
4. I'm guessing the side-bars of the background isn't lining up correctly due to the above at the moment, but we may have to wait and see.

Thanks so much!! You're making great progress, I greatly appreciate this.
~z0ne1.

I'm glad you didn't wait around for me and worked it out on your own. If you still need the hyperlink for the banner you should just be able to add that around the div. 

<a href="http://linktowhereever.com"><div id="header_img"></div></a>

Mar 3, 2016 9:32:29 GMT -8 z0ne1. said:

UPDATE.

I've played around, and done the majority of the above.

Just need to hyperlink the banner, and also the footer (to go to top of page).

~z0ne1.

For the back to top, just put this....<a name="top"></a> below the body tag in the wrapper template.

<body>
<a name="top"></a>


And then you can just do like you did for the banner but the footer:



<a href="#top"><div id="footer_img"></div></a>

So skill. Such help. Wow!

[Tumbleweed]

Mar 6, 2016 3:02:29 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Mar 3, 2016 16:37:23 GMT -8 Tumbleweed said:

I'm glad you didn't wait around for me and worked it out on your own. If you still need the hyperlink for the banner you should just be able to add that around the div. 

<a href="http://linktowhereever.com"><div id="header_img"></div></a>

For the back to top, just put this....<a name="top"></a> below the body tag in the wrapper template.

<body>
<a name="top"></a>


And then you can just do like you did for the banner but the footer:



<a href="#top"><div id="footer_img"></div></a>

So skill. Such help. Wow!

Lol, Thanks, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓

I was going to just give your post a thumbs up and then I though, gosh, that seems really arrogant like i'm agreeing I have "such skill". Some times a thumbs up in not in order but thanks again, for the nice words.

[z0ne1.]

Mar 6, 2016 12:14:40 GMT -8 Tumbleweed said:

Mar 6, 2016 3:02:29 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

So skill. Such help. Wow!

Lol, Thanks, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓

I was going to just give your post a thumbs up and then I though, gosh, that seems really arrogant like i'm agreeing I have "such skill". Some times a thumbs up in not in order but thanks again, for the nice words.

Thank you so much for your work on this Tumbleweed. Your skills and kindness of going through this with me is highly appreciated.

Thanks.
~z0ne1.