0

谁能告诉我如何将自己的样式添加到ace:dialog组件中？它给出了一个styleClass属性。但这ace:dialog也有自己的风格。我不是一个好的css人，所以你能帮我解决这个问题吗？

谢谢你。

4

1 回答 1

2

很明显的方法是使用任何浏览器的代码检查器，最好是 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 以实现您想要的，并遵循 BalusC 的示例，了解如何使用您的自定义样式覆盖预定义的主题 CSS，来自如何覆盖 primefaces.css 中定义的那些类？问题。

于 2013-03-15T11:07:07.997 回答