How to use a different jQuery theme for a particular area?

Question

I am currently doing the menu of a web application and I would like to use a different theme for that menu from the theme I use for the rest of the application. I use PrimeFaces' default theme, though it could change later, and a custom theme for the menu, that I made with the jQuery theme roller (http://jqueryui.com/themeroller) I would like to apply this theme on the main menu only, which is defined in a CSS file :

#top {
position: relative;
background-color: #333367;
color: white;
padding: 2px;
margin: 0px 0px 2px 0px;
max-height: 60px;}    

I can apply the custom theme to the entire application using

<context-param>
    <param-name>primefaces.THEME</param-name>  
    <param-value>custom-theme</param-value>   
</context-param>    

But it isn't applied to a particular area The menu is defined here in my template :

    <div id="top">
        <ui:insert name="menu">
            <ui:include src="../snippets/menu.xhtml"/>
        </ui:insert>
    </div>    

Does anyone has a suggestion to use the custom theme only for the menu?

Thanks

Answer 1

You're really looking to combine two themes into one (or to partially combine two themes). You can't do this just with the themeroller, but you could extract the relevant parts of your custom theme and add #top to the selectors. So where the generated theme might have

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    ...

You'd edit it to be

#top .ui-state-default a, #top .ui-state-default a:link, #top .ui-state-default a:visited {
    ...

Potentially a lot of work and not very efficient, but the way jQuery UI themes are set up, they apply the same styling to all the elements