Vaadin 8：自定義按鈕顏色

我想從「瓦洛友好」按鈕改變綠色，但我失敗了。我按照 Vaadin Upload Button, CSS to change its color (same styles as Button)? 中的描述做了，但我想我錯過了一些東西。Vaadin 8：自定義按鈕顏色

從styles.css中我複製了

.mytheme .v-button-friendly { 
height: 37px; 
padding: 0 16px; 
color: #eaf4e9; 
font-weight: 400; 


border-radius: 4px; 
border: 1px solid #227719; 
border-top-color: #257d1a; 
border-bottom-color: #1e6b15; 
background-color: #2c9720; 
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%); 
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%); 
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05); 
}

到mytheme.scss，只是改變了顏色。 mytheme.scss現在看起來如下：

@import "../valo/valo.scss"; 

@mixin mytheme { 
    @include valo; 

.v-button-sgcgreen { 
height: 37px; 
padding: 0 16px; 
color: #006666; 
font-weight: 400; 


border-radius: 4px; 
border: 1px solid #227719; 
border-top-color: #257d1a; 
border-bottom-color: #1e6b15; 
background-color: #006666; 
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%); 
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%); 
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05); 
} 
}

並且它被添加到styles.css的文件的末尾作爲 .mytheme .V-按鈕sgcgreen {....}

我設置按鈕的樣式爲

Button showAllProbesBtn = new Button("Show all"); 
showAllProbesBtn.addStyleName("sgcgreen");

但按鈕是默認的灰色，並且沒有指定的顏色。

我錯過了什麼？謝謝你的幫助！

編輯：

看來我所做的是正確的，但沒有直接顯示。雖然我做了Maven clean多次安裝並重新啓動Tomcat，但只有在我開始更改代碼中的其他內容後，纔出現正確的顏色。

緩存的樣式在哪裏？在Eclipse和Chrome中立即查看樣式更改需要做些什麼？

來源

2017-09-28 Natalie

我建議您更改Valo變量v-friendly-color（請參閱Valo theme doc）。例如mytheme.scss：

// overwrite Valo variables 
$v-friendly-color: #0000F0; 

// Import valo after setting the parameters 
@import "../valo/valo"; 

@mixin goidentity { 
    @include valo; 
}

的Valo的主題，然後將帶您設定的顏色。不需要混淆CSS樣式。但是，我不知道這個顏色變量是否在主題的其他地方使用。所以這可能會影響其他樣式，而不僅僅是友好按鈕。

來源

2017-09-28 10:48:59

Steffen這是一個偉大的信息！我不知道這是可能的。這在Eclipse中適用於我，但目前爲止還沒有在Chrome中運行，但我重新啓動了Chrome。它在哪裏緩存？ – Natalie

我猜瀏覽器會緩存結果'styles.css'。我不使用Chrome，但找到[this]（https://www.technipages.com/google-chrome-clear-cache）。 –

非常感謝！它被緩存在Chrome中。我剛發現圖像也被緩存了。 – Natalie

Vaadin 8：自定義按鈕顏色

回答

相關問題