Question about themes

[unexp]

If you don't mind me asking, what is the process you used to get themes like Silver working? Where do you get the resources and padding values and things like that from?

[rozniak]

I don't mind questions. 😛

The resources were pulled from the msstyles files (Luna.msstyles for Blue and Silver). For the metrics, a lot of screenshots and measuring in Krita - comparing the GTK theme vs. Windows XP and tweaking until it looked right. Took a lot of time to do initially.

Since most of the themes share the same metrics with Luna Blue, its much less work porting the remaining themes. Silver didn't take too long to do, since it's a straight copy of Blue with graphics/colours changed.

Hope that makes sense?

[unexp]

I don't mind questions. 😛

The resources were pulled from the msstyles files (Luna.msstyles for Blue and Silver). For the metrics, a lot of screenshots and measuring in Krita - comparing the GTK theme vs. Windows XP and tweaking until it looked right. Took a lot of time to do initially.

Since most of the themes share the same metrics with Luna Blue, its much less work porting the remaining themes. Silver didn't take too long to do, since it's a straight copy of Blue with graphics/colours changed.

Hope that makes sense?

I've been trying this with the homestead theme using Resource Hacker through wine, it went cleanly for getting color values and such, but I can't get the bitmaps such as the user tile background to export cleanly... Do you use a different tool for this? And is there some other process that you do with the resources? Because some things such as the start button have separate files for the border and body, whereas in the msstyles they're all in one bitmap.

[rozniak]

I've been trying this with the homestead theme using Resource Hacker through wine, it went cleanly for getting color values and such, but I can't get the bitmaps such as the user tile background to export cleanly... Do you use a different tool for this?

Yeah reshacker chokes on the 32-bit bitmaps in the Windows resources, since it's an undocumented format I guess. You can either use this Resource Editor on Windows ( http://melander.dk/reseditor/ ) or on the ft-uxtheme branch there's a Python script under /tools/theme that you can point to a .msstyles file and it should just dump out all the BMPs and corresponding PNG.

And is there some other process that you do with the resources? Because some things such as the start button have separate files for the border and body, whereas in the msstyles they're all in one bitmap.

Yeah this is due to how CSS works - the border and body are two separate images. In the outputted CSS from the build, the border is used in border-image and the background used in background-image. I just measured the 'border' and sliced up the source images in Krita to create the end result. It was pretty tedious work. 😅

There's also another thing to note - a few parts use gradients too. I think I used a gradient for the taskbar background, but you may also see gradients used when there's also a background image defined. In cases like the Start button, I used both a background image and a gradient as a workaround for annoying behaviour in GTK:

When you set an image to stretch to fill the entire background, the edges of the background get blended with transparency. The end result of this is a bug where for instance if you have lots of text on the Start button (making it wider than usual), there'll be transparent gaps between the border and the background image. The gradient sits underneath the background image, and effectively fills in those gaps so the problem cannot be noticed. It's a hack, but it does work reasonably well. 🤔

Some other useful stuff

I never got around to doing much documentation on themes as you can tell. All the functions used in the themes are defined in this file: https://github.com/rozniak/xfce-winxp-tc/blob/master/themes/build-common/gtk-3.0-base/tc-mixins/define-props.scss

My recommendation would be to copy the Luna (Blue) theme in its entirety to start from. Pretty much all of the metrics are identical between Blue and Homestead, so the vast majority of the work will be to replace the graphics and colours. (eg. for the Start button I think you can just do more or less the same slices I did for the borders... or compare to Silver as well if you're uncertain).

Please let me know if you want me to explain anything else, I'll do my best. 😛

[unexp]

on the ft-uxtheme branch there's a Python script under /tools/theme that you can point to a .msstyles file and it should just dump out all the BMPs and corresponding PNG.

This solves it, thanks :)

My recommendation would be to copy the Luna (Blue) theme in its entirety to start from

That's what I did, now I just have to get the graphics replaced and the gradients apparently

[unexp]

By the way, if I were to finish this theme and open a PR for it, would I have to change this (and other similar things) to my username?

I'm not sure if this implies me actively maintaining the theme, because I'm only doing this out of passion for the project (and because I want more themes to use) and I probably won't be able to actively work on this

[rozniak]

You can leave that there to be honest, it's just for the outputted packages that list a maintainer... which I guess is always me cos I maintain the repo itself where they all come from. 😵

[unexp]

You can leave that there to be honest, it's just for the outputted packages that list a maintainer... which I guess is always me cos I maintain the repo itself where they all come from. 😵

Oh, alright

[unexp]

I think I used a gradient for the taskbar background

Do you have a replicable method for turning the taskbar background image into a gradient?

[rozniak]

Do you have a replicable method for turning the taskbar background image into a gradient?

Honestly I did them via using the ink dropper tool and playing around in an online CSS gradient editor like https://cssgradient.io/ tweaking until it looked right. Might be a better way, that's just how I did them.

[unexp]

Honestly I did them via using the ink dropper tool and playing around in an online CSS gradient editor like https://cssgradient.io/ tweaking until it looked right. Might be a better way, that's just how I did them.

That kinda is what I was doing but it just looked off, I'll take a look at that website

[unexp]

Is there a way to change only the clock's font color? Homestead has a brown-ish color for the clock while the other text elements are generally white, I've looked around for a bit and I couldn't find where to change it if that's an option.

[unexp]

Is there a way to change only the clock's font color? Homestead has a brown-ish color for the clock while the other text elements are generally white, I've looked around for a bit and I couldn't find where to change it if that's an option.

Nevermind, did it by changing the foreground color in $systray_styles

[unexp]

I'll definitely have to look more into this tomorrow but some of the graphics like the combobox and notebook tab icons just don't have the correct sizes compared to Blue and Silver? I'm not sure why though... Even looking at Blue and Silver graphics from the extracted Luna msstyle they have the wrong sized comboboxes and tabs..

[rozniak]

For some elements, the actual drawn size of the controls will not be the same as the underlying graphics. That's why I had to spend quite a lot of time measuring screenshots. 😛

[unexp]

For some elements, the actual drawn size of the controls will not be the same as the underlying graphics. That's why I had to spend quite a lot of time measuring screenshots. 😛

How can I get the correct sizes then?

For example, here's the size of the combobox button element when I extract it from the msstyle, compared to the graphic in the Luna Blue theme's resource folder

(Combobox button in wintc theme)

(BLUE_COMBOBUTTON_BMP.png)

[rozniak]

How can I get the correct sizes then?

The border remains a consistent size - the body you can stretch with nearest-neighbor interpolation to fill the rest of the image.

[unexp]

How can I get the correct sizes then?

The border remains a consistent size - the body you can stretch with nearest-neighbor interpolation to fill the rest of the image.

I probably should've thought of that... Makes sense

[rozniak]

FYI for future reference following #438 - you don't need to worry too much about commit history in your own branch. I can squash the commits down and stuff when I merge into this repo. Just push as normal rather than force push, when it's ready I'll squash or whatever. 👍

[unexp]

FYI for future reference following #438 - you don't need to worry too much about commit history in your own branch. I can squash the commits down and stuff when I merge into this repo. Just push as normal rather than force push, when it's ready I'll squash or whatever. 👍

Didn't know you could do that, I'll keep that in mind