Tutorials & ManualsHow-tosLessons MiscellaneousAlternating Line Colors in a List Field

Alternating Line Colors in a List Field

This lesson will demonstrate how to create alternating line colors in a Revolution list field. This technique requires version 2.8.1 or later of Revolution.

Create an Image

Drag an image from the Tools Palette onto a stack.

Paste CreateFieldAlternatingColors Handler Into Stack Script

Paste the following script into the stack script. This will put the handler in the message path. This handler is used to create the image that will be used for the alternating colors in the field.

command CreateFieldAlternatingColors pDestImg, pColor1, pColor2, pRowHeight, pWidth, pOffset

local theColor1Pixel,theColor1Row,theColor1RowImgData,theColor2Pixel

local theColor2Row,theColor2RowImgData,theOffsetRow,thePixel

local theRect,theRow


if pRowHeight is empty then put 18 into pRowHeight

if pWidth is empty then put 500 into pWidth

put max(0, pOffset) into pOffset


## turn strings into arrays

split pColor1 by comma

split pColor2 by comma


## Create a pixel for color 1 and 2

put numtochar(0) into theColor1Pixel

put numtochar(pColor1[1]) after theColor1Pixel

put numtochar(pColor1[2]) after theColor1Pixel

put numtochar(pColor1[3]) after theColor1Pixel


put numtochar(0) into theColor2Pixel

put numtochar(pColor2[1]) after theColor2Pixel

put numtochar(pColor2[2]) after theColor2Pixel

put numtochar(pColor2[3]) after theColor2Pixel


## build 1 complete row of using pixel

repeat with thePixel = 1 to pWidth

put theColor1Pixel after theColor1RowImgData

put theColor2Pixel after theColor2RowImgData



## if pOffset is set then build sliver of row 2 color

repeat with theRow = 1 to pOffset

put theColor2RowImgData after theOffsetRow

end repeat


## build color 1 row

repeat with theRow = 1 to pRowHeight

put theColor1RowImgData after theColor1Row



## finish building row 2 color

repeat with theRow = 1 to pRowHeight - pOffset

put theColor2RowImgData after theColor2Row

end repeat


put the rect of pDestImg into theRect

put item 1 of theRect + pWidth into item 3 of theRect

put item 2 of theRect + pRowHeight * 2 into item 4 of theRect


lock screen

set the rect of pDestImg to theRect

set the imagedata of pDestImg to theOffsetRow & theColor1Row & theColor2Row

unlock screen

end CreateFieldAlternatingColors

Call CreateFieldAlternatingColors

Pay particular attention to the 4th (1) and 6th (2) parameters. The 4th parameter will match the height of each line in your list field. The 6th parameter is an offset value. We pass in 2 for the offset which means there will be 2 rows of color 2 (parameter 3), 18 rows of color 1 (parameter 2) and then 16 rows of color 2. This is necessary in order for the highlighted color of the selected line to match up with the alternating background colors.

This is what the image looks like afterwards.

Make Note of the Image ID

We need this value when setting the backgroundPattern of the list field.

Create a List Field

Drag a list field from the tools palette to the card.

Edit "Colors & Patterns"

Click on the Fill pattern swatch.

Enter the Image ID

Manually enter the id of the image. Press OK.

Your field should now look something like this.

Change Margins

In order for the alternating line colors to match up with the lines correctly you will most likely need to change the margins. I get good results by setting the margins to 8,6,8,5. Since this stack is running on OS X I also changed the font size to 13. On Windows I would use Tahoma with a font size of 12.

Change textHeight Property

The final step is to set the textHeight property. In the Basic Properties pane change the textHeight property to 18. This value matches the height of each row in the image.


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.