html - JSF ICEFaces ace:dialog のスタイリング

Question

ace:dialog独自のスタイルをコンポーネントに追加する方法を誰か教えてもらえますか? 属性を付与しstyleClassます。しかし、これace:dialogにも独自のスタイルがあります。私はCSSが得意ではないので、これを手伝ってもらえますか？

ありがとうございました。

Answer 1

非常に明白な方法は、ブラウザーのコード インスペクター (できれば Firefox の Firebug) を使用して、UI コンポーネント スイートと CSS スタイルによって生成された HTML マークアップを検査することです。このようにして、必要な CSS を簡単にオーバーライドできます。

質問にもっと近い、ショーケースの例<ace:dialog>からのタグ

<ace:dialog id="dialog"
            header="A sample dialog overview example"
            widgetVar="sampleDialog"
            closable="false"
            modal="true"
            draggable="false"
            showEffect="clip"
            hideEffect="fade"
            width="400">
    <h:form>...</h:form>
</ace:dialog>

次の HTML マークアップとスタイルを示します。

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-resizable"
     style="display: block; z-index: 1002; outline: 0px none; position: absolute; height: auto; min-width: 150px; width: 400px; top: 409.5px; left: 488px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog_main">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span id="ui-dialog-title-dialog_main" class="ui-dialog-title">A sample dialog overview example</span>
    </div>
    <div id="dialog_main" class="ui-dialog-content ui-widget-content" 
         style="width: auto; min-height: 0px; height: auto;" scrolltop="0" scrollleft="0">
        <form>...</form>
    </div>
    <div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>
    ...
</div>

したがって、インスペクションは次のスタイルについて教えてくれます。

• ui-dialogベース用<div>。
• ui-dialog-titlebarヘッダー コンテナー用。
• ui-dialog-titleヘッダー内のテキスト。
• ui-dialog-contentダイアログの内容<div>。

インスペクターで CSS を変更して必要なものを実現し、定義済みのテーマ CSS をカスタム スタイルでオーバーライドする方法に関する BalusC の例に従ってください。質問。