[Forum] Banner placement next to logo?

[CuseRich]

How can I place a banner next to my logo image at the top of my forum without it appearing above or below it?

[forumben]

In your control panel, it should have a section called advertising. Go in there and you should be able to figure it out. I havent used it yet but just looking over it it seem fairly simple. Just copy past.

[CuseRich]

I don't have the advertising section on mine, I"m not setup for the adsense program.

Can this be done with the style settings of vBulletin?

[CuseRich]

Anyone? This is the last thing I need to get done to finish my forum on vB 4.0.

[Colchesterhunter]

Me too, I have tried advertising and can't get it to work

[CuseRich]

So I'm guessing this can't be done then?

[SLY LS1]

I can't get the advertising to work either..

Does anyone know who it works ?

[vivamexico55]

I can't get the advertising to work either..

Does anyone know who it works ?

Sure, there's an advertising section in the AdminCP, and you can select places to insert ad codes. However, I think you can't place an ad NEXT to a logo, it goes below it? So you'd need to do a modification I guess.

I think someone mentioned there's 2 places in the top ad section, so you can try inserting your ad code in both boxes to see if one of them places the ad to the right of the logo.

[waynem]

The right box in the control panel advertising tool will place the banner to the right of the logo, but also below it.

Using this feature requires that you have a 3rd party banner serving program like OpenX, and you place the invocation code from that product in this space to make it work. Looks nice, too.

[abdulbasitsaeed]

Yup, been facing the same problem as mentioned above. Whether you use the Advertising Manager in Admin CP, or the Ad Templates in Style Editor, the banner / ad gets placed either above or below the logo, not next to it.

I hope they will be fixing this in version 4.0.1.

[syrus.xl]

I had the same issue...

What I did was re-code the header and added additional CSS so the banner rotator would not push my logo out. I've attached a screen capture of my header showing the modified header.

It is quite simple to change, I have left the original banner ad locations in place, and added my own - but either one could be easily coded into the new header.

[waynem]

Cool, could you please share the exact code changes you made to accomplish this?

[syrus.xl]

I'll have to modify it slightly, because I have additional coded DIV's that are not needed. I'll post the code I done in awhile, once I have redone it.

I'll add the right ad block so it works with the default vBulletin Advertising Management AdminCP.

[syrus.xl]

How to set up the Logo and one Advert so they are aligned horizontally

If you try to use the default vBulletin 4.0 code to align an advert along side your logo, it will not work. I coded this workaround, because the default code would not work the way I wanted it to.

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.

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.

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

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.

Hope this helps some of you with this issue!

[vivamexico55]

I'll be trying this, subscribing to this thread, thank you syrus =)

If you try to use the default vBulletin 4.0 code to align an advert along side your logo, it will not work. I coded this workaround, because the default code would not work the way I wanted it to.

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.

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.

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;
     width:50%;
     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 -->

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.

Hope this helps some of you with this issue!