How to use JQuery UI Theme with other themes using CSS Scope

If you need to use the slider element inside you web site you’ll find very useful the JQuery UI Slider:

You can download from the JQuery UI web site the theme you like and you can use it inside your web site.

Theme preview	+	Theme download	=	Theme folder with CSS and Images
	+		=

One problem may arise if your site is using another theme, the second theme will override the first, causing undesired layout effects.

Here comes the “Advanced Theme Settings” option, it permits to define a “CSS namespace” used only by the new control:

Next you need to insert your control code inside an HTML element like div or span with the same CSS Scope, for example:

<div class=”.SLIDER”>
<!—your control using the SLIDER CSS theme here –>
</div>

And this is the effect, two JQuery themes used in the same page: