Topic: Standard View Skinning Tutorial (Read 73843 times)

PeterS · « **on:** July 25, 2007, 09:55:18 am »

We have put together a skinning tutorial for Standard View in MC.
The idea is to demystify skinning for those who want to try it, but don't have enough info to get started, and also to provide more information for seasoned skinners.

The tutorial can be found on our Wiki:

http://wiki.jriver.com/index.php/Standard_View_Skinning_Tutorial

jack wallstreet · « **Reply #1 on:** July 25, 2007, 10:02:29 am »

I have not tried skinning, but I think this is really wonderful that you have taken the time to do this tutorial. Very helpful and educational. Thanks. I much appreciate being on the MC12 forum. I may not have otherwise seen it.

gappie · « **Reply #2 on:** July 25, 2007, 05:11:36 pm »

this is a nice tutorial. great work. inspired me to realy finish my skin. tried to submit it. not really clear how that works.

PeterS · « **Reply #3 on:** July 26, 2007, 08:48:48 am »

Thanks. Let us know if you have any ideas for improving it.

Right now, our submission process for skins and other plug-ins is not very streamlined. The process is not entirely automatic either, so we look at each submission. If there are any issues with your submission, we'll let you know. We'll try and get your skin up on the download page quickly.

Mr ChriZ · « **Reply #4 on:** July 26, 2007, 10:55:58 am »

That looks fun I wanna go!

gappie · « **Reply #5 on:** July 26, 2007, 11:22:33 am »

Quote from: PeterS on July 26, 2007, 08:48:48 am

Thanks. Let us know if you have any ideas for improving it.

Right now, our submission process for skins and other plug-ins is not very streamlined. The process is not entirely automatic either, so we look at each submission. If there are any issues with your submission, we'll let you know. We'll try and get your skin up on the download page quickly.

i just wonder how you guys know if there are issues. i understood that i did not have to put the zip file with the submission: "New (requires all fields except: accessory ID, zipfile, image links and mjp actions) ".
maybe as a start it could be an idea to send an automatic email when the submission is made and what the procedure after that is.

thanks.

craft · « **Reply #6 on:** July 29, 2007, 04:57:14 am »

Mr ChriZ · « **Reply #7 on:** September 02, 2007, 04:35:58 pm »

Is there any possability of changing the graphics for
Audio, Images, and Video? I can't find them anywhere.

Cheers
Chris.

Alex B · « **Reply #8 on:** September 02, 2007, 06:21:31 pm »

Quote from: Mr ChriZ on September 02, 2007, 04:35:58 pm

Is there any possability of changing the graphics for
Audio, Images, and Video? I can't find them anywhere.

[MC program path]\Data\Default Art\SmallIcons.png

The file has separate icons for the tree and the Image columns.

In MC 11.1 it was possible to place a custom SmallIcons file in the Data\Custom Art\ folder. Unfortunately that doesn't work anymore. The SmallIcons file works only from the Default Art folder and MC replaces a custom file on each update. The bigger "NoThumb" images seem to work from the Custom Art folder.

EDIT

I forgot this discussion:

Quote

Alex B:

Re: Media Center 12.0.95
« Reply #23 on: October 18, 2006, 10:35:40 AM »

I noticed that the Data\Custom Art\ folder system may be partially broken. My custom NoTile.png image works as before, but I cannot make the SmallIcons.png file work from the Custom Art folder. I had to replace the original file in the Data\Default Art\ folder.

A bug?

Matt:

Re: Media Center 12.0.95
« Reply #24 on: October 18, 2006, 10:49:52 AM »

No. The system was reworked so that small icons are a merge between default and custom. You need a sister Images.xml file in the custom folder to describe your custom icons if you want to go down this path.

Mr ChriZ · « **Reply #9 on:** September 03, 2007, 03:04:26 am »

Cheers Alex

Alex B · « **Reply #10 on:** September 03, 2007, 03:44:45 am »

Hmm....

I can't get this to work:

Quote

No. The system was reworked so that small icons are a merge between default and custom. You need a sister Images.xml file in the custom folder to describe your custom icons if you want to go down this path.

I copied the Images.xml file from the Default Resources folder to the Custom Art folder. Should I edit it somehow?

I have edited only a couple of icons in my custom SmallImages file. Otherwise the file is unchanged. Should the image file contain only the edited icons and the "sister" Images.xml file have only a few lines that describe these images?.

Alex B · « **Reply #11 on:** September 28, 2007, 12:11:12 pm »

Bump

Can anyone help? I would like try a custom small icons file, but as I explained, I don't understand what Matt meant.

marko · « **Reply #12 on:** September 28, 2007, 02:05:27 pm »

Quote

I have edited only a couple of icons in my custom SmallImages file. Otherwise the file is unchanged. Should the image file contain only the edited icons and the "sister" Images.xml file have only a few lines that describe these images?.

The way you describe here is how I figured it should work, but I couldn't get it to play nice either.

I changed a couple of the icons in the original smallicons.png file and saved it into the custom art folder. I then saved a copy of images.xml into a custom resources folder and my customisations showed up just fine.
It works, but I don't think I'm using it as intended as it doesn't feel like a "merge". Surely every icon is being referenced from the custom folders?

-marko.

Alex B · « **Reply #13 on:** September 29, 2007, 08:56:12 am »

As I said in the "Jelly" thread, ideally each standard skin should be able to automatically load a separate set of custom icons. I wonder if this would need only a small change in the program code or is already possible with this "sister Images.xml file" system.

Mr ChriZ · « **Reply #14 on:** February 18, 2008, 12:48:06 pm »

Is there a posibility of MC supporting PNG transparency on things like the
mainframe graphics or is that not possible?

Cheers,
Chris.

marko · « **Reply #15 on:** November 04, 2008, 02:21:04 am »

[grumble]

Colour system is driving me nuts!!!!!!!

1) Frame > Colors > Text= This value is shared with tooltip text and border
2) Frame > Colors > Face3D= This value affects the tooltip background colour, as well as the difference in alternating gridline colour.
3) Tree > Colors > Back= This value affects the colour of text in auto import when excluding a folder.

It's a nightmare trying to find a balance between all the things that these two values affect.
It's a bit easier if you want a wildly contrasting gridline effect, which I don't as it hurts the eyes and makes the list harder to focus on.

I then find that, having gotten the list to look 'right', tooltip text is unreadable, and upon fixing that, text in dialogue boxes is unreadable

[/grumble]

* marko wanders back to his colour palette, muttering profusely under his breath...

gappie · « **Reply #16 on:** November 04, 2008, 03:26:54 am »

marko, you did add GridLineBack= to the colors of the list? it sets the alternating grid colour.

gab

Mr ChriZ · « **Reply #17 on:** November 04, 2008, 04:41:15 am »

Quote from: marko on November 04, 2008, 02:21:04 am

[grumble]

Colour system is driving me nuts!!!!!!!

1) Frame > Colors > Text= This value is shared with tooltip text and border
2) Frame > Colors > Face3D= This value affects the tooltip background colour, as well as the difference in alternating gridline colour.

It's a nightmare trying to find a balance between all the things that these two values affect.
It's a bit easier if you want a wildly contrasting gridline effect, which I don't as it hurts the eyes and makes the list harder to focus on.

I then find that, having gotten the list to look 'right', tooltip text is unreadable, and upon fixing that, text in dialogue boxes is unreadable

[/grumble]
* marko wanders back to his colour palette, muttering profusely under his breath...

This is something that has driven me nuts too.
So many colours are shared where they shouldn't be.

marko · « **Reply #18 on:** November 04, 2008, 05:13:56 am »

Aaahhh, nice one gapster-man.

I moved on to messing around with frame_edit and frame_combo... not sure if they're quite right yet...

I've added gridlineback using a value of 00ff00 and all I can say is that it works, and that it's a good job I'm not a photosensitive eplileptic!!

(no offence to any sufferers intended)

I will meddle some more this evening.

-marko.

marko · « **Reply #19 on:** November 10, 2008, 02:47:05 am »

I seem to remember way back, in the early days of MC12, a change was made in the skinning engine that allowed us to specify that only the visible part of a circular active area would respond to mouse activity?

Either I'm imagining things, or I just can't land the right search string for it.
If I'm not imagining things, does anyone remember the finer details of how that works, or have a link for me?

Wasn't there fading transitions between mouse in and mouse out states too?

I'm in the midst of an epic battle with player control buttons atm. My photoshop skills in this area (most areas actually) are laughable!!

-marko

Mr ChriZ · « **Reply #20 on:** November 10, 2008, 06:33:35 am »

Noire uses it on the player controls.
The round play button for example only works when the mouse is over the round part.
Compartively on 2nd Stage current edition if you go to the round play buttons their state changes when inside the box in which the circle graphic is created.

I believe it works in two ways.

A 5th state of the graphic file is a solid colour, which marks the hit area for the graphic.
This colour then is mentioned in the main.xml file on the same line as the graphic.

Mr ChriZ · « **Reply #21 on:** November 10, 2008, 06:40:16 am »

Actually there's no change to the XML.
It's all about that 5th state.
And it appears it's just black.

marko · « **Reply #22 on:** November 13, 2008, 04:20:09 am »

Thanks for that Mr Chriz, my skin is now completed.

marko · « **Reply #23 on:** November 22, 2008, 02:30:42 am »

Other questions:

When you click in say, the search field, it leaves a flashing thing in the field that tells us we can type here... (is that called a carat?)

That was a supplemental question!!! The real questions are, can we control its colour?

and...

can we control the colour of selected text and the selected text background in edit and combo boxes like we can is the search field?

-marko.

marko · « **Reply #24 on:** November 24, 2008, 02:07:50 am »

One more try, with pictures:

First off, the 'type here' cursor in the search field is all but invisible here:

Is it possible to control its colour?

Secondly, we are able to control the appearance of selected text in the search field:

but as far as I can tell, we do not have the same control over text in edit controls, such as the [lyrics] field:

I'd hate to submit "Black and Blue" to the skin pages and then later discover that it is actually possible to control these colours after all....

anyone?

MtnBeachBum · « **Reply #25 on:** March 16, 2009, 11:36:07 pm »

Could someone please help me figure something out? I have started working on a new skin, and whenever I try to change the color of the SliderVolFront image it displays a black box around it. I can't figure out what's going on! Any ideas? I'm sure it's probably something simple. Thanks.

Teach

marko · « **Reply #26 on:** March 17, 2009, 02:23:27 am »

How does the size of the graphic compare against the margin settings for it in the xml file?

Margins="15,0,15,0"

This, for example, tell MC to use 15 pixel margins on the left and right, and zero pixel margins top and bottom. If the image were only, say, 20 pixels wide, MC would get upset and draw wierd stuff.
If that does not help, could you post the image and the line of xml that draws it. Without those, the suggestion above is the best I can come up with.

-marko.

Edit: One last thought...
You say: "When I change the colour"... If you are replacing any magenta, and magenta happens to specified in the xml as the transparent colour, that might make wierd things happen too, such as previously hidden areas of the graphic becoming visible?

MtnBeachBum · « **Reply #27 on:** March 18, 2009, 02:19:14 am »

It wasn't either one of those things. It's weird, it's like it doesn't recognize that it's a .png and replaces the transparent background with a black one. I figured out a way around it though, I just saved it as a .bmp and set the transcolor in the xml. Thanks for your input, it's what gave me the idea.

Teach

