jQuery UI

« Back to jQuery UI Theming

If you'd like to create a custom theme, you can either start by modifying the default ui.theme.css file and the individual stylesheets for each plugin, or create a stylesheet from scratch. We'll walk you through how to create styles from scratch to create a custom look and feel that can't be achieved using the standard framework classes.

Getting Started

To begin, grab a copy of jQuery UI if you haven't already and set up your environment. Create a blank CSS, give it a name, e.g. ui-theme.css, and link it up to your web app. Now open the Theming API in a new browser window for reference.

Best Practices

Themes should be non-intrusive and self encapsulating. To help achieve these goals the following practices are followed:

• All classes begin with the .ui- namespace.
• All styles are specific to the .ui- namespace.
• Inheritance begins with the component namespace. e.g.

  .ui-widget-dialog button

• Do not create global styles.
• Do not use the ID attribute for styling.
• Use hyphens, not underscores, as word separators.
• Always use lower case.