Home » Reference Guide » Frames » XBorder Properties

XBorder Properties

Each simple XBorder filter consists of a series of properties that control the appearance of the generated frame. Please see the XBorder overview for more information.

The table below lists each of the XBorder properties, grouped by category and linked to the detailed information in the property list that follows. The category headings are linked to more information about the property category.

Note: The ‘closeups’ and ‘thumbnails’ properties have no effect in .xbp files!

Setup Properties
class prescale thumbnails
closeups    
Background Properties
bgCol bgOffX bgOffY
bgFile    
Border Properties
boBlend boTrans boWidthS
boClip boWidth boWidthW
boCol boWidthE  
boMargin boWidthN  
Bracket Properties
brCol brThick brY
brStyle brX  
Frame Properties
frBlend frWidth frWidthS
frCol frWidthE frWidthW
frTrans frWidthN  
Miscellaneous Properties
clip    
Shadow Properties
shCol shTrans shWidthY
shDir shWidth shExX
shDrop shWidthX shExY

Setup Properties

Setup properties apply to the filter as a whole. Setup properties are specified on the BluPlusPlus-General tab in BPP; when used in a skin that does not directly support XBorder via its user interface these parameters must be used in a uservariable ‘filterN’ set on the JAlbum Advanced-User Variables tab. In this case the class parameter must be used (‘class=XBorderFilter’).

Property: class
Purpose: Informs JAlbum that XBorderFilter is to be used
Values: XBorderFilter
Default: none
Notes: This parameter is required when using XBorderFilter via the JAlbum-Advanced Uservariable tab
Example: class=XBorderFilter
Property: closeups
Purpose: Specifies that the current filter applies to closeup (slide) images
Values: true/false
Default: true
Notes: This property is only valid when used in the JAlbum Advanced-uservariables. Using this property in an .xbp file has no effect
Example: closeups=true
Property: prescale
Purpose: Specifies that the filter is to be applied BEFORE image scaling is performed
Values: true/false
Default: true
Notes:

By applying prescaling, borders/frames for thumbnail images will be proportional to the closeup (slide) image. By turning prescaling off, the borders/frames for thumbnail images will be sized exactly as specified in the filter

It is possible just to write ‘prescale’ as a shortcut (‘=true’) can be omitted
Example: prescale
Property: thumbnails
Purpose: Specifies that the current filter applies to thumbnail images
Values: true/false
Default: true
Notes: This property is only valid when used in the JAlbum Advanced-uservariables. Using this property in an .xbp file has no effect
Example: thumbnails=false

Background Properties

Background properties specify color, external file, and offsets for backgrounds.

Property: bgCol
Purpose: Controls the background color
Values:

The values can be a valid HTML color name or color specified in hex format (e.g. =#fff8dc)
Default: white
Notes: Background colors are typically called out for behind a shadow, behind a clipped image, or behind a transparent frame or border
Example: bgCol=black
shCol=white
shWidth=1
shDrop=soft		 When using a page with a black background, then consider using a white shadow
bgCol=#fff8dc
clip=500
shDrop=soft
frWidth=7,7 frCol=maroon,#fff8dc		 After clipping the image into an oval, the background color shows. Here, both the clip background and the inside band of the frame are colored cornsilk (#fff8dc)
Property: bgFile
Purpose: Specifies the path to a background file intended to appear within a frame, or behind a shadow, clipped border, or clipped frame
Values:

URL or path on a computer to a jpeg, png, or gif image file to be used as a background

Default: no background
Notes:

Frames are considered to be opaque, and the default color is white; to be able to see a background file, the frame must be made transparent using the frTrans property

The path to a background file must be relative to the BluPlusPlus-->borders folder.
Example: bgFile=(relative path to wood.jpg)
frTrans=100,0 frWidth=20,5
frCol=white		 Both frames are white, but the outer 20-pixel frame was made transparent so that the wood shows through
Property: bgOffX   bgOffY
Purpose: Controls the offset of the background in the X and Y directions
Values:

Any integer, giving the amount of offset in pixels
Default: no offset
Notes: This property might be used as illustrated below, or where a background using a left border needs to be shifted out of the picture when placing a background pattern on a drop shadow. It is not practical to use this property to attempt to align shadow background patterns with page background patterns where there are clearly defined vertical or horizontal elements in the pattern.
Example: properties in filter1:
clip=1000
bgFile=grid.gif

properties in filter2:
frWidth=10,20 frCol=maroon,white
bgFile=grid.gif		 The image is clipped, exposing a grid pattern background. The inner frame also uses a grid background. Note that the two grids do not align where the image meets the frame. This situation calls for the use of bgOffX and bgOffY to shift one of the background patterns so that the two will properly align.
bgOffX=92 bgOffY=30 bgFile=grid.gif

other filter1 and filter2 values are the same as above		 After trial and error, the background offset values needed to make the two backgrounds align were bgOffX=92 and bgOffY=30.

Border Properties

Border properties create bands of color on the inside of images. When multiple border bands are specified, the bands are created from the outside in; that is, the first band specified is the outermost band.

Property: boBlend
Purpose: Blends colors and transparencies between subsequent bands of borders
Values:

true|false

Default: false
Notes: Important: The boCol property must contain one element more than boWidth; otherwise, the last value is repeated.
Example: boBlend
boWidth=10,10 boCol=blue,white,red		 Note the requirement that the boCol must contain one more value than the boWidth
Property: boClip
Purpose: Specifies the border clip radius
Values:

A single value or a series of values, separated by commas, one for each frame band. The values can be a valid HTML color name or color specified in hex format (e.g. #ff00cc)

Default: 0 (no clipping)
Notes: The border may have rounded corners. The value becomes the clip radius
Example: boClip=30
boWidth=7
boCol=white
boMargin=5		 The radius of the inner edge of the border band has a radius of 30 pixels. The outer radius will be 37 pixels in this example.
Property: boCol
Purpose: Specifies the color of a border
Values:

A series of values, separated by commas, one for each border band. The values can be a valid HTML color name or color specified in hex format (e.g. #ff00cc). The quotation marks are not necessary

Default: white
Notes: If the number of colors specified is less than the number of bands specified in boWidth, the last color specified is repeated as many times as necessary
Example: boCol=blue,white,red boWidth=2,5,2
boClip=20
boMargin=5 boTrans=0,60,0		 Note that the blue band, specified first, is the outermost band, followed by transparent white, and red
Property: boMargin
Purpose: Specifies the space betweenthe border and outer edges of the image
Values:

Integer (in pixels)

Default: 0 (no margin)
Notes:  
Example: boMargin=5
boClip=30
boWidth=7
boCol=white		 The border margin is the distance between the outer edge of the border and the edge of the image. In this case, it is 5 pixels.
Property: boTrans
Purpose: Specifies the degree of transparency of a border
Values:

0 is opaque, 100 fully transparent (invisible)

Default: 50%
Notes: As transparency increases, you see more of the underlying image through the colored border; background files do not work with borders.
Example: boTrans=0
boWidth=2
boMargin=5
boCol=red
boClip=20		 Note that even with boTrans set to zero, the border still retains some transparency
Property: boWidth
Purpose: Specifies the width of the border
Values:

Integer representing border width in pixels

Default: 0 (no border)
Notes: This may be listed as a single value or a series of values, separated by commas, one for each border band
Example: boWidth=2,5,2
boClip=20
boMargin=5 boTrans=0,60,0 boCol=blue,white,red		 This image includes a 5-pixel margin, 2-pixel blue border, 5-pixel transparent white border, and a 2-pixel red border
Property: boWidthN   boWidthE   boWidthS   boWidthW
Purpose: Specifies the width of the border, allowing for different widths on each edge of the image
Values:

Integer representing border width in pixels

Default: 0 (no border)
Notes: This may be listed as a single value or a series of values, separated by commas, one for each border band
Example: boWidthW=2,2,2 boWidthE=2,2,2 boWidth=2,5,2 boClip=20 boMargin=5 boTrans=0,60,0 boCol=blue,white,red Clip was included here only to show what happens when the border widths are not all the same. One normally would not use clip in this situation.

Bracket Properties

Bracket properties create brackets in the corners of frames. Brackets require a frame around an image on which the brackets are placed.

Property: brCol
Purpose: Specifies the color of the brackets
Values:

The values can be a valid HTML color name or color specified in hex format (e.g. #00008b)

Default: black
Notes: The bracket property will only function when it is combined with frame properties
Example: brCol=#00008b brStyle=normal
brThick=4 brX=30 brY=30
frCol=white
frWidth=20		 The bracket color for this example is dark blue (#00008b)
Property: brStyle
Purpose: Specifies the style of the brackets
Values:

none | normal | horizontal | vertical

Default: none (no brackets)
Notes: The bracket property will only function when it is combined with frame properties
Example: frWidth=20
frCol=white
brStyle=horizontal
brThick=4
brCol=#00008b brY=-1 		This is the “horizontal” style of brackets. In this example, the brY value was set to -1. This negative value causes the lines in the Y direction to extend until the gap is approximately 1/3 the image height. Any other value of brY will set the length of the lines to a fixed number of pixels.
brStyle=vertical
brThick=4
brCol=#00008b
brX=-1
frCol=white
frWidth=20 		This is the “vertical” style of brackets. In this example, the brX value was set to -1. This negative value causes the lines in the X direction to extend until the gap is approximately 1/3 the image width. Any other value of brX will set the length of the lines to a fixed number of pixels.
brStyle=normal
brThick=5
brCol=white
brX=40 brY=40
frWidth=30
frCol=black		 This is the “normal” style of brackets. This time, white brackets appear over a black background. The bracket thickness is 5 pixels.
Property: brThick
Purpose: Specifies the thickness of the bracket
Values:

Any integer (bracket thickness in pixels)

Default: 1
Notes: The bracket property will only function when it is combined with frame properties
Example: brThick=4
brCol=#00008b brStyle=normal
brX=30
brY=30
frCol=white
frWidth=20		 The brackets in this example are 4-pixels thick. This is the “normal” style of brackets. The X and Y dimensions of the lines extending from the curved part of the brackets are defined by the brX and brY properties.
Property: brX    brY
Purpose: Specifies the length of the horizontal (X) or vertical (Y) bars that extend out from the curved bracket
Values:

Any integer (bracket length in pixels). Also can use -1 (see notes below).

Default: 1
Notes: If a value of -1 is used, the gap will always be approximately 1/3 the image height or width.
Example: brStyle=normal
brX=60 brY=10
brThick=5
brCol=white
frCol=black
frWidth=30 		This is the “normal” style of brackets. The bracket length in the X direction was set to 60 pixels; Y was set to 10 pixels.
brX=-1 brY=-1 brStyle=normal
brThick=5
brCol=white
frCol=black
frWidth=30		 This is the “normal” style of brackets. The bracket length in both the X and Y directions were set to -1. This value causes the gap in both the X and Y directions to always be approximately 1/3 the image height or width.

Frame Properties

Frame properties create bands of color on the outside of images.

Property: frBlend
Purpose: Blends colors and transparencies between subsequent frame bands
Values:

true | false

Default: false
Notes: Important: The frCol property must contain one element more than frWidth; otherwise, the last value is repeated.
Example: frBlend
frWidth=5,15 frCol=black,black,white		 Note the requirement that the frCol must contain one more value than the frWidth. Here, the blending extends most of the way through the outer frame - note the frWidth and frCol settings
frBlend
frWidth=10,10 frCol=black,black,white		 Here, the frame widths were the same - note the frWidth and frCol settings
frBlend
frWidth=10,10 frCol=black,white		 Here, the frame widths were the same - note the frWidth and frCol settings
Property: frCol
Purpose: Specifies the color of a frame
Values:

A single value or a series of values, separated by commas, one for each frame band. The values can be a valid HTML color name or color specified in hex format (e.g. #ff00cc)

Default: white
Notes: If the number of colors specified is less than the number of bands specified in frWidth, the last color specified is repeated as many times as necessary
Example: frCol=#820000,white Note that the maroon band (#820000), specified first, is the outermost band
Property: frTrans
Purpose: Specifies the transparency of the frame
Values:

Integer. 0 is opaque, 100 fully transparent (invisible)

Default: 0 (opaque)
Notes: Frames are considered to be opaque, and the default color is white. To be able to see a background file, the frame must be made transparent using the frTrans property.
Example: frTrans=100,0 frWidth=20,5
frCol=white bgFile=(relative path to wood.jpg)		 Both frames are white, but the outer 20-pixel frame was made transparent so that the wood background file shows through
Property: frWidth
Purpose: Specifies the width of a frame
Values:

Integer. A single value (in pixels) or a series of values, separated by commas; one for each frame band

Default: 0 (no frame)
Notes: All directions are set to the same value. If more than one value, first is band closest to outer edge.
Example: frWidth=15,5 In this example, the outer maroon band is 15-pixels wide; the inner white band is 5-pixels wide.
Property: frWidthN, frWidthE, frWidthS, frWidthW
Purpose: Specifies the width of a frame in only the direction indicated (N, E, S, or W)
Values:

A single value (in pixels) or a series of values, separated by commas; one for each frame band.

Default: 0 (no frame)
Notes: These directional frame width properties may only be used along with an accompanying frWidth property. If used alone, nothing will happen. If you wish a frame element only on one side, you can specify, for example frWidth=0 frWidthS=20
Example: frWidth=15,5 frWidthS=30,5 In this example, the outer maroon band in the southerly direction is 30-pixels wide, and the inner white band is 5- pixels wide. In all other directions, the outer band is 15 pixels, and the inner band is 5 pixels.

Miscellaneous Properties

Property: clip
Purpose: Allows for clipping images and frames into curve segments
Values: Integer. Clip radius in pixels
Default: 0 (no clipping)
Notes: You can enter a large number, such as 1000, as the value for clip and the image will be clipped into an oval or circle, depending upon whether the image is rectangular or square. Smaller clip values clip out a corner of the frame or image by the indicated radius of curve segment.
Example:

clip=1000 
frWidth=4,8,2 frCol=maroon,#faf6ea,#e97522 shWidth=15
shCol=#646060
shTrans=30
shDrop=soft bgCol=white

 Increasing the clip radius more than 1/2 the width or height of the image does not further increase the clip radius. Therefore, it is safe to use any large number for the clip radius to achieve a circle or oval shape, as seen here applied to a thumbnail.
clip=500
bgCol=#fff8dc 
shDrop=soft
frWidth=7,7 frCol=maroon,#fff8dc		 After clipping the image into an oval, the background color shows. Here, both the clip background and the inside band of the frame are colored cornsilk (#fff8dc).

Shadow Properties

Property: shCol
Purpose: Controls the shadow color
Values:

The values can be a valid HTML color name or color specified in hex format (e.g. =#6fa5d4)
Default: gray
Notes: Important: Be sure that the shadow background color or background file matches the background used on the index or slide pages
Example: shCol=white
shWidth=10
shDrop=soft
bgCol=black		 When using a page with a black background, then consider using a white shadow. Note the detail view of a soft white shadow against a black background.
shCol=#6fa5d4 shWidth=10
shDrop=soft
bgCol=black		 Consider using other shadow colors; perhaps to give a “glow” effect behind the image/frame.
Property: shDir
Purpose: Controls the shadow transparency
Values:

NE|SE|NW|SW

Default: SE
Notes: Shadow direction is always indicated in two directions; not, for example, just to the east
Example: shDir=NW
shTrans=0
shWidth=15
shDrop=soft
bgCol=white		 With shDir=NW specified, the shadow moves to the northwest edges of the image/frame
Property: shDrop
Purpose: Controls the shadow drop falloff
Values:

hard | normal | soft
Default: normal
Notes: Important: Be sure that the shadow background color or background file matches the background used on the index or slide pages
Example: shDrop=soft
shWidth=10		 The soft falloff setting creates a very pleasant drop shadow effect. See the closeup view to the right of the example image. Note also that the drop off from the end of the shadow is best using the soft value. In most instances, the best results use the “Soft” value for shadow drop.
shDrop=normal shWidth=10 The normal (default) value produces a slightly darker shadow. Use this value if soft is too difficult to see against the background.
shDrop=hard
shWidth=10		 The hard value makes the shadow quite unnatural in appearance and generally should be avoided except for some special effects.
Property: shTrans
Purpose: Controls the shadow transparency
Values:

Integer between 0 and 100. 0 is opaque, 100 fully transparent (invisible).
Default: 50
Notes: Important: Be sure that the shadow background color or background file matches the background used on the index or slide pages
Example: shTrans=0
shWidth=70
shDrop=soft
bgCol=white		 Here is the soft shadow set to a transparency of 0. Since the soft shadow is already quite light, explore various settings for the transparency to determine the optimal value that works for the page background.
shTrans=60
shWidth=70
shDrop=soft
bgCol=white		 Note that the soft shadow just about disappears at 60% transparency
Property: shWidth
Purpose: Controls the shadow width (applied to both the X and Y directions)
Values:

Integer. Shadow width in pixels.
Default: 0 (no shadow)
Notes: The shadow width extends fully out to the point where it drops off to invisibility
Example: shWidth=15
shTrans=0
shDrop=soft
bgCol=white		 Shadows look best using soft drop, with background color or file matching the page background, and sized to not overpower the image and frame
Property: shWidthX   shWidthY
Purpose: Controls the shadow widths separately in the X and Y directions
Values:

Integer. X and Y shadow width in pixels
Default: 0 (no shadow)
Notes: The shadow may have different widths in the x and y directions
Example: shWidthX=30
shWidthY=20
shTrans=0
shDrop=soft
bgCol=white		 Note that the shadow with the wider dimension will also be darker than the adjacent narrower shadow. This effect is not very natural looking.
Property: shExX   shExY
Purpose: Allows shadow to extend to varying amounts on all 4 edges of the image
Values:

Integer. Excess X and Y shadow width in pixels
Default: 0 (no shadow)
Notes: This parameter denotes the increase of the shadow in the opposite direction, thus providing “excess” shadow on the opposite side. Bu making the excess width in the X and Y directions the same as the shadow width, one can have the same amount of shadow appearing on all sides, as shown below.
Example: shExX=15
shExY=15
shWidth=15
shTrans=15
shDrop=soft
shCol=gold
bgCol=white		 Here the shadow excess was used to create a gold “glow” effect completely surrounding the framed image. Remember, one can also further soften the glow by reducing its width or increasing the transparency.