MtnBeachBum · « **Reply #28 on:** March 18, 2009, 05:15:05 pm »

One more question. I saw a post on here asking how to change the color of the splitter arrows. I didn't see an answer to the question. How do you change the splitter arrows' color?

Thanks,
Teach

gappie · « **Reply #29 on:** March 18, 2009, 05:24:05 pm »

Quote from: Teach on March 18, 2009, 05:15:05 pm

One more question. I saw a post on here asking how to change the color of the splitter arrows. I didn't see an answer to the question. How do you change the splitter arrows' color?

Thanks,
Teach

its at the end of that thread: http://yabb.jriver.com/interact/index.php?topic=50244.0

Quote

under the main frame you find an entry called splitter...

gab

MtnBeachBum · « **Reply #30 on:** March 19, 2009, 01:22:09 am »

Quote from: gappie on March 18, 2009, 05:24:05 pm

its at the end of that thread: http://yabb.jriver.com/interact/index.php?topic=50244.0

gab

Thank You

MtnBeachBum · « **Reply #31 on:** March 19, 2009, 01:25:04 am »

Does anyone know if it is possible to have more than 1 tree background images? What I mean is an image for the main tree, one for everything else. Is this possible?

Thanks,
Teach

Gl3nn · « **Reply #32 on:** June 14, 2009, 09:26:36 am »

Does one use an HTML-like WYSIWYG editor to create/alter skins, or just a text editor like Notepad++?

Daydream · « **Reply #33 on:** June 17, 2009, 02:23:15 am »

Notepad++ forevaaaaa...!

gappie · « **Reply #34 on:** June 29, 2009, 03:46:47 am »

Quote from: manola on June 29, 2009, 03:28:33 am

I didn't see an answer to the question. How do you change the splitter arrows' color?

its five posts above you.

Quote

under the main frame you find an entry called splitter...

gab

edit: and about the white link mr manola posted: http://www.fraudwatchers.org/forums/archive/index.php/t-29712.html

Quote

Lately our forum and numerous others have been spammed with hidden links. The usual tactic is to post an insignificant reply in an existing thread, and to include a hidden link either in invisible text (matching our background color code), or hidden behind a smily.

This type of black hat SEO spamming is against Google's terms of service and is usually associated with throwaway domains that are not expected to have a long life, such as porn sites or online drug sellers.

The objective of this spamming parasite is to increase the value of his domains for re-sale. Black hat SEO spammers contribute absolutely nothing for the Internet community, instead they abuse other people's resources. Much like cockroaches.

his link is also on the list..

bytestar · « **Reply #35 on:** June 18, 2010, 04:04:53 pm »

Is it possible to widen the search field.

please help

kurushi · « **Reply #36 on:** June 19, 2010, 04:41:07 am »

I don't think it's possible and we can't so much move the dsp etc...

marko · « **Reply #37 on:** February 05, 2012, 05:44:33 am »

Matt, anyone....

Is there a way to set a minimum tree width in the skin xml?

InflatableMouse · « **Reply #38 on:** April 21, 2012, 07:42:28 am »

I was going to read the tutorial, but is the wiki down perhaps?

JimH · « **Reply #39 on:** April 21, 2012, 07:56:38 am »

The link was old. I've updated it so it works.

InflatableMouse · « **Reply #40 on:** April 21, 2012, 12:16:43 pm »

Thanks Jim.

How do I change the main menu text color? I've changed the skin border to be white, I want the text to be dark grey without that drop shadow.

I think I tried every text entry in the XML but nothing seems to change in the main menu?

InflatableMouse · « **Reply #41 on:** April 23, 2012, 12:59:47 am »

Anyone? ?

marko · « **Reply #42 on:** April 25, 2012, 12:42:30 pm »

Where do you mean by "Main Menu"?

Edit:
Just seen your screenies, and am guessing you mean the top toolbar where you have File, Edit, View, etc. etc.?

If I'm right, look in the <TOOLBARS> section of the XML, there you can set the colours for the top and bottom bars independently...

<Entry Name="TopBar" Alignment="0" OffsetX="2" OffsetY="0" >
<Colors Text="5e616e" HilightText="8c9cfc" SelectedText="8f92a5" Separator="565656" />
</Entry>

The irritating 3D effect is a pain. When you land on a colour that has sufficient contrast, it tends to go away. If not, then I think you can try to control it using the values in the <FRAME> section, where there are values for "Face3D" "Highlight3D" and "Shadow3D". I tend to make those three all the same colour, as, as you will find, they can have knock on effects throughout the rest of the skin. For example, you may use them to "fix" something, then discover that that fix, has completely ruined the tooltip colours you worked so hard on last week!!

Welcome to the world of MC skinning!!

-marko

InflatableMouse · « **Reply #43 on:** April 25, 2012, 01:41:13 pm »

Thanks Marko, that helped and I got it, you can try it out the download link is in my other post, Metro White.

Next issue I'm running into is the scrollbars. I tried but I can't seem to get their size cut in half. If someone could explain that to me I'd appreciate it.

marko · « **Reply #44 on:** June 12, 2015, 12:42:01 am »

No promises, but I am thinking I might make a start on a new skin having used Knit-Knots almost exclusively for more than three years now.

New skin, new questions...

Scaling...
In the xml, I see that we have Scale values 1 through to 4. What do these do?

Matt · « **Reply #45 on:** June 12, 2015, 08:01:37 am »

Quote from: marko on June 12, 2015, 12:42:01 am

Scaling...
In the xml, I see that we have Scale values 1 through to 4. What do these do?

You can specify an image that's bigger than needed for 100% (which is good because of high DPI and scaling).

So you make the image four times as big and say that the scale is 4.

marko · « **Reply #46 on:** June 14, 2015, 02:26:12 am »

Thanks Matt.

marko · « **Reply #47 on:** June 19, 2015, 01:16:02 am »

I'm having trouble with scaling and textures

. The big image is fine, but when scaled down to 100%, any desired effects virtually disappear. Scale the effect up, and it looks as desired at 100%, but then looks terrible at 400%. I've binned it for now.

Moving on...

We have a "DSP Button" and a "DSP Direct Button". Is the "Direct" one, the one that shows blue on the player bar when you're bitstreaming? Bitstreaming is not something I've ever looked at, know nothing about, and can't test for myself!

-marko

marko · « **Reply #48 on:** July 27, 2015, 11:44:32 am »

Matt,

I need some more scaling help here please...

The main frame border, left, bottom and right, needs to be a fixed five pixels, regardless of size or scaling settings. If I set outer limits for the bottom border like so:
Scale="1" Columns="5,?-Flex,5" Rows="?-Flex,5" Cells="B1-STRETCH"

Then regardless of the size set in MC, the skin retains the 5 pixel border.

However, nothing I have tried stops MC increasing the width of the left and right border images. I have tried scale values of -1, 0 and 1, I have tried ommitting any scale information altogether, but no matter what I try, the skinning engine insists on scaling up the image by adding black pixels to the right hand edge. Screen clip below is at 400%...

Is there a way to tell the skinning engine "don't scale this"?

-marko

marko · « **Reply #49 on:** August 05, 2015, 02:37:35 am »

Turning into a bit of a monologue here, but, after a 'eureka' moment, I think I have this sorted. Problem is, I have no idea as I can't see what I'm doing!

Am I correct in thinking that, if my screenshot above had been on a Retina display, that five pixel border would have all but disappeared?

I've now redone the graphic using a 20 pixel border, along with new 20 pixel left and right borders, and now they look OK. Absolutely huge, but lined up and scaled nicely together. Am I on the right track now?

INTERACT FORUM

Author Topic: Standard View Skinning Tutorial (Read 73843 times)

PeterS

PeterS

craft