Note: This document is short and highly incomplete.

If you want to write a new, decent one, it will be more than welcome!

Basic principles ================ A skin (or theme, the two words have almost the same meaning) for VLC is made of many BMP files (Windows Bitmap format) containing all the images needed, and of an XML file describing how these images should be displayed, what happens when the user clicks on a button, etc. Those of you who have already done skins for other softwares shouldn't have too many difficulties to understand how all this works.

Bezier curves ============= One cool thing with VLC sliders is that they are not necessarily rectilinear, but they can follow any Bezier curve. So if you want to have a slider moving on a half-circle, or even doing a loop, you can ! This is not the place to explain how these curves work, the only thing to know is that a Bezier curve can be caracterised by a set of points. Once you have them (thanks to the graphical utility presented at the end of this file, for example), you just need to enter the list of abscissas in the 'abs' attribute and the list of ordinates (in the same order...) in the 'ord' attribute. The separator is the coma. Example: abs="2,45,88" ord="50,120,50" Bezier curves are used for the SliderControl and the PlaylistControl tags.

The bitmaps =========== Basically, you need one bitmap file by state of control. For example, with a image control you'll need 1 image, with a button 2 images (or 3 if you provide the disabled state). A slider will also need 2, one for the static part and another for the mobile part. Of course, the same bitmap file can be used for many controls, provided you want to display the same image! The bitmap format doesn't allow a transparent color, but in the XML file you can specify a color that will be considered as transparent wherever it appears in the bitmap file.

The XML file ============ XML is a markup language, like HTML. It won't be explained here any further, please use Google if you don't know what is XML. You'll see, it's rather easy to understand. The XML file used for the VLC skins follows a predefined DTD. You can find this DTD in VLC CVS, and its reading is strongly advised, since it contains most of

. .Bitmap: Associates a bitmap file with a name (=identifiant) that will be used by the various controls.ThemeInfo: You can enter here some information about you (but this information is currently unused by VLC. For a better comprehension of what follows. Attributes: .Event: An action that will be associated to a control later. GG for the green one. It must be indicated with the following format : "MOD+L" where "MOD" is the modifier key ("CTRL" or "ALT") and "L" is the letter in uppercase ("MOD+" is optionnal). let's go for an enumeration of the different tags and theor attributes : .webpage: not yet supported. the window will stick to the border. Attributes : . Default is "none". OK. .) Attributes : . Obviously. ..key: this is the shortcut key associated with the event. . .id: this is the name of the font that will be used with controls.magnet: allows to select the range of action (in pixels) of magnetism with border of screen : that is to say when the distance between the border of the screen and a window is less than this value. This path can be absolute (but you should avoid it as often as possible). A skin that doesn't follow the DTD with which VLC was compiled won't be loaded by VLC (and it might even crash it.dtd) and/or at an example of valid xml skin (such as modules/gui/skin/skins/default/theme.size: this is the size of the font in points (pt). . It must be indicated with the following format: "#RRGGBB" (where RR stands for the hexadecimal value of the red component. . This means that the event will be executed when hitting the correspounding not yet supported.txt .font: this is the name of the font Default is "arial". .the default values used for the parameters. Default is "9".xml).Theme: The main tag. .id: this is the name of the bitmap that will be used with controls (2 bitmaps shouldn't have the same name).file: this attribute is used to indicate the path and name of the bitmap file used. . Attributes : .id: this is the name of the event that will be used with controls. . and BB for the blue one). (2 events shouldn't have the same name). you need one Bitmap tag for each bitmap file you have.).Font: Declares a font to be used in a TextControl or PlaylistControl.event: see not yet supported. Default is "12".alphacolor: this is the transparency color of the bitmap.. . you should have a look at the DTD (in modules/gui/skin/parser/dkin... (2 fonts shouldn't have the same name). 0 means no magnetism. or relative to the path of the xml file. Attributes: . Default is "default".email: not yet supported.

. Same range as alpha. the 2 anchors will automatically be on the same place. It must be between 0 and 1000 Default is "400" (normal weight). . .x: try and guess. "#RRGGBB" (see Bitmap).y: . and the anchor with the highest priority is the winner. Default is "255".x: sets the left position of the window.visible: sets if the window should appear or not at the launch of VLC. .dragdrop: sets if drag and drop of media files is allowed in this window. . and the windows are "sticked". who can adjust the position of a group of controls without modifying all the coordinates. You should use high values. Default is "0".y: sets the top position of the window. 255 is total opacity.x: is it really necessary to explain ? Default is "0".Window: A window that will appear on screen.priority: priority of anchor (see the previous description).color: this is the color of the font with the following format. . . which means that when moving its Window all the other anchored Windows will move too. Each anchor has a priority ('priority' attribute). .ControlGroup: Adds an offset to the elements it contains. .movealpha: sets the transparency of the window when the window is moving. Default is "true". . If an anchor of another Window enters in the range of action of this anchor.italic: sets if the font must be in italic format. .. . Default is "500". ControlGroup tags can be nested. . It must be between 1 and 255. Default is "0"..y: what do you think ? Default is "0". Attributes : . Default is "false". .underline: sets if the font must be underlined. A ControlGroup is only supposed to ease the job of the skin designer. This has no effect if dragdrop is set to "false". Fewer is thinner. 1 is nearly total transaprency and should be avoided. Default is "true". . .fadetime: sets the time in milliseconds of the hide/show fading transition. To break the effect of 2 linked anchors.alpha: sets the transparency of the window. . Attributes : .weight: this is the weight of the font.playondrop: sets if a drop file is played directly (true) or only enqueud (false). ..Anchor: Creates a "magnetic point" in the current Window. but you can ignore it if you want (only one ControlGroup is necessary. . Default is "0". Default is "true". Default is "false". Default is "255". . just inside Window).. Default is "0". you need to move the Window whose anchor has the lower priority. Default is "#000000" (black).id: this is the name of the window (it will be only used for events but it is important: 2 windows shouldn't have the same name).

. Used for drawing the up state of the button. Used for drawing control when clicking on it in state 2. and an image for the disabled control. . SliderControl.img1: identifiant of a Bitmap. If you supply only the basic images. .disabled1: identifiant of a Bitmap. . .onclick: event executed when clicking on the button. . .onmouseover: event executed when the mouse cursor enters the button. Default is the value of 'img2' attribute.ImageControl.e.tooltiptext : used to display a tooltip. Default is the value of 'img1' attribute.onclick: the 'event' attribute can be used to associate an event to the image (the event is triggered by a click on the image). . Used for drawing the disabled state of the button. i. .. a button with 2 states (checked/unchecked). . 'visible' for the initial state. .CheckBoxControl: Creates a checkbox. . Default is "none".up: identifiant of a Bitmap.clickimg1: identifiants of a bitmap. Typical use: an Event made with 'WINDOW_MOVE(window)' (where 'window' is the id of a Window) can be associated to an ImageControl of this Window.image: this attribute must be set to an identifiant of a Bitmap tag.onclick1: event executed when clicking on the control in state 1. Attributes: .No default. the other ones will be identical. So you need 6 images for a full-featured checkbox: each state has a basic image. TextControl. All the controls can also accept events. CheckBoxControl. separing them with semicolons. . ButtonControl.onmouseout: event executed when the mouse cursor leaves the button. They share some properties: 'x' and 'y' for the position. . . Default is "none". Default is "none". .ImageControl: Creates a simple image. an image corresponding to a click not yet released. Default is "10". Used for drawing control in state 2. . .disabled2: identifiant of a Bitmap. Hence the Window can be moved via the image.disabled : identifiant of a Bitmap. . .down: identifiant of a Bitmap. Default is "none". Used for drawing the down state of the button. Used for drawing control when clicking on it in state 1.ButtonControl: Creates a button. . and you have the possibility to associate many events to a control at once.range: Range of action of the anchor in pixels. 'id' for identifying them (only needed if you want to create an event acting on this particular control) and 'help' for a short description of the control that could be displayed in a special TextControl (see below). Used for drawing control in state 1 when disabling. Default is the value of 'img1' attribute.img2: identifiant of a Bitmap. Default is the value of 'img2' attribute. Default is "none" (no tooltip). Used for drawing control in state 1. PlaylistControl: The various visual controls that constitute a Window.clickimg2: identifiant of a Bitmap. must de defined! . Useful for backgrounds. Used for drawing control in state 1 when disabling.

Default is "none".onmouseout2: event executed when the mouse cursor leaves the button in state 2. Default is "0".onmouseover1: event executed when the mouse cursor enters the button in state 1. . 'up' and 'down' are the images of the slider. Default is "left". 'title' (for the file name without the path) and 'help' (for a help about the controls that defined their 'help' attribute). . . 'left_time'.abs: see SliderControl description and bezier curve description. Default is "none" (no tooltip).. Possible values are 'time'.align: either 'left' or 'center' or 'right'. To switch between then. .width: Width of the text in pixels. . it allows to have a text auto-updated by VLC.onclick2: event executed when clicking on the control in state 2.PlaylistControl: Creates a playlist. Default is "time". . Default is "true". .scrollspace: size in pixel between two occurences of the text when scrolling. an automatic tooltip will appear with the full name of the entry. . .ord: see SliderControl description and bezier curve description. The 'abs' and 'ord' attributes are needed for the Bezier curve that the slider will follow. You can specify several types by separating them with semicolons.onmouseout1: event executed when the mouse cursor leaves the button in state 1. . the width is automatically calculated to fit with the current text. Useful to switch between 'time' and 'left_time'. Attributes: . Default is "20". If the playlist contains entries wider than the list width. This tag must contain a SliderControl tag (to allow scrolling in the playlist). Attributes: .display: this value is a bit special. which must be one of the Font identifiants.down: identifiant of a Bitmap. just double click on the text. Default is "none". .text: the text to display. and the slider will automatically append the percentage of the position. the text will scroll if it does not fit into the 'scrollspace'. The other attributes are rather easy to understand.onmouseover2: event executed when the mouse cursor enters the button in state 2.. Default is "none". Attributes: . . 'total_time'.SliderControl: Creates a slider.up: identifiant of a Bitmap. .type: two 'types' of sliders are predefined: 'time' for a slider allowing to seek in the stream. Default is "none". If set to "0". 'file_name' (for the current file name with its path). Default is "none". . ..scroll: if set to 'true'.font: the font to use. and 'volume' for a volume slider. . . The 'tooltiptext' attribute works.TextControl: Creates a text.tooltiptext: used to display a tooltip. .

number of files in the playlist and info text. .vlt extension.tar.ord: see PlaylistControl description and bezier curve description. Then rename your compressed file with the . you should look at how other skins are made.To fully use the possibilities given. When you have reached the perfect curve. go to the directory where VLC is installed. for example). Basically. you just have to copy-paste the list of abscissas and ordinates into the 'abs' and 'ord' attributes of your SliderControl or PlaylistControl. . this could be useful if you want to follow a specific pattern of a slider. which must be one of the Font identifiants.To generate easily Bezier curves.. Default is "50". don't use absolute paths but relative paths (they are relative to the XML file directory).infowidth: width of the info text in pixels. Default is "#0000FF" (blue). . This is the whole width for file name..When you are creating your skin.txt). you can compress them in a . you may want to see the VLC messages where some errors are logged.vlt extension and. so that your skin can be reused by anybody without a particular file structure. that's all! VLC can load directly skins with the . .font: the font to use..abs: see PlaylistControl description and bezier curve description. and you can move them to see how the curve evolves. open a dos window. or VLC won't be able to read it. for example. the logs should be saved in a file called vlc-log.xml". instead of keeping many bitmap files and the XML file. . don't forget to rename your XML file into "theme. Before doing so. you can use the curve-maker. it's often very useful. Compression =========== Once your skin is finished. The curve-maker also allows to load a bitmap.. Good luck! .. and type "vlc -I skin -v --extraintf logger".playfont: the font to use for current playing file. For this. Default is "none".. . . . The interesting lines are those with "skin interface".gz archive (Winzip and UmtimateZip can do it perfectly..selcolor: color in "#RRGGBB" format of the selected files. This should open VLC and a log window (what's more. which must be one of the Font identifiants. .For the Bitmap tags. Tools and advice ================ . you add and remove points at will.width: width of the list in pixels. Default is "200".

Sign up to vote on this title
UsefulNot useful