Free Zebra2/HZ skin: Wombat Flat (Skin Builder 1.1 final and pre-built skins released)

[jrgillam]

It's probably as simple as modifying a single line of code in the script. Or entering the secret GUI edit mode in the plugin, moving that element, and resaving.

I'm sure you're right! But when I opened the script I couldn't figure out what to delete. Searching for various terms that seemed relevant didn't turn up anything. Maybe someone could point us in the right direction.

[zvenx]

Seems like Wombat is no longer on kvr (hope they are alright in life)... would be nice for an updated skin builder now that Z and ZHZ have been updated a bit.
rsp

[Funkybot's Evil Twin]

I just took a stab at updating my Wombat ZebraHZ skin with KeyControl. It's a fairly simple change but a bit of a "cludge" and not the best looking. But it's good enough. Hopefully, this info will help others update their own skins and/or find a prettier solution. I believe the same steps will work for the stock Zebra skin. Worst case, you may have to play with the bounds to move stuff around a bit.

Here's what it looks like:


I'm sharing these instuction in case anyone else is brave enough to try this. I hold no responsibility if you bork things. Step 1 is to create a copy of your skin so you can always go back to the old one if needed.

Steps:

1. CREATE A COPY of your existing Wombat theme folder with a new name like "Wombat v2" or something
2. Go into that new themes folder and open the ZebraHZ.txt from the scripts folder
3. At the bottom of the "Colours" section, add this new line

This adds the color for the square Key Control frame. Feel free to adjust the color.

Code: Select all

COLOUR name='KeyVizColour' rgba='33e5caff'

4. Search for the following phrase: parameter='Arch'
5. Below that line, create space to paste in a new block of code
6. Paste in the following code:

This adds the KeyControl button...

Code: Select all

CONTROL type='KeyFocusViz' name='KeyFocusVisualizer' bounds='942.00 6.00 40.00 40.00' parent='Pane 39280' layerMask='1'
PROPERTY control='KeyFocusVisualizer' name='colours' id='0' value='none'
PROPERTY control='KeyFocusVisualizer' name='colours' id='1' value='none'
PROPERTY control='KeyFocusVisualizer' name='colours' id='2' value='invisible'
PROPERTY control='KeyFocusVisualizer' name='colours' id='3' value='invisible'
PROPERTY control='KeyFocusVisualizer' name='colours' id='4' value='KeyVizColour'
PROPERTY control='KeyFocusVisualizer' name='graphics' id='0' value='none'
PROPERTY control='KeyFocusVisualizer' name='graphics' id='1' value='ZHZ-Btn-KC'
PROPERTY control='KeyFocusVisualizer' name='graphics' id='2' value='none'
PROPERTY control='KeyFocusVisualizer' name='graphics' id='3' value='none'

7. Save the updates to your text file - that's it!
8. Launch ZebraHZ and select the new skin

You'll see the new KeyViz icon kind of smooshed in between the ZebraHZ logo and the U-he Logo.

Bonus tip: Fixing or Commenting Out the Version, Architecture, and Revision text

These few blocks of code are the Plugin Type (API), Platform Architecture (Arch), and version revision (Rev). Someone said they didn't work properly on Mac. So that's your clue on how to move/fix them (play with the bounds coordinates) or you could add a forward slash to those lines to comment them out entirely and hide them.

This is the plugin version.

Code: Select all

CONTROL type='Display' name='Display 42127' bounds='815.00 35.00 24.00 10.00' parent='Pane 39280' layerMask='1'
PROPERTY control='Display 42127' name='colours' id='0' value='none'
PROPERTY control='Display 42127' name='colours' id='1' value='none'
PROPERTY control='Display 42127' name='colours' id='2' value='Light Gray'
PROPERTY control='Display 42127' name='colours' id='3' value='none'
PROPERTY control='Display 42127' name='graphics' id='0' value='none'
PROPERTY control='Display 42127' name='graphics' id='1' value='none'
PARAMETER control='Display 42127' port='integer' module='PCore' parameter='API'

This is the Architecture.

Code: Select all

CONTROL type='Display' name='Display 42185' bounds='840.00 35.00 45.00 10.00' parent='Pane 39280' layerMask='1'
PROPERTY control='Display 42185' name='colours' id='0' value='none'
PROPERTY control='Display 42185' name='colours' id='1' value='none'
PROPERTY control='Display 42185' name='colours' id='2' value='Light Gray'
PROPERTY control='Display 42185' name='colours' id='3' value='none'
PROPERTY control='Display 42185' name='graphics' id='0' value='none'
PROPERTY control='Display 42185' name='graphics' id='1' value='none'
PARAMETER control='Display 42185' port='integer' module='PCore' parameter='Arch'

This is the Revision number.

Code: Select all

CONTROL type='Display' name='Display 5768' bounds='900.00 35.00 35.00 10.00' parent='Pane 39280' layerMask='1'
PROPERTY control='Display 5768' name='colours' id='0' value='none'
PROPERTY control='Display 5768' name='colours' id='1' value='none'
PROPERTY control='Display 5768' name='colours' id='2' value='Light Gray'
PROPERTY control='Display 5768' name='colours' id='3' value='none'
PROPERTY control='Display 5768' name='graphics' id='0' value='none'
PROPERTY control='Display 5768' name='graphics' id='1' value='none'
PARAMETER control='Display 5768' port='integer' module='PCore' parameter='Rev'

CONTROL type='Label' name='Label 5774' bounds='880.00 35.00 21.00 10.00' parent='Pane 39280' layerMask='1'
PROPERTY control='Label 5774' name='colours' id='0' value='none'
PROPERTY control='Label 5774' name='colours' id='1' value='Light Gray'
PROPERTY control='Label 5774' name='graphics' id='0' value='none'
PROPERTY control='Label 5774' name='labeltext' id='0' value='REV'

[e-musician]

[In addition or as an alternative to what Funkybot has already posted above:]

1) Edit WOM-Top-BG.png (in the "Panes" folder) like this: Move the "u-he" logo by 50 pixels to the right and, after that, move the "ZEBRA (HZ)" logo by 70 pixels to the right.

2) Edit the script as follows:

a) KC button

Code: Select all

CONTROL type='KeyFocusViz' name='KeyFocusVisualizer' bounds='795.00 6.00 40.00 40.00' parent='Pane 39280' layerMask='1'
PROPERTY control='KeyFocusVisualizer' name='colours' id='0' value='none'
PROPERTY control='KeyFocusVisualizer' name='colours' id='1' value='none'
PROPERTY control='KeyFocusVisualizer' name='colours' id='2' value='invisible'
PROPERTY control='KeyFocusVisualizer' name='colours' id='3' value='invisible'
PROPERTY control='KeyFocusVisualizer' name='colours' id='4' value='KeyVizColour'
PROPERTY control='KeyFocusVisualizer' name='graphics' id='0' value='none'
PROPERTY control='KeyFocusVisualizer' name='graphics' id='1' value='WOM-Btn-KC'
PROPERTY control='KeyFocusVisualizer' name='graphics' id='2' value='none'
PROPERTY control='KeyFocusVisualizer' name='graphics' id='3' value='none'

NB: I am using "'WOM-Btn-KC' here as a value instead of 'ZHZ-Btn-KC'; this is because I created a new KC button that I believe goes better with the Wombat skin(s). I am sharing it here just in case anyone finds it useful. Just place this folder inside the "Animations" folder and edit or adjust the colour of ZHZ-BtnKC-01.png depending on the main colour of your skin.

WOM-Btn-KC.zip

Don't forget to add the KeyVizColour (as explained by Funkybot).


b) revision info

Code: Select all

CONTROL type='Display' name='Display 5768' bounds='868.00 36.00 29.00 10.00' parent='Pane 39280' layerMask='1'
PROPERTY control='Display 5768' name='colours' id='0' value='none'
PROPERTY control='Display 5768' name='colours' id='1' value='none'
PROPERTY control='Display 5768' name='colours' id='2' value='Light Gray'
PROPERTY control='Display 5768' name='colours' id='3' value='none'
PROPERTY control='Display 5768' name='graphics' id='0' value='none'
PROPERTY control='Display 5768' name='graphics' id='1' value='none'
PARAMETER control='Display 5768' port='integer' module='PCore' parameter='Rev'

CONTROL type='Label' name='Label 5774' bounds='848.00 36.00 21.00 10.00' parent='Pane 39280' layerMask='1'
PROPERTY control='Label 5774' name='colours' id='0' value='none'
PROPERTY control='Label 5774' name='colours' id='1' value='Light Gray'
PROPERTY control='Label 5774' name='graphics' id='0' value='none'
PROPERTY control='Label 5774' name='labeltext' id='0' value='REV'

c) plugin version

Code: Select all

CONTROL type='Display' name='Display 42127' bounds='902.00 36.00 24.00 10.00' parent='Pane 39280' layerMask='1'
PROPERTY control='Display 42127' name='colours' id='0' value='none'
PROPERTY control='Display 42127' name='colours' id='1' value='none'
PROPERTY control='Display 42127' name='colours' id='2' value='Light Gray'
PROPERTY control='Display 42127' name='colours' id='3' value='none'
PROPERTY control='Display 42127' name='graphics' id='0' value='none'
PROPERTY control='Display 42127' name='graphics' id='1' value='none'
PARAMETER control='Display 42127' port='integer' module='PCore' parameter='API'

d) platform

Code: Select all

CONTROL type='Display' name='Display 42185' bounds='930.00 36.00 46.00 10.00' parent='Pane 39280' layerMask='1'
PROPERTY control='Display 42185' name='colours' id='0' value='none'
PROPERTY control='Display 42185' name='colours' id='1' value='none'
PROPERTY control='Display 42185' name='colours' id='2' value='Light Gray'
PROPERTY control='Display 42185' name='colours' id='3' value='none'
PROPERTY control='Display 42185' name='graphics' id='0' value='none'
PROPERTY control='Display 42185' name='graphics' id='1' value='none'
PARAMETER control='Display 42185' port='integer' module='PCore' parameter='Arch'

e) the "u-he button"

