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.

[BlueCheri]

I was looking for it, great work.

[Alecsmith]

can anyone pls update this for Vb 4.1.5

[syrus.xl]

Originally Posted by Alecsmith

can anyone pls update this for Vb 4.1.5

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]

Originally Posted by syrus.xl

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]

Originally Posted by vimarc

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

Logged In Screenshot