Search code examples
zend-frameworkjquery-uithemeroller

How to use multiple jQuery UI Themes in a Zend Framework application?


I am currently using the ui-lightness theme in my Zend Framework application but I would like to use both for different things. I'm currently registering the ui-lightness theme with this line in my bootstrap:

$view->headLink()->appendStylesheet($view->baseUrl().'/js/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css');

How can I add another theme to use? How will the application know which theme to use if I add another stylesheet?


Solution

  • You can do this using CSS scope. When you build your theme on the jQuery UI site choose Advanced Settings and then enter in name in the scope field.

    Do the same with whatever other themes you want to use, making sure that the scope is unique for each one.

    Include the CSS theme files as normal (using appendStylesheet) and use the scope classes to style each area/item on the page

    A styled example is given here