Изменить CSS элементов GWT tabBar

Question

Обновление: Первая часть работает, но углы - нет. См. Часть 2 ниже.

Как применить стиль к панели вкладок (в GWT), чтобы можно было использовать одну панель вкладок за раз? У меня есть несколько разных tabPanels, которые должны иметь разные стили, но я не могу понять, как правильно применить стиль к панели, а затем как добавить этот стиль в мой CSS.

Когда я делаю что-то вроде:

tabBar.addstyle("thisisastyle");

Он добавляет стиль для всей панели, я хочу применить его к набору элементов, в частности, изменение цвета фона для отдельных вкладок. Я использую DecoratedTabPanel, и у меня есть свой собственный набор изображений для закругленных углов и такой, который я хотел бы использовать. Кроме того, как только стиль применяется правильно, как я могу назвать его в CSS? Моя текущая попытка выглядит так:

.topTabs .gwt-DecoratedTabBar .tabMiddleCenter {

Часть 2

Все остальные стили CSS легко применяются после задания имени стиля на панели вкладок и обращения к ним следующим образом:

.customizedStyleName .tabTopCenter {
    background-image: url('images/centerTopImage.gif');
}

но это не работает для двух углов, базовый GWT переопределяет мой CSS. CSS для правого угла выглядит так:

html > body .gwt-DecoratedTabBar .tabTopRight {

при проверке в Firebug (да Firefox). Может кто-нибудь сказать мне, как это переопределить?

Answer 1

Общая проблема в том, что standard.css динамически связан с вашей страницей как последняя таблица стилей. Таким образом, некоторые из ваших настроек (даже очень простые, например, для тела) могут быть частично отменены стандартом .css. Раскомментирование из файла .gwt.xml не помогает, поскольку вы теряете кучу нужных стилей, а также стандартную графику, используемую для визуализации декорированных панелей и т. Д.

Я описал свой способ борьбы с этим в своем блоге: http://IlIlIIlIlIlIlII.blog.de/2010/05/12/gwt-s-standard-css-killed-my-page-layout-8574576/

Если у вас есть какие-либо другие предложения, как решить эту проблему проще, я был бы признателен, если вы оставите комментарий.

Answer 2

Вы должны загрузить свои собственные стили CSS после загрузки стандартного CSS GWT или другой библиотеки, поддерживающей CSS.

Тогда вы можете переопределить любой «базовый» CSS ... последние CSS-победы. В Firebug вы увидите переопределенные стили CSS со шрифтом «насквозь».

Я сделал это, чтобы переопределить стандарт. GWT, GWT-Ext и Ext-GWT CSS.

Если вы пытаетесь перегрузить CSS-класс, который «встроен», и у вас нет деталей стиля, используйте Firebug для его проверки ... после повторного просмотра в Javadoc.

«Инкубатор GWT» имел информацию о новых механизмах CSS, похожих на ImageBundle ... ResourceBundle. И новые методы для динамического определения стилевых правил.

Answer 3

Вы можете изменить основное имя стиля и написать собственный стиль для всего.

Я думаю, что ваша проблема не воспроизводима в Mozilla .. она должна воспроизводиться только в IE. Итак, вы можете скопировать весь стиль из файла standard.css и заменить базовый gwt-DecoratedTabBar, скажем, customStyleName. Затем в файле .java ur установите первичное имя стиля на customStyleName. Затем отредактируйте разные стили, удалив ненужные изображения и т. Д. Надеюсь, это поможет. Если вам нужна дополнительная информация, пожалуйста, сообщите. Я опубликую требуемый исходный код и файл css.