YouTip

# jQuery UI Customization jQuery UI offers multiple ways to customize. You've seen how the Download Builder can create a custom version containing only the options you need, but there are other customization methods available. * * * ## jQuery UI Basics: Using Options Every plugin in jQuery UI has a default configuration, typically set for the most basic and common use cases. If you want to set a plugin to a non-default value, you can use "options" to override its default settings. Options are a set of properties passed as arguments to a jQuery UI widget. For example, the slider widget has an `orientation` option that allows you to specify whether the slider is horizontal or vertical. To set this option for a slider, you simply pass it as an argument, like this: $( "#mySliderDiv" ).slider({ orientation: "vertical"}); You can pass multiple different options, separated by commas: $( "#mySliderDiv" ).slider({ orientation: "vertical", min: 0, max: 150, value: 50}); Remember to place options inside curly braces `{ }`. The example above is a simple explanation; for detailed information on the full set of jQuery UI widgets, please see the (#). * * * ## Visual Customization: Designing a jQuery UI Theme If you want to design your own theme, jQuery UI provides a perfect application for theme customization called ThemeRoller. For specific customization, visit (http://jqueryui.com/themeroller/). ThemeRoller provides a custom interface for all elements designed with jQuery UI widgets. As you adjust the "levers" in the left column, the widgets in the right column will display according to your design. The Gallery tab in ThemeRoller offers several design themes, similar to those provided on the Download Builder page. You can make adjustments based on these themes or download them directly.  * * * ## Downloading a Theme When you click the "Download theme" button on the ThemeRoller page, you will be taken to the Download Builder page, where your custom theme will be automatically selected in the main dropdown menu. You can further configure the download package. Once the download is complete, you will see the `example.html` page using your custom theme. **Tip:** _If you need to edit your theme, simply open the CSS file, find line 43, "To view and modify this theme, visit ...", and the URL provided is the link to open the theme in ThemeRoller for editing._