Grow your CSS skills. Land your dream job.

How to use the Anything Slider

  • # December 6, 2010 at 9:31 am

    Thanks jamy_za! I’m gonna stick with it. Now I’m assuming you want me to add that to my style.css file, not the anythingslider.css file. Does the anythingslider.css serve a real purpose? I’ve made changes to the file but see no results on my site. Maybe the file is not linked properly in the header?

    # December 6, 2010 at 11:15 am

    Add it to your style.css file. Leave anythingslider.css, it is working as it should.

    # December 21, 2010 at 10:47 am

    Hey sorry for not responding for a while. I’ve been playing with the CSS myself and I’ve finally made some progress but the gallery is still not perfect. Instead of explaining to you what’s left, I recorded a video of the issues and uploaded it up on YouTube. I think that’s an easier way to explain it. If you don’t mind taking a look at it here’s the link to the video.

    If I wasn’t clear on any point just let me know. Thanks a million dude.

    # December 21, 2010 at 11:23 am

    I’ve followed this thread trying to get my anythingSlider working on my wordpress site with no luck





    the files are pathed correctly what do you think the problem is?

    # December 22, 2010 at 2:26 am

    I’m on here asking questions myself, dude. What exactly is the problem though? Try to be as specific as possible. Is the player not showing up on the page you want it to show up on? Is it not sliding?

    The instructions I got from jamy_za (see everything from November 24th on) were spot on. Try following his instructions.

    # December 22, 2010 at 3:20 am

    @HenryHunter

    div.anythingSlider {
    width: 700px;
    height: 390px;
    margin: 0 auto;
    }

    Changing the width and height there will change the slider’s width or height.
    The reason you are having weird problems like: changed styles not taking effect is because of CSS specificity. Your anythingslider.css file is below your style.css file, therefore anything you put within your style.css file with the same specificity value as a selector within the anythingslider.css file will be overwritten by the anythingslider.css file lol.

    In your style.css file, you have anythingslider css right at the top beginning with the comment:

    /*
    Anything Slider Styles
    */

    Replace the anythingslider CSS with the following update:

    #anything_slider /*for the unordered list*/
    {
    background: #5a636c;
    padding: 0;
    margin: 0;
    }

    #art-main div.anythingSlider{
    height: 260px;
    width: 620px;
    padding: 0 0 30px 0 !important;
    margin: 15px 0 0 15px; /*used to be in the style below*/
    }

    #art-main div.anythingSlider.activeSlider .anythingWindow{
    padding: 0;
    border: 4px solid #dcdcdc;
    }
    #art-main div.anythingSlider.activeSlider .thumbNav a.cur, #art-main div.anythingSlider.activeSlider .thumbNav a{
    background-color: #666;
    }
    #art-main div.anythingSlider .start-stop{
    height: 18px;
    margin: 0 -8px 0 0;
    }

    That should change the height of the slider, the height of the start/stop button and the position of the button.

    On a side note: it doesn’t look like you are using a css reset. I would suggest including one.

    @wetfeet Do you have a link to the example? I would bet that you HTML is the problem.

    # December 22, 2010 at 1:43 pm

    Okay man thanks. When you say “Replace the anythingslider CSS with the following update” do you mean the anythingslider.css file, or the Anything Slider Styles section in my style.css file that you referred to? Oh, and what is CSS reset?

    # December 22, 2010 at 3:10 pm

    I mean replace the anythingSlider section within your style.css file – It should look quite similar.

    All browsers have default css styles. A <h1> will have padding and font size, font style, etc. by default. An anchor link will be blue with an underline, etc. Browsers aren’t consistent in the way these elements are rendered.
    A CSS reset will ‘reset’ these values and help you create websites in a more cross-browser friendly fashion.

    # December 23, 2010 at 2:46 am

    Okay, I’m with you on that because my website looks different on Firefox, IE, and Safari. It’s like the padding or margins are different, or something. I want the site to look the same on all browsers (it also looks like crap on my BlackBerry).

    So, how do I apply a CSS reset?

    # December 23, 2010 at 3:19 am

    Add this to the top of your style.css file:

    /* v1.0 | 20080212 */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    /* End of reset */

    Or alternatively, create a new css file called reset.css and link it to the document like a normal stylesheet.

    # December 23, 2010 at 4:43 am

    Damn, you’re up late, dude. Thanks for the CSS reset code. The gallery finally, finally looks the way I want it to look. Thanks a flipping lot man. I dunno how I would have gotten this to work without your help. I hope anyone with the same problem as me can look to this post and find answers.

    # February 3, 2011 at 8:46 am

    Hi there, I got the anything slider also on one another website where it does work (no cms etc.) but when I try this slider in WordPress it doesn’t work. Everything I got is the slider with scrollbuttons like the jQuery won’t work or something else, I really don’t know.

    I can show you the code maybe I did something wrong.

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">















    < ?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>


    < ?php wp_head(); ?>


    And here the other part in my index.php:

    		










    • innovation

      Lorem Ipsum



      Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves












    • Life is conversational. Web design should be the same way. On the web, you're talking to someone you've probably never met - so it's important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.











    • innovation











    • Life is conversational. Web design should be the same way. On the web, you're talking to someone you've probably never met - so it's important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.









    # March 3, 2011 at 1:30 am

    anyone know how to install this into a website that doesn’t use wordpress as cms,
    I have a php site set up that a developer friend helped me build and i now maintain. any help would be super appreciated! I know html and css but F-all about javascript……

    # March 10, 2011 at 7:55 pm

    Hi illscode!

    Check out the wiki page on how to set up AnythingSlider. It’s not very detailed, but it shows the necessary code and where it needs to go.

    # March 17, 2011 at 4:23 pm

    many many thanks!

Viewing 15 posts - 31 through 45 (of 83 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".