Print Page - Dummy skin or how to change the colour of an element

Support => Developers' Area => Skins => Topic started by: lnminente on April 03, 2012, 08:57:16 PM

Title: Dummy skin or how to change the colour of an element
Post by: lnminente on April 03, 2012, 08:57:16 PM

EDIT 20120903:
Download: http://www.mediafire.com/?d4913061vd4w3va
Most up to date version (collaborative): http://piratepad.net/U1JHY5UGcZ

================================

This is a skin where a i have collected all the elements i have found and gave them an unique different colour.

How to use it:
You have a skin where you would like to change the colour of an element
You change MB to use the dummy skin, and pick the RGB value of that element
Search in the dummy xml file for that value and you will find the name of that element.
Edit that element in your usual skin and select it in MB

To make it easier i removed all the gradients (bg2) and some other elements. If you don't find the color of a letter is because of cleartype, so select better the background or disable cleartype for a moment.

Its based in Midnight 1.16 and the thread new elements. It could be uglier, trust me :D
(http://s7.postimage.org/4a4tywvkb/dummy.jpg)

Some software to pick the colours:
HTML Color picker http://www.allgraphicstools.com/free.htm
YS Instant Color Picker: http://youngsmarts.com/index.htm

This script i wrote can be helpful: RGBHelper (http://getmusicbee.com/forum/index.php?topic=6180.0)

Title: Re: Dummy skin or how to change the colour of an element
Post by: Steven on April 03, 2012, 09:11:32 PM

Quote from: lnminente on April 03, 2012, 08:57:16 PM

Its based in Midnight 1.16 and the thread new elements. It could be uglier, trust me :D

i wouldnt be too sure about that - check out Sarge's WTF skin! :)

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on April 03, 2012, 09:28:34 PM

WOW! Such a curious and funny skin! hahaha :)

Quote from: Sarge on March 25, 2011, 04:13:50 AM

" If I were still alive...I'd use this skin" ....... by Pablo Picasso [/b]

Title: Re: Dummy skin or how to change the colour of an element
Post by: beehive on April 30, 2012, 11:51:20 AM

Just came across this and very thankful. Trying to learn how to skin.

Title: Re: Dummy skin or how to change the colour of an element
Post by: mikebo on May 18, 2012, 12:36:56 AM

Steven do you keep an up-to-date master skin that has all the possible attributes (BG, FG etc.)? I based my skin on on of RotemK's skins and it had a lot of colors that didn't show up anywhere. I don't know if they were deprecated or i'm yet to encounter pink dialog boxes :)

Btw Great idea with the dummy skin Inminente

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on May 18, 2012, 04:19:53 PM

Thanks Mikebo, glad you like it! I PM Steven some time ago asking for the same and he sent me this link: http://musicbee.niblseed.com/Patches/MusicBee%20Default.xml
But there isn't a master skin with all the elements :/

By the way i have found a trick for picking directly picking the color of the text, is consist in searching for an horizontal line (E,T,F,H,Z, etc) and picking the value of a pixel in its center

And in case you missed it and i think you will like it, Steven added the ability of using variables, which makes all the skinning work easier to fine tuning: http://getmusicbee.com/forum/index.php?topic=6203.0

Title: Re: Dummy skin or how to change the colour of an element
Post by: cartman005 on May 18, 2012, 05:10:09 PM

mikebo, I had the same issue when I was creating my skin. Some of the elements that you aren't seeing only show up in skinned/unskinned windows borders. Some are only in the Preferences menu, etc. If you can't find them, post some of the names here and I can try to help.

Title: Re: Dummy skin or how to change the colour of an element
Post by: silasje1 on May 18, 2012, 05:13:11 PM

Quote from: cartman005 on May 18, 2012, 05:10:09 PM

mikebo, I had the same issue when I was creating my skin. Some of the elements that you aren't seeing only show up in skinned/unskinned windows borders. Some are only in the Preferences menu, etc. If you can't find them, post some of the names here and I can try to help.

I will post my WMP 12 skin source too. I think everyone should upload their source too keep a healthy skin community.

