jQuery UI design theme


File Structure

Themes are designed in a specific way to increase their ease of use. Typically, the file directory structure looks like this:

  • themename/ – Your theme must be entirely contained within a separate folder named with the theme name.

  • themename/themename.css – This is the basic CSS file. Regardless of which plugin is used, this file must be referenced in every page where the theme is used. The document should be lightweight and include only the essentials.

  • themename/themename.pluginname.css – Each plugin you support requires a CSS file. The name of the plugin should be included directly in the file name. For example, if you were theming the tabs plugin, you would have: themename.tabs.js.

  • themename/img.png – Your theme can contain images. They can be named however you like, there is no specific naming convention here.

For an example of how theme file structure is done, visit jQuery UI Basic Themes.

Define Styles

Writing styles for a theme is very simple because of the flexibility of the theme.

All themes should have a basic CSS class. This main class allows users to enable and disable themes. Your root class should be of the format .ui-themename. And its usage in HTML files 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, something important happened:

  • We are loading into the document at the same time Two themes.

  • All content on the entire page is themed according to the style of themename.

  • However, <div> with ui-othertheme class and every element in it (including modal dialog boxes) are styled according to othertheme Themed.

If we open the themename.css file and view it, 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 that themename. The css file only contains global style information, and the style information of specific plug-ins is not defined here. The styles here are applicable to all themes. Don't worry about a theme taking up multiple files - these will be simplified during the creation and downloading process.