Latest web development tutorials

jQuery UI design theme

File Structure

Theme is a specific way to increase their ease of use. Typically, the file directory structure is as follows:

  • themename/ - your topic must be fully contained in a separate topic name named folder.
  • themename/themename.css - This is a basic CSS file. Regardless of which plug-ins, the file must be referenced in each of the pages using themes. The file should be lightweight, includes only the main points.
  • themename/themename.pluginname.css - each widget you support requires a CSS file. Name of the plugin should be directly included in the file name. For example, if you theming of tabs (tab) plug-in, there are: themename.tabs.js .
  • themename/img.png - Your theme can contain images. They can be named according to your preference, there is no specific naming convention.

To learn how the theme file structure is completed instances, visit the jQuery UI basic theme .

Custom Style

Write the theme style is very simple, it is because of the flexibility theme.

All topics should have a basic CSS class. The main topic class allows the user to enable disabled. Your root class format should be .ui-themename . And use it in an HTML file 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 example above, some important things happened:

  • We also load two themes to the document.
  • All the machines entire page content, is carried out in accordance with the theme of themename styles.
  • However, with ui-othertheme class of <div> and each element (including modal dialog boxes) are carried out in accordance with the theme of othertheme styles.

If we open themename.css file for viewing, 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.css file includes only universal global style information, style information for a particular widget is not here to be defined. Here the style of all topics are applicable. Do not worry about a topic will occupy multiple files - these will be simplified in the process of creating and downloading.