You are not logged in.

Dear visitor, welcome to Skin Consortium. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

pjn123

"Your future depends on your dreams. So go to sleep"

  • "pjn123" started this thread

Posts: 2,971

Name: Pieter

Location: /\/¯¯¯¯¯\/\, South-Africa

Occupation: Auditor

  • Send private message

1

Tuesday, December 4th 2012, 10:56pm

Create your own custom single user interface skin (very easy!)

ClassicPro 2 now supports the new XUI object that any skinner can use in a skin.
What this basically means is that anyone with basic xml skinning experience can create a rich single user interface skin with the layout of their choice.

The single user interface object are used like any other xml object;

PHP Source code

1
<ClassicPro2:SUI x="10" y="60" w="-20" h="-70" relatw="1" relath="1"/>


PS: The notifier, generic window frame (used for components that don't open in the skin (like Color Editor, JTFE, ..) and the about screen is also already skinned so you just have to change the images to skin it.

See attachment for demonstration of how easy it is.

pjn123 has attached the following file:
"I either want less corruption, or more chance to participate in it"

Posts: 282

Name: Victor

Location: Argentina

Occupation: Graphic designer

  • Send private message

2

Wednesday, December 5th 2012, 1:58pm

Alpha blending is not supported?

pjn123

"Your future depends on your dreams. So go to sleep"

  • "pjn123" started this thread

Posts: 2,971

Name: Pieter

Location: /\/¯¯¯¯¯\/\, South-Africa

Occupation: Auditor

  • Send private message

3

Wednesday, December 5th 2012, 7:24pm

Alpha blending is not supported?


No and yes...
The problem is that Winamp disable alpha blending for the container/layout as soon as you use a components (Milkdrop, ML, Playlist,..).

But it might be possible to use a similar hack like the shadow that place the alpha blending in another container/layout. So if you put your skin in the "shadow" container and just the sui xui object in the main/normal container/layout it might do the job. Just remember that with the shadow code as it is atm, you can't click or move the skin from the shadow part, so will have to enable that too.
"I either want less corruption, or more chance to participate in it"

Posts: 282

Name: Victor

Location: Argentina

Occupation: Graphic designer

  • Send private message

4

Thursday, January 3rd 2013, 9:45pm

Dude.. I´ve looked at it and really couldn´t figure out how to move alpha blending from one layout to another, nor I couldn´t find documentation about it (wiki page just talks about alpha channels in layers).

Anyway, by "if you put your skin in the "shadow" container" did you meant that "someone" (you!) should try that or did you meant I could do it? (I couldn´t! haha).

And when you said "so will have to enable that too" (click or move the skin from the shadow part), were you refering to add the "move=1" to every graphic part? If so, I can help you with that if you try the alpha blending movement! =D

pjn123

"Your future depends on your dreams. So go to sleep"

  • "pjn123" started this thread

Posts: 2,971

Name: Pieter

Location: /\/¯¯¯¯¯\/\, South-Africa

Occupation: Auditor

  • Send private message

5

Friday, January 4th 2013, 7:06am

Think I will have to try this myself before sending you on a wild goose chase ;)
"I either want less corruption, or more chance to participate in it"

Posts: 195

Location: Turkey

Occupation: Student

  • Send private message

6

Thursday, January 17th 2013, 8:18pm

Excuse me, can anyone tell me how to make corners rounded? :rolleyes:
MerTcaN has attached the following image:
  • corners.png
MerTcaN has attached the following file:

pjn123

"Your future depends on your dreams. So go to sleep"

  • "pjn123" started this thread

Posts: 2,971

Name: Pieter

Location: /\/¯¯¯¯¯\/\, South-Africa

Occupation: Auditor

  • Send private message

7

Thursday, January 17th 2013, 8:58pm

This looks interesting ;)

Use the regionop="1" tag. Just remember that semi transparent pixels will not be transparent.

PHP Source code

1
<layer id="two.frame.1" x="0" y="0" image="frame.topleft" regionop="1" wantfocus="1"/>

Also remember that your layout shouldn't have a background="xxx" tag (you must create the background yourself with all the layers).
This can sometime be difficult if you mess something up and winamp save your skin size as something very small.


You also get another way make the corners.
The above one will just create the frame with the transparent bits, transparent.
But you can also use regionop="-2" (or something like that... can't remember 100% now - did it that way in my Winamp2006 skin I think).
If you use it like this the whole picture that is visible will be transparent in your skin.
With this method you'll have to use a background="xxx" on the layout.
I prefer the first method since its less double work ;)
"I either want less corruption, or more chance to participate in it"

Posts: 195

Location: Turkey

Occupation: Student

  • Send private message

8

Saturday, January 19th 2013, 10:10pm

I tried to do that but i think those codes are included in the ClassicPro engine folder not in the skin folder. Also I tried to change the position of close button but I cannot remove the old button, i can only add a second button separately. So I can fix it by changing the engine but how can I change it from skin file? :S

