PDA

View Full Version : RDS - Sponsor List using Javascript - Clean & Smooth



admin
03-02-2010, 04:34 PM
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 (http://www.vbulletin.org/forum/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.

Screen:
http://img.photo.zing.vn/file_uploads/gallery/1024x768/2010/02/03/04/73741265189661.jpg