CustomThemes
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.