pjn123

"Your future depends on your dreams. So go to sleep"

  • "pjn123" started this thread

Posts: 2,971

Name: Pieter

Location: /\/¯¯¯¯¯\/\, South-Africa

Occupation: Auditor

  • Send private message

9

Sunday, January 20th 2013, 11:06am

Remember the example in the skin.xml is just an example.

So this line:

PHP Source code

1
<wasabi:StandardFrame:NoStatus fitparent="1" wantfocus="1"/>


...creates the default frame (as seen in JTFE playlist search and widget manager).

So ideally you shouldn't use that to create your skin gfx.
If you remove that line you should see that the skin is still visible even though your skin won't have any layers to show. The reason for this seems to be these two params for your layout:

PHP Source code

1
rectrgn="1" nostatus="1"


If you remove the two params you should see that your skin will disappear.
Now you must create your own skin gfx by using <layers/> and setting them to regionop="1" by adding that param to the <layer/> object.
Remember you will only see sections of the skin that have regionop="1". So you must add some background under the cpro xui object too see things.

Hope things isn't too unclear now :)

This is the lines from the cpro2 default layout that you could maybe just use as it is:

PHP Source code

1
2
3
4
5
6
7
8
9
    <layer id="two.frame.1" x="0" y="0" image="frame.topleft" regionop="1" wantfocus="1"/>
    <layer id="two.frame.2" x="104" y="0" w="-239" relatw="1" tile="1" image="frame.top" regionop="1" wantfocus="1"/>
    <layer id="two.frame.3" x="-135" y="0" relatx="1" image="frame.topright" regionop="1" wantfocus="1"/>
    <layer id="two.frame.4" x="0" relath="1" image="frame.left" regionop="1" tile="1" wantfocus="1"/>
    <layer id="two.frame.5" x="8" w="-16" relatw="1" relath="1" image="frame.center" regionop="1" wantfocus="1"/>
    <layer id="two.frame.6" x="-8" relatx="1" relath="1" image="frame.right" regionop="1" move="0" tile="1" wantfocus="1"/>
    <layer id="two.frame.7" x="0" y="-8" relaty="1" image="frame.bottomleft" regionop="1" wantfocus="1"/>
    <layer id="two.frame.8" x="8" y="-8" w="-16" relaty="1" relatw="1" tile="1" image="frame.bottom" regionop="1" move="0" wantfocus="1"/>
    <layer id="two.frame.9" x="-8" y="-8" relatx="1" relaty="1" image="frame.bottomright" regionop="1" move="0" wantfocus="1"/>

Just remember to adjust some of the xywh values ;)

And lastly - I hope I can create my own proper cpro xui example skin in the next month and iron out any bugs (you should see some guru errors for now that will be fixed in the next version).
So ignore any bugs for the mean time :D
"I either want less corruption, or more chance to participate in it"

Posts: 195

Location: Turkey

Occupation: Student

  • Send private message

10

Sunday, January 20th 2013, 7:12pm

Thank you for your reply! My skining knowledge is just about editing codes not so much. I will try to succeed it now.

edit: So, I can't add rounded edges to default frame i suppose.

edit2: Finally it works! Thanks again :thumbup:
MerTcaN has attached the following file:

This post has been edited 2 times, last edit by "MerTcaN" (Jan 20th 2013, 10:19pm) with the following reason: success


pjn123

"Your future depends on your dreams. So go to sleep"

  • "pjn123" started this thread

Posts: 2,971

Name: Pieter

Location: /\/¯¯¯¯¯\/\, South-Africa

Occupation: Auditor

  • Send private message

11

Monday, January 21st 2013, 6:46am

No problem ;)

If the default frame doesn't show rounded corners then I should put that on my buglist here so thanks for the heads up!
"I either want less corruption, or more chance to participate in it"

Posts: 195

Location: Turkey

Occupation: Student

  • Send private message

12

Thursday, January 24th 2013, 11:07pm

The skin is now more functional but it can be beter if timer and total time doesn't look so different. If somebody interested in the skin you are free to try and use for building your skins.
MerTcaN has attached the following file:

pjn123

"Your future depends on your dreams. So go to sleep"

  • "pjn123" started this thread

Posts: 2,971

Name: Pieter

Location: /\/¯¯¯¯¯\/\, South-Africa

Occupation: Auditor

  • Send private message

13

Friday, January 25th 2013, 6:21am

Wow MerTcaN that is really great. Don't think someone can ask for more optimal usage of space ;)
"I either want less corruption, or more chance to participate in it"

Posts: 195

Location: Turkey

Occupation: Student

  • Send private message

14

Friday, January 25th 2013, 12:13pm

Yeah, that's my main purpose for this skin. :)

Rate this thread

Sponsored Links: