| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Finally, you can manage your Google Docs, uploads, and email attachments (plus Dropbox and Slack files) in one convenient place. Claim a free account, and in less than 2 minutes, Dokkio (from the makers of PBworks) can automatically organize your content for you.

View
 

Skinning your widget

Page history last edited by r. van woensel 12 years, 4 months ago

Skinning Widgets

Square widget

To build a skin for the square widget start building the skin.xml file.

Skin XML-file

<?xml version="1.0" encoding="iso-8859-1" ?>
<skin>
    <name>Square Summergras skin</name>

    <widget>square</widget>
    <skintag>summergras</skintag>
    <description>The default black square skin.</description>
    <author>Marcel Visser</author>
    <website>http://www.pczapper.nl</website>
    <colors>
        <channelDescriptionTitle>#b8004d</channelDescriptionTitle>
        <channelDescriptionText>#5f3616</channelDescriptionText>
        <itemTitle>#FFFFFF</itemTitle>
        <itemTitleBackground>#678c0e</itemTitleBackground>
        <itemHover>#7cbd0b</itemHover>
        <itemActive>#9dd548</itemActive>
        <toolTipBackground>#c7dc67</toolTipBackground>
        <toolTipTitle>#b8004d</toolTipTitle>
        <toolTipDescription>#5f3616</toolTipDescription>
        <itemLoading>#33FF00</itemLoading>
        <itemLoadingDot>#00cccc</itemLoadingDot>
        <buttonNormal>#99a94f</buttonNormal>
        <buttonHover>#ff9420</buttonHover>
        <buttonActive>#eb881d</buttonActive>
        <statusText>#FFFFFF</statusText>
        <popupText>#000000</popupText>
        <popupTitle>#FFFFFF</popupTitle>
        <popupBackground>#c7dc67</popupBackground>
    </colors>
    <images>
        <baseImageUrl>http://yourdomain/location_of_images</baseImageUrl>
        <backgroundImage>background.png</backgroundImage>
        <button>button.png</button>
        <buttonScrollLeftNormal>button_scroll_left.png</buttonScrollLeftNormal>
        <buttonScrollLeftHover>button_scroll_left.png</buttonScrollLeftHover>
        <buttonScrollLeftActive>button_scroll_left.png</buttonScrollLeftActive>
        <buttonScrollRightNormal>button_scroll_right.png</buttonScrollRightNormal>
        <buttonScrollRightHover>button_scroll_right.png</buttonScrollRightHover>
        <buttonScrollRightActive>button_scroll_right.png</buttonScrollRightActive>
        <buttonItemPlay>button_item_play.png</buttonItemPlay>
        <buttonItemStop>button_item_stop.png</buttonItemStop>
        <buttonBigPlayNormal>button_bigplay_normal.png</buttonBigPlayNormal>
        <buttonBigPlayHover>button_bigplay_hover.png</buttonBigPlayHover>
        <buttonBigPlayActive>button_bigplay_hover.png</buttonBigPlayActive>
        <buttonDescriptionScrollUpNormal>button_scroll_description_up_normal.png</buttonDescriptionScrollUpNormal>
        <buttonDescriptionScrollUpHover>button_scroll_description_up_hover.png</buttonDescriptionScrollUpHover>
        <buttonDescriptionScrollUpActive>button_scroll_description_up_active.png</buttonDescriptionScrollUpActive>
        <buttonDescriptionScrollDownNormal>button_scroll_description_down_normal.png</buttonDescriptionScrollDownNormal>
        <buttonDescriptionScrollDownHover>button_scroll_description_down_hover.png</buttonDescriptionScrollDownHover>
        <buttonDescriptionScrollDownActive>button_scroll_description_down_active.png</buttonDescriptionScrollDownActive>
     </images>
</skin>

Main tags

Start defining the main tags for the skin.

Name
Description
Example
name Give your skin a name <name>Square Summergras skin</name>
widget Skin for what widget type? <widget>square</widget>
skintag Fill in only when the skin is hosted at the DIK.nl server (directory name) <skintag>summergras</skintag>
description Description for the skin <description>Some layback summer-feeling.</description>
author Name of the skin-builder <author>Marcel Visser</author>
website Homepage of the skin-builder <website>http://www.pczapper.nl</website>

Color tags

Define the colors in your skin by using full hexadecimal color tags.

    For example:

#000000

. But not:

000000

or

#000

    Be sure you always use the full color tag with the # pound sign.

Name
Description
Example
channelDescriptionTitle Title of the channel <channelDescriptionTitle>#b8004d</channelDescriptionTitle>
channelDescriptionText Description of the channel <channelDescriptionText>#5f3616</channelDescriptionText>
itemTitle Color of the item title (on the thumbnail) <itemTitle>#FFFFFF</itemTitle>
itemTitleBackground The semi-transparant background of the item title <itemTitleBackground>#678c0e</itemTitleBackground>
itemHover Overlay color when hovering an item <itemHover>#7cbd0b</itemHover>
itemActive Overlay color when item is active <itemActive>#9dd548</itemActive>
itemLoading Overlay color when item is loading <itemLoading>#33FF00</itemLoading>
itemLoadingDot Color of the animated loading dot <itemLoadingDot>#00cccc</itemLoadingDot>
toolTipBackground When hovering an item a tooltip appears <toolTipBackground>#c7dc67</toolTipBackground>
toolTipTitle Title of the tooltip (item title) <toolTipTitle>#b8004d</toolTipTitle>
toolTipDescription Description of the tooltip (item description) <toolTipDescription>#5f3616</toolTipDescription>
buttonNormal Color of the buttontext when button is in normal state <buttonNormal>#99a94f</buttonNormal>
buttonHover Color of the buttontext when hovering the button <buttonHover>#ff9420</buttonHover>
buttonActive Color of the buttontext when button is in active state <buttonActive>#eb881d</buttonActive>
popupText Text color of the popupbox <popupText>#000000</popupText>
popupTitle Title color of the popupbox <popupTitle>#FFFFFF</popupTitle>
popupBackground Background of the popupbox <popupBackground>#c7dc67</popupBackground>
statusText Text at the bottom of the widget <statusText>#FFFFFF</statusText>

Image tags

And most important, define the images for the skin.

 

For best performance save the images in the PNG imaging format and save them in one directory. Define the url location of these images in the baseImageUrl. If the images and xml are on the same location, you can define baseImageUrl as "." (current directory)

Name
Description
Size (width x height) Example
baseImageUrl BaseURL for the images - <baseImageUrl>http://dev.pczapper.tv/marcel/viidoo/img/widget/square/skins/summergras/</baseImageUrl>
backgroundImage Background image 500 x 500 <backgroundImage>background.png</backgroundImage>
button Button image 68 x 20 <button>button.png</button>
buttonScrollLeftNormal Scroll button left in normal state 20 x 60 <buttonScrollLeftNormal>button_scroll_left.png</buttonScrollLeftNormal>
buttonScrollLeftHover Scroll button left in hover state 20 x 60 <buttonScrollLeftHover>button_scroll_left.png</buttonScrollLeftHover>
buttonScrollLeftActive Scroll button left in active state 20 x 60 <buttonScrollLeftActive>button_scroll_left.png</buttonScrollLeftActive>
buttonScrollRightNormal Scroll button right in normal state 20 x 60 <buttonScrollRightNormal>button_scroll_right.png</buttonScrollRightNormal>
buttonScrollRightHover Scroll button right in hover state 20 x 60 <buttonScrollRightHover>button_scroll_right.png</buttonScrollRightHover>
buttonScrollRightActive Scroll button right in active state 20 x 60 <buttonScrollRightActive>button_scroll_right.png</buttonScrollRightActive>
buttonItemPlay Play icon on the item (shows up when hovering) 24 x 24 <buttonItemPlay>button_item_play.png</buttonItemPlay>
buttonItemStop Stop icon on the item 24 x 24 <buttonItemStop>button_item_stop.png</buttonItemStop>
buttonBigPlayNormal Big play button on the big thumbnail in normal state 100 x 50  <buttonBigPlayNormal>button_bigplay_normal.png</buttonBigPlayNormal>
buttonBigPlayHover Big play button on the big thumbnail in hover state 100 x 50  <buttonBigPlayHover>button_bigplay_hover.png</buttonBigPlayHover>
buttonBigPlayActive Big play button on the big thumbnail in active state 100 x 50  <buttonBigPlayActive>button_bigplay_hover.png</buttonBigPlayActive>
buttonDescriptionScrollUpNormal Tiny button for scrolling channel description up in normal state 10 x 10 <buttonDescriptionScrollUpNormal>button_scroll_description_up_normal.png</buttonDescriptionScrollUpNormal>
buttonDescriptionScrollUpHover Tiny button for scrolling channel description up in hover state 10 x 10 <buttonDescriptionScrollUpHover>button_scroll_description_up_hover.png</buttonDescriptionScrollUpHover>
buttonDescriptionScrollUpActive Tiny button for scrolling channel description up in active state 10 x 10 <buttonDescriptionScrollUpActive>button_scroll_description_up_active.png</buttonDescriptionScrollUpActive>
buttonDescriptionScrollDownNormal Tiny button for scrolling channel description down in normal state 10 x 10 <buttonDescriptionScrollDownNormal>button_scroll_description_down_normal.png</buttonDescriptionScrollDownNormal>
buttonDescriptionScrollDownHover Tiny button for scrolling channel description down in hover state 10 x 10 <buttonDescriptionScrollDownHover>button_scroll_description_down_hover.png</buttonDescriptionScrollDownHover>
buttonDescriptionScrollDownActive Tiny button for scrolling channel description down in active state 10 x 10 <buttonDescriptionScrollDownActive>button_scroll_description_down_active.png</buttonDescriptionScrollDownActive>

Comments (0)

You don't have permission to comment on this page.