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.

[syrus.xl]

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

PHP Code:

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


PHP Code:

margin-bottom: 10px; 


Or to cut down on the CSS delete all margin settings in the #banner_ad_top and enter the following:

PHP Code:

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]

Originally Posted by syrus.xl

Or to cut down on the CSS delete all margin settings in the #banner_ad_top and enter the following:

PHP Code:

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

Originally Posted by syrus.xl

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

Originally Posted by Milad_ran

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]

Originally Posted by RedTrinity

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

Originally Posted by syrus.xl

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?