SharpEnviro, an open source shell replacement for Windows: Forums / Skinning / Quick Guide into SharpSkin

SharpEnviro, an open source shell replacement for Windows :: Forums :: SharpE Beta :: Skinning		<< Previous thread \| Next thread >>
Quick Guide into SharpSkin


Moderators: Billi Berserker, pixol, Malx, captainhérisson, silentpyjamas, glacialfury, mc, yay, brum74, HomerSp

Author

Post

Billi Berserker

Sun Aug 13 2006, 07:40AM

Registered Member #1

Joined: Mon Dec 13 2004, 01:12AM
Posts: 853

SharpSkin is the application used to create skins for SharpE.
A SharpE skin is an .xml file defining how to render each skinable element of the shell. You can either edit the .xml file manually or you can use SharpSkin.

This is just a quick quite about SharpSkin.

Notes:
- A basic understanding of how XML is working is necessary to use this application
- Saving is only possible when the "Plain XML" tab is activated
- Make sure all components got merged correctly in the "Plain XML" tab before saving!
- Rendering the bar background sometimes doesn't work (click the render button twice)
- When using "Render" in another than the "Plain XML" tab this will only update the current component!
- The undo function sometimes might work a bit strange (there is no redo...)
- Manually create backups of your XML files from time to time (you never know what might happen)
- Nobody has to use this application! If you prefer hacking around in plain XML with notepad do this
- As always: keep in mind that this is an alpha/beta/whatever test version

Hotkeys:
Ctrl + J = Auto Completion
Ctrl + Y = Delete whole line

Special Component Properties and Notes:

Mini Throbber:
- AutoSize will always be turned on, this means that the skin has to specify
the actual size of the throbber! So do not set dimension to w,h... set it to
the size you want the throbber to be!
- The position of any Mini Throbber will be set by SharpBar. The top position
always refers to the top point of the module area in SharpBar. If you want
your Mini Throbbers to not start at the top most pixel then just leave
some empty space at the top.

SharpBar:
For SharpBar there are some addiitonal property tags available:

<enablevflip>0</enablevflip> 

Enabling this option will mirror the skin when
the bar is displayed at the bottom of the screen. (0 = False, 1=True)

<paxoffsets>20,5</paxoffsets> 

Sets the left and right offset for the
module area. Set these offsets to get some space for a Throbber or round
edges. Use it to make sure that the modules don't reach into skin pars where
they are not supposed to be

<payoffsets>3,3</payoffsets> 

Sets top and bottom offset for the module
area. With these example values the module area will start 3px from the top
of your skin and reach until bottom - 3px.

<sbmod>0,8</sbmod> 

Sets a top and bottom offset for a shadow
cut off area. If you are using a drop shadow in your Bar then it could be
usefull to cut this shadow off when the bar is displayed at the bottom of the
screen. You can simply set the amount of pixels which will be removed at the
top and the bottom...

<fsmod>7,14</fsmod> 

Sets a left and right cut off in pixels if the bar is
displayed in full screen mode. Use this option to cut off round edges or parts
at the left/right border of the bar which are not supposed to be visible if
the left or right bar border reaches a screen border.

Progress Bar:
In some situations there might be progress bars with a small height used somewhere.
For some skins it could cause drawing problems when the bar height gets
below a fixed value (for example when using big round edges). In this case
the ProgressBar component supports the usage of a second skin.
In addition to 'background' and 'progress' there are two more drawing parts
supported : 'smallbackground' and 'smallprogress'. The skin parts specified
in those two additional tags will be used when the bar height gets below the
value specified in another property at the top of the component.
The property is a point value of x,y. The x value is not used at
the moment and the y value simply sets the height of the component
before the 'smallbackground' and 'smallprogress' parts will be used.
For example

<smallmode>0,10</smallmode> 

will use '' and '' skin parts as long as the bar height is larger than 10px. For a height of 10px or smaller the skin parts in 'smallbackground' and 'smallprogress' will be
used for drawing instead.
If you don't need this feature set

<smallmode>0,0</smallmode> 

or simply remove the property

Skin Part tag
Quick description of all possible properties.
If a property doesn't exist default values will be used.

<dimension> 

sets the dimension of the 'layer' to >Width,Height<
examples:

<dimension>w,h</dimension><dimension>w-16,h-32</dimension><dimension>32,h</dimension> 

<location> 

sets the location of the 'layer' to >Left,Top<
examples:

<location>0,0</location><location>w-8,0</location><location>w-16,h-32</location> 

<image> 

specifies path and filename to the image which will be loaded into the layer file path always is relative to the path of the xml file!
examples

<image>images/filename.png</image><image>empty</image> 

can be used as empty rectangle filled with the
color from the property and set to the size of the 'dimension'
property.

<drawmode> 

sets how the image is painted when the dimension is larger or smaller than the original image size
possible values: >stretch< and >tile<
default value: >stretch<
examples:

<drawmode>stretch</drawmode><drawmode>tile</drawmode> 

<color> 

sets the color the image will be blended to
possible values: >$WorkAreaBack<,>$WorkAreaDark<,>$WorkAreaLight<,
>$WorkAreaText<,>$ThrobberDark<,>$ThrobberBack<,>$ThrobberLight<,
>$ThrobberText<, or any other RGB color value!
Default value: no color blending (if value doesn't exist)
examples

<color>$WorkAreaBack</color> 

<alpha> 

sets the master alpha value for the 'layer'.
possible values are all integer numbers between 0 and 255 while
0 = not visible and 255 = fully visible
default value: >255<
examples:

<alpha>255</alpha><alpha>128</alpha> 

[ Edited Mon Aug 14 2006, 07:09AM ]

BB - -email-
Lead developer (SharpBar, SharpDesk, SharpTheme, Skin System,)

Maxicube

Sat Oct 25 2008, 12:38AM

Registered Member #2208

Joined: Fri Oct 24 2008, 06:33AM
Posts: 10

OOOH!! OOOH!! I HAD AN IDEA!
Wats about a skin editing prog?
would be easy enough in vb.
dunno bout delphi tho :P
have fun!

acctually, is this a skin prog? :P

[ Edited Sat Oct 25 2008, 12:39AM ]

Darkwiz666

Sun Nov 22 2009, 09:28AM

Registered Member #2619

Joined: Sun Nov 22 2009, 09:23AM
Posts: 1

I just joined, but I want to make a skin for SharpE...
I noticed Billi mention SharpSkin...but what is it? Where can I download it (if it wasn't already bundled)?

I tried Googling for it and all I came up with is
http://www.hexad.dk/ opensource/ sharpskin.html, but I'm not sure if that's it or not....

Billi Berserker

Mon Nov 23 2009, 03:31AM

Registered Member #1

Joined: Mon Dec 13 2004, 01:12AM
Posts: 853

SharpSkin was a program designed for editing the skin xml and previewing the images. Sadly we haven't had the time to keep it updated with all the skin system changes so we had to drop it completely.

The best way to start a skin now is to just edit an already existing skin and see how it's done there.
You can also check out the basic skin docs on the trac:
http://trac.sharpe- shell.org/wiki/ SkinsDocsMain

BB - -email-
Lead developer (SharpBar, SharpDesk, SharpTheme, Skin System,)


Jump: Back to top