Source:
http://www.mediafire.com/?m2e2eqzahtxi1j9

based on Dusk and Dawn with some other new skin options too!

Title: Re: Dummy skin or how to change the colour of an element
Post by: mikebo on May 18, 2012, 06:41:43 PM

Source for my skins https://www.dropbox.com/sh/w8hddqqez7tsao9/SmiCf9W9p4/source.zip (https://www.dropbox.com/sh/w8hddqqez7tsao9/SmiCf9W9p4/source.zip)
The xml is based on one of RotemK's skins. For every color setting that I couldn't find in the actual interface I've set some bright color and also put a comment.

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 03, 2012, 10:16:35 AM

A advanced trick for doing this faster is capturing the screen with MB having the Dummy skin, then store that image in an uncompressed format like BMP. If we pick the colors from that image instead of from Music Bee we will can skip some steps not having to change the skin in MB, just restarting it.

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 03, 2012, 02:14:19 PM

It's not yet going as well as I hoped...

I would like to change the color of the bar containing the player controls in player sidebar.

(http://i.imgur.com/gXiW7l.jpg) (http://i.imgur.com/gXiW7.png)

Dummyskin gives:
id="PlayerSidebar.Control.Default" bg="27,30,27" fg="143,148,149"
But when I change the color values, nothing seems to happen and the color of that bar remains the same.
What am I doing wrong?

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 03, 2012, 02:33:41 PM

Or I should learn to read; "PlayerSidebar.Background" seems to do the trick.
That specific bar has probably some other behaviour concerning color?

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 03, 2012, 03:35:16 PM

For testing purposes i have put it in red, and the element you picked got a darker red than the background.
So yep, it seems like a casualty and that colour is really calculated from the background color.

If any transparency is involved there colorpicking will not be of much help

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 03, 2012, 04:52:06 PM

And another one :-) :

Your dummy file has an element like: <element id="Player.SpectrumMedium" bg="107,119,143" />
In the most recent MusicBee default xml skin I got, that element is not present.
I can copy yours into it, and then it works.

What would be the best and easiest way to get all available elements in my xml?

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 03, 2012, 05:32:01 PM

Having a master skin...

Quote from: lnminente on May 18, 2012, 04:19:53 PM

But there isn't a master skin with all the elements :/

That's something i really would have liked to own. There isn't a master skin and was a hard work collecting all the elements i could and then giving them a different colour.

BTW, feel free to post any update you think should be done to the dummy skin here. In future updates maybe the colour code of 27,30,27 should be changed to another unique one.

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 03, 2012, 05:51:37 PM

Wow, even more respect for your work.

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 03, 2012, 06:35:02 PM

I can't get these stars to change color.

