覆蓋Primefaces 4.0 CSS

我使用的是小面，我有以下頁面佈局：覆蓋Primefaces 4.0 CSS

<?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樣式表應包含什麼或什麼要做到這一點。我會深表謝意你的建議。

來源

2014-02-09 pablocmg

覆蓋Primefaces 4.0 CSS

Step 1 : You just override css file in primefaces 4.0 

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

來源

2014-02-17 16:26:59 Pravin

覆蓋Primefaces 4.0 CSS

回答

相關問題