The Arcive of Official vBulletin Modifications Site.

About Developer · **Released**: 07-30-2009

Hello All,

I have been waiting for the stand alone version of frontpage slide show to get it integrate it with vba. However the creators have been very disappointing in terms of delivering it. Hence, I have started searching for alternative and finally got one.

This hack was written by webdeveloperplus and I am only giving instructions in how to integrate it to vba. However this works on any page you would like it to appear.

Live Demo

Live Demo Integrated to vba

So let the fun begin and integrate this in ONLY THREE STEPS

First go to vBulleting ACP --> Style Manager --> Edit Templates

Open "headinclude" and ADD the following code at the end of it

Code:

<!-- Rotating Code -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<!-- / Rotating Code -->

Second go to vBulleting ACP --> Style Manager --> Main CSS

Scroll to the bottom of the page where it says "Additional CSS Definitions"; which is partitioned in to two parts ADD the following code to the second partition.

Code:

/* ***** Rotating Articles ***** */
#featured{
    width:400px;
    padding-right:250px;
    position:relative;
    height:250px;
    background:#fff;
    border:5px solid #ccc;
}

#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:400px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}
#featured .ui-tabs-panel{
    width:400px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}
#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px;
    background: url('http://demo.webdeveloperplus.com/featured-content-slider/images/transparent-bg.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
    text-decoration:underline;
}

Third and Last, go to vBulleting ACP --> vBa CMPS --> Add Module --> Template Module

Ok now we'll have to create the actual box

Module Title: Rotating Articles
Active: Yes
Template to incluce: adv_portal_rotating_articles
Style: "Pick the Style you would like to add it to" Please note if you are adding it to more than one style make sure that you do the previous two steps to all of them.

Template Content: ADD the following code

Code:

<div id="featured" >
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
    </ul>
    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="images/image1.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image2.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
        <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image3.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >35 Amazing Logo Designs</a></h2>
        <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
        </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="images/image4.jpg" alt="" />
        <div class="info" >
        <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
        <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
        </div>
    </div>
</div>

<!-- Rotating Code -->
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>
<!-- / Rotating Code -->

Use Module Wrapper Template: No
Then just SAVE.

Then just add it to whatever page you would like it to show in vba

ok now it will be working perfectly except for the pictures which needs to be changed as well as the TEXT

To change the small Pictures please change the green text above
To change the small picture' texts please change the dark green text above
To change the larger pictures please change the orange text above
To change the Larger text in the larger pictures please change the brown text above
To change the smaller text in the larger pictures please change the purple text above

I hope you all are familiar with the <a href="..."> as a the larger text has one to link to the thread or whatever you want as well as the smaller text has one right after it with a click-able "read more"

[OPTIONAL] Forth Step (if you would like to add more rows)
Please check DGF's Post by CLICKING HERE

I hope this is easy to follow.

ENJOY

Gamelobby · #42 12-01-2010, 03:22 AM

Wow this really screwed up my CMPS page. lol
Not only out of wack, but forced a different skin..!?

Alsohow do i make it so when you click on the small image it just changes the big image.? (instead of going to the link)

Code:

<div id="featured" >
    <ul class="ui-tabs-nav">

        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=226"><img src="Sports/rotating/Madden11_80x47.png" alt="" /><span>Madden 11</span></a></li>

        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=229"><img src="Sports/rotating/NBA2K11_80x60.png" alt="" /><span>NBA 2K11</span></a></li>

        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=224"><img src="Sports/rotating/NHL11_80x60.png" alt="" /><span>NHL 11</span></a></li>

        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=34"><img src="Sports/rotating/Forza_White_80x60.png" alt="" /><span>Forza 3</span></a></li>
    </ul>

    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="Sports/rotating/madden11_400x250.jpg" alt="" />
        <div class="info" >
        <h2><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=226" >Madden 11</a></h2>
        <p>Check the Gamelobby Madden 11 SIM League....<a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=226" >read more</a></p>
        </div>
    </div>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="Sports/rotating/nba2k11_354x250.jpg" alt="" />
        <div class="info" >
        <h2><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=229" >NBA 2K11</a></h2>
        <p>Check the Gamelobby NBA 2K11 SIM League....<....<a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=229" >read more</a></p>
        </div>
    </div>
    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="Sports/rotating/NHL-11-400x242.jpg" alt="" />
        <div class="info" >
        <h2><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=224" >35 Amazing Logo Designs</a></h2>
        <p>Check out NHL 11 on Gamelobby....<a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=224" >read more</a></p>
        </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="Sports/rotating/forza_black_400x249.png" alt="" />
        <div class="info" >
        <h2><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=34" >Forza 3</a></h2>
        <p>Check out the Gamelobby Racing League....<a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=34" >read more</a></p>
        </div>
    </div>
