RDS - Sponsor List using Javascript - Clean & Smooth

[BlackJacket]

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 (http://web-kreation.com/demos/sponsor_list_with_mootools_1.2/).

All credit goes to Web-kreation (http://web-kreation.com/index.php/tutorials/sponsor-list-with-css-sprites-and-mootools-1-2/) 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 (https://vborg.vbsupport.ru/showthread.php?t=228628) 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 (http://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.

https://vborg.vbsupport.ru/attachment.php?attachmentid=111391&stc=1&d=1264865617

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]

Works not good with every style !

What problem are you having?

[BlackJacket]

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]

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

https://vborg.vbsupport.ru/external/2010/03/77.png

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

[sKippah]

would be nice to get this as a widget

Noone?

[Shadawg]

Looks like a good mod, tagged, will try out when got the time.....

[ndut]

looks good

[joomla]

Thanks very good. joomla add logo would be better :)

[ricardoNJ]

Testing in 3.8.4 :P...

[Nano_]

List works (i remove all and use only 1, for test), but is falling outside container:
http://a.imageshack.us/img836/6571/egamingforum12809643316.png

And how i make a image and put here?

[sivaganeshk]

nice..

removed border: 1px solid #eee; :P
and it looks great !!

[archet1337]

Very nice! Thanks for sharing :)

[sivaganeshk]

has conflict with CKeditor - not appearing. please make some changes.