Author Topic: XML skin - title bar color  (Read 7416 times)

Spidrax

  • Newbie
  • *
  • Posts: 19
I'm having trouble with an XML skin I'm working on. The title bar is a mysterious color (51,51,51) that isn't anywhere in my XML, and I don't know how to change it.

I checked the Sample Skin and the color is (62,101,139). The only line in the XML that refers to this color is a comment:

Code
  <!-- 62,101,139 -->

Any tips on how to modify this color? Thanks!


hiccup

  • Sr. Member
  • ****
  • Posts: 7880
I checked the Sample Skin and the color is (62,101,139). The only line in the XML that refers to this color is a comment:
Code
  <!-- 62,101,139 -->

The title bar (and the whole main panel border, if present), are image files.
(base64 encoded in the skin file)

The comment in the sample skin code refers to the eight formborder elements right beneath it.
I'll add a comment to the sample skin that explains that better.

Thanks for the feedback!


edit, the skin was updated with a better explanation
Last Edit: April 27, 2020, 02:06:08 PM by hiccup

Spidrax

  • Newbie
  • *
  • Posts: 19
Thanks for the quick response! I found the below information elsewhere in the forum - is it accurate?

FormBorderTop ----------------------------------------- 1x28 [pixels]
FormBorderTopRight , FormBorderTopLeft ---------------- 5x28
FormBorderRight , FormBorderLeft  ----------------------- 4x1
FormBorderBottomRight , FormBorderBottomLeft ---------- 4x4
FormBorderBottom  ------------------------------------- 1x4


Encode to base64 with: http://www.peterdamen.com/base64decode.php

hiccup

  • Sr. Member
  • ****
  • Posts: 7880
Yep.
I think the sizes are good, but read my next post to be sure.


The weblink seems a good one too.

This one will also do the job:
https://www.opinionatedgeek.com/codecs/base64decoder
(do uncheck Automatically generate text rendition)

If you are going to do a lot of base64 encoding, you can also use Windows' internal encoding function by means of a bat file and a send-to shortcut.
(info on that is probably to be found in the skin developers board somewhere)
Last Edit: April 27, 2020, 02:30:34 PM by hiccup

hiccup

  • Sr. Member
  • ****
  • Posts: 7880
Edit,

I now notice a difference in image sizes.
For the ones where you have 4x1 and 1x4, I am using 4x4.

But over the years there have been some changes to how these border images function and are implemented, and it might not make any difference at all these days.

(In the past I think the whole image was used, but now for some only the first pixels on it's border are used, I am not really sure)



Spidrax

  • Newbie
  • *
  • Posts: 19
It turns out the skin I'm modifying used a 5x5 image for all eight border elements. I was able to change the color and everything looks great.

Thanks!
Last Edit: April 27, 2020, 03:14:56 PM by Spidrax

Clarence

  • Full Member
  • ***
  • Posts: 145
For what it's worth, I use a 5x28 pixel image for FormBorderTop and a 5x5 pixel image for all other borders. Worked for me when I used base64 for the image and the same images as .png files in a compiled .xmlc file still work.

hiccup

  • Sr. Member
  • ****
  • Posts: 7880
Encode to base64 with: http://www.peterdamen.com/base64decode.php

Just to be sure, that link points to decoding base64 code to an image.
(that's what the weblink I provided does too)

But you'll want to create an image, and then encode it to base64.

You probably figured this out by now, but I thought to mention it so not to possibly confuse others finding this thread in the future.

hiccup

  • Sr. Member
  • ****
  • Posts: 7880
For what it's worth, I use a 5x28 pixel image for FormBorderTop and a 5x5 pixel image for all other borders

That's a bad idea especially for top-left and top-right when you want to use gradients or defined pictures.

It might work for solid colour borders, but I still wouldn't do it or promote it.

How did you end up with 5x5?
Did you see that being recommended somewhere, or did you do tests with 5x5 against 4x4 yourself?

Clarence

  • Full Member
  • ***
  • Posts: 145
It works. All of my skins have used that method.

As for 5x5, I was using 4x1 as per the 'instructions', then used a slightly bigger one of 4x4 and found no problems. I then decided to use a pixel overlay image to match the overlay I had used on the player graphics and the repeat on that overlay was 5 pixels. It worked fine, ergo it became 5x5 and has remained so even without the use of a pixel overlay.  I have subsequently seen that size being used in some of the more recent source code that has been published.

I've never picked up a problem with the top corners either, even with the use of a defined graphic image, which all of my top border panels are.

I guess it could just be a case of...

But over the years there have been some changes to how these border images function and are implemented, and it might not make any difference at all these days.

hiccup

  • Sr. Member
  • ****
  • Posts: 7880
It works. All of my skins have used that method.

I am guessing you are not looking to get perfectly sharp lines or details in your borders then.

Can you achieve something even close to this by using 5x5 for side and top-left? :


Clarence

  • Full Member
  • ***
  • Posts: 145
Can you achieve something even close to this by using 5x5 for side and top-left?

For  straight colour (which incidentally was what the enquirer was using), there is no problem using 5x5.

If I wanted to put lines and stripes around the border (not that I can ever see the need for me doing that), I would then use whatever gave the best result for that skin. However, I can't see the need to religiously stick to one method when other options clearly work.

Besides which, is it that important? Obtaining the result you're looking to achieve is the goal. How we choose to get there is our own journey.

hiccup

  • Sr. Member
  • ****
  • Posts: 7880
However, I can't see the need to religiously stick to one method when other options clearly work.

Besides which, is it that important? Obtaining the result you're looking to achieve is the goal. How we choose to get there is our own journey.

The reason I am making a point of this, is because it's hard enough for a beginner to learn the details and workings of skinning as it is.
So any information added to threads like these should aim to be correct at least.

People will read your statement that using 5x5 image sizes is just fine, and may think it really doesn't matter much.
Well it does matter a lot if you want to get expected and controllable results.
Especially your suggestion for the top corners using 5x5 instead of 5x28 is very bad.
So in my opinion you are spreading incorrect and confusing information here.

That it doesn't seem to matter much for your own skins, or perhaps some other skins that have a single uniform colour, that's fine.
But others may have different objectives to get their borders right, and your suggestions can result in serious problems for them.


edit:
An example what can happen when you use incorrect image sizes such as 5x5:
(and this is a configuration panel, not the main panel border that you may or may not care about)


 
Last Edit: April 28, 2020, 11:06:57 AM by hiccup

hiccup

  • Sr. Member
  • ****
  • Posts: 7880
To make this thread a bit more complete in giving proper information:

The value that you are using for the element "WindowBorderWidth" will affect how (much of) your border image files will be used in your skin.

Spidrax

  • Newbie
  • *
  • Posts: 19
How did you end up with 5x5?

I noticed that the skin I'm working off of uses the same image for all 8 sections, so I decoded one and it was 5x5. I re-colored it to match my skin, ran it through pingo which cut the size in half, re-incoded it, then pasted the new code into the XML. Presto!

But yeah, it's just a solid color.