Because of its simplicity, the slider widget is extremely easy to create a custom theme for. Using ThemeRoller is the recommended method of theming, but to completely change the look and feel of the widget we can easily create our own theme file; in your text editor create the following stylesheet:
background-div { background:url(../img/slider/slider_outerbg.gif) no-repeat; height:50px; width:217px; padding:36px 0 0 24px; } #mySlider { background:url(../img/slider/slider_bg.gif) no-repeat; width:184px; height:23px; position:relative; left:4px; top:4px; border:none; } .ui-slider-handle { background:url(../img/slider/slider_handle.gif) no-repeat; width:14px; height:30px; top:-4px; }
Save this file as sliderTheme.css
in the css
directory. Link to this file in the usual way, after the link to ui.all.css
then save the new page as slider2.html
. With a minimum of CSS and a few images (these can be found in the code download) we can easily but considerably alter the...