web-dev-qa-db-ja.com

Primefacesのデフォルトスタイルをグローバルに変更

プライムフェイスのデフォルトスタイルをグローバルに1回だけ変更して適用するにはどうすればよいですか？

.ui-widget,.ui-widget .ui-widget {
    font-size: 90% !important;
}

現在、このCSSスニペットをすべてのXHTMLページの先頭に埋め込んでいます。

<head>
    <style type="text/css">
        .ui-widget,.ui-widget .ui-widget {
            font-size: 90% !important;
        }
    </style>
</head>
cssjsfjsf-2primefaces
11
Oh Chin Boon

スタイルシートファイルを作成します。

/resources/css/default.css

.ui-widget, .ui-widget .ui-widget {
    font-size: 90%;
}

（!important "hack"を削除したことに注意してください。 デフォルトのPrimeFaces CSSをカスタムスタイルでオーバーライドするにはどうすればよいですか？ PFスタイルを再定義する方法の説明）

<h:body>を使用して、テンプレートの<h:outputStylesheet>に含めます（HTMLヘッドのendに自動的に再配置されます） 、結局のところ、PrimeFaces独自のスタイルシート）：

<h:body>
    <h:outputStylesheet name="css/default.css" />
    ...
</h:body>

マスターテンプレートを使用していないため、これをすべてのページに含める必要がある場合は、ページデザインを再検討し、JSF2Faceletsテンプレート機能を利用することをお勧めします。このようにして、頭と体の両方のすべてのデフォルトが定義されているマスターテンプレートファイルが1つだけになります。具体的な例については、この回答も参照してください。 JSF 2.0 Faceletsを使用してXHTMLに別のXHTMLを含める方法は？

35
BalusC

私は使用することをお勧めします：

.ui-widget {
    font-size: 90%;
 }
.ui-widget .ui-widget {
    font-size: 100%;
 }

balusCのアプローチの代わりに、JSFコンポーネントをネストするにつれてフォントサイズが減少するlikeでない限り。

私は、スタイルシートを作成してテンプレートを検討する必要があるというBalusCに同意しますが、提案されたCSSには同意しません（ただし、!importantの使用についてはまだ決定していません）。

Primefaces 3.1ユーザーガイド のセクション8.4は、

.ui-widget, .ui-widget .ui-widget {
    font-size: 90% !important;
 }

これはBalusCの提案に似ていますが、!importantを使用します。

これは2つのことを行います：

  1. ui-widgetクラスのコンポーネントのフォントサイズを（親の）90％に設定します
  2. ui-widgetクラスを持つコンポーネントのフォントサイズを設定し、はui-widgetクラスを持つ別のコンポーネントの子です（90％（親の）

ネストされたui-widgetのフォントサイズを本当に90％に設定しますか？ネストされたui-widgetsのレベルが2つまたは3つある場合、フォントサイズは減少し続けます。次の（Primefaces）JSFマークアップを試してみると、私のポイントがわかります。

    <h:form>
        <p:button value="Normal"></p:button>
        <p:panel>
            <p:button value="A bit smaller"></p:button>
            <p:panel>
                <p:button value="Even smaller again"></p:button>
                <p:panel>
                    <p:button value="Tiny"></p:button>
                </p:panel>
            </p:panel>
        </p:panel>
    </h:form>

標準のjQueryCSSで.ui-widget .ui-widgetが必要だった理由は、ネストされたui-widgetsでフォントサイズが大きくなるという逆の問題を防ぐためだったと思います。

デフォルトのスタイルは通常、次のとおりです。

.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }

.ui-widget .ui-widgetにスタイルが定義されていない場合、デフォルトのfont-size: 1.1emスタイルが.ui-widgetに適用されると、ネストされたui-widgetsでフォントサイズが大きくなります。

フォントサイズを100％（または1em）に設定したより具体的な.ui-widget .ui-widgetセレクターを追加することで、コンポーネントをネストする深さに関係なく、一貫したフォントサイズを確実に得ることができます。

17
James Bassett

これは正常に機能します。

.ui-g {
    font-size: 13px;
}
0
Gustavo Mahecha

次のCSSで正常に動作します

body {
    font-size: 75% !important;

}

.ui-widget,.ui-widget-header,.ui-widget-content,.ui-widget-header .ui-widget-header,.ui-widget-content .ui-widget-content,.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button
    {
    font-size: 100% !important;
}
0
myset