3

メニューバーを使用して、サブメニューのラベルの色を変更したいと思います。私が使用しているコードは次のとおりです。

    <?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui">

    <h:form>

                <h:panelGrid columns="1" style="font: 12px sans-serif;width:800px;height: 19px">
                    <p:menubar autoDisplay="false" style="padding: 0px">  
                        <p:menuitem value="Tableau de bord" action="#{liens.lienTableauDeBord()}" ajax="false" icon="ui-icon-home" style="padding-top: 0px;padding-bottom: 0px;color: white;background-color:#333367"/>
                        <p:menuitem value="|" disabled="true" style="padding-top: 0px;padding-bottom: 0px;color: white;background-color:#333367"/>
                        <p:submenu label="Affaires" style="margin-top: -4px; height: 22px;color: white;background-color:#333367"> 
                            <p:menuitem value="Création" action="#{liens.lienCreerAffaire()}" ajax="false" icon="ui-icon-document"/>  
                            <p:menuitem value="Consultation" action="#{liens.lienConsultationAffaire()}" ajax="false" icon="ui-icon-search"/>  
                        </p:submenu>  
                        <p:menuitem value="|" disabled="true" style="padding: 0px"/>
                        <p:submenu label="Outillages" style="margin-top: -4px;height: 19px"> 
                            <p:menuitem value="Création" action="#{liens.lienNumOutil()}" ajax="false" icon="ui-icon-document" style="padding: 0px"/>  
                            <p:menuitem value="Consultation" url="#" icon="ui-icon-search" style="padding: 0px"/>  
                        </p:submenu> 
                        <p:menuitem value="|" disabled="true" style="padding: 0px"/>
                        <p:menuitem value="Recherche et consultation DT" url="#" icon="ui-icon-search" style="padding: 0px"/>  
                        <p:menuitem value="|" disabled="true" style="padding: 0px"/>
                        <p:menuitem value="Paramètres" url="#" icon="ui-icon-wrench"  style="padding: 0px"/>
                        <p:menuitem value="|" disabled="true" style="padding: 0px"/>
                        <p:menuitem value="Déconnexion" url="#" icon="ui-icon-closethick" style="padding: 0px" /> 
                    </p:menubar>  
                </h:panelGrid>

    </h:form>



</ui:composition>

すべてのメニューに白いフォントを持つ PrimeFaces のテーマ、すべてのテキストの色を白に設定する CSS スタイルシートを使用していますが、ラベルAffairesとOutillageは白に変わりません。また、属性で変更しようとしました。メニュー項目では機能しますが、サブメニューでは機能しません。

テキストの色は白、背景はダークブルー (CSS スタイルシートで定義) でなければなりませんが、PrimeFaces を必ず使用する必要はありません。

Netbeans 7.2 と PrimeFaces 3.4.2 を使用しています

誰かが私を助けてくれたら、彼にクッキーをプレゼントします

ありがとう！

4

1 に答える 1

3

あなたの問題の背後にある理由は

.ui-widget-content a

Primefaces で記述された CSS ルールがインライン スタイルをオーバーライドしています

CSS ルールの優先度の詳細についてはこちらをご覧ください。SO の質問はこちらを参照してください

サブメニューにスタイル クラス属性を追加します。

例えば：

<p:submenu styleClass="affaires" label="Affaires" style="margin-top: -4px; height: 22px;color: white;background-color:#333367"> 
   <p:menuitem value="Création" ajax="false" icon="ui-icon-document"/>  
   <p:menuitem value="Consultation" ajax="false" icon="ui-icon-search"/>  
</p:submenu>

そしてCSSをあなたのページに追加してください

<style>
    .affaires .ui-menuitem-text{color:white;}
</style>

サブメニュー（ポップアップ）の背景を設定するために以下のCSSを使用することもできます。

.affaires .ui-menu-child{background: blue;}

また、firebug(firefox プラグイン) を使用して css を検査することをお勧めします。これにより、ほとんどの場合、問題が解決します。

お役に立てれば。

于 2012-11-27T04:24:10.907 に答える