Как применить пользовательские стили в проекте GWT, который использует GWT-Bootstrap

Question

Я использую GWTBootstrap Modal для своего проекта, проблема в том, что его ширина слишком мала для моего вкуса.

Я проверил стили, которые он получает с firebug и увидел это

.modal {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
left: 50%;
margin: -250px 0 0 -280px;
outline: medium none;
position: fixed;
top: 50%;
width: 560px;
z-index: 1050;
}

Я перешел в каталог Webapp/css и внес следующие изменения в bootstrap.min.css

.modal {
width : 960px;
max-height : 960px;
}

Но он перезаписывается компилятором gwt.

Далее я сослался на это созданный файл css custom-overrides.css

.modal {
    width : 960px;
    max-height : 960px;
}

и импортировал это как <stylesheet src="/custom-overrides.css" /> в моем gwt.xmlЭто также не работает, затмение предупреждает меня, что файл был изменен или удален после компиляции.

Я также попытался сделать то же самое изменение в файле UIBinder, где я создаю модальный.

<ui:style>
    .modal{
        width : 960px;
    max-height : 960px;
    }
</ui:style>

Это тоже не работает. Я озадачен, что я должен сделать, чтобы мои стили были применены?

Answer 1

Это проблема начальной загрузки в твиттере: модал не отзывчив.

Это должно быть исправлено в Bootstrap 3.0.

Что касается решений, как сказал @mit, они будут работать, но я должен предупредить вас: это не очень хорошая практика, если вы точно не знаете, что делаете.

Я предложу вам добавить ID к вашему модалу и написать специальный CSS для него. Это исключит путаницу с другими модами. Поскольку ID является более конкретным, вам не нужно использовать !important также.

Answer 2

Все 3 решения должны работать.

1. Вы можете переопределить bootstrap.min.css но вы должны сделать это в самой библиотеке gwt-bootstrap, потому что, как вы узнали, она перезаписывается при компиляции приложения.
2. Вы также можете включить custom-override.css stylesheet но вы должны убедиться, что он также переопределяет стили.modal из исходного файла начальной загрузки. Вы можете убедиться в этом, добавив !important переписанным стилям CSS (т.е. width : 960px !important;)
3. Если вы хотите переопределить .modal класс в вашем файле UiBinder вы должны использовать аннотацию @external:

Что-то вроде этого:

<ui:style>
    @external .modal;
    .modal{
        width : 960px;
        max-height : 960px;
    }
</ui:style>

Но вы также можете добавить !important править стилями