</div>

<!-- Rotating Code -->
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true);
    });
</script>
<!-- / Rotating Code -->

Gamelobby · #43 12-01-2010, 05:43 AM

Quote:

Originally Posted by 5starpool

OK, I need to ask a silly question please.

How do I center this on the page? I am not a css coder by any means, and while I love this, I can't get it centred, and it doesn't look great being left aligned.

add center brackets on both ends.

Code:

<center>
html code
</center>

Gamelobby · #44 12-01-2010, 08:54 PM

It doesn't work hardly at all on my CMPS page (see errors up 2 posts), but i put it on a custom html page to get it right before i attempt the CMPS again.

But I still got issues..
http://www.gamelobby.com/Forum/edito...edit&pg=slider

Thanks

Code:

<div id="featured" >
    <ul class="ui-tabs-nav">

        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://www.gamelobby.com/Forum/Sports/rotating/Madden11_80x47.png" alt="" /><span>Madden 11</span></a></li>

        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://www.gamelobby.com/Forum/Sports/rotating/NBA2K11_80x60.png" alt="" /><span>NBA 2K11</span></a></li>

        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://www.gamelobby.com/Forum/Sports/rotating/NHL11_80x60.png" alt="" /><span>NHL 11</span></a></li>

        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://www.gamelobby.com/Forum/Sports/rotating/Forza_White_80x60.png" alt="" /><span>Forza 3</span></a></li>
    </ul>

    <!-- First Content -->
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="http://www.gamelobby.com/Forum/Sports/rotating/madden11_400x250.jpg" alt="" />
        <div class="info" >
        <h2><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=226" >Madden 11</a></h2>
        <p>Check the Gamelobby Madden 11 SIM League....<a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=226" >read more</a></p>
        </div>
    </div>
    <!-- Second Content -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="http://www.gamelobby.com/Forum/Sports/rotating/nba2k11_354x250.jpg" alt="" />
        <div class="info" >
        <h2><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=229" >NBA 2K11</a></h2>
        <p>Check the Gamelobby NBA 2K11 SIM League....<....<a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=229" >read more</a></p>
        </div>
    </div>
    <!-- Third Content -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="http://www.gamelobby.com/Forum/Sports/rotating/NHL-11-400x242.jpg" alt="" />
        <div class="info" >
        <h2><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=224" >35 Amazing Logo Designs</a></h2>
        <p>Check out NHL 11 on Gamelobby....<a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=224" >read more</a></p>
        </div>
    </div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
        <img src="http://www.gamelobby.com/Forum/Sports/rotating/forza_black_400x249.png" alt="" />
        <div class="info" >
        <h2><a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=34" >Forza 3</a></h2>
        <p>Check out the Gamelobby Racing League....<a href="http://www.gamelobby.com/Forum/forumdisplay.php?f=34" >read more</a></p>
        </div>
    </div>
</div>

<!-- Rotating Code -->
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true);
    });
</script>
<!-- / Rotating Code -->

Digital Jedi · #45 01-07-2011, 05:20 AM

Quote:

Originally Posted by MagicThemeParks

Just added it to a second site :up:

Working Demo Here: http://www.FantasyLeagueForums.com

Thanks for this quick and effective mod!

I am totally ripping off that layout. :up:

MagicThemeParks · #46 01-09-2011, 03:18 PM

Quote:

Originally Posted by Digital Jedi

I am totally ripping off that layout. :up:

LOL....no problem.

Digital Jedi · #47 01-12-2011, 03:07 AM

Well, got it working on my site. You just need to experiment with CSS a lot to make it match. I phrased out my description and titles so I could minimize editing the content each time I want to change it.

www.cogonline.net

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04355 seconds Memory Usage 2,321KB Queries Executed 22 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (6)bbcode_code (3)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (7)post_thanks_box (7)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (7)post_thanks_postbit_info (6)postbit (7)postbit_onlinestatus (7)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!