Align Logo with Header Advert 2 (No Drop)

[syrus.xl]

I originally coded this for my vBulletin 4.0, but so many people have been asking on vBulletin.com how to do this - so I thought I would release it on here, as well.

What it does:
By default if you add any advertisement to the header, you will find that your header logo is 'pushed' upwards. Many people prefer that logo is aligned with the advert and not placed above. ** See attached screenshot **

DEMO: http://www.digitalport.co.uk (http://www.digitalport.co.uk)
I have coded this little modification so that if you place an advert in ad area 2 of the header it will appear next to your logo, and will not affect your logo's position whatsoever. It is coded to accept a standard banner size of 468x60 in the header ad 2 section. You can adjust this to suit other banner sizes as required.

In the #logo_main adjust the width and height values to suit your own logo. The margin-top value adjusts the distance between the top of your logo and the top of the toplinks. margin-left I have set to 20px, but you can adjust this to suit where you want the logo to be from the left side.

The best way is to adjust the values gradually if you are not sure about CSS coding.

Installation:
In the vbulletin.css template find:
.body_wrapper {
padding: 0 {vb:math 2 * {vb:stylevar padding}} {vb:math {vb:stylevar padding}*2};
background: {vb:stylevar body_background};
-moz-border-radius: {vb:stylevar border_radius};
-webkit-border-radius: {vb:stylevar border_radius};
_display: inline;
}Add after:
/* Replacement Header CSS */

#header_wrapper {
width:100%;
height:140px;
}
#logo_main {
float:left;
display:inline-block;
width:274px;
height:98px;
margin-top:20px;
margin-left:20px;
position:relative;
}
#banner_ad_top {
float:right;
display:inline-block;
margin-right:20px;
margin-top:50px;
width:468px;
height:60px;
}
In the header template find and remove:
{vb:raw ad_location.global_header2}
In the header template find and remove:
<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="Powered by vBulletin" /></a></div>
Replace with this code:
<!-- Start Custom Header -->
<div id="header_wrapper">
<div id="logo_main">
<a name="top" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a>
</div>
<div id="banner_ad_top">
{vb:raw ad_location.global_header2}
</div>
</div>
<!-- End Custom Header -->
Important:
One additional StyleVar you will need to change is the doc_minWidth to around 800px or more depending on your layout width. This will stop the advert div from dropping below your logo in the header, if someone is using a low resolution to view your website.

[forumtester]

Where do you find the
#logo_main

[forumtester]

Sorry, stupid question

[Alecsmith]

Header banner is not align it moved to right hand site.

[syrus.xl]

Header banner is not align it moved to right hand site.

The ad banner should be right aligned, it is set by the CSS float:right parameter. It should have a 20px margin as well, which can be changed to suit your forum/cms header.

[forumtester]

Brilliant Mod.

Just one thing. The mod makes the header taller. I have tried changing the header wrapper height value from 140 to 80, but the header stays at around 100. Any idea's?

Also it doesn't work in the CMS

Found the 100 value (98) it was the logo value.

[syrus.xl]

Brilliant Mod.

Just one thing. The mod makes the header taller. I have tried changing the header wrapper height value from 140 to 80, but the header stays at around 100. Any idea's?

The height is dependent on a few parameters set in the CSS.

#banner_ad_top has a margin-top of 50px - You can reduce this as required.
The same applies to the
#logo_main which has a margin-top of 20px - again adjust as necessary.


Also it doesn't work in the CMSThis will work in the CMS, but because of a current bug in vB4.0 Gold it will only work if this modification is done on the default template. Hopefully, when the next release is ready, this will be fixed.

[forumtester]

Found my height issue, it was this variable

#logo_main {
float:left;
display:inline-block;
width:274px;
height:98px;
margin-top:20px;
margin-left:20px;
position:relative;

Still can't get it to work in the CMS and the mod is done on the default style.

[forumtester]

Sorted it.
You have to hover over the section title in the CMS, then click the pencil icon.
Then set the "Style" to Inherit.

Superb Mod

[forumtester]

Header banner is not align it moved to right hand site.

I think I know what he means.
In IE7, the banner slides off the edge of the forum on the rhs. It site halfway on and halfway off the forum.

It doesn't do it in IE8.

[slackin-jer]

How did you integrate that shopping cart into your header?

[tafreeh]

nice mod... got quick question..
after editing those temp.. we would be able to select the logo and condition via admin cp riht?

[Dr.osamA]

try it
Thanxx

brb
________
Black Xxx (http://www.++++tube.com/categories/11/black/videos/1)

[syrus.xl]

nice mod... got quick question..
after editing those temp.. we would be able to select the logo and condition via admin cp riht?

It is coded to use the default logo and the default header ad position 2 which is the right side. So, everything will still function from the AdminCP.

[bandare]

Where did you get that bottom widget type thing that includes twitter/facebook etc?

[syrus.xl]

Where did you get that bottom widget type thing that includes twitter/facebook etc?

Hi bandare,

All the mods used on the site you can find out about at this url:
http://www.digitalport.co.uk/blogs/4/depth-look-behind-digital-port-21/

[syrus.xl]

I think I know what he means.
In IE7, the banner slides off the edge of the forum on the rhs. It site halfway on and halfway off the forum.

It doesn't do it in IE8.

I'll try and find out why this is happening, then again IE is a pain to code workarounds for, wish Microsoft would code their browsers to use world standard coding! :rolleyes:

[forumtester]

Not working with 4.0.1

[syrus.xl]

Strange, I'm using 4.0.1 and it's still working fine...

[forumtester]

It worked beautifully in 4.0.0, but I reverted all templates before the upgrade to 4.0.1 and now it won't work.

Some of the coding to change and replace has been modified in 4.0.1.

I reverted all mods for the 4.0.1 upgrade, just coming back to reinstall this mod and it won't have it.

[ErnestA]

Sorry for the stupid question, but where do you find "ad area 2" to place a picture in?

[syrus.xl]

Sorry for the stupid question, but where do you find "ad area 2" to place a picture in?

You need to setup the banner ad in the Advertising Manager within your vBulletin AdminCP.

[ErnestA]

Hmm... I've got vB 3.8.4 and a test server setup with 4.0.1. I see nothing in admincp called advertising in my 4.0.1 admincp, but I do have an advertising tab in 3.8.4 (but it only contains google adsense).

Is it supposed to be located in the same place in 4.0.1? If so, I'll have to post a message at vbulletin.com to see what happened to my install and why that tab is missing.

Thanks,

[syrus.xl]

Hmm... I've got vB 3.8.4 and a test server setup with 4.0.1. I see nothing in admincp called advertising in my 4.0.1 admincp, but I do have an advertising tab in 3.8.4 (but it only contains google adsense).

Is it supposed to be located in the same place in 4.0.1? If so, I'll have to post a message at vbulletin.com to see what happened to my install and why that tab is missing.

Thanks,

It is actually called 'Advertising' in the AdminCP panel. I have taken a screenshot and highlighted the exact section where it is located.

It is standard on all versions of the vBulletin 4.0 series.

[ErnestA]

Yeah, thanks for the info.... Something must have gone sideways in my upgrade from 3.8.4 PL2 to 4.0.1 as that panel is just not there. It's still present in 3.8.4 (only contains Google Adsense).
Luckily I'm doing all my testing on a test server for 4.0.

I did another fresh install on my test server (no upgrade, just a fresh install of vBulltetin) and the tab is there now. I've posted a message on vBulletin.com to see if they can help me figure out how to get the advertising tab back on the upgraded 4.0.1 install.

Thanks for your help

[syrus.xl]

Ah right...

I actually cloned my site on the server, before even attempting the upgrade to 4.0 from 3.8.4. Placed the 'clone' in a new directory, and imported the database in to a new one. I only done it on the server because it is much quicker than downloading the whole lot, which would have taken hours!!!! I just used the SSH command line prompt, so it only took about 5 minutes.

I ran in to a few errors, but nothing that I could not easily fix. :)

Anyway, glad you got there in the end! :)

[ErnestA]

So you didn't go through a regular upgrade, you did a fresh install of 4.0 and then used ImpEx to import the original database? Or you just made a copy of your site and ran the upgrade process on the copy?

[syrus.xl]

I made a duplicate of my entire vBulletin 3.8.4 - First the file system then created a new database and made a full SQL dump from my original database in to a new database. I don't use Impex, it seems to give varying results.

All I had to change was my cloned config.php file, so it pointed to the 'cloned' database and not the 'live' one.

From there, I upgraded to vBulletin 4.0 - with 3 failed attempts, but because it was just data that had been changed, I just re-dumped the SQL back in each time. Probably, the easiest and quickest way of doing an upgrade without breaking your 'live' site.

[Sax on the Web]

Mod installed, thank you.

renders well on http://forum.saxontheweb.net/forum.php

However, does not show on http://forum.saxontheweb.net/content.php

My previous header worked the same on both?

thanks in advance,

[syrus.xl]

Mod installed, thank you.

renders well on http://forum.saxontheweb.net/forum.php

However, does not show on http://forum.saxontheweb.net/content.php

My previous header worked the same on both?

thanks in advance,

Hi,

You will need to edit your front page, and where it says Style select Inherit - this will then inherit the correct style site-wide.

HTH

[Sax on the Web]

Hi,

You will need to edit your front page, and where it says Style select Inherit - this will then inherit the correct style site-wide.

HTHThanks a lot,
in the matter of fact I changed it to "vb4 default" and that did the trick. (It was set as "vB3 incompatible" before).

Follow-up question: I would like to create a separate style for the front page which would be a sub-set of the forum header. (I.e. only one out of four banners.) How to get started?

thnx in advance,

[HRCHOSTING]

Installed but its pushing the image half way off the side of my page. Any idea's?

[RedTrinity]

Installed but its pushing the image half way off the side of my page. Any idea's?

Happening on our forum too :confused: VB4.0.1, using Firefox 3.5.

[syrus.xl]

I coded this for version 4.0.0 - it does require updating, but this will not be done until vBulletin release 4.0.2, just in case they make further CSS changes to the header template.

Sorry about this...

[murekhalir]

its all good. I'll just have to wait then.

It is chrome compatible for sure.

ie7 no.

ie 8 yes.

[daveaite]

Installed but its pushing the image half way off the side of my page. Any idea's?

Adjust vbulletin.css

Edit this to perfection. :) Heres what I did below...


#logo_main {
float:left;
display:inline-block;
width:274px;
height:60px;
margin-top:25px;
margin-left:0px;
position:relative;
}
#banner_ad_top {
float:right;
display:inline-block;
margin-right:260px;
margin-top:50px;
width:468px;
height:60px;

[RedTrinity]

Adjust vbulletin.css

Edit this to perfection. :) Heres what I did below...


Thanks. Your advice helped me to get my banner back from wandering off the right side of the screen! Though still having issues with getting it to the right of the existing banner. Here's where I am at the moment (see attached image):

#logo_main {
float:left;
display:inline-block;
width:400px;
height:100px;
margin-top:5px;
margin-left:0px;
position:relative;
}
#banner_ad_top {
float:right;
display:inline-block;
margin-right:250px;
margin-top:0px;
width:400px;
height:100px;


Any suggestions? I'm not sure how I can get the ad banner any further up whilst the margin-top is already set to 0 :confused: It seems to be aligning itself with 'the top' being distinguished as the bottom of the left banner, instead of the top of the header area.

Not sure how to fix this. Would appreciate further help.

Cheers :)

ETA: Just to add, apon further experimenting, raising that margin-right: amount with the ad banner does indeed fix the banner off the screen issue, but it also creates the big gap underneath the original logo banner (to which the ad banner is on the right of, as per the pic attached).

So whilst fixing the old problem, it seems to create a new one.

[RedTrinity]

Ok so I managed to get the banners aligned in FF (my default browser) and looking good. But they are still coming up as misaligned for IE :confused:

Have tried adjusting the doc_minwidth value, but doesn't seem to be making much (if any) difference with this problem.

Starting to do my head in a bit :(

[HRCHOSTING]

Adjust vbulletin.css

Edit this to perfection. :) Heres what I did below...


#logo_main {
float:left;
display:inline-block;
width:274px;
height:60px;
margin-top:25px;
margin-left:0px;
position:relative;
}
#banner_ad_top {
float:right;
display:inline-block;
margin-right:260px;
margin-top:50px;
width:468px;
height:60px;


worked like a charm, thanks

[RedTrinity]

worked like a charm, thanks

Just make sure its working properly in all browsers, as I found this fixed my problem in Firefox, but not IE.

[syrus.xl]

Try adding a bottom margin. and adjusting it to suit:

margin-right:150px;
margin-top:50px;margin-bottom: 10px;

Or to cut down on the CSS delete all margin settings in the #banner_ad_top and enter the following:
margin: 50px 150px 10px auto;

It does the same, and the values are in order of top, right, bottom and left, in a single line.

Since 4.0.2 has been delayed further, I will setup a new test board and apply an IE fix. Personally, I hate IE - but we still have to cater for it's users.

I do not have a test board setup to try this on, but IE uses non-compliant CSS therefore it is easy to break. Perhaps, when they start losing more users of their browser they will change their ways. ...well, we can dream!!

[ndut]

tag for this :)

[RedTrinity]

Or to cut down on the CSS delete all margin settings in the #banner_ad_top and enter the following:
margin: 50px 150px 10px auto;

It does the same, and the values are in order of top, right, bottom and left, in a single line.

Ok, after about half an hour of trial and error, I managed to get this result which is balanced between both FF and IE:

http://www.theparentingsanctuary.com.au/newforum

Thats the best I can get it though... if I move the banner in any further by adjusting/increasing the right margin, it does that moving down thing in IE again (as per my 2nd screenshot in the last post).

Thanks for the help regardless syrus, at least its good enough to leave up now :D Hopefully it looks ok for other screen resolutions too (I'm using 1024x768 atm).

Will be keeping a lookout for future versions though, in hope I can get that banner in a little further without causing chaos in IE lol.

Personally, I hate IE - but we still have to cater for it's users.

Perhaps, when they start losing more users of their browser they will change their ways. ...well, we can dream!!

Tell me about it :rolleyes: I can't stand IE personally, its such a pain to work with. The only use I have for it is for testing purposes for those who do.

[Milad_ran]

how to use it in VB 3.8.4???

[syrus.xl]

how to use it in VB 3.8.4???

This modification is designed for vBulletin 4.0 as a workaround for an issue with the default header coding, it is not coded for vBulletin versions below this, due to major changes between the two versions.

[syrus.xl]

Ok, after about half an hour of trial and error, I managed to get this result which is balanced between both FF and IE:

http://www.theparentingsanctuary.com.au/newforum

Thats the best I can get it though... if I move the banner in any further by adjusting/increasing the right margin, it does that moving down thing in IE again (as per my 2nd screenshot in the last post).

Thanks for the help regardless syrus, at least its good enough to leave up now :D Hopefully it looks ok for other screen resolutions too (I'm using 1024x768 atm).

Will be keeping a lookout for future versions though, in hope I can get that banner in a little further without causing chaos in IE lol.



Tell me about it :rolleyes: I can't stand IE personally, its such a pain to work with. The only use I have for it is for testing purposes for those who do.

;) I have something in the 'pipeline' that will fix all these issues in one go. I just need to run some tests under 4.0.2 to make sure no major changes have been made. But the method I have used, will not break on any browser or even use additional CSS for positioning, that is all taken care of once and for all.

[enoobz]

Does this Mod working for vB 4.0.2? I just upgrade and cannot use it anymore.

[HRCHOSTING]

Does it also work with the Banner Rotate mod? I had been using it but after installing the rotate mod it failed. (before that it worked perfect, thanks for helping)

[RedTrinity]

;) I have something in the 'pipeline' that will fix all these issues in one go. I just need to run some tests under 4.0.2 to make sure no major changes have been made. But the method I have used, will not break on any browser or even use additional CSS for positioning, that is all taken care of once and for all.

Sounds great, look forward to it :)

[RedTrinity]

Any updates, Syrus?

[Bouncer222]

Hey syrus, I'm just wondering, where did you get that facebook looking bar thats at the bottom of your site?
Thanks.

[syrus.xl]

Hey syrus, I'm just wondering, where did you get that facebook looking bar thats at the bottom of your site?
Thanks.

If you check the following link you will see how everything is done on the site.
http://www.digitalport.co.uk/blogs/4/depth-look-behind-digital-port-21/

HTH.

[syrus.xl]

Any updates, Syrus?
ATM, I haven't had the time to update this - I have been inundated with vBulletin upgrades. Once I clear the back log, I will update this modification. :)

[RedTrinity]

BUMP again, sorry to nag! Just wanting to get the banners for our forum sponsors up in our header again - being a non-profit forum we rely on their support, so want to be able to offer the best positioning possible :)

[emath]

works on vb4.0.4 ?

[syrus.xl]

BUMP again, sorry to nag! Just wanting to get the banners for our forum sponsors up in our header again - being a non-profit forum we rely on their support, so want to be able to offer the best positioning possible :)
Hi RedTrinity,
Have you looked at my vBFlash Header Pro? That can use a banner rotator, plus it has many other features built-in.

