Переопределить GWT Styling

Question

У меня был прекрасный чистый HTML-макет для веб-страницы, который я сейчас воссоздаю в GWT. Я пытаюсь использовать тот же CSS в своем приложении GWT, но это не работает для меня. Стили GWT, похоже, перекрывают мои. Я знаю, что могу полностью отключить стили GWT, однако я бы предпочел иметь стили для компонентов GWT, которые я добавляю (панель вкладок, кнопка и т. Д.). Есть ли способ отключить стилизацию GWT и включить его только для компонентов, которые я выбрал?

Answer 1

Мне удалось решить проблему с переопределением стандартных правил CSS, унаследовав файл .css моего проекта в файле .gwt.xml моего проекта. Когда вы устанавливаете свой пользовательский .css таким образом - ПОСЛЕ обычной строки наследования - он будет иметь более высокий приоритет в каскадном правиле, чем то же правило, определенное в стандартных таблицах стилей gwt. Потребовалось несколько часов, чтобы понять, как правильно его наследовать, потому что при первой попытке просто наберите <stylesheet src='WebTerminal.css' /&gt; в моем .gwt.xml файле и комментирование <link type="text/css" rel="stylesheet" href="WebTerminal.css"> на моей .html главной странице не принесло мне никакого результата. Таким образом, решение состоит в том, чтобы использовать относительный путь, когда вы устанавливаете .css в .gwt.xml config, например так:

<stylesheet src='../WebTerminal.css' />

Обратите внимание ../ в начале моего относительного пути. Чтобы выяснить, как это работает, добавьте Window.alert(GWT.getModuleBaseURL()); в качестве первой строки вашего onModuleLoad() метода. Это покажет вам что-то вроде https://localhost:8080/myproject/resouces/webtermial/, тогда как на самом деле URL вашей размещенной страницы будет выглядеть как https://localhost:8080/myproject/resouces/WebTerminal.html. Здесь myproject / resouces - это каталог, который содержит ваш файл .css, и когда вы устанавливаете его в .gwt.xml как <stylesheet src='WebTerminal.css' />, компилятор начинает искать myproject/resouces/webtermial/WebTerminal.css и не может его найти. Вот почему добавление ../ иногда является единственным способом решения вашей проблемы.

В дополнение к сказанным выше словам, я только хочу упомянуть, что мне не удалось найти какое-либо описание этого вопроса в последнем документальном фильме или во время обсуждений, происходящих в группах Google. Хотелось бы, чтобы это было менее сложно выяснить, потому что у GWT гораздо более сложные проблемы, чем та, которая должна была иметь исчерпывающее описание в руководстве.

Answer 2

Причина, по которой ваш стиль переопределяется, заключается в том, что когда gwt компилирует ваш проект, он включает в себя собственный файл css по умолчанию. Тип файла CSS зависит от типа используемого по умолчанию стиля:

<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

В приведенном выше сценарии будет включен файл clean.css, который, в свою очередь, имеет следующие общие стили, которые полностью смещают ваш шаблон (параметры margin и background всегда портят мои шаблоны):

body, table td, select, button {
  font-family: Arial Unicode MS, Arial, sans-serif;
  font-size: small;
}
pre {
  font-family: "courier new", courier;
  font-size: small;
}
body {
  color: black;
 margin: 10px;
 border: 0px;
 padding: 0px;
 background: #fff;
 direction: ltr;
}
a, a:visited {
  color: #0066cc;
  text-decoration:none;
}

a:hover {
  color: #0066cc;
  text-decoration:underline;
}

select {
    background: white;
}

Если вы удалите их и оставите все остальное нетронутым (в частности, если вы оставите все, что начинается с 'gwt'), ваш шаблон не будет затронут.

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

Надеюсь, это поможет.

Answer 3

Самое простое - переопределить стили, которые вам не нужны. Например, если вы не хотите, чтобы gwt стилизовал ваши кнопки, вы можете определить стиль для класса gwt-Button в своем собственном CSS-файле.

Подробнее здесь .

Answer 4

Существует специальный ресурс, от которого вы можете унаследовать файл clean.css:

<inherits name='com.google.gwt.user.theme.standard.StandardResources'/> 

Найдите ваш файл * .gwt.xml и найдите

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

И замените его на строку выше.

Answer 5

Решением является создание папки public / css в том же каталоге, что и ваша gwt.xml.

Добавьте эти две строки в ваш gwt.xml :

<stylesheet src='css/project-name.css'/>

и

<public path='public'/>

Поместите файл project-name.css в папку css .

Это работает с GWT Compile и Super Dev Mode .

Answer 6

Вы можете использовать <! Важное> объявление. Это один из самых простых вариантов

--- GWT ----

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 3px;
background: white;
}

--- Пользовательский стиль ---

.gwt-PopupPanel {
padding: 0px !important;
}

--- Результат ---

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 0px;
background: white;
}

Answer 7

Просто для тех, кто сталкивается с подобной ситуацией, для уточнения ответа, на который ответил stringo0, я поместил свои стили в GWT_APPNAME.css, где GWT_APPNAME - это имя файла, который генерирует ваш плагин GWT Eclipse при создании вашего проект.

Этот css-файл должен быть доступен непосредственно в папке war с тем же именем, что и html-страница приветствия. Я попытался это переопределить стили gwt-anchor, и это сработало.

.gwt-Anchor:link {color:#FF0000;}
.gwt-Anchor:visited {color:#00FF00;}
.gwt-Anchor:hover {color:#FF00FF;}
.gwt-Anchor:active {color:#0000FF;}

Answer 8

В gwt 2.6 в сгенерированном источнике JavaScript есть папка (gwt), в которой есть все стили.

Попробуйте удалить его.

Answer 9

У меня была похожая проблема при попытке установить фоновое изображение и установить прозрачный фон для элемента body, я решил ее, установив определенный стиль для элемента, чтобы я мог сохранить другие стили GWT:

<body id="elementId">...</body>

#elementId {
   background: transparent;
}

Надеюсь, это полезно для вашей конкретной проблемы.

Answer 10

Ответ Витруса на меня сработал, спасибо! Однако изменения в файлах .css не были отражены в веб-приложении при перезагрузке страницы; похоже, проблема с кешем. Обновление с помощью Ctrl + F5 решает эту проблему. Больше информации здесь: http://productforums.google.com/forum/#!topic/chrome/_oCbvfRwTok.