Question

我正在尝试更改Vaadin项目中标签文本的文本颜色。我很难理解主题是如何运作的。我知道有几种方法可以做到这一点，但我没有任何运气。我尝试在css文件中创建一个新样式，并使用＆＃39; setStyleName＆＃39;添加样式。但颜色没有得到应用。我尝试了很多方法，但似乎无法让它发挥作用。在Firebug中我可以禁用它所说的颜色：＃141414;＆＃34;在下面，文本在网页上变为白色。

当我Firebug其中一个Label元素时，这就是我所看到的：

.evoltweb .v-verticallayout > .v-slot:first-child h1, .evoltweb .v-verticallayout > .v-slot:first-child .v-label-h1, .evoltweb .v-verticallayout > .v-slot:first-child h2, .evoltweb .v-verticallayout > .v-slot:first-child .v-label-h2, .evoltweb .v-verticallayout > .v-slot:first-child h3, .evoltweb .v-verticallayout > .v-slot:first-child .v-label-h3, .evoltweb .v-verticallayout > .v-slot:first-child h4, .evoltweb .v-verticallayout > .v-slot:first-child .v-label-h4, .evoltweb .v-verticallayout > div > .v-slot:first-child h1, .evoltweb .v-verticallayout > div > .v-slot:first-child .v-label-h1, .evoltweb .v-verticallayout > div > .v-slot:first-child h2, .evoltweb .v-verticallayout > div > .v-slot:first-child .v-label-h2, .evoltweb .v-verticallayout > div > .v-slot:first-child h3, .evoltweb .v-verticallayout > div > .v-slot:first-child .v-label-h3, .evoltweb .v-verticallayout > div > .v-slot:first-child h4, .evoltweb .v-verticallayout > div > .v-slot:first-child .v-label-h4 {
margin-top: 16px;
}

.evoltweb h2, .evoltweb .v-label-h2 {
font-size: 1.6em;
letter-spacing: -0.02em;
margin-bottom: 0.77em;
margin-top: 1.6em;
}

.evoltweb h1, .evoltweb .v-label-h1, .evoltweb h2, .evoltweb .v-label-h2, .evoltweb h3, .evoltweb .v-label-h3 {
color: #141414;
font-weight: 200;
line-height: 1.1;
}

h2, *:-moz-any(article, aside, nav, section) h1 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin-block-end: 0.83em;
margin-block-start: 0.83em;
}

address, article, aside, blockquote, body, caption, center, col, colgroup, dd, dir, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, legend, li, listing, main, marquee, menu, nav, noframes, ol, p, plaintext, pre, section, summary, table, tbody, td, tfoot, th, thead, tr, ul, xmp {
unicode-bidi: -moz-isolate;
}

继承自 div.v-label.v-widget.v-has-width

这是来自Firebug的标签的HTML：

<html>
<head>
<body class="v-generated-body v-ff v-ff47 v-ff470 v-gecko v-win" scroll="auto">
<div id="EVOLtWeb-1346167182" class="v-app evoltweb evoltwebui">
<div class="v-ui v-scrollable" tabindex="1" style="width: 100%; height: 100%;">
<div class="v-loading-indicator third v-loading-indicator-wait" style="position: absolute; display: none;"></div>
<div class="v-verticallayout v-layout v-vertical v-widget v-has-width v-has-height" style="position: absolute; width: 100%; height: 100%;">
<div class="v-expand" style="padding-top: 86px;">
<div class="v-slot v-slot-header" style="margin-top: -86px;">
<div class="v-horizontallayout v-layout v-horizontal v-widget header v-horizontallayout-header v-has-width v-has-height" style="width: 100%; height: 46px;">
<div class="v-expand" style="padding-left: 486px;">
<div class="v-slot" style="margin-left: -486px;">
<div class="v-spacing"></div>
<div class="v-slot v-align-middle">
<div class="v-spacing"></div>
<div class="v-slot v-slot-sp-gray v-align-right v-align-middle" style="width: 100%;">
<div class="v-widget -sp-gray v-has-width v-has-height sp-gray v-widget-sp-gray" style="width: 100%; height: 0px;">
<div class="v-sliderpanel-wrapper mode-top layout-horizontal flow-in-content sp-gray">
<div class="v-sliderpanel-content sp-gray" style="display: block; height: 631px;">
<div class="v-verticallayout v-layout v-vertical v-widget v-has-width v-margin-top v-margin-right v-margin-bottom v-margin-left" style="width: 100%;">
<div class="v-slot">
<div class="v-slot">
<div class="v-label v-widget v-has-width" style="width: 100%;">
<h2>1) Getting Started with EVOLt </h2>
</div>
</div>

这是来自我的项目标签的Vaadin代码：

public void paintLayout() { 

        Label sliderHtml = new Label(String.format("<h1>EVOLT Help Center</h1>"),ContentMode.HTML);
        addComponent(sliderHtml);   
        Label label1 = new Label(("<h2>1) Getting Started with EVOLt</h2>"), ContentMode.HTML);
        addLayoutClickListener(new LayoutClickListener() {

            public void layoutClick(LayoutClickEvent event) {
                if (event.getChildComponent() == label1) {
                    System.out.println("clicked Label1");
                    removeAllComponents();
                    Label sliderHtml = new Label(String.format("<h3>Getting Started with EVOLT</h3>"),ContentMode.HTML);
                    addComponent(sliderHtml);
                    Resource mainHelpImage = new ClassResource("evolt_with_arrows_small.png");
                    addComponent(sliderHtml);

我需要label1，而sliderHtml文本是白色的。现在它是黑色的。谁能告诉我最简单的方法是让我的标签文字为白色而不是黑色？

Answer 1

我想出了一种方法：

Label label1 = new Label(
String.format("<font size = \"5\" color=\"white\"> MyText" )
, ContentMode.HTML);

添加上面的HTML ContentMode和相应的HTML使文本变为白色，但我必须逐个添加到每个元素。

感谢。：）

如何更改Vaadin标签文字颜色？

1 个答案: