Creating the Framework

Just as with the Thinger, we're going to give the Equalizer its own Container. However, since the EQ is a little more complicated, we're going to break it up into three files, eq.xml, eq-elements.xml, and eq-normal.xml. Similar to the Main Window, eq.xml will define the Container, eq-elements.xml will define the Elements, and eq-normal.xml will define the Layout. Because no new concepts are introduced, let's just use the following XML for the skeleton of our Container and Layout:

<!-- eq.xml -->
<include file="eq-elements.xml">

<container id="EQ" name="Equalizer" default_x="150" default_y="165" default_visible="0">
   <include file="eq-normal.xml">
</container>

<!-- eq-normal.xml -->
<groupdef id="eq.normal.group.display" w="162" h="80">
<!-- 74,38 -->
   <layer id="DisplayBG" image="eq.normal.Display.BG" x="0" y="0"/>
   <layer id="BandBG" image="eq.normal.Band.BG" x="9" y="14"/>
   <layer id="BalanceLabel" image="eq.normal.Balance.Label" x="78" y="4"/>
   <layer id="BalanceBG" image="eq.normal.Balance.BG" x="18" y="2"/>
   <layer id="PreAmpLabel" image="eq.normal.PreAmp.Label" x="78" y="70"/>
   <layer id="PreampBG" image="eq.normal.Preamp.BG" x="18" y="68"/>
   <layer id="DisplayGlass" image="eq.normal.Display.Glass" x="0" y="0" ghost="1"/>
</groupdef>

<layout id="normal" desktopalpha="1" w="274" h="154">
   <layer id="Background" image="eq.normal.Background" x="0" y="3" sysregion="1"/>
   <layer id="Inset" image="eq.normal.Inset" x="56" y="28"/>
   <group id="eq.normal.group.display" x="74" y="38" />
   <button
      id="Close"
      action="CLOSE"
      x="220" y="17"
      image="player.normal.button.close.up"
      downImage="player.normal.button.close.down"
      rectrgn="1"
      tooltip="Close Equalizer"
   />
   <layer id="CloseButtonOverlay" image="player.normal.button.close.overlay" x="224" y="21" ghost="1" alpha="170"/>
</layout>

This will create our basic, functionless Equalizer. We have our background and some aesthetic Layers to give our Equalizer a similar look to our other parts of the skin. Inside the Display Group, we have a few Layers that will serve as backgrounds and labels for our EQ Sliders. Also, we're again using the Close Button from the Main Window. Don't forget to add in the necessary entries to the Elements, then, if you so desire, you can save and refresh the skin. When you open the EQ, you should now see something like this:

If you don't see this, doublecheck your XML. If the EQ is being cut off, follow the steps used for the Thinger to correct the Layout dimensions. When you have something like the above, then we're ready to go on to the next page and add functionality .