Изменение стилей Tapestry приложения

В данной статье описывается, как поменять стили у программы, написанной с использованием Tapestry 5.3.x

Добавляем нашу любимую библиотечку со стилями, например bootstrap.css. Это почти сразу придаст приложению определенный общий вид, как будто для него разрабатывали дизайн. Но к сожалению, некоторые вещи, в частности валидация, пейджинг, таблицы, начинают смотреться чужеродно. Например вот так выглядит страница логина после применения bootstrap.css

К сожалению, исправить там что-то уже довольно сложно.
Поэтому принимаем решение полностью отказаться от стилей tapestry в приложении. Делается это следующим образом: добавляем к AppModule.java вот такой код
    @Contribute(MarkupRenderer.class)
    public static void deactiveDefaultCSS(OrderedConfiguration<MarkupRendererFilter> configuration)
    {
        configuration.override("InjectDefaultStylesheet", null);
    }  

После удаления таблицы стилей страницы выглядят пустовато; но ничего, скоро мы это исправим.
Добавляем style.css - нашу собственную таблицу стилей. В ней мы переопределим некоторые стили tapestry.

Для начала, добавим стили для корректного отображения ошибок:

#корректируем ошибку tapestry с заползанием текста ошибки за левый край
DIV.t-error LI{
  margin-left: 20px;
}
#задаем цвет попапа с ошибкой
DIV.t-error-popup{
   color: #b94a48;
}
#рисуем стрелку вниз
.t-error-popup > span:after {
    border-color: #fcf8e3 transparent;
    border-style: solid;
    border-width: 15px 15px 0;
    bottom: 0px;
    content: "";
    display: block;
    left: 20px;
    position: absolute;
    width: 0;
}
#рисуем попап
DIV.t-error-popup > span {
   padding: 4px;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   border-color: #eed3d7;
   background-color: #fcf8e3;
   border: 1px solid #eed3d7;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
}
#Задаем цвет контура поля ввода с ошибкой
input.t-error{
      border-color: #eed3d7;
}

И стили для корректного отображения pager'а

#стили для grid pager, скопированы из bootstrap.css
DIV.t-data-grid-pager{
    padding-left: 15px;
    display: inline-block;
  *display: inline;
  margin-bottom: 4px;
  margin-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  *zoom: 1;
}
.t-data-grid-pager > a,
.t-data-grid-pager > span {
  padding: 4px 12px;
  line-height: 20px;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  /*border-left-width: 0;*/
}
.t-data-grid-pager > a:hover,
.t-data-grid-pager > a:focus,
.t-data-grid-pager > .current > a,
.t-data-grid-pager > .current > span {
  background-color: #f5f5f5;
}
.t-data-grid-pager > .current > a,
.t-data-grid-pager > .current > span {
  color: #999999;
  cursor: default;
}
.t-data-grid-pager a:first-child,
.t-data-grid-pager span:first-child {
  border-left-width: 1px;
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
}
.t-data-grid-pager a:last-child,
.t-data-grid-pager span:last-child  {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
}
Результат:

Подправим beandisplay

DL.t-beandisplay {
    background: none repeat scroll 0 0 rgb(245, 245, 245);
    display: block;
    padding: 2px;
    width: auto;
}
DL.t-beandisplay DT:after {
    content: ":";
}
DL.t-beandisplay DT {
    clear: left;
    display: inline;
    float: left;
    padding-right: 3px;
    text-align: right;
    vertical-align: middle;
    width: 250px;
}

Поправим показ таблиц (выделим заголовок)
.table th {
  white-space: nowrap;
  line-height: 20px;
  background-color: rgb(245, 245, 245);
}

Осталось немного допилить тексты сообщений, выводимые Tapestry при срабатывании валидации. Чтобы их скастомизировать, необходимо создать следующие файлы:
org.apache.tapestry5.corelib.components.Errors.properties следующего содержания:
default-banner=Вам необходимо исправить следующее, чтобы продолжить:
И org.apache.tapestry5.internal.ValidationMessages.properties в котором можно переопределить сообщения, выдаваемые при различных видах валидации, например для required:
required=Укажите значение

Результат: