Home › Forums › Other › How to use the Anything Slider › Re: How to use the Anything Slider
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.