2016-06-10 4 views
0

Я хочу изменить CSS заголовка Panel (подпись). Но я не знаю, как это сделать.Как изменить 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; 
} 

Но мне не нравится, что :(

Спасибо заранее,

+0

Обычно я добавляю к компоненту собственное имя стиля и затем переопределяю стили. Например: '.my-panel .v-panel-caption {background-color: red; } '... это должно работать без'! important'. –

+0

На самом деле я просто хочу настроить эту панель для определенной страницы. Не для всех. – Splendf

+0

Хорошо, я глуп :) – Splendf

ответ

0

попробовать это в .java:

myPanel.setStyleName("customStyle"); 

и .css:

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

 Смежные вопросы

  • Нет связанных вопросов^_^