(http://i.imgur.com/ufs1Tl.jpg) (http://i.imgur.com/ufs1T.png)

Following the color in your sheet it should be:
<element id="Player.StarRating.Default" fg="196,197,197"/>
but changing the value doesn't change the color.
(also I notice it is under the header \\ --- NOW PLAYING POPUP), but this printscreen is not from a popup?

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 03, 2012, 08:40:09 PM

Verified here too. So i did this:
Starting from the beginning of the file i search for .StarRating
Then i found a element ending with .StarRating.Hightlight which is not present for elements starting with Player.
I created the element Player.StarRating.Highlight and gave it a value of a very different color from the others, for example 255,0,0
So it seemed the 196,197,197 started to work again when changing it

This is what i added <element id="Player.StarRating.Highlight" fg="255,0,0"/>

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 03, 2012, 09:28:38 PM

My eyes are square, gonna call it quits for today.

If interested, here is the current result:
http://www.mediafire.com/?58999o1u3y3e1

My two main challenges for the moment:
- can't get the star rating fixed (will try again later this week)
- still a slight difference in color in the side panel player D(ark) L(ight)

(http://i.imgur.com/eLmr4l.jpg) (http://i.imgur.com/eLmr4.jpg)

Thnx again for your great work and help!

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 04, 2012, 01:35:28 AM

That's nice, you have done a lot in only one day!! :o

I would use variables for making easier in a future changing some colours http://getmusicbee.com/forum/index.php?topic=6203.new#new

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 04, 2012, 08:18:49 AM

Thnx, your tools and tips made it possible.
The link to the new SkinCreator is dead, it looks like Steven removed it from nblseed.

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 04, 2012, 12:59:02 PM

Strange, that solution works in your dummy xml, but not in mine.
Probably the rating colors are overruled by some other setting in the sheet. It's beyond me.

Anyhow, I am already quite happy with the result:

http://www.mediafire.com/?58999o1u3y3e1

Quote from: lnminente on July 03, 2012, 08:40:09 PM

Verified here too. So i did this:
Starting from the beginning of the file i search for .StarRating
Then i found a element ending with .StarRating.Hightlight which is not present for elements starting with Player.
I created the element Player.StarRating.Highlight and gave it a value of a very different color from the others, for example 255,0,0
So it seemed the 196,197,197 started to work again when changing it

This is what i added <element id="Player.StarRating.Highlight" fg="255,0,0"/>

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 05, 2012, 10:08:24 PM

I solved it, I know how, but I don't know why?

These three lines were somewhere in the beginning of the xml sheet (lines 118,119,120):

<element id="Player.StarRating.Default" fg="255,0,0" />
<element id="Player.StarRating.Lowlight" fg="0,255,0" />
<element id="Player.StarRating.Highlight" fg="0,0,255"/>

Changing the color values there have no effect at all.

Then I moved them to lines (200,201,202), and then it works?

I'm confused, so the order is important, but how?

Example skins: ('test fail' and 'test pass')
http://www.mediafire.com/?3vqcql26qwcdd
(use main player non-flat layout)

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 05, 2012, 10:35:07 PM

mmm I see, it works the same here.

BTW I have discovered something strange in the midnight skin (so in dummy too):
-The elements Player.StarRating.Default and Player.StarRating.Lowlight are defined two times, one for "Players" and another for "Now playing popup". Don't know if its a bug or if it has one reason for being there :/

Title: Re: Dummy skin or how to change the colour of an element
Post by: OrB on July 06, 2012, 04:42:29 AM

I see. As far as i remember there was a problem to make it work. (sorting/moving some lines up/down as jistme noticed)
so i dont think its an error to see the first occurrence as a kind of initialization. (fg="0,0,0")
But maybe you can find out a better way :)

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 06, 2012, 11:15:28 AM

Updated with the following changes (link in first post):
Changed bg in PlayerSidebar.Control.Default to 255,30,27"
Player.StarRating.Default and Player.StarRating.Lowlight are present only one time now
Removed alpha channels
Added the latest new elements

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 06, 2012, 12:37:18 PM

Great!

two remarks:
- lines 83 & 85 seem duplicate
- these two might be handy:
<element id="MiniPlayer.StarRating.Default" bg="125,125,125" fg="175,175,175"/>
<element id="MiniPlayer.StarRating.Lowlight" fg="50,50,50"/>

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 06, 2012, 04:43:17 PM

Quote from: jistme on July 06, 2012, 12:37:18 PM

- these two might be handy:
<element id="MiniPlayer.StarRating.Default" bg="125,125,125" fg="175,175,175"/>
<element id="MiniPlayer.StarRating.Lowlight" fg="50,50,50"/>

They are actually present in lines 151 and 152 having these values:

Code

<!-- 99--> <element id="MiniPlayer.StarRating.Default" bg="141,136,126" fg="223,228,229"/>
<!-- 100--> <element id="MiniPlayer.StarRating.Lowlight" fg="51,57,56"/>

I'm going to take a look for keeping only one of the lines 83 and 85, thanks

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 06, 2012, 04:59:41 PM

I have fixed it too and created a collaborative online document with the colours part of the dummy skin. Anyone should be able to editing it for any improvement. It's here: http://piratepad.net/U1JHY5UGcZ

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 07, 2012, 10:50:40 AM

Sorry, missed that, xml brain overload ;-)

Quote from: lnminente on July 06, 2012, 04:43:17 PM

