Commit f598d2fb authored by Jean-Baptiste Kempf's avatar Jean-Baptiste Kempf

Use relative URLs for images

parent 33f75e21
......@@ -16,7 +16,7 @@ In this tutorial you will learn the basics of creating a skin for VLC.
</p>
<h2>Designing process</h2>
<p style="float:right;width:290px">
<img src="http://download.videolan.org/images/skinedhlp/airflow_slices.png" alt="Example"><br><i>Example of how your image document could look like. The red lines indicate the slices.</i>
<img src="/images/skinedhlp/airflow_slices.png" alt="Example"><br><i>Example of how your image document could look like. The red lines indicate the slices.</i>
</p>
<p>First of all you have to design your skin in a graphics program like Photoshop or GIMP.
</p><p>In the designing process you should think of the following components:
......@@ -54,20 +54,20 @@ Then save each slice, or subimage, as a PNG file.
</p>
<h2>In the editor</h2>
<p>Choose to create a new skin and save it in it's own folder. Into this folder you should copy all your PNG images.
Then you have to make the available in the skin by clicking on the <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/add_bitmap.png" alt=""> Add Bitmap</span> button at the bottom of the <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/resources.png" alt=""> Resources</span> window.
Then you have to make the available in the skin by clicking on the <span class="gui"><img src="/images/skinedhlp/icons/add_bitmap.png" alt=""> Add Bitmap</span> button at the bottom of the <span class="gui"><img src="/images/skinedhlp/icons/resources.png" alt=""> Resources</span> window.
Select the PNG files in the file chooser. They will be added automatically as bitmap resources and identified by their file names without the extension.
</p><p>Then create a new <b>window</b> by clicking on the <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/add_window.png" alt=""> Add Window</span> button at the bottom of the <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/windows.png" alt=""> Windows</span> window.
</p><p>Then create a new <b>window</b> by clicking on the <span class="gui"><img src="/images/skinedhlp/icons/add_window.png" alt=""> Add Window</span> button at the bottom of the <span class="gui"><img src="/images/skinedhlp/icons/windows.png" alt=""> Windows</span> window.
Choose an id for the window, e.g. "Main" if it is the main window. The X and Y attributes determine where the window appears the first time the skin is opened.
If you set drag-drop to true, files can be dropped into this window and will be added to the playlist. If play on drop is true the dropped files will be played immediately after they have been dropped into the window, otherwise the will be just added to the end of the playlist.
</p><p>Now you'll have to add a <b>layout</b> to the window. Layouts determine different appearances of a window. For simple skins there are only needed on layout per window. Note that if you use several layouts, the last in the list will be shown the first time the skin is opened. You can modify the position of a layout in the hierarchy by selecting it an using the <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/move_up.png" alt=""> Up</span> and <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/move_down.png" alt=""> Down</span> buttons at the bottom of the <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/windows.png" alt=""> Windows</span> window.
</p><p>Now you'll have to add a <b>layout</b> to the window. Layouts determine different appearances of a window. For simple skins there are only needed on layout per window. Note that if you use several layouts, the last in the list will be shown the first time the skin is opened. You can modify the position of a layout in the hierarchy by selecting it an using the <span class="gui"><img src="/images/skinedhlp/icons/move_up.png" alt=""> Up</span> and <span class="gui"><img src="/images/skinedhlp/icons/move_down.png" alt=""> Down</span> buttons at the bottom of the <span class="gui"><img src="/images/skinedhlp/icons/windows.png" alt=""> Windows</span> window.
You'll have to choose an id for the layout, you should always select ids that represent what is displayed. Under initial width and height you have to enter the dimensions of the window when this layout is displayed. If your window is not resizable you can ignore the other attributes and leave them at -1.
</p><p>After you have added the layout it should be selected in the <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/windows.png" alt=""> Windows</span> window and a preview window of your layout should have opened to the right. It should be filled with a gray/white tile pattern. This pattern symbolizes transparency, so the parts of your layout where you see this pattern will not be visible in VLC.
</p><p>Now move on to the <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/items.png" alt=""> Items</span> Window.
</p><p>After you have added the layout it should be selected in the <span class="gui"><img src="/images/skinedhlp/icons/windows.png" alt=""> Windows</span> window and a preview window of your layout should have opened to the right. It should be filled with a gray/white tile pattern. This pattern symbolizes transparency, so the parts of your layout where you see this pattern will not be visible in VLC.
</p><p>Now move on to the <span class="gui"><img src="/images/skinedhlp/icons/items.png" alt=""> Items</span> Window.
</p><p>All images making up this window but should not trigger any action are represented by "Image" items.
Normally a layout has at least one image item that represents the window's background.
For each slice of the window that should not have any function, click on the <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/add.png" alt=""> Add Item</span> button at the bottom of the <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/items.png" alt=""> Items</span> Window and choose <i><b>Image</b></i>.
Enter any ID that you feel comfortable with, just note that IDs must be unique. Set the image attribute to the id of the bitmap resource representing this image. Set the X and Y attributes to the position where the image should appear. After having added the image you can also move it around with the cursor if you have selected in the <span class="gui"><img src="http://download.videolan.org/images/skinedhlp/icons/items.png" alt=""> Items</span> window. The currently selected item is highlighted in the preview window by a red border.
For each slice of the window that should not have any function, click on the <span class="gui"><img src="/images/skinedhlp/icons/add.png" alt=""> Add Item</span> button at the bottom of the <span class="gui"><img src="/images/skinedhlp/icons/items.png" alt=""> Items</span> Window and choose <i><b>Image</b></i>.
Enter any ID that you feel comfortable with, just note that IDs must be unique. Set the image attribute to the id of the bitmap resource representing this image. Set the X and Y attributes to the position where the image should appear. After having added the image you can also move it around with the cursor if you have selected in the <span class="gui"><img src="/images/skinedhlp/icons/items.png" alt=""> Items</span> window. The currently selected item is highlighted in the preview window by a red border.
By default the <i>action</i> attribute of an image is set to <i>move</i>. This enables the user to drag the window around by clicking on the image. You can disable this by selecting the action <i>none</i>.
</p><p>Controls that do not change their appearance when a certain status changed are represented by <b>Button</b> items.
......@@ -79,13 +79,13 @@ For the down attribute choose the bitmap resource representing the image of the
The action that should be fired by clicking on the button can be defined with the help of the ActionEditor which can be opened by clicking on the button next to the action-textfield.
</p><p><b>Checkboxes</b> are similar to buttons only that they have two states.
You can choose a boolean variable from <a href="boolexpr.html">the documentation</a> to set the condition of the checkbox. You have to enter for both states, if the condition resolves to true or to false, the up,hover and down bitmap resources.
</p><p>To edit the <b>skin's settings</b> like author etc. choose <span class="gui">Edit <img src="http://download.videolan.org/images/skinedhlp/arrowr.png" alt="&gt;"> <img src="http://download.videolan.org/images/skinedhlp/icons/edit.png" alt="">Theme settings</span> from the menubar.
</p><p>To edit the <b>skin's settings</b> like author etc. choose <span class="gui">Edit <img src="/images/skinedhlp/arrowr.png" alt="&gt;"> <img src="/images/skinedhlp/icons/edit.png" alt="">Theme settings</span> from the menubar.
</p><p>This should be enough as a brief introduction to the usage of the skin editor. For more advanced usage consult the <a href="index.html">documentation</a>. There the Playtree, Video and other items are described in detail.
</p><p>When you finished your skin choose <span class="gui">File <img src="http://download.videolan.org/images/skinedhlp/arrowr.png" alt="&gt;"> Export as VLT</span> and submit the generated VLT file at <a href="http://www.videolan.org/vlc/skins_upload.php" target="_blank">the skins upload form</a> so that it will be added to the skins download page.
</p><p>When you finished your skin choose <span class="gui">File <img src="/images/skinedhlp/arrowr.png" alt="&gt;"> Export as VLT</span> and submit the generated VLT file at <a href="http://www.videolan.org/vlc/skins_upload.php" target="_blank">the skins upload form</a> so that it will be added to the skins download page.
</p>
<p class="footer">
&copy; 2008 All rights reserved to the VideoLAN team.
</p>
</body>
</html>
\ No newline at end of file
</html>
......@@ -20,7 +20,7 @@ At the moment you can only use PNG images with the Skin Editor, although VLC sup
</p>
<h3>Attributes</h3>
<p style="float:right;width:200px">
<img src="http://download.videolan.org/images/skinedhlp/bitmap-alpha.png" alt="alphacolor"><br><i>Left: original image <br>Right: how VLC renders it</i>
<img src="/images/skinedhlp/bitmap-alpha.png" alt="alphacolor"><br><i>Left: original image <br>Right: how VLC renders it</i>
</p>
<p>
<b>id</b><br>
......@@ -43,8 +43,8 @@ The color has to be set in hexadecimal format. The Skin Editor helps you with se
By default the alphacolor attribute is set to #000000 (black).
</p>
<p style="float:right;">
<img src="http://download.videolan.org/images/skinedhlp/bitmap-anim-src.png" alt="" style="vertical-align:middle">
<img src="http://download.videolan.org/images/skinedhlp/bitmap-anim.gif" alt="" style="vertical-align:middle"><br>
<img src="/images/skinedhlp/bitmap-anim-src.png" alt="" style="vertical-align:middle">
<img src="/images/skinedhlp/bitmap-anim.gif" alt="" style="vertical-align:middle"><br>
<i>Left: source image<br>Right: animation with nbframes=3 and fps=3</i>
</p>
<h3>Animation</h3>
......@@ -68,4 +68,4 @@ The speed of the animation in frames per second. By default this is set to 0.
&copy; 2008 All rights reserved to the VideoLAN team.
</p>
</body>
</html>
\ No newline at end of file
</html>
body {
font-family: Calibri, Andale Sans, Verdana, Helvetica, Arial, sans-serif;
background: url('http://download.videolan.org/images/skinedhlp/bg.png') repeat-x;
background: url('/images/skinedhlp/bg.png') repeat-x;
font-size:12pt;
}
h1{
......
......@@ -12,7 +12,7 @@
</div>
<h1>Theme settings</h1>
<p>
The theme settings dialog , accessible via <span class="gui">Edit <img src="http://download.videolan.org/images/skinedhlp/arrowr.png" alt="&gt;"> <img src="http://download.videolan.org/images/skinedhlp/icons/edit.png" alt="">Theme settings <i>(Ctrl+I)</i></span>, controls the two XML-Objects <i>Theme</i> and <i>ThemeInfo</i>.
The theme settings dialog , accessible via <span class="gui">Edit <img src="/images/skinedhlp/arrowr.png" alt="&gt;"> <img src="/images/skinedhlp/icons/edit.png" alt="">Theme settings <i>(Ctrl+I)</i></span>, controls the two XML-Objects <i>Theme</i> and <i>ThemeInfo</i>.
These define information about the skin and its author as well as its behaviour.
</p>
<h3>Theme information</h3>
......@@ -28,4 +28,4 @@ These define information about the skin and its author as well as its behaviour.
&copy; 2008 All rights reserved to the VideoLAN team.
</p>
</body>
</html>
\ No newline at end of file
</html>
......@@ -15,7 +15,7 @@
In VLC's Skins2-system windows are stored in Window-objects. The skin's items are not stored directly in a window but rather in a layout,
which in turn is stored in a window. A window can have several layouts. When the skin is opened for the first time, the layout that is last in the
layout list shows up by default. Thus you can change the default layout of a window by moving it to the bottom with the <span class="gui">
<img src="http://download.videolan.org/images/skinedhlp/icons/move_down.png" alt=""> Move Down</span> button.
<img src="/images/skinedhlp/icons/move_down.png" alt=""> Move Down</span> button.
</p>
<h3>Attributes</h3>
<p>
......@@ -49,4 +49,4 @@ When dragdrop is true, this boolean value determines whether dropped files will
&copy; 2008 All rights reserved to the VideoLAN team.
</p>
</body>
</html>
\ No newline at end of file
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment