Styling 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标题中的文本;
• 对话框内容<div> ui-dialog-content。

在检查器中更改 CSS 以实现您想要的内容，并按照 BalusC 的示例了解如何使用自定义样式覆盖预定义的主题 CSS，请参阅如何覆盖在素数中定义的那些类.css？ 问题。