jQuery UI design theme

May 08, 2021 jQuery UI

1. jQuery UI design theme

jQuery UI design theme

The file structure

Topics increase their ease of use in specific ways. Typically, the file directory structure looks like this:

themename/ Your theme must be completely contained in a separate folder named after the theme.
themename/themename.css this is a basic CSS file. R egardless of which plug-in is used, the file must be referenced on each page that uses the theme. The file should be lightweight and include only the main points.
themename/themename.pluginname.css - each plug-in you support requires a CSS file. T he name of the plug-in should be included directly in the file name. For example, if you topic a tabs plug-in, there is: themename.tabs.js
themename/img.png Your theme can contain images. They can be named according to your preferences, and there is no specific naming convention here.

To learn an example of how the subject file structure is done, visit the jQuery UI Basic topic.

Define the style

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

All topics should have a basic CSS class. T his main class allows users to enable disabled themes. Y our root class format should be .ui-themename And its use 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 example above, something important happened:

We load two themes into the document at the same time.
Everything about the entire page machine is thematicized according to the style of themename.
However, each element of the ui-othertheme <div> including the modal dialog box, is thematicized according to the style of the othertheme.

If we open 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 themename.css globally common style information, which is not defined here for specific plug-ins. T he styles here apply to all themes. Don't worry about a theme occupying multiple files - these are simplified in the process of creating and downloading.

jQuery UI design theme

Table of contents