Quote from: jistme on July 06, 2012, 12:37:18 PM
- these two might be handy:
<element id="MiniPlayer.StarRating.Default" bg="125,125,125" fg="175,175,175"/>
<element id="MiniPlayer.StarRating.Lowlight" fg="50,50,50"/>
They are actually present in lines 151 and 152 having these values:
Code
 <element id="MiniPlayer.StarRating.Default" bg="141,136,126" fg="223,228,229"/>
 <element id="MiniPlayer.StarRating.Lowlight" fg="51,57,56"/>

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 08, 2012, 04:53:42 PM

Jistme asked:

Quote from: jistme on July 08, 2012, 04:34:17 PM

Hi Lmnimente,

Any idea to what element this blue gradient background in your dummy skin refers?

(http://i.imgur.com/EAHS6l.jpg) (http://i.imgur.com/EAHS6.png)

Yes, its from the Midnight skin, as i changed every single colour code, it has to be a bitmap in base64 format

Bitmap based skins: http://getmusicbee.com/forum/index.php?topic=3834.msg37493#msg37493

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 08, 2012, 06:18:59 PM

I'm confused (again ;-)

When I sift through your dummy xml I see no entry which resembles a description like 'caption bar', or 'panel border' or anything like that. Only entries like <element id="MusicLibraryInTab">, <element id="LastFmLoveSelected">, <element id="CheckTick"> etc.
Don't take too much time explaining, since I think this is where I draw the line in my skinning endevours, but I am still curious...

And if I don't use a bitmap for this, is there no 'normal' element entry to just change the color of this border?

Quote from: lnminente on July 08, 2012, 04:53:42 PM

Jistme asked:
Quote from: jistme on July 08, 2012, 04:34:17 PM
Hi Lmnimente,

Any idea to what element this blue gradient background in your dummy skin refers?

Yes, its from the Midnight skin, as i changed every single colour code, it has to be a bitmap in base64 format

Bitmap based skins: http://getmusicbee.com/forum/index.php?topic=3834.msg37493#msg37493

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 08, 2012, 07:47:24 PM

The following elements whose name start with "Form" are the ones involved.
Paste them in a Base64 decoder to see them. Here is one http://www.opinionatedgeek.com/DotNet/Tools/Base64Decode/default.aspx

Don't know, never saw them and use to disable skinning borders for consistency with the other windows. In MetroColours and my Dusk mod i just copied the form elements included in dusk from Mikebo. If you find something please add it to the collaborative dummy in pirate pad.

Title: Re: Dummy skin or how to change the colour of an element
Post by: Steven on July 08, 2012, 07:50:04 PM

if you guys dont object i will move this to the developers section?

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 08, 2012, 09:24:36 PM

How you prefer Steven, suggest moving skinning guides too as are very related

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 11, 2012, 07:09:30 PM

Hi Ilminmetne,

I think I finally nailed (most of) the formborder and buttons stuff.
Being busy with this anyway, I thought to create some entries which you might find usefull to add to your dummyskin:

http://www.mediafire.com/?ygqhhoaewxto87x

Please have a look at it, and check, and doublecheck. (triplecheck?)
I tried to use unique colors and some logics, but it's quit easy to make errors with this stuff. (made a few before finishing ;-)

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 11, 2012, 07:35:16 PM

Still having trouble with my nick? Call me imminent if its easier http://www.youtube.com/watch?v=v1c2OfAzDTI :D

That would be very useful for a master skin, but here after your question for the colour code i'm thinking in removing all the base64 images that MB would let me without crashing for avoiding confusion and focusing in the colour values. Many thanks anyway, maybe someone wants to start a master skin from here

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 11, 2012, 07:41:52 PM

Bummer, took me quite some time :(

But your decision of course Ting Ting.
Maybe consider keeping them in your sheet, but with those handy  thingies around them?
So those who dare to thread might take advantage?

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on July 12, 2012, 10:04:04 AM

Lnminente!

In my first effort, I ommited indicating the corresponding rgb values with the element description. (so it was quite worthless ;-)
Here are two new efforts.

Buttons and borders only:
http://www.mediafire.com/?ygqhhoaewxto87x

Your skin with my additions integrated:
http://www.mediafire.com/?24645jrdr42jmi3

Quote from: jistme on July 11, 2012, 07:09:30 PM

I thought to create some entries which you might find usefull to add to your dummyskin, bla bla...

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on July 12, 2012, 02:00:16 PM

Oook, now i have understand what you have done, english is not my mother lenguage and the skins you posted are not working. Had to decode an image to notice you gave then an unique background color which is the one you lastly added. I like it a lot! I have removed all the images it had before and added the ones from you.

If you or anyone plan adding more images just do it directly in the collaborative link at the first post and keep us updated writing here. Many thanks Jistme!

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on September 03, 2012, 12:40:16 PM

Updated with the latest new elements, some fixes, and added Orb as the author of Midnight skin
(Link at first post)

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on September 13, 2012, 11:37:55 PM

Hi lnminente, in your Dummy skin you have <element id="UseNativeButtonTheme">true</element>

'true' causes MB to use Windows default buttons, so your Dummy skin doesn't work for those buttons now.
So better change it to 'false'.

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on September 14, 2012, 10:23:37 AM

Thanks, i don't have experience with these settings, i'm thinking in removing all the other parameters and leave it like this:

Code

<settings>
  <element id="UseNativeButtonTheme">false</element>
</settings>

Anyone has any suggestion to add something here?

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on September 14, 2012, 08:14:50 PM

I hope you are not considering removing those completely.
Besides appreciating 'Dummy skin' for finding the right color elements, it would be great if it also had all elements (color and image) known to mankind in it.
Especially since currently there is no other source for a complete overview of those.

They wouldn't have to be enabled, but at least mentioning them would be great.

Without going into details now, there are elements for widening borders and seperation lines between panels. Might be handy to use and activate those. I have no specific examples now, but I have had some troubles finding some of those lines or borders through Dummy skin.

And you should definitely rename your skin into Smartskin!

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on September 14, 2012, 10:01:57 PM

No,i DO want to maintain all the colour elements and the images you sent me. I was speaking only about reducing the setting elements to the minimum for seeing ALL the images included. But now thinking it more, some margins could be added for an easier picking. Don't have the time for investigating that right now. But if someone has fresh these settings please post any suggestion here :)

Title: Re: Dummy skin or how to change the colour of an element
Post by: jistme on September 16, 2012, 01:14:40 PM

I saw that one line I couldn't find through Dummy skin was because a certain element missed the 'bdr=' element.
I made some entries in Pirate pad. Instead of rgb values for new ones I used "x,x,x"

Concerning other settings, I think as long as you make sure the values are not '0', but at least '1' it should be o.k.

Title: Re: Dummy skin or how to change the colour of an element
Post by: EnduringGuerila on December 21, 2012, 08:34:27 AM

here is my thread before i knew about this thread

http://getmusicbee.com/forum/index.php?topic=8294.0

Please help me find this.

Title: Re: Dummy skin or how to change the colour of an element
Post by: redwing on September 04, 2013, 04:15:36 PM

There are several missing values, written as x,x,x, in the code. Would be great if it's updated.

Title: Re: Dummy skin or how to change the colour of an element
Post by: lnminente on September 04, 2013, 05:31:02 PM

Don't have the time now for doing it working well. When i created this skin i followed a pattern, now the easiest way for updating it is just adding any RGB value wich is not used and can be appreciable from other near objects, if the people which added the x,x,x values read this, please add any value which fits well. TIA!

Title: Re: Dummy skin or how to change the colour of an element
Post by: Bee-liever on May 20, 2014, 11:40:55 PM

collaborative version updated

Title: Re: Dummy skin or how to change the colour of an element
Post by: Bee-liever on May 24, 2014, 12:18:19 AM

oops. missed a new element
re-updated :)

Title: Re: Dummy skin or how to change the colour of an element
Post by: psychoadept on April 09, 2016, 12:02:59 AM

Is anybody maintaining this anymore?