vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   Mini Mods - RDS - Sponsor List using Javascript - Clean & Smooth (https://vborg.vbsupport.ru/showthread.php?t=234541)

BlackJacket 01-29-2010 10:00 PM
RDS - Sponsor List using Javascript - Clean & Smooth
 
1 Attachment(s)
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 -

Code:
#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 -

HTML Code:
{vb:raw ad_location.ad_footer_end}
</div>
and below that add -

HTML Code:
<!-- 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 -

HTML Code:
<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.

https://vborg.vbsupport.ru/attachmen...1&d=1264865617

If you use this, please mark installed. :)

BlackJacket 01-30-2010 12:00 PM
Reserved for Updates

leclownos 01-31-2010 07:10 AM
Merci pour ce hack!!

Robru 01-31-2010 12:03 PM
Works not good with every style !

sKippah 02-01-2010 10:44 AM
would be nice to get this as a widget

BlackJacket 02-01-2010 11:32 AM
Quote:
Originally Posted by Robru (Post 1971193)
Works not good with every style !
What problem are you having?

BlackJacket 02-02-2010 02:55 PM
Quote:
Originally Posted by sKippah (Post 1972048)
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 03-02-2010 07:46 AM
Quote:
Originally Posted by Robru (Post 1971193)
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 03-02-2010 08:30 AM
another option for the colorize.js can be

Code:
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 04-21-2010 07:01 AM
is there anyway this Template edit can be changed into a template variable

to call for the template within existing templates

for example

Code:

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

instead of


Code:

{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 04-23-2010 01:55 PM
Quote:
Originally Posted by sKippah (Post 1972048)
would be nice to get this as a widget
Noone?

Shadawg 04-24-2010 04:18 PM
Looks like a good mod, tagged, will try out when got the time.....

ndut 05-31-2010 07:02 PM
looks good

joomla 06-01-2010 09:47 PM
Thanks very good. joomla add logo would be better :)

ricardoNJ 07-31-2010 06:30 PM
Testing in 3.8.4 :P...

Nano_ 08-04-2010 10:28 PM
List works (i remove all and use only 1, for test), but is falling outside container:
http://a.imageshack.us/img836/6571/e...2809643316.png

And how i make a image and put here?

sivaganeshk 08-08-2011 12:19 PM
nice..

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

archet1337 08-08-2011 09:05 PM
Very nice! Thanks for sharing :)

sivaganeshk 08-11-2011 04:48 PM
has conflict with CKeditor - not appearing. please make some changes.


All times are GMT. The time now is 07:13 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01158 seconds
  • Memory Usage 1,798KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (4)bbcode_code_printable
  • (3)bbcode_html_printable
  • (4)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (19)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete