You're on the right track, but use the same salmon color and hue for both the active and inactive tab graphics. At most, use slightly different shading to distinguish them. The individual tab colors will be applied later by the colorization system.

There is also a theme setting called `TabOverlap` that allows tabs like these to partially overlap. `TabOverlap=<x>` specifies the number of pixels by which adjacent tabs overlap.

Each inactive tab is painted starting at:


TabPosData(n).x - MyShelfTheme.TabOverlap \ 2


with a width of:


TabPosData(n).width + MyShelfTheme.TabOverlap


Inactive tabs are painted from left to right, so the overlapping portion of the tab on the right is drawn over the tab on its left. This can work very well with slanted, curved or similarly shaped tabs.

I will do my best. I hope it is good enough. Please keep in mind that if I do not get the sizes perfect on the tabs it is very easy to readjust them. So I do not believe that will stop it from working and you are obviously content with me making them to identical size of the workshelf in dark tech so that simplifies it.

When done which will be a little while, because I'd like to create a blank theme to test one, I'll zip them up and do a WeTransfer to your JcRabiit email.

@JORGE

I did some scaling testing - you may not want some of these but I'll put them in so you can be as choosy as you wish. They stretch to 800% of their size before they become too noticeable with the exception of the glass one unfortunately. Drafts... around one third through. These are mainly extras to go with the ultra plain ones which you can test for yourself and decide for yourself. A few of the buttons I am not content with yet....normal stuff. The tabs you liked are in the first image up further in prior image.. these are extras

First of all, Andrew, I genuinely appreciate the amount of time, enthusiasm and creative effort you are putting into this. I can see that you are exploring lots of possibilities and trying to give me plenty of choices. Before you go much further, though, I think I need to narrow the target a little so you do not spend a great deal of time creating designs that I am unlikely to use.

Please pause work on the “extras” for now. The designs in this latest image are not quite the direction I had in mind. They are generally too glossy, textured or folder-like, and none of them demonstrates the overlapping tabs I specifically suggested.

What I am looking for is a small number of deliberately simple Shelf themes designed specifically for user colorization. Rather than creating a large assortment before we know how well the basic concept works in practice, please concentrate on the tab design from the earlier image that I said I liked and make one complete working test theme first:

* A simple rectangular body, either square or with rounded corners.
* A subtle salmon gradient, without glass reflections, marble/leather textures or other elaborate decoration.
* Active and inactive tabs using the same salmon hue and basic shape, distinguished only by shading if necessary.
* Slanted or curved tabs that visibly overlap one another using `TabOverlap`.
* No separate button-like areas around individual icons.

Once I have loaded and tested that first theme in WorkShelf, we can establish what works and use it as the basis for the other variations. Please do not spend time producing the remaining extras until then. Once we get the first one right, creating the others should be much more straightforward.

Ok that is sensible. I get the tabs section that makes sense when I get it right with TabPosData(n).x etc...

Is there another similar setting entry where I can choose to have the workshelf sit either over the tab or behind it? The tiling and vertical stuff is straight ahead but I cannot seem to find the right line? - MyShelfTheme.TabOverlap \ 2 - for the shelf variant?
In other words, to get the same appearance as the link and original images, the workshelf pretty much has to function like an overlay like below, it must be an overlay of some sort.

Like a Bring.to.front / send.to.back line?


Thanks and I'll tidy up the original one below:)

Yes, but `TabOverlap` controls only the **horizontal** overlap between adjacent tabs. It has nothing to do with the overlap between the tab strip and the Shelf body.

It allows tabs to overlap in the general manner shown here:



There is one important distinction, however. In the OPENSTEP screenshot, the right edge of one tab appears over the left edge of the following tab. OPENSTEP is an exception because it uses the legacy hand-drawn tab path.

With PNG bitmap tabs, inactive tabs are currently drawn from left to right. This produces the opposite stacking order: the left edge of each tab is drawn over the right edge of the preceding tab. I could add a theme setting to reverse the inactive-tab drawing order if necessary, but it is not a big issue for this first test.

For vertical positioning in the normal Theme Builder format, the relevant setting is `TabsPartOfBody`. It causes the Shelf body to extend into the tab area, after which the tabs are drawn over it (or, if you want to think about it that way, the tabs are drawn OVER the shelf body).

There is no setting to choose whether the body is drawn in front of or behind the tabs. The drawing order is fixed: the Shelf body is painted first, then the inactive tabs, and finally the active tab. Therefore, whenever the tabs and body overlap, the tabs always appear on top of the body.

That is fine for this first test theme - let the tabs sit over or connect to the top of the body.

I'll re-read everything at least three times in each post and not all at once, with time gaps so it sinks in. I know it is easy for you, and once I get used to it, then it may be for me. I am just getting my head around NOT doing things how I might usually, that's all.

OK I copied and pasted everything in posts you made into a text file and have looked and tried a few things. It seems that the setting you mention is unavailable might be a consideration to change? Potentially, it does visually open up a whole new area of interactive user visuals.

Sometimes it is harder not to think when doing things that were previously routine. Unlearning some things is not as easy as some people think.

OK Here's the first - I used your Dark Tech theme as a base because it's so clean.
Here are two which I reckon should be enough to give you an idea. If so I'll email them to you. One thing I found interesting, which is due to how few tabs I have, is that I needed to make the overlap much larger than I initially thought would be enough.

If yes, I think I only need email the two graphics and two wsw files?
Let me know - I still reckon you need a "bring to front" entry on the workshelf

@JORGE

And one with colored tabs. Yeah it works. I noticed one thing being that the color change is obviously Global. I know you may not want to, but a checkbox for 'per theme' might be useful as an end user may not want the same tab colors for every theme whenever they choose to change themes. Just a suggestion.

P.S. - If say you do not want to which I totally understand, then perhaps? - a "Save TAB Color Scheme /Workshelf Color Scheme" should be way easier and probably more efficient. Then the user can save as many as they want and load if they want different colors - or 'default' if they are happy with what comes with the theme. If there is a "Save as (name)" - they can call it whatever they like to enable remembering to recall what they saved.

The fish was funny.

Before going any further, however, I need to clarify several points because your reference to the color change being “global” suggests that we may be talking about two different colorization systems.

WorkShelf now has two completely separate types of colorization:

1. **Theme colorization**, available from the Themes tab in Preferences and from the Themes tab of a Shelf Properties dialog. This colorizes the overall visual theme.

2. **Tab colorization**, available from Shelf Properties -> Advanced -> Colorize Tabs. This is a separate mechanism belonging to the selected Shelf. Each tab in that Shelf can be assigned its own individual color. The active tab and Shelf body can optionally follow those colors as well.

The themes you are creating are intended to provide suitable source artwork for the second mechanism. You should not manually create differently colored tab bitmaps or bake individual tab colors into the theme. WorkShelf uses the same inactive-tab bitmap for every inactive tab and colorizes each instance dynamically at runtime.

When you say that the color change is “global,” what exactly do you mean?

If you mean that the colors assigned to a Shelf’s individual tabs remain assigned when you change the visual theme, that is intentional. Those colors belong to the Shelf and its tabs, not to the theme. A user might assign blue to Work, green to Internet and red to Games, for example, and those category colors should not disappear simply because the user changes the surrounding artwork.

If you mean that changing the tab colors of one Shelf also changed the colors assigned to a different Shelf, please describe the exact steps because that would be different and is not the intended behavior.

I do not intend to add separate tab-color palettes for every installed theme. That would require storing and managing another complete set of colors for each theme and would confuse the distinction between user-assigned tab categories and visual theme artwork.

Regarding your comment that WorkShelf needs a “bring to front” entry, please clarify what you mean.

If you mean a theme setting that paints the Shelf body in front of the tabs, that is the same drawing-order option we already discussed. It does not currently exist and is not required for this test theme.

`TabsPartOfBody` controls whether the tab area and Shelf body overlap. The drawing order itself is fixed: the Shelf body is painted first, followed by the inactive tabs, and finally the active tab. Therefore, when they overlap, the tabs appear on top of the Shelf body. Please design this theme around that existing rendering order. For this first theme, simply let the tabs overlap or connect to the top of the body.

If by “bring to front” you mean bringing the entire WorkShelf window in front of other application windows, that is a completely different subject, so please clarify.

The colored screenshot confirms that individual tab colorization is operating, but it also shows two problems with the artwork itself.

First, the source artwork is far too pale and desaturated. As a result, Hue Shift produces very weak pastel colors. Please use something much closer to `#FA8072` as the principal salmon color, with lighter and darker variations of that same hue for the highlights, gradient and shading.

Second, the edges of the tabs and Shelf body are extremely fuzzy. The body outline, top edge, tab shoulders and slanted sides all appear heavily feathered or blurred. Adjacent tabs consequently dissolve into one another instead of showing a clearly defined overlap.

Please use crisp PNG boundaries with no outer glow or broad feathering. There should be no more than the normal one-pixel antialiasing along the edges. Any gradient or shading should remain inside the shapes rather than blurring across their boundaries. The source images should also be created at the intended vertical size rather than depending on substantial vertical enlargement.

The overlapping edge of one tab must be clearly visible over the adjacent tab. At present, the combination of pale colors and blurred edges makes the whole Shelf look out of focus and makes the `TabOverlap` effect difficult to evaluate.

Also, when taking screenshots, please use a wallpaper that clearly contrasts with the Shelf. The current wallpaper has almost exactly the same hue and brightness as the theme, causing the Shelf body, transparency, outlines and tab edges to blend into the background. A neutral dark gray, blue-gray or another contrasting background would make the artwork and any edge problems much easier to evaluate.

For this first working test theme, what I need from you is simply:

* The `.wsw` theme definition file.
* The active-tab bitmap.
* The inactive-tab bitmap.
* The Shelf body bitmap.

A complete theme can also provide separate symbol bitmaps for:

* The two scroll arrows.
* The Preferences symbol displayed on the left mini-tab.
* The hide/show Shelf symbol displayed on the right mini-tab.

Those symbols are not important at this stage and can be dealt with later. The priority is a single functional `.wsw` theme with crisp active-tab, inactive-tab and Shelf-body artwork so I can load it into WorkShelf and test the tab overlap, drawing order and colorization directly.

Please concentrate on correcting and completing that one working test theme before producing any additional variants or extras.

It's a Salmon

Ok to the rest.... will start over. I know what I did in configuration once I worked out what I was going to do so it's easier.

Wait... Now that I have finished the release and have some time available I am actually doing an example theme...

Also found a bug in the code when using TabOverlap that would make the right mini-tab less wide than the left.

OK - well I appreciate you asking me. Sorry I could not get it quite right.
I think if you have the time and are doing one, I'll step back.

No need to apologize, Andrew - and thank you again for all the time and enthusiasm you put into this.

As it turns out, reproducing the effect properly required more than simply creating the right bitmaps. I had to add a new `TabBodyOverlap` theme setting so the tabs can overlap the Shelf body by a specified number of pixels, as well as make a few other adjustments to the theme engine. While doing that, I also found and fixed the mini-tab width bug I mentioned above.

I now have a complete working example theme, so yes, please feel free to step back from this one. Your experiments still helped expose some of the limitations and clarify what the theme format needed.

Thanks again - and thanks for all the fish.