SoftJock Audio Software - Tutorial - Rockit Basic Skinning Modifications

Software

Downloads

Purchase

Support

Tutorials

About Us

Tutorial - Rockit Pro DJ - Basic Skinning Modifications

This is a basic tutorial on how to change a couple aspects of an existing skin.

Rockit is fully user skinnable, and thus almost every aspect of how it looks and works, can be changed by you, and does not require a software rebuild on our part. You can change what controls are visible or not, the size of lists and text display fields, colors, and most everything else. Building entire skins requires much more effort, and a good graphics program, such as Adobe Photoshop, but you can easily tweak the skins already available, to suit your needs.

For this tutorial, we will again use the Dark Gray skin, and show you how to change the color of the main track list, hide the search and request lists, and expand the main track list to cover that area.

Note: In this tutorial, you will see references to restarting Rockit. Rockit requires a restart for skin changes to take effect, but we also make mention of it in this tutorial many times, so you can see how the changes are taking effect. In real life, you can make all the changes at once, and only have to restart Rockit once.

First off, here is the before look:

Now, you will need either a text editor, or you can just use Window's Notepad for this exercise. So, first thing we need to do, is open the skin file we want to modify. In this case the skin file is DarkGray1024x768.xml. We use Windows Explorer to browse to Rockit's skin folder, which if you used the default install path, will be C:\SoftJock\RockitProDJ40\Skins.

In that folder, you will find the file DarkGray1024x768.xml. Right click on that file, and choose Open With, and choose Notepad, and the file will open in Notepad. Note that the file may look somewhat messy, as we use a professional text editor, and tabs to keep everything lined up when we build our skins.

Press Ctrl+F to bring up the Find box, and type in "list controls", and click the Find Next button. This will bring you towards the bottom of the file, and should highlight the first line shown below:

<listctrl action="tracklist" visible="1" x="218" y="401" w="457" h="311" bkcolor="EEEEEE" txcolor="000000" font="Verdana" fsize="09" Header="1" NHS="0" NVS="0" value=""/>
<listctrl action="historylist" visible="0" x="680" y="450" w="184" h="250" bkcolor="ffffff" txcolor="000000" font="Verdana" fsize="09" Header="1" NHS="0" NVS="0" value=""/>
<listctrl action="searchlist" visible="1" x="680" y="401" w="310" h="158" bkcolor="EEEEEE" txcolor="000000" font="Verdana" fsize="09" Header="1" NHS="0" NVS="0" value="No search results"/>
<listctrl action="requestlist" visible="1" x="680" y="580" w="310" h="132" bkcolor="EEEEEE" txcolor="000000" font="Verdana" fsize="09" Header="1" NHS="0" NVS="0" value="Empty - Drop requests here"/>

As you can see, there are 4 lines below it. We want to hide the searchlist and requestlist, so we change the visible tag to zero for those two fields.

If you save the file, and restart Rockit, this is what you will now see:

The two lists are now hidden, but what about those pesky status lines? Well, if we look a little ways lower in the skin file, we will find these lines:

<status action="s-mycomputer" visible="0" x="020" y="704" w="180" h="016"
bkcolor="c0c0c0" txcolor="ffffff" font="Arial" fsize="09" border="1" bdcolor="0046d5"
value="My Computer"/>
<status action="s-mylibrary" visible="0" x="210" y="704" w="180" h="016"
bkcolor="ffffff" txcolor="000000" font="Arial" fsize="09" border="1" bdcolor="0046d5"
value="My Library"/>
<status action="s-tracklist" visible="1" x="218" y="713" w="457" h="016"
bkcolor="ffffff" txcolor="000000" font="Arial" fsize="09" border="1" bdcolor="808080"
value="Track List"/>
<status action="s-historylist" visible="0" x="810" y="704" w="184" h="016"
bkcolor="ffffff" txcolor="000000" font="Arial" fsize="09" border="1" bdcolor="0046d5"
value="History List"/>
<status action="s-requestlist" visible="1" x="680" y="713" w="310" h="016"
bkcolor="ffffff" txcolor="000000" font="Arial" fsize="09" border="1" bdcolor="808080"
value="Request List"/>
<status action="s-searchlist" visible="1" x="680" y="560" w="310" h="016"
bkcolor="ffffff" txcolor="000000" font="Arial" fsize="09" border="1" bdcolor="808080"
value="Search List"/>

We want to make the search and request status lines hidden, so we make them zero as well, save the file, and restart Rockit.

Okay, now we've cleaned out the right side, and are ready to expand our main track list, and change its color.

Up above in the skin file, where we hid the search and request lists themselves, you will see this line:

Now, the coordinates are fairly simple: x=left, y=top, w=width and h=height. We only need to change the width here, so we change the w value to 770. But, we are not done yet, as the status line for the main track list, has to be changed as well, so find the line below:

Change the width on that to 770 as well.

Now we save the file, and restart Rockit, and you will see this:

There, that looks pretty good, but we still want to change the background and text colors of the main track list, so on the tracklist line, we need to change the bkcolor value, which is currently EEEEEE, which is the hexadecimal RGB color code. Rockit, like most programs, uses hexadecimal codes for colors. In this case we will make the background black, and the text white. The value for black is 000000 (zeros), and white is FFFFFF. The txcolor is the text color. So, we change those values, and the line looks like this now:

Save the file, restart Rockit, and here's what we have:

There, that wasn't all that painful, now was it?

Since we know that most non-programmers aren't familiar with HEX color codes, you can easily look them up in Google or Yahoo, but here are a couple links to get you started:

http://www.2createawebsite.com/build/hex-colors.html

http://www.htmlgoodies.com/tutorials/colors/article.php/3478961

Enjoy, and look forward to our advanced skinning tutorial :)

SoftJock

Download Center

SoftJock

Online Store