gmusicbrowserno way to compare when less than two revisions
Differences
This shows you the differences between two versions of the page.
| Next revision | |||
| — | customization:skins [2010/01/26 01:01] – created squentin | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== gmb skinning ====== | ||
| + | A few parts of gmb can be skinned, though I never completely finished this, some nice things can be done with the current system. | ||
| + | |||
| + | ===== Documentation ===== | ||
| + | |||
| + | A skin is defined by adding some properties to some of the widgets in a layout definition. | ||
| + | //(note that I wrote this system long ago, so I may have made some mistakes in the documentation)// | ||
| + | |||
| + | Only 3 type of widgets have a skin option : | ||
| + | * the main window background (the window will be shaped if some parts are fully transparent) | ||
| + | * the buttons : Play, Stop ... | ||
| + | * the time bar / volume bar | ||
| + | |||
| + | Note that I tried to make a system that allow the skin to be resized. But it is not an obligation, you can use FB boxes to put widgets at a fixed position (relative to the FB box), for example : | ||
| + | < | ||
| + | FBButtons = 30,20 Prev \ | ||
| + | 30,40 Play \ | ||
| + | 30,60 Next | ||
| + | </ | ||
| + | |||
| + | ==== the skin option ==== | ||
| + | The skin options are strings separated by ":" | ||
| + | filename: | ||
| + | |||
| + | * crop: by using this option, is possible to put all the pictures used by a skin in a single file. the format is x_y_width_height, | ||
| + | * the resize option is a bit complicated, | ||
| + | * It begins by e or s, e is for repeat (don't remember why I used " | ||
| + | * the e/s can be preceded by v or h to mean only vertically or horizontally. | ||
| + | * It may be followed by border definitions of the format t or b or l or r (for top/ | ||
| + | |||
| + | === skin option examples === | ||
| + | |||
| + | < | ||
| + | means the picture in paper_PosBack.png is to scaled by stretching it | ||
| + | horizontally, | ||
| + | centered if needed) | ||
| + | |||
| + | < | ||
| + | defines a skin with a top border of 18px, a bottom of 20px, left of 8px | ||
| + | and right of 20px, all parts will be repeated if needed | ||
| + | |||
| + | ==== Buttons ==== | ||
| + | |||
| + | For buttons, there can be 2 other options: | ||
| + | * the first is the list of states that have their own picture, for example : normal_prelight_active | ||
| + | * the second is the list of modes the button can be in, used by the play/pause button : '' | ||
| + | |||
| + | for example, this play button | ||
| + | < | ||
| + | need 6 versions, so the picture will be divided in 6 parts horizontally. | ||
| + | |||
| + | ==== time bar / volume bar ==== | ||
| + | The Scale widget (or the TimeBar widget in 1.0.x) uses the ' | ||
| + | < | ||
| + | specify a skin for the handle with 3 states : normal, prelight and active | ||
| + | |||
| + | ===== Example ===== | ||
| + | |||
| + | [[http:// | ||
| + | |||
| + | < | ||
| + | [paperskin] | ||
| + | Type=G | ||
| + | Default = Window ontop=1, | ||
| + | SkinPath = testskin | ||
| + | Skin = paper4.png:: | ||
| + | HBTime = LabelTime Length _Scale(skin=paper_PosBack.png:: | ||
| + | HBTitle = Filler0 _Title | ||
| + | HBArtist = LockArtist _Artist | ||
| + | HBAlbum = LockAlbum _Album -Date | ||
| + | VBText = HBTitle HBArtist HBAlbum | ||
| + | DefaultFont = Babelfish 14 | ||
| + | HBButtons = 50Filler1 \ | ||
| + | 5Playlist(skin=paper_Eject.png::: | ||
| + | 5Prev(skin=paper_Prev.png::: | ||
| + | 5Stop(skin=paper_Stop.png::: | ||
| + | 5Play(skin=paper_PlayPause.png::: | ||
| + | 5Next(skin=paper_Next.png::: | ||
| + | VBmain = _VBText _HBButtons _HBTime | ||
| + | FBmain = .18, | ||
| + | HSize0 = Filler0 LockArtist LockAlbum | ||
| + | VolumeScroll = VBmain | ||
| + | </ | ||
| + | |||
| + | This is a not-very-good attempt at a skin I've made at the time. | ||
| + | |||
| + | It is meant to more or less reproduce the paper skin of gqmpeg : http:// | ||
| + | |||
| + | To use it, you have to put the layout file in : | ||
| + | < | ||
| + | and put the .png files in | ||
| + | < | ||
| + | (or you can change the SkinPath= in the layout file) | ||
| + | |||
| + | If you use the v1.1.x branch, you should replace Scale by TimeBar in the layout file, else the time bar won't be skinned. | ||
| + | |||
| + | Also, unless you remove the nodecoration=1 in the layout file, it won't have any window decoration, so you'll have to use alt-leftclick to move the window, and alt-middleclick to resize it (unless your window manager use different shortcuts for that). (moving the window by just clicking on an empty part of the background is currently only implemented in the current git version by using the dragtomove=1 window option) | ||
| + | |||
| + | You can change the default font that will be used by Title/ | ||
| + | |||