Code: Select all

CONTROL type='Button On-Off' name='Button 5862' bounds='1005.00 6.00 80.00 40.00' parent='Pane 39280' layerMask='1'
PROPERTY control='Button 5862' name='colours' id='0' value='none'
PROPERTY control='Button 5862' name='colours' id='1' value='none'
PROPERTY control='Button 5862' name='colours' id='2' value='invisible'
PROPERTY control='Button 5862' name='colours' id='3' value='none'
PROPERTY control='Button 5862' name='colours' id='4' value='none'
PROPERTY control='Button 5862' name='graphics' id='0' value='none'
PROPERTY control='Button 5862' name='graphics' id='1' value='none'
PROPERTY control='Button 5862' name='graphics' id='2' value='none'
PROPERTY control='Button 5862' name='graphics' id='3' value='none'

This is what it looks like:

Zebra Wombat Skins KC.png

[Funkybot's Evil Twin]

That's awesome e-musician, much better!

[zvenx]

[In addition or as an alternative to what Funkybot has already posted above:]

1) Edit WOM-Top-BG.png (in the "Panes" folder) like this: Move the "u-he" logo by 50 pixels to the right and, after that, move the "ZEBRA (HZ)" logo by 70 pixels to the right.
...

Idiot question 1.
How do I move elements in a PNG file?
What program are you using to do so?
thanks
rsp

[Funkybot's Evil Twin]

[In addition or as an alternative to what Funkybot has already posted above:]

1) Edit WOM-Top-BG.png (in the "Panes" folder) like this: Move the "u-he" logo by 50 pixels to the right and, after that, move the "ZEBRA (HZ)" logo by 70 pixels to the right.
...

Idiot question 1.
How do I move elements in a PNG file?
What program are you using to do so?
thanks
rsp

He's talking about editing the buttons X/Y coordinates in the scripts. The examples are in the post. Find the U-he button section in your existing script, and replace it with the U-he button text e-musician posted. Repeat for the others.

High-level steps:

1. Create a Copy of your existing Wombat-based skin in the Themes folder
2. Open the Zebra2.txt file for the copy
3. Ctrl+F and search for CONTROL type='Display' name='Display 5768' [note: this is the revision info in B) from e-musicians post, you'll repeat this for the other sections using a unique block of that text from row 1 of each section]
4. Select the block of text that correlates to that, delete it
5. Copy in the block of text that e-musician posted to replace it
6. Repeat for all the other elements e-musician posted
7. Add the keyviz color from e-musician's post to the colors section of the script (I suggest at the end)
8. Add the keyviz button from e-musician's post to the "Graphics" section of the script (anywhere will do - but I suggest putting it near the U-he button)
9. Save the script
10. Download the button from his post
11. Extract that entire WOM-Btn-KC folder to the new theme folder\Images\Animation folder
10. Load Zebra2 and select the updated skin

You've now modified your skin.

EDIT: you'll still need to move things in the background .png's to make the locations of the images in the panes match up with the new locations in the script. I completely forgot about this.

[zvenx]

Ahh thanks.. since he spoke about the scripts in step 3 and moving in step 1, I got confused.
Thanks above and beyond.
Appreciated.
rsp

[zvenx]

I followed your steps (twice ).. and seemed to have done everyything but the shift of the product name and logo.

rsp

[e-musician]

Hi zvenx,

you got that right, I really meant editing the actual PNG in step 1, so you would have to "move pixels around".

To do so, I can highly recommend either of these - excellent - programmes: GIMP or paint.net. Both are free.

Load the original picture (i. e. WOM-Top-BG.png) and use the selection tool to cut out and move an area.

You then only need to fill the holes by grabbing neighbouring areas and dragging them.

Hope that helps.

EDIT: Affinity is also great, of course (but it's not free).

[Funkybot's Evil Twin]

I followed your steps (twice ).. and seemed to have done everyything but the shift of the product name and logo.

rsp

Sorry zvenx. My bad. I suddenly remember having needed to edit the background .pngs in Affinity.

Note to self: stop typing in forums on Monday mornings!

[zvenx]

Thank you.
Cause I was surely scratching my head
rsp

Hi zvenx,

you got that right, I really meant editing the actual PNG in step 1, so you would have to "move pixels around".

To do so, I can highly recommend either of these - excellent - programmes: GIMP or paint.net. Both are free.

Load the original picture (i. e. WOM-Top-BG.png) and use the selection tool to cut out and move an area.

You then only need to fill the holes by grabbing neighbouring areas and dragging them.

Hope that helps.

EDIT: Affinity is also great, of course (but it's not free).

[zvenx]

Yeah, I think my graphic skills are limited to stick men and women and their families .
If you could post your moved zebra and zebra hz files I would greatly appreciate them.

thanks
rsp

[Funkybot's Evil Twin]

Yeah, I think my graphic skills are limited to stick men and women and their families .
If you could post your moved zebra and zebra hz files I would greatly appreciate them.

thanks
rsp

Try this. Let me know if any issues.

[zvenx]

That came out perfect thank you.
You don't perchance have an HZ one too right?
(says he pushing his luck)

rsp