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.

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

Originally Posted by 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.

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]

Originally Posted by oddmud

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:

PHP 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

PHP 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