jQuery UI Design Themes

File Structure

Themes are organized in a specific way to increase their usability. Typically, the file directory structure is as follows:

  • themename/– Your theme must be completely contained in a single folder named after the theme.
  • themename/themename.css– This is the basic CSS file. Regardless of which plugin is used, this file must be referenced on every page that uses the theme. This file should be lightweight and include only the essentials.
  • themename/themename.pluginname.css– Each plugin you support requires a CSS file. The plugin name should be directly included in the file name. For example, if you theme the tabs plugin, you would have:themename.tabs.js。
  • themename/img.png– Your theme can contain images. They can be named as you like; there are no specific naming conventions here.

To see an example of how the theme file structure is implemented, visitjQuery UI Basic Theme。

Defining Styles

Writing styles for a theme is very simple, thanks to the flexibility of the theme.

All themes should have a basic CSS class. This main class allows users to enable or disable the theme. Your root class should be in the format:.ui-themename. And its usage in an HTML file is as shown below:

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

In the example above, some important things happen:

  • We load both themes into the document at the same time.
  • The entire page and all its content are themed according to the styles of themename.
  • However, the element with the ui-othertheme class<div>and every element inside it (including modal dialogs) are themed according to the styles of othertheme.

If we open thethemename.cssfile to take a look, 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; }

Please note,themename.cssThe file only includes global common style information. Plugin-specific styles are not defined here. The styles here apply to all themes. Don't worry about a theme occupying multiple files - this is simplified during the creation and download process.

Other Extensions