INTERACT FORUM
Windows => Third Party Plug-ins, Programs, and Skins => Topic started by: 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
-
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.
-
this is a nice tutorial. great work. inspired me to realy finish my skin. tried to submit it. not really clear how that works.
-
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.
-
That looks fun I wanna go! :)
-
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.
-
null
-
Is there any possability of changing the graphics for
Audio, Images, and Video? I can't find them anywhere.
Cheers
Chris.
-
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:
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.
-
Cheers Alex
-
Hmm....
I can't get this to work:
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?.
-
Bump
Can anyone help? I would like try a custom small icons file, but as I explained, I don't understand what Matt meant.
-
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.
-
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.
-
Is there a posibility of MC supporting PNG transparency on things like the
mainframe graphics or is that not possible?
Cheers,
Chris.
-
[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]
/me wanders back to his colour palette, muttering profusely under his breath...
-
marko, you did add GridLineBack= to the colors of the list? it sets the alternating grid colour.
:)
gab
-
[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]
/me 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.
-
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!! ;) :D
(no offence to any sufferers intended)
I will meddle some more this evening.
-marko.
-
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
-
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.
-
Actually there's no change to the XML.
It's all about that 5th state.
And it appears it's just black.
-
Thanks for that Mr Chriz, my skin is now completed.
-
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.
-
One more try, with pictures:
First off, the 'type here' cursor in the search field is all but invisible here:
(http://www.theganghut.co.uk/pics/ia/13/selectedtext1.jpg)
Is it possible to control its colour?
Secondly, we are able to control the appearance of selected text in the search field:
(http://www.theganghut.co.uk/pics/ia/13/selectedtext2.jpg)
but as far as I can tell, we do not have the same control over text in edit controls, such as the [lyrics] field:
(http://www.theganghut.co.uk/pics/ia/13/selectedtext3.jpg)
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?
-
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
-
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?
-
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
-
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
-
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
under the main frame you find an entry called splitter...
:)
gab
-
its at the end of that thread: http://yabb.jriver.com/interact/index.php?topic=50244.0
:)
gab
Thank You
-
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
-
Does one use an HTML-like WYSIWYG editor to create/alter skins, or just a text editor like Notepad++?
-
Notepad++ forevaaaaa...! :)
-
I didn't see an answer to the question. How do you change the splitter arrows' color?
its five posts above you. ;)
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
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..
-
Is it possible to widen the search field.
please help :)
-
I don't think it's possible and we can't so much move the dsp etc...
-
Matt, anyone....
Is there a way to set a minimum tree width in the skin xml?
-
I was going to read the tutorial, but is the wiki down perhaps?
-
The link was old. I've updated it so it works.
-
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?
-
Anyone? ?
-
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!! :D
-marko
-
Thanks Marko, that helped and I got it, you can try it out the download link is in my other post, Metro White (https://yabb.jriver.com/interact/index.php?topic=71652.0).
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.
-
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?
-
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.
-
Thanks Matt.
-
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
-
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%...
(http://www.mpw.scot/pics/ia/20/Snap-096.jpg)
Is there a way to tell the skinning engine "don't scale this"?
-marko
-
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?
-
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.
Just wanted to add that the Scale parameter is actually more flexible than it first appears. You can target each scaling percentage individually if you need to. For instance, one of the images I used in my skin didn't look quite right at 150%, but was OK on most of the others. The solution was to use <Entry Scale="1.5" ...> and create a separate image for just this scaling factor.
-
I think I need this for the frame border, but cannot get it to work. Could you show me how you are adding specific scaling images in the xml?
The issue I am having is, that with a scale of four, and 20 pixel frame border images, MC is leaving a 15 pixel internal border, filled with the "Face3D" colour (magenta for emphasis below) when used at 100%. The border gets smaller as the scale goes up, until disappearing at 400%, displaying as intended.
(http://www.mpw.scot/pics/ia/21/Snap-028.jpg)
-
I think I need this for the frame border, but cannot get it to work. Could you show me how you are adding specific scaling images in the xml?
The issue I am having is, that with a scale of four, and 20 pixel frame border images, MC is leaving a 15 pixel internal border, filled with the "Face3D" colour (magenta for emphasis below) when used at 100%. The border gets smaller as the scale goes up, until disappearing at 400%, displaying as intended.
(http://www.mpw.scot/pics/ia/21/Snap-028.jpg)
I'll try, although I don't know if it'll solve that issue or not.
Here's a snipped portion of my skin's main.xml:
<EntryGroup Name="VolumeSliderFront">
<Entry Bitmap="PlayerBar_SliderVolFront.png" />
<Entry Scale="1.5" Bitmap="PlayerBar_SliderVolFront-1,5x.png" />
<Entry Scale="2" Bitmap="PlayerBar_SliderVolFront-2x.png" />
</EntryGroup>
Here you can see that I'm using Scale="1.5" and Scale="2" (the former in this case meaning "use this image for 150% for everything above 100%, up to 150%" and the latter "use this image for anything above that"), and each of those entries have their own unique image file. If you needed a unique image or setting such as margins etc. for, let's say 175% then you'd add an entry with Scale="1.75" (in my example, this would then be used for 175%-199%).
Hope this helps you out :)
Edit: Short summary, for a skin element using Scale 1, 1.5, 1.75 & 2:
Scale="1" : 0 - 100%
Scale="1.5" : 101 - 150%
Scale="1.75" : 151- 175%
Scale="2" : 176 - 400%
-
Dirhael,
"<EntryGroup >" completely passed me by. This fixes my issue.
I would need one for every scaling level for it to be perfect, but with 1x, 2x, 3x and 4x, the 'inbetweens' are barely noticeable, and I think I can live with that.
I had all but given up on fixing this one, thank you very much for replying.
-marko
-
Dirhael,
"<EntryGroup >" completely passed me by. This fixes my issue.
I would need one for every scaling level for it to be perfect, but with 1x, 2x, 3x and 4x, the 'inbetweens' are barely noticeable, and I think I can live with that.
I had all but given up on fixing this one, thank you very much for replying.
-marko
Good to hear you solved it :) It can certainly be difficult to figure out just what causes a particular issue with the skinning engine, as there are some bugs and quite a few inconsistencies in what works where. In a "perfect world", the skinning engine would use CSS/SASS for styling. It would have some drawback as well, but it would have made things easier I think...
-
Skinning The 'experimental' tag window
The 'how do you do that?' question has been asked in various threads, so I figured an answer here might be appropriate. Bear in mind that things might change in the future, but for now, it's quite simple to do, mostly because we don't have much to customise.
To apply skinning to the experimental tag window you just need three images and some xml for the skin file.
Images
1. Group image (with expanded/collapsed image)
(http://www.mpw.scot/pics/ia/skins/bb2/TagWindow_Group.png)
2. Field label image
(http://www.mpw.scot/pics/ia/skins/bb2/TagWindow_FieldLabel.png)
3. Field image
(http://www.mpw.scot/pics/ia/skins/bb2/TagWindow_Field.png)
required xml
The skinning engine needs to know what to do with your images, so you need to add a "TAGWINDOW" block to the skin's 'main.xml' file. In Black and Blue Too, it looks like so:
<TAGWINDOW>
<Entry Name="Group" Bitmap="TagWindow_Group.png" NumberImages="2" Columns="20,?-Flex,10" Rows="1,?-Flex,1" Cells="B1-HTILE,B2-HTile,B3-HTILE" />
<Entry Name="Field" Bitmap="TagWindow_Field.png" Scale="4" NumberImages="2" Rows="4,?-Flex,4" />
<Entry Name="FieldLabel" Bitmap="TagWindow_FieldLabel.png" Scale="4" NumberImages="1" Columns="?-Flex" Rows="?-Flex" Cells="A1-Tile" />
</TAGWINDOW>
The text colour is derived from the value entered in the <FRAME> block, but be careful here as that value is used in other areas too, such as tooltip borders and text, so a balance needs to be found. Hopefully we can get exclusive values for the tag window in the near future.
Put all that together, and here's how it looks in action (pardon the pun ;)):
(http://www.mpw.scot/pics/ia/skins/bb2/Snap-071.jpg)
The example is called Black and Blue Too, which can be found here (http://yabb.jriver.com/interact/index.php?topic=98476.0) if you would like to try it.
The experimental tag window has a blue-ish mouse over shade as you move the mouse between fields in the tag window. This colour is currently hard coded into MC and we have no control over it. This may change though. Luckily for me, it works quite well in this skin.
So there you have it, quick and simple experimental tag windoow skinning.
Enjoy.
-marko
-
Marko this skin is really beautiffull a clean evolution of you're old blue one!
-
Trust me, the picture shows the experimental tag window, skinned. Try it. Save the three images in your skin folder, copy/paste the code into your main.xml file, save it, reload your skin, open new tag window. It won't look right in your skin, especially if you don't have scaling enabled, but should be enough to get you started.
-
Yep my bad it's really the new one :p
so thank you for the tutorial!
Just one thing on you're blue skin, the playerbar progreession is not in the same blue than button and it 'll better with the same colour or if you really want another color you can try it grey or black.
-
:)
Thank you. It was the same as the rest of the blue, but I felt that it got kind of lost amongst all the other blue lines around it, so changed the shade... I might try a different colour, we'll see.
Remember to watch out for that frame text colour when you skin yours, it's more restrictive than you might think at first...
-
Yep but i have just retouched one skin with the frame text color because others are fine in black cause i use different backgrounds for the tag window...
I have tried to add some lines about coulours of the texts in the tag window but it doesn't work :(
Anyway since the baground can be colored it's not really a big issue...
-
Marko, thanks for the above tutorial, it helped out greatly when updating the other bundled skins to support the experimental/new tag window.
The text colour is derived from the value entered in the <FRAME> block, but be careful here as that value is used in other areas too, such as tooltip borders and text, so a balance needs to be found.
Yeah, this is a total PITA. It has been very hard to find an acceptable balance for the two remaining skins without experimental/new tag window support (Blue Steel and Thunderstorm). I've got the assets and everything else ready to go, the only hangup is the font.
Hopefully we can get exclusive values for the tag window in the near future.
This, please. X100 on this one. It's probably going to be required to update those two remaining skins, sadly (since changing the <FRAME> block would likely not look good and would require changing good bits of the skin).
-
Coming next build:
Changed: The new tag window supports using a custom text color (add it to <TAGWINDOW> <Colors Text="FF00FF" />).
-
Coming next build:
Changed: The new tag window supports using a custom text color (add it to <TAGWINDOW> <Colors Text="FF00FF" />).
Groovy, thanks Matt! I'll be able to finish the last two skins. :D
-
Matt, can you add HilightText support to <LIST>, e.g. <Colors HilightText="FFFFFF">? I need this to complete a custom skin I've been working on (otherwise it looks wrong as it defaults to using Text when hovering my mouse over things in the list - I've done it for Options and the Tree, but can't with List or the new tag window).
-
Coming next build:
Changed: The new tag window supports using a custom text color (add it to <TAGWINDOW> <Colors Text="FF00FF" />).
Also available now are: <Colors Text="FF00FF" Group="FF00FF" Selection="FF0000" />
Although, those particular colours are not really recommended ;)
-
How do you put an image in the background of the tree view and list/thumbnail view? I only see that colors can be used but there must be a way.
Like how I did here for MediaMonkey
https://i.imgur.com/Qgl7s.jpg
-
You can use an image for the tree, but not the file list.
To see how it's done, look at the main.xml file for a skin that uses a tree image, such as Black and Blue Too (https://yabb.jriver.com/interact/index.php?topic=98476.0)
-marko
-
Since this is the official skinning tutorial thread...
Could we have an update on the Wiki, please? 😅
It's still referencing things around v19/2015.
Especially, an update for the "SDK" (?) page (https://wiki.jriver.com/index.php/Standard_View_Skinning_SDK) would be nice. There are new elements (entry), new attributes, and probably other new concepts.
A concrete question: I haven't managed to find the entry for the waveform bar 🤔
Beyond setting colors in PLAYERBAR > Entry > Colors WaveformBarA and WaveformBarB, is there a way we can reposition the waveform bar with an offset, resize it, etc?
Cheers!
-
The waveform bar is simply an alternative display option that occupies the same location as the progress bar and there is no way to reposition or resize it, or the progress bar.
-
The waveform bar is simply an alternative display option that occupies the same location as the progress bar
Oh, duh! Of course
I'm sorry, I completely blanked there!
There is no way to reposition or resize it
Aw :(
I guess I'll try a feature request then (or adding my +1 to one, if it already exists)
Thank you!