Datepicker, tabs, slider, accordion, autocomplete widgets theming

Printer-friendly versionPrinter-friendly version

These widgets of the default theme are based on jQuery UI (User Interface) framework.

Datepicker:
sites/default/files/ui-datepicker.gif

Tabs:
sites/default/files/ui-tabs.gif

Slider :
sites/default/files/ui_slider.gif

Accordion (at the backend):
sites/default/files/ui-accordion.gif

Autocomplete:
sites/default/files/ui-autocomplete.gif

All these javascript jQuery widgets have one layout and theme. It places in 'themes/your_theme/css/ui/' folder. Css rules contain in 'jquery-ui-x.x.x.custom.css' file. Some required customizations, those don't need rewritten contain in 'query-ui-customizations.css' file. Reuired images are in 'themes/your_theme/css/ui/Images/' folder.

 

Customization of Widgets

jQuery development Team provides great themeroller tool for building custom themes, also gallery of ready made themes available. Using it you build your own custom theme for these widgets, then you may download files and place new css file and images folder into 'themes/your_theme/css/ui/' folder.

After this only one thing you have to change in code: rewrite the name of css file in 'modules/frontend/controllers/frontend_hook.php' and in 'modules/backend/controllers/backend_hook.php' files. For example:
from $view->addCssFile('ui/jquery-ui-1.8.9.custom.css');
to $view->addCssFile('ui/jquery-ui-1.8.11.custom.css');

as the version of UI framework may change.