Question

有谁能告诉我如何将自己的样式添加到ace:dialog组件？它提供styleClass属性。但是这个ace:dialog也有自己的风格。我不是一个好的css家伙，所以你可以帮我这个吗？

谢谢。

Answer 1

相当明显的方法是使用任何浏览器的代码检查器，最好使用Firefox的Firebug，检查由UI Component Suite和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以达到您想要的效果，并按照BalusC的示例，了解如何使用How do I override those classes defined in primefaces.css?问题中的自定义样式覆盖预定义主题CSS。

设计JSF ICEFaces ace：对话框

1 个答案: