Question

I want to change the CSS of the Panel header (caption). But I do not know how to perform that.

I want to replace the class v-panel-caption by my own class

<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>

TO

<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>

The solution could be to define a primary style :

public class myPanel extends Panel {

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

But that change only the global <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>

There is any way to customize the panel caption CSS ? Or should I compose, myself, a new layout (maybe using CssLayout) ?

The only way I have found is using the CSS !important tag :

.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;
}

But I don't like that :(

Thanks in advance,

Answer 1

试试这个在.java中：

myPanel.setStyleName("customStyle");

和.css：

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

How to change the Panel-caption CSS?

1 个答案: