Customizing URL Buttons

URL buttons are implemented as A elements with background images.

Each of the default URL buttons (URLButton graphics/urlbutton_on.gif, MailToButton graphics/mailtobutton_on.gif, RemoteControl graphics/remotecontrol_on.gif) 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
URLButtonState1:hover

Column Span=2
CSS Class =
MemoFieldWidth

URLButtonSpanTwoState1
URLButtonSpanTwoState1:hover

Column Span=2
CSS Class = SpanTwoWidthOne

URLButtonTwoWidthOneState1
URLButtonSpanTwoWidthOneState1:hover

Field already has a button (for example, a date field).

URLButtonSecondButtonState1
URLButtonSecondButtonState1:hover

 

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.