如何更改面板標題CSS？

我想更改面板標題（標題）的CSS。但我不知道如何去做。如何更改面板標題CSS？

我想通過我自己的類來代替類v-panel-caption

<div class="v-panel v-widget v-has-width v-has-height"> 
    <div style="margin-top: -37px;" class="v-panel-captionwrap"> 
     <div class="v-panel-caption"> 
     <span>My caption</span> 
     </div> 
    </div> 
... 
</div>

<div class="v-panel v-widget v-has-width v-has-height"> 
    <div style="margin-top: -37px;" class="v-panel-captionwrap"> 
     <div class="my-panel-caption"> 
     <span>My caption</span> 
     </div> 
    </div> 
... 
</div>

的解決辦法是定義一個主風格：

public class myPanel extends Panel { 

    public myPanel() { 
     this.setCaption("My Caption"); 
     this.setContent(new Label("test"); 
     this.setPrimaryStyleName("my-panel-caption"); 
    } 
}

但這種改變只有全球<div>：

<div class="v-panel-my-panel-caption my-panel-caption"> 
    <div style="margin-top: -37px;" class="v-panel-captionwrap"> 
     <div class="v-panel-caption"> 
     <span>My caption</span> 
     </div> 
    </div> 
... 
</div>

有什麼方法可以自定義面板標題CSS？或者我應該編寫一個新的佈局（也許使用CssLayout）？

我發現的唯一方法是使用CSS重要的標記：

.my-panel-caption { 
    box-sizing: border-box !important; 
    padding: 0 12px !important; 
    line-height: 36px !important; 
    border-bottom: 5px solid #23C344 !important; 
    background-color: #4F9EE5 !important; 
    color: #FFFFFF !important; 
    font-weight: 400 !important; 
    font-size: 14px !important; 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important; 
    border-radius: 3px 3px 0 0 !important; 
    background-image: none !important; 
    box-shadow: none !important; 
}

但我不喜歡這樣:(

由於提前，

來源

2016-06-10 Splendf

通常，我爲組件添加一個自定義樣式名稱，然後重新定義樣式。例如：'.my-panel .v-panel-caption {background-color：red; }'......這應該沒有'！important'。 –

實際上，我只是想爲特定頁面定製此面板。不是爲了所有人。 – Splendf

對不起，我很蠢:) – Splendf

在嘗試這個 .java：

myPanel.setStyleName("customStyle");

and in .css：

.v-panel-caption-customStyle { 
    text-align: center !important; 
}

來源

2017-09-19 23:55:41

如何更改面板標題CSS？

回答

相關問題