Regards,

[Sax on the Web]

Works OK on Firefox, but IE v.7 is badly skewed.
I set in #banner_ad_top
margin-right:260px; as was advised above, but iot just widened the amrgin when IE7.
Picture attached.
Any help, please?

[championcycle]

sorry where do i put this code? bit new to all this..

[project-Buckfas]

Works perfect on 4.0.8

Thank You Syrus!

[hasidoo]

great mod.thanks a lot!!
It works with 4.0.8

[mccollin]

Does anyone know how to get the header ad not to wrap when someone compresses the page width in their browser. I noticed that digitalport.co.uk has a fixed width for every page. I'd rather have a minimum width the page compresses to so that it can be expanded wider, but not go narrower than the width of the header image plus the header ad size.

[syrus.xl]

Does anyone know how to get the header ad not to wrap when someone compresses the page width in their browser. I noticed that digitalport.co.uk has a fixed width for every page. I'd rather have a minimum width the page compresses to so that it can be expanded wider, but not go narrower than the width of the header image plus the header ad size.

Simply, set minWidth to what you require. Once the browser width is reduced to this setting it will stop from being fluid and stay at a fixed width.

If you're not using vB4 then you will need to add the definition to your main body styling like this:
body {
min-width:950px;
}
HTH.

[mccollin]

Perfect, thanks... its the doc_minWidth stylevar.

[Ocean-Wonders]

Works great im just having one small issue.

It's moving the welcome bar (Notifications, Profile,Settings,Log out) below the banner.

Can anyone help me out ?

[ALBCODERS]

Nice ! Thankyou.

[oddmud]

Can't find any of the code you've listed here in vB 4.1

Any updates?

[ALBCODERS]

Can't find any of the code you've listed here in vB 4.1

Any updates?
I just tested it on (vBulletin 4.1.0 Beta 1) and works well.

you need to delete this code:

<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>

and replace with the new code

<div id="header_wrapper">
<div id="logo_main">
<a name="top" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a>
</div>
<div id="banner_ad_top">
{vb:raw ad_location.global_header2}
</div>
</div>
<!-- End Custom Header -->

So do not forget to add css codes into vbulletin.css and delete
{vb:raw ad_location.global_header2}
from header template so everything work well as syrus.xl posted.

[oddmud]

I'm still getting huge space added around my header logo... any ideas?

http://www.goaliecrease.net/

[oddmud]

Anyone?!?!

[katim110]

any updates pleaseee for vb 4.1.3

[BlueCheri]

I was looking for it, great work.

[Alecsmith]

can anyone pls update this for Vb 4.1.5 :D

[syrus.xl]

can anyone pls update this for Vb 4.1.5 :D

All you need to do is set a define for position for the banner ad div. This will ensure it aligns correctly regardless of what updates vBulletin make in the future.

In theory, the position css should also be set for the logo, but it isn't actually required to make it work.

[FreakyG'sMom]

All you need to do is set a define for position for the banner ad div. This will ensure it aligns correctly regardless of what updates vBulletin make in the future.

In theory, the position css should also be set for the logo, but it isn't actually required to make it work.

Nope. Doesn't work. Didn't work in 4.1.9. And doesn't work in 4.1.10.

[bing11]

thanks

[vimarc]

With Little modifications it is working with version 4.2.0 .. have a look

www.talkinwebforum.com

[dany_danay]

With Little modifications it is working with version 4.2.0 .. have a look

www.talkinwebforum.com
help us showing the code

[donkspurs]

I can only get this looking right in Internet Explorer. In all other browsers I get some odd behaviour.

The more I stretch the browser window out, the advert follows it correctly to the right side up to a certain point and then it suddenly jumps back over to the left and then continues moving right again. I can't work out why it does this, but it means for resolutions on 1280x800 the position of the advert doesn't look nice.

There seems to be a difference when logged in compared to when logged out. When I'm logged in, this strange behaviour with the advert isn't there and it correctly moves to the right side as I stretch the window out. It's only when I'm logged out that it causes trouble.

Here are two screenshots, from within Chrome. One is logged out, the other is logged in. If anyone can help with this it would be greatly appreciated - thanks!

Logged Out Screenshot (http://gyazo.com/1c592741190e19f7ee3af465e9932537.png)

Logged In Screenshot (http://gyazo.com/9e21f05da59f37eb7a96dd04a50ffb6e.png)