Question

我目前正在做一个Web应用程序的菜单，我想从我用于其余应用程序的主题中为该菜单使用不同的主题。我使用PrimeFaces的默认主题，虽然它可以在以后更改，并且我使用jQuery主题滚轮（http://jqueryui.com/themeroller）制作菜单的自定义主题我想在主菜单上应用这个主题，它在CSS文件中定义：

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

我可以使用

将自定义主题应用于整个应用程序

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

但它不适用于特定区域菜单在我的模板中定义：

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

是否有人建议仅将自定义主题用于菜单？

由于

Answer 1

您真的希望将两个主题合二为一（或部分合并两个主题）。您不能仅使用themeroller执行此操作，但您可以提取自定义主题的相关部分并将#top添加到选择器。那么生成的主题可能在哪里

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

您要将其编辑为

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

可能有很多工作而且效率不高，但是jQuery UI主题的设置方式，它们将相同的样式应用于所有元素

如何为特定区域使用不同的jQuery主题？

1 个答案: