MediaPortal Windows Media Center
MediaPortal Wiki > MediaPortal 1 > Contribute > Skins > Skin Architecture > Borders

Borders

Was this page helpful?

    Image borders

    We have added bordering support to image and several control types that use images (button, checkbutton, keyboard, listcontrol, spinbutton, button3part). Some bugs have already been fixed and will be added in a later release.

    Description of change

    With this feature you have the ability to add borders composed from textures that you identify. Each border is a rectangular shape and each side and corner of the border rectangle is itself a rectangle drawn with the specified border texture. You may border the image at its edge or the control rectangle which contains the image.

    The following skin attributes control bordering behavior.

    border - specifies a comma separated list of border edge thickness for each side of the border. The order of values is left, right, top, bottom. This field accepts either four integer values separated by commas or a single integer value which is then used for all four sides. Examples: <border>10</border> -or- <border>10,10,1,1</border>

    border, position - specifies the position of the border relative to the image or control rectangle edges. Valid values are OutsideImage, InsideImage, CenterImage, OutsideControl, InsideControl, CenterControl. The default value is "OutsideImage". Example: <border position="CenterControl">10</border>

    border, textureRepeat - specifies whether the texture used for the border should repeat or stretch inside each of the four rectangles that compose the overall border. The default value is "no". Example: <border textureRepeat="yes">10</border>

    border, textureRotate - specifies whether or not the texture used for the border should be rotated for each of the border rectangles. If the texture should rotate then the texture will be rotated 90 deg for the right border rectangle, 180 deg for the bottom, and 270 deg for the left. The default value is "no". Example: <border textureRotate="yes">10</border>

    border, texture - specifies the texture filename for the border rectangles. A single file is used for all four of the border rectangles. Based on the value of textureRepeat, the entire texture extent is either stretched (scaled up/down) to fill the border rectangles or is scaled (up/down) to fit inside the border rectangle at its native aspect ratio and repeatedly drawn until the border rectangle is filled. The default value is "image_border.png". This texture file must exist in the skin media directory otherwise no border will be drawn. Example: <border texture="my_border.png">10</border>

    border, colorKey - specfies the color key for the border texture. The default value is 0xFFFFFFFF. Example: <border colorKey="0x66FFFFFF">10</border>

    border, corners - specifies that the border should be rendered with corners. When the border should be rendered with corners the image control selects a texture file based on the name of the border,texture attribute. The selected file must end with "_corner" (excluding the extension); e.g., "image_border_corner.png". The default value is "no". Example: <border corners="yes">10</border>

    border, cornerRotate - specifies whether or not the texture used for the border corner should be rotated for each of the four border corner rectangles. A single texture file is used for all four of the border corner rectangles. If the texture should rotate then the texture will be rotated 90 deg for the upper right border rectangle, 180 deg for the bottom right, and 270 deg for the bottom left. The default value is "no". Example: <border cornerRotate="yes">10</border>

    Example

    Screenshot

    Here is an example from aMPed skin using borders for cover images, so the border always frames the image correctly regardless of the image size:

    Borders.jpg

    image_border.png

    Border texture used  - original size is 2x2 and transparent.
    The image has been increased to 20x20 and shown on a background to make it visible.

    XML Code Sample:

    The above screenshot uses:

    <border texture="image_border.png" textureRotate="yes" textureRepeat="no">5</border>
     

     




    Tag page (Edit tags)
    • No tags
    Running the latest version?

    V1.7.0 - released April 2014
    Releasenews | Download
    Changelog
     | Requirements
    HTPC
    Team-MediaPortal
     
    About
    Contact |  Press
    Partners