May 08, 2021 jQuery UI
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.
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:
<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.