Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with a CSS Content Slider.

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

    Code:
    <link rel="stylesheet" href="styleslider.css" />
    And just after the <body> section starts i have this:

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

    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


  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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.
    Last edited by mbaker; 06-26-2010 at 09:47 PM.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..

  • #5
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mbaker View Post
    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

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •