Я хочу изменить 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;
}
Но мне не нравится, что :(
Спасибо заранее,
Обычно я добавляю к компоненту собственное имя стиля и затем переопределяю стили. Например: '.my-panel .v-panel-caption {background-color: red; } '... это должно работать без'! important'. –
На самом деле я просто хочу настроить эту панель для определенной страницы. Не для всех. – Splendf
Хорошо, я глуп :) – Splendf