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.

[ErnestA]

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

[syrus.xl]

Originally Posted by ErnestA

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]

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

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]

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

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