Forum Home Enhancements - Align Logo with Header Advert 2 (No Drop)

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
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.

[Sax on the Web]

Originally Posted by syrus.xl

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

Thanks 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]

Originally Posted by HRCHOSTING

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

Happening on our forum too 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]

Originally Posted by HRCHOSTING

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]

Originally Posted by daveaite

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):

PHP Code:

#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 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

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]

Originally Posted by daveaite

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]

Originally Posted by HRCHOSTING

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.