Customizing URL Buttons
URL buttons are implemented as A elements with background images.
Each of the default URL buttons (URLButton ,
MailToButton
,
RemoteControl
)
has four CSS classes, along with four associated :hover classes. The Web View Editor automatically determines
which CSS class to use based on the field type and the field attribute settings. For example, the CSS
classes used for URLButton are determined as follows:
When |
These CSS classes are used |
Column Span=1 |
URLButtonState1
|
Column Span=2
|
URLButtonSpanTwoState1
|
Column Span=2
|
URLButtonTwoWidthOneState1
|
Field already has a button (for example, a date field). |
URLButtonSecondButtonState1
|
These CSS classes are defined in the CensusMain.css style sheet in CensusWeb\Views\CensusWebVD\Theme\css.
Each different pair of CSS classes positions the button differently, by changing the value of the CSS left property.
The :hover pseudo classes change the background image to give a rollover effect.
To define your own buttons, copy the URLButton classes, change the class names, and point the background-image property to your button images. For example:
.MyButtonState1
{
background-image:
url(../images/buttons/mybutton_off.gif);
background-repeat:no-repeat;
display:block;
position:absolute;
left:80%;
width:24px;
height:24px;
top:0px;
}
For button rollovers, you’ll need two versions of your button image. Your button images should have a one or two pixel margin (so there’s some space between the field and the button). Alternatively, you could adjust the left property.
To use these new classes, use MyButton as the value of the URL Button CSS attribute.