MediaPortal Windows Media Center
MediaPortal Wiki > MediaPortal 1 > Contribute > Skins > Skin Related Changes > 1.0.1 to 1.1.0 > Shadow text

Shadow text

Was this page helpful?

    Purpose

    Skinners have historically created the effect of shadow text by duplicating (for example) labels in the skin (shadow first followed by the overlapping foreground text). With this modification skinner can now use the following attributes to specify a shadow on the text.

    Description of change

    • shadowAngle - the integral angle, in degrees, of the shadow text. Zero degrees is along the x-axis, increasing positive values from zero will rotate the shadow clockwise.
    • shadowDistance - the number of pixels the shadow is offset from the normal (foreground) text.
    • shadowColor - the color of the shadow.

    Here is a list of controls that support these attributes:

    • Button
    • CheckButton
    • CheckList
    • FadeLabel
    • Label
    • List
    • Menu
    • PlayListItemList
    • PlayListButton
    • SelectButton
    • ThumbnailPanel
    • ToggleButton
    • UpDownButton
    • UpDownList

    XML/Code Samples

    The xml code for this:

    <control>         
                            <type>label</type>
                            <posX>100</posX>
                            <posY>430</posY>
                            <width>315</width>
                            <label>#date</label>
                            <textcolor>FFFFFFFF</textcolor>
                            <font>h4</font>
                            <shadowAngle>0</shadowAngle>
                            <shadowDistance>2</shadowDistance>
                            <shadowColor>FF000000</shadowColor>
                    </control>
                    <control>
                            <type>label</type>
                            <posX>100</posX>
                            <posY>460</posY>
                            <width>315</width>
                            <label>#date</label>
                            <textcolor>FFFFFFFF</textcolor>
                            <font>h4</font>
                            <shadowAngle>45</shadowAngle>
                            <shadowDistance>4</shadowDistance>
                            <shadowColor>FF000000</shadowColor>
                    </control>
                    <control>
                            <type>label</type>
                            <posX>100</posX>
                            <posY>490</posY>
                            <width>315</width>
                            <label>#date</label>
                            <textcolor>FFFFFFFF</textcolor>
                            <font>h4</font>
                            <shadowAngle>90</shadowAngle>
                            <shadowDistance>6</shadowDistance>
                            <shadowColor>FF000000</shadowColor>
                    </control>
                    <control>
                            <type>label</type>
                            <posX>100</posX>
                            <posY>520</posY>
                            <width>315</width>
                            <label>#date</label>
                            <textcolor>FFFFFFFF</textcolor>
                            <font>h4</font>
                            <shadowAngle>135</shadowAngle>
                            <shadowDistance>8</shadowDistance>
                            <shadowColor>FF000000</shadowColor>
                    </control>
                    <control>
                            <type>label</type>
                            <posX>450</posX>
                            <posY>430</posY>
                            <width>315</width>
                            <label>#date</label>
                            <textcolor>FFFFFFFF</textcolor>
                            <font>h4</font>
                            <shadowAngle>180</shadowAngle>
                            <shadowDistance>10</shadowDistance>
                            <shadowColor>FFFF0000</shadowColor>
                    </control>
                    <control>
                            <type>label</type>
                            <posX>450</posX>
                            <posY>460</posY>
                            <width>315</width>
                            <label>#date</label>
                            <textcolor>FFFFFFFF</textcolor>
                            <font>h4</font>
                            <shadowAngle>215</shadowAngle>
                            <shadowDistance>10</shadowDistance>
                            <shadowColor>FFFF0000</shadowColor>
                    </control>
                    <control>
                            <type>label</type>
                            <posX>450</posX>
                            <posY>490</posY>
                            <width>315</width>
                            <label>#date</label>
                            <textcolor>FFFFFFFF</textcolor>
                            <font>h4</font>
                            <shadowAngle>270</shadowAngle>
                            <shadowDistance>10</shadowDistance>
                            <shadowColor>FFFF0000</shadowColor>
                    </control>
                    <control>
                            <type>label</type>
                            <posX>450</posX>
                            <posY>520</posY>
                            <width>315</width>
                            <label>#date</label>
                            <textcolor>FFFFFFFF</textcolor>
                            <font>h4</font>
                            <shadowAngle>305</shadowAngle>
                            <shadowDistance>10</shadowDistance>
                            <shadowColor>FFFF0000</shadowColor>
                    </control>
                    <control>
                            <type>label</type>
                            <posX>800</posX>
                            <posY>430</posY>
                            <width>315</width>
                            <label>#date</label>
                            <textcolor>FFFFFFFF</textcolor>
                            <font>h1</font>
                            <shadowAngle>45</shadowAngle>
                            <shadowDistance>10</shadowDistance>
                            <shadowColor>66000000</shadowColor>
                    </control>
                    <control>
                            <type>label</type>
                            <posX>800</posX>
                            <posY>490</posY>
                            <width>315</width>
                            <label>#date</label>
                            <textcolor>FFFFFFFF</textcolor>
                            <font>h1</font>
                            <shadowAngle>45</shadowAngle>
                            <shadowDistance>10</shadowDistance>
                            <shadowColor>33000000</shadowColor>
                    </control>

    Screenshots

    The following image shows an example of the new feature:

    ShadowText.png




    Running the latest version?

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