Mini Mods - RDS - Sponsor List using Javascript - Clean & Smooth

Javascript Sponsor List -

What this does -
The JS Sponsor List puts a clean sponsor list at the bottom of your website. To view a demo, please click here.

All credit goes to Web-kreation as this is their mod. I am making it useful for VBulletin.

What you need to know -
You will need to know how to make sprites. You can find a great tutorial by visiting the Web-Kreation link above.

To Install -
It is highly recommended that you use Lynne's Additional CSS Mod before getting started.

Once you have installed Lynne's Additional CSS do the following -

AdminCP -> Styles and Templates -> (current style) -> edit templates

Double click on CSS Templates and find Lynne's Additional_css.css template and open it. Once you have it opened, add the following lines to it -

#sponsors {
    width: 940px;
    display: block;
    clear: both;
    border: 1px solid #eee;
    padding: 10px 5px;
    margin: 15px auto;
    text-transform: uppercase;
    font-weight: bold;
    color: #666;
}
#sponsors span {
    display: block;
    float: left;
    padding: 0 10px;
    height: 20px;
    line-height: 20px;
}
#sponsors a {
    display: block;
    float: left;
    height: 20px;
    padding: 0 10px;
}
a.mootools {background: url(images/mootools.jpg) no-repeat 0 0; width:85px;}
a.drupal {background: url(images/drupal.jpg) no-repeat 0 0; width:74px;}
a.technorati {background: url(images/Technorati.Jpg) no-repeat 0 0; width:107px;}
a.jquery {background: url(images/jquery.jpg) no-repeat 0 0; width:63px;}
a.miro {background: url(images/miro.jpg) no-repeat 0 0; width:23px;}
a.mozilla {background: url(images/mozilla.jpg) no-repeat 0 0; width:63px;}
a.nbc {background: url(images/nbc.jpg) no-repeat 0 0; width:75px;}
a.twitter {background: url(images/twitter.jpg) no-repeat 0 0; width:87px;}
a.wordpress {background: url(images/wordpress.jpg) no-repeat 0 0; width:20px;}
 
    /*mouseover*/
    a:hover.mootools, 
    a:hover.drupal, 
    a:hover.technorati, 
    a:hover.jquery, 
    a:hover.miro, 
    a:hover.mozilla, 
    a:hover.nbc, 
    a:hover.twitter, 
    a:hover.wordpress {background-position: 0 -20px;} /* reveal color version */

Adjust what you need to then click save.

Next open up your Footer template and add the following -

Find -

{vb:raw ad_location.ad_footer_end} 
</div>

and below that add -

<!-- sponsors -->
<div id="sponsors">
    <span>Our Sponsors:</span>
 
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="mootools"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="drupal"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="technorati"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="jquery"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="miro"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="mozilla"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="nbc"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="twitter"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="wordpress"></a>
 
    <div class="clearfix"></div>
</div>
<!-- /end sponsors -->

Edit where you need to then click save.

Next open up your header template and do the following -

At the very beginning of your Header template add -

<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/colorize.js" type="text/javascript"></script>

Download the attached .zip for the images you will need. Create a directory in your "images" directory called "Sponsors" and place the sponsor sprites there. Place the JS directory in your forum root (www.yoursite.com/forum)

If you did everything correctly, you should have a beautiful list at the bottom of your community. If you do not have a beautiful list, you did something wrong.



If you use this, please mark installed.

[BlackJacket]

Reserved for Updates

[leclownos]

Merci pour ce hack!!

[Robru]

Works not good with every style !

[sKippah]

would be nice to get this as a widget

[BlackJacket]

Originally Posted by Robru

Works not good with every style !

What problem are you having?

[BlackJacket]

Originally Posted by sKippah

would be nice to get this as a widget

I will work on a way to make this useful as a widget. Thanks for the info.

[owning_y0u]

Originally Posted by Robru

Works not good with every style !

same problem here..

the <span> is falling outside the <div> container but this can be inherit that i placed it below the navbar...



Update#1
fixed.

btw if your images are lager then 20 pix in heights you also have to change the colorize.js

[owning_y0u]

another option for the colorize.js can be

a.cm:hover { background-position:0 90px; }

where 90px is the start of the colored version of the image so if your image = 200px height you should change this to 100

[TheSupportForum]

is there anyway this Template edit can be changed into a template variable

to call for the template within existing templates

for example

 
{vb:raw ad_location.ad_footer_end} 
</div>
{vb:raw sponsors}

instead of

 
{vb:raw ad_location.ad_footer_end} 
</div>
<!-- sponsors -->
<div id="sponsors">
    <span>Our Sponsors:</span>

    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="mootools"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="drupal"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="technorati"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="jquery"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="miro"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="mozilla"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="nbc"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="twitter"></a>
    <a href="http://web-kreation.con/index.php/blog" title="Sponsor" class="wordpress"></a>

    <div class="clearfix"></div>
</div>
<!-- /end sponsors -->