jQuery UI `Design Themes`

File Structure

Themes are designed to enhance their usability in a specific manner. Typically, the file directory structure is as follows:

themename/ – Your theme must be entirely contained within a single folder named after the theme.
themename/themename.css – This is the basic CSS file. Regardless of which plugins are used, this file must be referenced on every page using the theme. It should be lightweight, including only the essentials.
themename/themename.pluginname.css – A CSS file is required for each plugin you support. The plugin's name should be directly included in the filename. For example, if you theme the tabs plugin, you would have: themename.tabs.js.
themename/img.png – Your theme can include images. They can be named according to your preference; there are no specific naming conventions.

For examples of how the theme file structure is implemented, visit the jQuery UI Base Theme.

Defining Styles

Writing styles for a theme is straightforward due to the flexibility of themes.

All themes should have a basic CSS class. This primary class allows users to enable or disable the theme. Your root class should be formatted as .ui-themename. Its usage in the HTML file is as follows:

<html>
<head>
    <title>My Site</title>
    <link rel="stylesheet" href="themename/themename.css" />
    <link rel="stylesheet" href="othertheme/othertheme.css" />
    <link rel="stylesheet" href="othertheme/othertheme.dialog.css" />
</head>
<body class="ui-themename">
    <div class="ui-othertheme">
        <div class="ui-dialog">This is a modal dialog.</div>
    </div>
</body>
</html>

In the above example, several important things occur:

We load two themes into the document simultaneously.
The entire page and all its content are themed according to the themename styles.
However, the <div> with the ui-othertheme class and all its elements (including the modal dialog) are themed according to the othertheme styles.

If we open the themename.css file, we can see the following code:

body.ui-themename { background:#111; color:snow; }
.ui-themename a, a.ui-themename { color:#68D; outline:none; }
.ui-themename a:visited, a.ui-themename:visited { color:#D66; }
.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }

Note that the themename.css file includes only globally applicable style information; specific plugin styles are not defined here. These styles apply to all themes. Do not worry about a theme occupying multiple files - these will be streamlined during the creation and download process.

❮ Example Animate Api Hide ❯

jQuery UI Design Themes

File Structure

Defining Styles

jQuery UI `Design Themes`