Mini Mods - Random Side Banners Outside Main Body in Fixed Position

Random Side Banners

Quite a few people have asked how do you add side banners outside of your forum's main body and no one has offered a solution that I know of.

This mod allows you to have random banners outside of your forums main body in a fixed position. The banners will rotate with every unique visit to your forums similar to the dszuecs's "New way to force guests to register" Mod. The php code to make the banners rotate could possibly be written better, right now you don't always get a different random banner unless you completely close your browser and come back with a new session it seems.

The rotate.php code is not mine I found it not only in dszuecs's New way to force guests to register Mod but also online. I did however use his Mod as a base to get this Mod done.

If anyone can fix the rotate.php file so that you get a random with every page load that would be great.

The banners used in this mod have the dimensions of height:435px width:140px but you can change them to any size you want.

Included are the files to upload to your FORUMROOT using FTP:

Files included are:

1. left_banner_rotate.php
2. right_banner_rotate.php
3. images (includes 1 png file you can use as a template for your banners)
4. additional_css.txt (code to add to your additional_css)
5. header_template.txt (code to add to your header template)

You will need to make 2 manual template edits to your additional.css and your header template.

The code included in the additional_css file can be added at the very end of your additional.css file.

div.left-banner {
background:url(left_banner_rotate.php);
background-repeat: no-repeat; 
display:block;
height:435px;
width:140px;
position:fixed;
left:5px;
top:50px;
}
div.right-banner {
background:url(right_banner_rotate.php);
background-repeat: no-repeat; 
display:block;
height:435px;
width:140px;
position:fixed;
right:5px;
top:50px;
}

The code included in the header_template file must be added at the very top before all other code in your header template.

<div class="left-banner"></div>
<div class="right-banner"></div>

This is my first Mod contribution you guys so be gentle with me. I am just learning vBulletin's way of doing things and hopefully I can contribute other small Mods in the future.

[Toorak Times]

Originally Posted by CAG CheechDogg

Do you have a link to your site so I can take a look?

www.tooraktimes.com.au

[CAG CheechDogg]

Do you have it installed on a particular style?

[Toorak Times]

Originally Posted by CAG CheechDogg

Do you have it installed on a particular style?

No mate, a LOT of mods though

[mangmel]

thanks..............

[RichieBoy67]

Originally Posted by Toorak Times

No mate, a LOT of mods though

I haven't looked into the entire issue but from a quick peek at your site I see a pretty severe horizontal scroll. Probably not noticeable with high res screens but noticeable on my laptop using 1920 resolution.

[yjmalmsteen]

Great mod, thanks!
But can i use it without rotating option?and how?
I have to use still images there.
Thanks

[TheLastSuperman]

Originally Posted by yjmalmsteen

Great mod, thanks!
But can i use it without rotating option?and how?
I have to use still images there.
Thanks

You *should* be able to with some small changes...

So take this:

div.left-banner {
background:url(left_banner_rotate.php);
background-repeat: no-repeat; 
display:block;
height:435px;
width:140px;
position:fixed;
left:5px;
top:50px;
}
div.right-banner {
background:url(right_banner_rotate.php);
background-repeat: no-repeat; 
display:block;
height:435px;
width:140px;
position:fixed;
right:5px;
top:50px;
}

Change to:

div.left-banner {
background:#ffffff;
display:block;
height:435px;
width:140px;
position:fixed;
left:5px;
top:50px;
}
div.right-banner {
background:#ffffff;
display:block;
height:435px;
width:140px;
position:fixed;
right:5px;
top:50px;
}

*Now the rotating .php file is no longer the background and it's just a white background .

Now take this:

<div class="left-banner"></div>
<div class="right-banner"></div>

And change it, you must add in your ad/banner codes or anything you want shown inside the div tags, here is an example:

<div class="left-banner">
NEW CODE HERE IF ADS OR BANNERS INCLUDING Google Ads/Ebay Partnership Ads/Openx or Revive Ad Server codes go HERE.
</div>
<div class="right-banner">
<a href="www.vbulletin.org" target="_blank"><img src="images/mybannerimage.png" alt="My Banner Title" /></a>
</div>

The top you could paste ad/banner codes in between the div tags, on the bottom "right-banner" I simply showed a basic ahref tag wrapped around an image i.e. a clickable banner which is very simple to do, this is also an example of what you said is a "still image" but it's linked to a site .

To adjust width/height simply change the following lines:

height:435px;
width:140px;

To the new values i.e. if it's a 300x250 ad simply change those to that, otherwise you could use 100% value instead of 435px (if it's too big then the div wrapping this does not have height defined or rather it's not inherited etc).

Let me know if this works for you or what didn't work .

[CAG CheechDogg]

Thanks SP ..... just saw this .....

[MarkFL]

Originally Posted by CAG CheechDogg

Thanks SP ..... just saw this .....

I would be willing to automate the CSS and header template edits, and add some product settings to allow the user to define the size of the banners if you want. If you are interested, shoot me a PM with your email addy, and I will send you the revised product.

[CAG CheechDogg]

Originally Posted by MarkFL

I would be willing to automate the CSS and header template edits, and add some product settings to allow the user to define the size of the banners if you want. If you are interested, shoot me a PM with your email addy, and I will send you the revised product.

Go ahead and handle business Mark ... release it for all to enjoy my Man ...