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

Shadow text

    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.11.0 - released March 2015
    Releasenews | Download
    Changelog
    | Requirements

    MediaPortal RSS Feeds

    windows media centerNews & Blogs
    htpcP&S: New
    htpcDocumentation

    Team-MediaPortal

    HTPCAbout
    Contact | Press
    Partners