RichFaces CSS not working

问题

I'm trying develop my first aplication with richfaces, to do this I'm using samples from rf site.

In this moment I try develop dropdown menu as link below

http://showcase.richfaces.org/richfaces/component-...nu&sample=topMenu&skin=classic

But I can't change color of bar menu.

I want this:

But I have this:

I'm working in netbeans and have added richfaces to a JSF (with facelets) project. I just added the jar and css files of richfaces, nothing more.

Bellow my facelet template and my menu file:

<?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:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./../../resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./../../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>Facelets Template</title>
    </h:head>

    <h:body>
        <div id="top" >
            <ui:insert name="top">Top</ui:insert>
            <ui:include src="topo.xhtml" />
        </div>
        <div>
            <div id="left">
                <ui:insert name="left">Left</ui:insert>
            </div>
            <div id="content" class="left_content">
                <ui:insert name="content">Content</ui:insert>
            </div>
        </div>
    </h:body>

</html>

topo.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:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich">

<ui:composition>

    <h:outputStylesheet name="estilo">
        .pic {
        margin-bottom: -4px;
        margin-right: 2px;
        }

        .search .rf-ddm-itm-sel {
        background-color: transparent;
        background-image:none;
        border-color: transparent;
        cursor: default;
        }
   </h:outputStylesheet>
    <h:form>
        <rich:toolbar height="26px">
            <rich:dropDownMenu mode="ajax">
                <f:facet name="label">
                    <h:panelGroup>
                        <h:graphicImage value="../resources/images/icon_client.jpg" styleClass="pic" alt="cliente" />
                        <h:outputText value=" Clientes" />
                    </h:panelGroup>
                </f:facet>
                <rich:menuItem label="Novo Cliente" ></rich:menuItem>
                <rich:menuItem label="Consultar"></rich:menuItem>
            </rich:dropDownMenu> 

        </rich:toolbar>

    </h:form>
       <a4j:outputPanel ajaxRendered="true">
        <h:outputText value="Current Selection: "></h:outputText>
        <h:outputText style="font-weight:bold" value="#{dropDownMenuBean.current}"></h:outputText>
    </a4j:outputPanel>
    <br />

</ui:composition>

</html>

What is wrong?

回答1:

1) If you want to use RichFaces skin, then add in web.xml

<context-param>
    <param-name>org.richfaces.skin</param-name>
    <param-value>#{lookAndFeel.skin}</param-value>
        <!-- blueSky, classic, DEFAULT, deepMarine, ruby, emeraldTown -->
</context-param>
<context-param>
    <param-name>org.richfaces.enableControlSkinning</param-name>
    <param-value>false</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.enableControlSkinningClasses</param-name>
    <param-value>true</param-value>
</context-param>

2) If you want to use your css, then move your links from h:header into h:body in template file like this

<h:body>
    <link rel="stylesheet" type="text/css"
        href="#{request.contextPath}/css/basic.css" media="all" />
</h:body>

来源：https://stackoverflow.com/questions/22466726/richfaces-css-not-working

标签

css

jsf

drop-down-menu

richfaces