title: How to change the Panel-caption CSS?
body: <p>I want to change the CSS of the Panel header (caption). But I do not know how to perform that.</p>
  
  <p>I want to replace the class <code>v-panel-caption</code> by my own class</p>
  
  <pre><code>&lt;div class="v-panel v-widget v-has-width v-has-height"&gt; 
     &lt;div style="margin-top: -37px;" class="v-panel-captionwrap"&gt;
        &lt;div class="v-panel-caption"&gt;
           &lt;span&gt;My caption&lt;/span&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  ...
  &lt;/div&gt;
  </code></pre>
  
  <p>TO</p>
  
  <pre><code>&lt;div class="v-panel v-widget v-has-width v-has-height"&gt; 
     &lt;div style="margin-top: -37px;" class="v-panel-captionwrap"&gt;
        &lt;div class="my-panel-caption"&gt;
           &lt;span&gt;My caption&lt;/span&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  ...
  &lt;/div&gt;
  </code></pre>
  
  <p>The solution could be to define a primary style :</p>
  
  <pre><code>public class myPanel extends Panel {
  
      public  myPanel() {
          this.setCaption("My Caption");
          this.setContent(new Label("test");
          this.setPrimaryStyleName("my-panel-caption");
      }
  }
  </code></pre>
  
  <p>But that change only the global <code>&lt;div&gt;</code>:</p>
  
  <pre><code>&lt;div class="v-panel-my-panel-caption my-panel-caption"&gt; 
     &lt;div style="margin-top: -37px;" class="v-panel-captionwrap"&gt;
        &lt;div class="v-panel-caption"&gt;
           &lt;span&gt;My caption&lt;/span&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  ...
  &lt;/div&gt;
  </code></pre>
  
  <p>There is any way to customize the panel caption CSS ? Or should I compose, myself, a new layout (maybe using CssLayout) ?</p>
  
  <p>The only way I have found is using the CSS !important tag :</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>But I don't like that :(</p>
  
  <p>Thanks in advance,</p>