Integrating WebDeveloperPlus' Featured Content Slider in vba or any other page

[Omar Al-Ansari]

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 (http://webdeveloperplus.com/) 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 (http://demo.webdeveloperplus.com/featured-content-slider/)
Live Demo Integrated to vba (http://www.deleelik.com/)


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

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

/* ***** 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
<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 (https://vborg.vbsupport.ru/showpost.php?p=1859466&postcount=15)

I hope this is easy to follow.

ENJOY:D

[Andy69]

will this work on just vb without vba ?

[Omar Al-Ansari]

will this work on just vb without vba ?

Yes, it works on any kind of website:D

[Andy69]

the wording to the right of the pictures will not change ?

am i doing something wrong no matter what i change it 2 it is still showing the original wording ie

35 amazing logo desighns etc ?

anyway to fix this !

edit:
got it working this is a really nice modifcation thanxs

[Andy69]

on a second note it there anyway to add more boxes without it stretching the right side box ?

is this dependent on were u have it for the space etc ?

[Omar Al-Ansari]

on a second note it there anyway to add more boxes without it stretching the right side box ?

is this dependent on were u have it for the space etc ?

When you add more boxes you are going to need to change the CSS code as well to accommodate it as well.

Sorry but my knowledge in CSS is very basic.

I hope someone else can help you in this.

[goxy63]

Looks great and its free :D

will install right now on my test forums

Cheers

[DGF]

nice, i love it..

But i hope someone could change it to make it possible with more rows

[Alfa1]

It would be great if this could be set to grab image, title and teaser from a predefined forum. Similar to how vba's recent_threads or news module works.

[bobster65]

It would be great if this could be set to grab image, title and teaser from a predefined forum. Similar to how vba's recent_threads or news module works.

sounds like you just got a new project to tackle ;)

[saqib_jutt]

hello dear,

just a quick question, would this work on forums main page, because i dunt have vba and if it does work on forum main page or any page then how to do all settings,

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

i dunt have any understanding of 3rd step, because i dunt use vba on my forums.

Help Required to set up on main forum page.

Regards
Saqib

[bobster65]

hello dear,

just a quick question, would this work on forums main page, because i dunt have vba and if it does work on forum main page or any page then how to do all settings,

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

i dunt have any understanding of 3rd step, because i dunt use vba on my forums.

Help Required to set up on main forum page.

Regards
Saqib

if you are going to use this on the FORUMHOME template, just add the template content from Step 3 into the FORUMHOME template in the location you want it to be displayed and disregard all of those settings, those are specifically for vBa only.

[Omar Al-Ansari]

nice, i love it..

But i hope someone could change it to make it possible with more rows

You know what would even be better? If someone can take this code to create a product :)
I wish I know how to do it, I would have done it in the first instance

It would be great if this could be set to grab image, title and teaser from a predefined forum. Similar to how vba's recent_threads or news module works.

if I can get the support or at least someone shows me where to start I would take this as a project. I would love to learn how to convert this to a product.

sounds like you just got a new project to tackle ;)

:)

hello dear,

just a quick question, would this work on forums main page, because i dunt have vba and if it does work on forum main page or any page then how to do all settings,

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

i dunt have any understanding of 3rd step, because i dunt use vba on my forums.

Help Required to set up on main forum page.

Regards
Saqib

if you are going to use this on the FORUMHOME template, just add the template content from Step 3 into the FORUMHOME template in the location you want it to be displayed and disregard all of those settings, those are specifically for vBa only.



Thanks Bobster65

[DGF]

You know what would even be better? If someone can take this code to create a product :)
I wish I know how to do it, I would have done it in the first instance



if I can get the support or at least someone shows me where to start I would take this as a project. I would love to learn how to convert this to a product.



:)







Thanks Bobster65

Someone pleas help him or us hehe... simply the best this one

[DGF]

just follow this....

Style & templates -> Style manager -> edit templates -> adv_portal_rotating_articles

add:
<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>

AFTER

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

You could later continue with 6,7 etc ( look red number )

Then add:
<!-- Fifth Content -->
<div id="fragment-5" 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>


AFTER

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


Then go to Style & Templates -> Stylemanager -> Main CSS
and scroll to the bottom( second section )

Change the heights here ( marked with red )

/* ***** 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;
}

This worked for me...:):)

[saqib_jutt]

is there any possibility if we can use this in notices.
it does show in notice but doesnt rotate.

any idea ?????????

[Omar Al-Ansari]

is there any possibility if we can use this in notices.
it does show in notice but doesnt rotate.

any idea ?????????

which template are you trying to include it in?

[TheLastSuperman]

Thanks! 3.8.3 Forum Home and tested in Member Profile too with various code, downloaded images and js files per url's given so I wouldn't be using their bandwidth and just so I have them and now it's all internal - nice :D

Edit: Ohh and quick thought everyone, find the url for the arrow pointer in the code above and copy/paste into browser then you can change and make yourself a new pointer or just make one w/o donwloading the other and simply replace w/ the new url of the one you made and uploaded :D

[Omar Al-Ansari]

Thanks! 3.8.3 Forum Home and tested in Member Profile too with various code, downloaded images and js files per url's given so I wouldn't be using their bandwidth and just so I have them and now it's all internal - nice :D

Edit: Ohh and quick thought everyone, find the url for the arrow pointer in the code above and copy/paste into browser then you can change and make yourself a new pointer or just make one w/o donwloading the other and simply replace w/ the new url of the one you made and uploaded :D

Thanks TheLastSuperman,

I will be updating those and I am in the process to convert this into a product hopefully when I am done all of this will be implemented.

[Qwest]

Can't wait for the product. I'm watching this.

[TheLastSuperman]

Can't wait for the product. I'm watching this.

Why wait? Simple if you follow directions and spare a few minutes :D

http://www.tournamentgamingworld.com/online and I'm still working on the entire box up top but so far some image links to the tournament forums then this mod and now something on the right... still thinking ;) but seriously you can add it then replace with product later.

S-MAN

[NTMID8]

Is there any way to make this scale with a fluid style?

[Waiter]

It doesn't work in my site :(

the system doesn't move the slide...

[Mike-D]

<!-- 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 -->In case if someone wants to know where to get the AJAX Libraries: AJAX Libraries (http://code.google.com/intl/de-DE/apis/ajaxlibs/documentation/#jquery)

[jkcerda]

tagged

[d0cpaul]

Yes, it works on any kind of website:D

How would i implement this on Wordpress?

Could anyone help tell me how to pleeeease!

[mmoore5553]

for adding to wordpress just add some of the javascript lines to header and then just add the code in index.php or home.php. It just depends on what you have . It should be very easy. There are tons of slider plugins for wordpress already though.

[DGF]

Hi,

i have a problem with firefox and chrome, it does not show the content slider proberly, but it does on internet explorer.

on internet explorer
http://i.imagehost.org/0260/Unavngivet.png
http://img5.imagebanana.com/img/36cojxxf/Unavngivet.png

on firefox
http://i.imagehost.org/0159/Unavngivet1.png
http://img5.imagebanana.com/view/2wf40bb6/Unavngivet1.png

Whats the problem??

[MagicThemeParks]

Anyone got this working?

Looks like a great option to use for a news slider, but would be great to have it automatically updated with the latest from a certain forum.

[Jaske]

This is awesome!! Great for my vBadvanced home page....thanks for this!! crazy-easy to install & edit....great mod.

[Reef Man]

Does this work on vb 4.0.X and the version of vba for this vbulletin package?

[MagicThemeParks]

This is great! :up:

Got it working pretty quickly and customized it to 600px wide and now working on a little bit more of the coloring of the slideshow. But, works great! :D

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

[MagicThemeParks]

Just added it to a second site :up:

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

Thanks for this quick and effective mod! :D

[Alfa1]

Looks very nice. But how can we grab images and text from latest threads in a forum and get that to rotate in this Content Slider?

[MagicThemeParks]

Not sure if that can be done easily, but I use the vBcover product: vBslideshow (http://www.vbcover.com/idevaffiliate/idevaffiliate.php?id=105) for that.

I'm using this mod just for a nice visual change to the forum homepages. :D

[kjsmith84]

is there a way to slow down the rotation?

for a workin demo- bottom of the page

http://www.rhino411.com

[MagicThemeParks]

kjsmith84, it is probably the 5000 in the last part of the code. Change the number and see if that affects it. Make it a 7000 or a 3000 to see if that changes the speed.

Also, just noticed that your 'thumbnail' images are a little too big which is breaking the style of the tabs on the right. They should be something like 75px wide and 50 high.

[kjsmith84]

kjsmith84, it is probably the 5000 in the last part of the code. Change the number and see if that affects it. Make it a 7000 or a 3000 to see if that changes the speed.

Also, just noticed that your 'thumbnail' images are a little too big which is breaking the style of the tabs on the right. They should be something like 75px wide and 50 high.


thanks I will try that-
as far as the pics- yeah I noticed that- I need to resize them still


-----------------
tried it- the higher the # the slower it rotates-or smaller # = faster rotation.

I have it on 7000 right now.

[crazymilk]

Work for me but i all ready have Additional CSS Definitions added for my Hearder with a fluid image and when i add the code provided it won't show up in the header???

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

[Gamelobby]

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

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.

<center>
html code
</center>

[Gamelobby]

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/editors.php?do=edit&pg=slider


Thanks :D


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

Just added it to a second site :up:

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

Thanks for this quick and effective mod! :D

I am totally ripping off that layout. :up:

[MagicThemeParks]

I am totally ripping off that layout. :up:

LOL....no problem. :D

[Digital Jedi]

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