Announcement

Collapse
No announcement yet.

Banner placement next to logo?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts
    vivamexico55
    Senior Member

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


    Originally posted by syrus.xl View Post
    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:
    Code:
    .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:
    Code:
    /* 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:
    Code:
    {vb:raw ad_location.global_header2}
    In the header template find and remove:
    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="Powered by vBulletin" /></a></div>
    Replace with this code:
    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!

    Leave a comment:

  • syrus.xl
    Senior Member

  • syrus.xl
    replied
    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:
    Code:
    .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:
    Code:
    /* 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:
    Code:
    {vb:raw ad_location.global_header2}
    In the header template find and remove:
    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="Powered by vBulletin" /></a></div>
    Replace with this code:
    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!
    syrus.xl
    Senior Member
    Last edited by syrus.xl; Tue 5 Jan '10, 3:19pm.

    Leave a comment:

  • syrus.xl
    Senior Member

  • syrus.xl
    replied
    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.

    Leave a comment:

  • waynem
    Senior Member

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

    Leave a comment:

  • syrus.xl
    Senior Member

  • syrus.xl
    replied
    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.
    Attached Files

    Leave a comment:

  • abdulbasitsaeed
    Member

  • abdulbasitsaeed
    replied
    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.

    Leave a comment:

  • waynem
    Senior Member

  • waynem
    replied
    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.

    Leave a comment:

  • vivamexico55
    Senior Member

  • vivamexico55
    replied
    Originally posted by SLY LS1 View Post
    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.

    Leave a comment:

  • SLY LS1
    New Member

  • SLY LS1
    replied
    I can't get the advertising to work either..

    Does anyone know who it works ?

    Leave a comment:

  • CuseRich
    Senior Member

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

    Leave a comment:

  • Colchesterhunter
    New Member

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

    Leave a comment:

  • CuseRich
    Senior Member

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

    Leave a comment:

  • CuseRich
    Senior Member

  • CuseRich
    replied
    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?

    Leave a comment:

  • forumben
    New Member

  • forumben
    replied
    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.

    Leave a comment:

  • CuseRich
    Senior Member

  • CuseRich
    started a topic [Forum] Banner placement next to logo?

    Banner placement next to logo?

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

Related Topics

Collapse

Working...
X