Help with a CSS Content Slider.

lexyz22

06-25-2010, 10:00 PM

Hi guys, i really need some help with this...

Basically i have a Wordpress based site which already has a "Featured Content" slider, and i have modified it a bunch of times, but no longer need it.

I downloaded a new one, and modified it, but when i go to insert it, it seems to get overwritten by my current style.css and it doesnt show, apart from text...

Here is the one i am using: http://www.leigeber.com/2008/12/javascript-slideshow/

I renamed the style.css to styleslider.css, because i already have a style.css and i think it would override my slider settings..

Anyway here is what i have...

Before the </head> section ends, i have this aswell as my original style.css that i had with my wordpress template..:

<link rel="stylesheet" href="styleslider.css" />

And just after the <body> section starts i have this:

<ul id="slideshow">
<li>
<h3>Welcome to mysite.com</h3>
<span>photos/orange-fish.jpg</span>
<p>Welcome to mysite.com - Because Muscle Matters ! Here at MC we pride ourselves on our variety of Muscle related articles and resources and hope that the community can benefit from them !</p>
<a href="#"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
</li>
<li>
<h3>Sea Turtle</h3>
<span>photos/sea-turtle.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
</li>
<li>
<h3>Red Coral</h3>
<span>photos/red-coral.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/red-coral-thumb.jpg" alt="Red Coral" /></a>
</li>
<li>
<h3>Coral Reef</h3>
<span>photos/coral-reef.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/coral-reef-thumb.jpg" alt="Coral Reef" /></a>
</li>
<li>
<h3>Blue Fish</h3>
<span>photos/blue-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/blue-fish-thumb.jpg" alt="Blue Fish" />
</li>
<li>
<h3>TinySlideshow v.2</h3>
<span>photos/yellow-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/yellow-fish-thumb.jpg" alt="Yellow Fish" /></a>
</li>
<li>
<h3>Squid</h3>
<span>photos/squid.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/squid-thumb.jpg" alt="Squid" /></a>
</li>
<li>
<h3>Small Fish</h3>
<span>photos/small-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/small-fish-thumb.jpg" alt="Small Fish" /></a>
</li>
</ul>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>
<script type="text/javascript" src="compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>

Is this correct to get the slideshow to show properly?

Everytime i refresh my site, it shows nothing... so obviously i am doing something wrong..

Seriously ANY help would be appreciated :) :D

EDIT: I took a screen shot... it looks like the code is being overwritten by my original style.css... i can tell from the bullet points etc

http://i45.tinypic.com/1hpn4o.jpg

mbaker

06-26-2010, 08:43 PM

Where is your site? What is the URL?

If you let us know, we will be able to look at it.

The more people who are able to look at all of your code, instead of the parts you have posted, the more likely you are to get a reply that at least points you in the right direction.

Alternatively, particularly if your site is not online, create a single html file (with any stylesheets embedded in style tags) that demonstrates the problem you are having.

Creating this may show up what the problem is, particularly if you check the html and css at the W3C validators (see links in my sig).

If you still can't figure out the problem, then post that single file here.

pageguy

06-27-2010, 12:07 AM

Remove your regular style sheet and just use the slider style sheet. This will let you see for sure if that is the problem. Then you will know and can look at the css and find where the conflict occurs.

lexyz22

06-27-2010, 07:28 PM

Hey guys thanks alot for the replies !

The template i am using is this:

http://newwpthemes.com/demo/AnimeZone/

I havent changed anything on it... so if anyone could help me out, just download that template and install it on your wordpress site (if you have one) and try to install that web slider that i linked to...

Seriously this is really bugging me, so if anyone can pull this off, i can get a Paypal commission sorted right away...

EDIT: I cant remove the original stylesheet because it will stop the site from working. I am using Wordpress..

mbaker

06-28-2010, 08:28 PM

lexyz22

06-30-2010, 04:21 PM

Where is your website? If we can look at it it will be much easier to provide you with help.

Have you considered comparing your CSS with and without the slideshow CSS?

You could use the W3C CSS validator (link in my sig) to find all of the valid CSS with and without the slideshow CSS. You could then check for any conflicts.

Well its not online yet, but i havent changed anything. I have tested a live version and it works fine, but not the slider. The original slider is perfect, but the one i want wont work.

The stock Wordpress Template is called "AnimeZone" and can be downloaded from Newwpthemes.com.

I just cant seem to get it to show.

If you could help me out i can definately sort out a payment. You can test it yourself with the Template & Free Slider i have provided above...

Send me a Personal Message with your email and we can keep in contact.

Thanks for the help :)

bazz

06-30-2010, 06:26 PM

We need to see how the thing is trying to work in your site.

So, as mbaker said in post #2 we need to see your code. If you haven't made an attempt at it yet coz it is difficult, then I understand your offer of payment and this thread should be moved to the appropriate works offers and requests forum.

bazz