As the first step, we might want to look into the default.css file. It can be found in
the Tapestry source code package that can be downloaded from http://tapestry.
apache.org/download.html. The name of the package will be similar to tapestrysrc
5.0.6 binary (zip). The default.css file can be found inside the package,
in the tapestry-core\src\main\resources\org\apache\tapestry subdirectory.
Advanced Components
[ 148 ]
This file contains a significant number of styles, but those related to BeanEditForm
have t-beaneditor in their name, and those related to Grid contain t-data-grid.
Let's say we want to change the background of BeanEditForm to white, the
surrounding border to green and give more space to the labels. Admittedly, I am
not an expert in CSS, but it is not actually difficult to figure out what exactly should
be changed. These are the two style definitions we shall want to tweak:
DIV.t-beaneditor
{
display: block;
background: #ffc;
border: 2px solid silver;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-beaneditor LABEL
{
width: 10%;
display: block;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
}
The first of them defines the appearance of the form in general, the second??”the
appearance of the labels used for the fields in the form.
Pages:
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198