css - 覆盖 Primefaces 4.0 CSS

标签 css jsf jsf-2 primefaces facelets

<分区>

我正在使用 facelets 并且我有以下布局页面:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://maps.google.com/maps/api/js?sensor=false"
        type="text/javascript"></script>
    <title><ui:insert name="title" /></title>
    <link href="../css/cssmenu/styles.css" rel="stylesheet" type="text/css"/>
</h:head>
<h:body>                        

    <div id="layout">
        <table>
            <tr>
                <td height="500" valign="top">
                    <div id="menu">
                        <ui:include src="menu.xhtml" />

                    </div>

                </td>
                <td>
                    <div id="content">
                        <ui:insert name="content">
                        </ui:insert>
                    </div>
                </td>
            </tr>

        </table>
    </div>
</h:body>
</html>

我的 menu.xhtml 页面如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:body>

    <h:form id="menuForm">
        <div id="menuLateral">
            <p:growl id="messages" autoUpdate="true" showDetail="true" />

            <p:panelMenu style="width:200px" id="panelMenu">
                <p:submenu label="Incidentes">
                    <p:menuitem value="#{menuController.test}"  action="#{menuController.save}"
                         ajax="true" update="messages" 
                        icon="ui-icon-disk" />
                </p:submenu>
                <p:submenu label="Non-Ajax Menuitem">
                    <p:menuitem value="Delete" ajax="false" icon="ui-icon-close" />
                </p:submenu>
                <p:separator />
                <p:submenu label="Navigations">
                    <p:submenu label="Links" icon="ui-icon-extlink">
                        <p:submenu label="PrimeFaces" icon="ui-icon-heart">
                            <p:menuitem value="Home" url="http://www.primefaces.org"
                                icon="ui-icon-home" />
                            <p:menuitem value="Docs"
                                url="http://www.primefaces.org/documentation.html"
                                icon="ui-icon-document" />
                            <p:menuitem value="Download"
                                url="http://www.primefaces.org/downloads.html"
                                icon="ui-icon-arrowthick-1-s" />
                            <p:menuitem value="Support"
                                url="http://www.primefaces.org/support.html"
                                icon="ui-icon-wrench" />
                        </p:submenu>
                    </p:submenu>
                    <p:menuitem value="Mobile" icon="ui-icon-signal" />
                </p:submenu>
            </p:panelMenu>
        </div>
    </h:form>

</h:body>
</html>

我想要的是让我的 primefaces 菜单看起来像这样: http://cssmenumaker.com/builder/1442641 (或者实际上任何人,这只是一个例子)

但是我不确定我的 css 样式表应该包含什么或如何完成它。我将非常感谢您的建议。

最佳答案

覆盖 Primefaces 4.0 CSS

Step 1 : You just override css file in primefaces 4.0

         <h:outputStylesheet href="../css/layout.css" />

关于css - 覆盖 Primefaces 4.0 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21655735/

上一篇:javascript - 使 <a> 中的图像或 div 免于成为链接

下一篇:未调用 Jquery 切换事件

相关文章:

javascript - 滚动时 div 内的内容淡入淡出

java - JSF Eclipse 设计器

jquery - 在 JSF2 中填充隐藏字段的更好方法

java - dataTable sortBy 函数不起作用(primefaces)

css - 如何使用CSS设置子元素宽度等于父元素宽度?

html - 滞后的 CSS 动画

jsf - 有条件地启用或禁用 o :cache through an attribute?

jsf - 保存 Primefaces 布局状态

jsf - 扩展JSF commandLink组件

html - 用背景图片上的内容填充中间底部