FAQCustomButtons

From dvdstyler

To create a new button, you need to draw it in any SVG-Editor, e.g. in inkscape, and save it in SVG format.
Sadly, SVG-export is not implemented in DVDStyler yet, but it can be made manually:
1. add following lines at the begin of file (after <?xml ...>, but before <svg ...>):

<button>
    <title>My Button</title>

2. add following line at the end of file

</button>

3. find first svg tag, f.e.:

<svg
    ...
    width="100"
    height="100"
    ...

and add attribute viewBox to it

<svg
    ...
    width="100"
    height="100"
    viewBox="0 0 100 100"
    ...

Now you can copy the result xml file in buttons directory of DVDStyler and test it.
But you cannot change any button specific parameters yet, e.g. set colors for different states of button.

To define a parameter you need to add following lines in your file before the last line (</button>)

<parameters>
    <parameter>
    <title>Button color</title>
    <name>color</name>
    <type>colour</type>
    <element>id_of_the_element</element>
    <attribute>fill</attribute>
    <changeable/>
    <default-value>
        <highlighted>#ffffff</highlighted>
        <selected>#ffffff</selected>
    </default-value>
    </parameter>
<parameters>

Replace "id_of_the_element" with id of the svg element, which color must be different in different states of button.

---

An Example

---

So if you have a following svg-file:

<?xml version="1.0"?>
<!-- Created with Inkscape -->
<svg width="100" height="50">
    <path id="arrow"
        style="stroke:#ffffff;stroke-width:3;stroke-linejoin:round;fill:#8080F0;"
        d="M65,18 h-60 v14 h60 l-10,15 l40,-22 l-40,-22 z" />
</svg>

Then dvdstyler button file can look as:

<?xml version="1.0"?>
<button>
    <title>Arrow</title>
    <svg width="100" height="50" viewBox="0 0 100 50">
        <path
            id="arrow"
            style="stroke:#ffffff;stroke-width:3;stroke-linejoin:round;fill:#8080F0;"
            d="M65,18 h-60 v14 h60 l-10,15 l40,-22 l-40,-22 z" />
    </svg>
    <parameters>
        <parameter>
            <title>Colour of the arrow</title>
            <name>arrow</name>
            <type>colour</type>
            <element>arrow</element>
            <attribute>fill</attribute>
            <changeable/>
            <default-value>
                <highlighted>#0000FF</highlighted>
                <selected>#FF0000</selected>
            </default-value>
        </parameter>
    </parameters>
</button>

See also a tutorial at http://www.mikesgeneralblog.blogspot.com
Good luck!