YouTip

# jQuery UI Design Theme ### File Structure Themes are structured in a specific way to enhance their usability. Typically, the file directory structure is as follows: * `themename/` – Your theme must be contained entirely within a single folder named after the theme. * `themename/themename.css` – This is the base CSS file. Regardless of which plugins are 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` – You need a CSS file for each plugin you support. The plugin's name should be included directly in the filename. For example, if you are theming the tabs plugin, you would have: `themename.tabs.js`. * `themename/img.png` – Your theme can include images. They can be named as you prefer; there is no specific naming convention here. For an example of how a theme's file structure is completed, visit the (https://github.com/jquery/jquery-ui/tree/master/themes/base). ### Defining Styles Writing styles for a theme is very simple due to the flexibility of themes. All themes should have a base CSS class. This primary class allows users to enable or disable the theme. Your root class should be formatted as `.ui-themename`. Its usage in an HTML file is shown below: In the example above, several important things are happening: * We are loading two themes into the document simultaneously. * The entire page and all its content are themed according to the styles of `themename`. * However, the `