0

我目前正在做一个 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>

有没有人建议只为菜单使用自定义主题？

谢谢

4

1 回答 1

1

您确实希望将两个主题合并为一个（或部分合并两个主题）。您不能仅使用主题滚动器来执行此操作，但您可以提取自定义主题的相关部分并添加#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 主题的设置方式，它们将相同的样式应用于所有元素

于 2012-11-27T14:56:35.517 回答