Author Topic: Modify Color of Caption Bar  (Read 950 times)

please55

  • Jr. Member
  • **
  • Posts: 65
Hello.

Please I'm trying to modify the color of the caption bar (dark grey in the screenshot; at the top).  I've been playing around in the xml without any success. Is there a specific name to this element? If it helps, the skin I'm modifying is Renoir 0.2  and I have the tabs bar set to show in the caption bar.  Thanks


phred

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 9302
Download the latest MusicBee v3.5 or 3.6 patch from here.
Unzip into your MusicBee directory and overwrite existing files.

----------
The FAQ
The Wiki
Posting screenshots is here
Searching the forum with Google is  here

please55

  • Jr. Member
  • **
  • Posts: 65
Great. Thanks for getting me to take a second look at that.

Here's what I've done so far.
-Loaded up Sample Skin
-Used color picker to get rbg value of the bar I'm interested in
-Looked up that value in the xml file

Found this and this was the only instance of that rbg value in the document:
 <!-- 1x28, or wider to create image or pattern effects - 63,99,140 160,180,198 -->
 <element id="FormBorderTop">
        iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcAQMAAACak0ePAAAABlBMVEU/Y4ygtMYCgFnwAAAADUlE
        QVR4XmNoYCALAAAbuACBDbSnNAAAAABJRU5ErkJggg==
 </element>

Here I am a little stuck and puzzled what to do next. The rbg value is commented out...so how has that element been assigned that value?  How would I integrate this into my current skin?

Thanks

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
The rbg value is commented out...so how has that element been assigned that value?  How would I integrate this into my current skin?
Everything under:  <images id="Default">  are indeed, images.

So for those you will need to create your own image, then encode it as a base64 string, and then add that string to the xml.
A web/forum search on something like 'base64 image encoding' should give you explanations on how to do that.

please55

  • Jr. Member
  • **
  • Posts: 65
Ooh, a little more involved than I imagined. Thanks for pointing me in the right direction.

please55

  • Jr. Member
  • **
  • Posts: 65
The rbg value is commented out...so how has that element been assigned that value?  How would I integrate this into my current skin?
Everything under:  <images id="Default">  are indeed, images.

So for those you will need to create your own image, then encode it as a base64 string, and then add that string to the xml.
A web/forum search on something like 'base64 image encoding' should give you explanations on how to do that.

Thanks. I figured it out!

Basically as a tip to help others who might find this in the future.

Skins are mostly defined in two ways - colors and images.  So for elements that are defined by an image, you can't just assign it an RBG value to change the color.

So once you've identified the element, I took a screenshot, cropped to pixel size as written in the xml and just changed the fill color to what I wanted. Uploaded the image to a base64 app online and that spat out the string i needed.
Last Edit: April 15, 2022, 04:01:31 PM by please55

please55

  • Jr. Member
  • **
  • Posts: 65
I've managed to get most of the colors as I wanted since my first post.  I'm trying to tackle the Header Menu now.



You can right click the header menu to hide it's title but as you can see, the bar remains; the gray outline (1). Is there a way to completely remove this bar?

If not, another option would have been to set the color of the bar to the background but element (2) takes on the same color and I would like to keep them separate. Is this possible?
Last Edit: April 15, 2022, 05:11:15 PM by please55

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
Aren't (1) and (2) different skinning elements?
One "HeaderBar" and the other "Panel.ChildHeader.Default"?

please55

  • Jr. Member
  • **
  • Posts: 65
Aren't (1) and (2) different skinning elements?
One "HeaderBar" and the other "Panel.ChildHeader.Default"?

Yeah you beat me to it. Thanks, they are. For some reason my view was messed up in the Sample Skin (which by the way, Sample Skin vs Chamelon DNA, any difference since they are both by you). I had to add the element to the skin I'm working on though.

That said, although this hides it, this still keeps the vertical space that ideally I would want to remove. So still hoping for a solution where I can remove the HeaderBar.
Last Edit: April 15, 2022, 05:36:34 PM by please55

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
although this hides it, this still keeps the vertical space that ideally I would want to remove
If all menu headers are hidden the bar should become half the vertical height.
In my opinion that's a perfect solution.
It then is quite thin and all the right-click menu options are still available.