代码之家  ›  专栏  ›  技术社区  ›  Organiccat

更改GWT选项卡项的CSS

  •  2
  • Organiccat  · 技术社区  · 16 年前

    更新: 我让第一部分工作了,但角落没有。见下文第2部分。

    如何将样式应用于Tabbar(GWT中),以便一次只能使用一个Tabbar?我有几个不同的选项卡面板,需要有不同的样式,但我不知道如何正确地将样式应用于栏,然后如何将该样式添加到我的CSS。

    当我做类似的事情时:

    tabBar.addstyle("thisisastyle");
    

    它添加了整个条形图的样式,我想将其应用于一组项目,特别是更改单个选项卡的背景色。我正在使用一个装饰过的abpanel,我有自己的一组圆角图像,所以我想使用。同样,一旦样式被正确应用,如何在CSS中调用它?我目前的尝试是这样的:

    .topTabs .gwt-DecoratedTabBar .tabMiddleCenter {
    

    第2部分

    在为选项卡栏设置样式名并按以下方式寻址后,可以轻松应用所有其他CSS样式:

    .customizedStyleName .tabTopCenter {
        background-image: url('images/centerTopImage.gif');
    }
    

    但这似乎不适用于两个角,基本GWT覆盖我的CSS。右角的CSS如下所示:

    html > body .gwt-DecoratedTabBar .tabTopRight {
    

    在Firebug(yah firefox)中检查时。有人能告诉我怎么覆盖这个吗?

    3 回复  |  直到 14 年前
        1
  •  1
  •   reechard    16 年前

    您应该加载自己的CSS样式 之后 加载标准GWT CSS或其他支持CSS的库。

    然后,您可以自由地重新定义任何“基本”CSS…最后的CSS获胜。在Firebug中,您将看到用“strike-through”字体覆盖的CSS样式。

    我这样做是为了覆盖std.gwt、gwt ext和ext.gwt css。

    如果您试图重载一个“内置”的CSS类,但您没有样式详细信息,请使用Firebug检查它…在JavaDoc里看了一遍之后。

    “GWT孵化器”有类似于ImageBundle的新CSS机器的信息…资源包。以及动态定义样式规则的新方法。

        2
  •  1
  •   Sven    14 年前

    一般的问题是,standard.css作为最后一个样式表动态链接到您的页面。这样,您的一些设置(即使是非常基本的设置,例如用于body的设置)可能会被standard.css部分否决。从.gwt.xml文件中取消对它的注释并没有帮助,因为您释放了一系列想要的样式,以及用于呈现装饰面板等的标准图形。

    我在我的博客中描述了我处理它的方式: http://IlIlIIlIlIlIlII.blog.de/2010/05/12/gwt-s-standard-css-killed-my-page-layout-8574576/

    如果你有其他建议,如何处理这个问题在一个更容易,我会感激如果你留下评论。

        3
  •  0
  •   Anant    16 年前

    您可以更改样式主名称并为整个样式编写自己的样式。

    我认为你的问题在Mozilla是不可复制的。它只能在IE中复制。因此,您可以从standard.css文件复制整个样式,并用say customizedStyleName替换基础gwt decoratedAbbar。然后在U.java文件中,将样式主名称设置为SudioDebug样式名。然后通过删除不需要的图像等方式编辑不同的样式。希望这有帮助。如果你想要更多的信息,请告诉我。我将发布所需的源代码和CSS文件。