HowTo
From Gloobus Wiki
How to create a theme for CoverGloobus
Creating themes for CoverGloobus is very easy, you just need to create a file skin.xml and put the images needed there.
Let's start on how to write that skin.xml file
<skin name="MyTheme" width="270" height="250"> </skin>
In this section you define your theme name and the default size for it.
Next things to do, is add the items you want to be displayed, there are the following items with
Images
image albumcover
Text
titlename artistname albumname
Ratting
rating
Buttons
playercontrols prev play next
Each type has its own options as well as general options that can be used in each item.
General options:
x="10" -- the item will be at 10px from left (required) y="10" -- the item will be at 10px from top (required) width="200" -- the item will have width of 200 px (optional but better if defined in images) height="200" -- the item will have height of 200 px (optional but better if defined in images)
Image Options
round="10" -- The image will be rounded 10 pixels (optional) opacity="0.5" -- The image will have and 50% opacity (optional) reflection="5-40-50" -- 5px of space between image and reflection, 40px height for reflection, 50% initial opacity (optional) mask="mask.png" -- Path to a mask so the image will be shown only when mask.png pixel opacity is non zero (optional)
Text Options
color="#ffffffFF" -- Color for the text (required) shadowcolor="#000000ff" -- Color for the shadow (required) font="sans 11" -- Font type and size (required) align="left" -- left, right or center alginment (optional) maxchars="40" -- How many chars can be displayed (optional) shadow_x="1" -- move shadow one px right (optional) shadow_y="-1" -- move shadow one px up (optional) wrap="yes" -- makes text wrap, it is better to set explicit width and height with this one, though they are not required (optional)
Button Options
src="normal.svg" -- path of the image that will be the button (required) hover="hover.svg" -- path for the hover image (optional) pressed="pressed.png" -- path for the pressed image (optional)
*Play button also has: pause="pause.png" -- path for when in playing image (optional) pause_hover="" -- path for when playing image hover (optional) pause_pressed="" -- path for when playing image pressed (optional)
Rating options
star="" -- Path for the star image (required) nostar="" -- Path for the nostart image (required) hover="" -- Path for hover image (optional) pressed="" -- Path for when pressed image (optional) reflect="" -- the same as for image (optional) direction="vertical" -- Makes rating vertical (optional)
Finally here is an example file:
<skin name="BadChoice" width="270" height="250">
<rating x="210" y="60" width="20" height="20" spacing = "3" star="star.png" nostar="noStar.png" direction="vertical" />
<image src="shadow.png" x="57" y="33" width="152" height="152" /> <image src="nocover.png" x="63" y="39" width="139" height="139" round="20" reflect="5-40-50"/> <albumcover x="63" y="39" width="139" height="139" round="20" reflect="5-40-50"/>
<titlename x="18" y="185" width="230" maxchars="25" align="center" font="Lucida Grande bold 11" color="#ffffffFF" shadowcolor="#000000ff" /> <artistname x="18" y="205" width="230" maxchars="44" align="center" font="Lucida Grande 10" color="#ffffffFF" shadowcolor="#000000ff" /> <albumname x="18" y="220" width="230" maxchars="44" align="center" font="Lucida Grande 10" color="#ffffffFF" shadowcolor="#000000ff"/>
<playercontrols spacing="0" x="106" y="298">
<prev x="103" y="150" src="prev.png" hover="prev_hover.png"/>
<play x="125" y="150" src="play.png" hover="play_hover.png" pause="pause.png" pause_hove="pause_hover.png"/>
<next x="145" y="150" src="next.png" hover="next_hover.png"/>
</playercontrols>
</skin>
