Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other How to use the Anything Slider Re: How to use the Anything Slider

#69316
jamygolden
Member

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