Windows > Third Party Plug-ins, Programs, and Skins

Display Bug: Options > Tree & View > List > Enlarge Scrollbars on mouse over (?)

<< < (2/2)

HPBEME:
Scrollbar thumbs are really tough to get right without distortion on rounded ends. When I started my very first skin, the scrollbar images were the very first thing I started working on. I found it so difficult to figure out what was going on, I just about gave up early on because it got so frustrating.

I had zero experience editing images, and had no clue what the various image parameters meant in the main.XML file. Several years on after that original experience however, addressing image distortion issues is second nature, and I feel somewhat silly that I didn't figure things out much sooner.  One piece of advice you might find helpful: a key thing to grasp is that thumb sizing is ultimately controlled by scrollbar background image. You can make the thumb image as big as you want, but it will always get squished down to fit within the limits of your scrollbar width, which when combined with margins and scaling, can mess up how it comes out in actual use. 

Regarding the built in checkbox for "Enlarge Scrollbars on Mouse Over" - it does work, but has an intolerable delay. For all my skins now, I design the thumb hover sub-image, to be much larger than the default display sub-image. Consequently, the scrollbar thumb enlarges instantaneously on mouse over (vs. waiting for the software to react). See thumb size delta in the attached screenshot. NOTE: the scroll background is completely transparent, so it simply shows the list background as continuous. Nevertheless, the width of that transparent background controls how big the thumb can enlarge to.

HPBEME:
Since the previous reply showed a scrollbar background image that was transparent, I thought it would be useful to show a scrollbar that has an actual background to illustrate more explicitly how the background limits the thumb size (note: there are lots of tricks you can play with margins, transparency and other image control parameters to do some pretty unique stuff)

The attached file shows another scrollbar/thumb variation (five variations total) in my new (and yes, still unavailable) Dream in Blue skin. This picture also uses the native color, while the previous picture used MC's skin effects to flip the blue and green two digit hex color codes.

markf2748:

--- Quote from: HPBEME on May 28, 2024, 07:34:19 pm ---Scrollbar thumbs are really tough to get right without distortion on rounded ends.
.
One piece of advice you might find helpful: a key thing to grasp is that thumb sizing is ultimately controlled by scrollbar background image. You can make the thumb image as big as you want, but it will always get squished down to fit within the limits of your scrollbar width, which when combined with margins and scaling, can mess up how it comes out in actual use.
.
NOTE: the scroll background is completely transparent, so it simply shows the list background as continuous. Nevertheless, the width of that transparent background controls how big the thumb can enlarge to.
--- End quote ---


--- Quote from: HPBEME on May 28, 2024, 07:51:34 pm ---I thought it would be useful to show a scrollbar that has an actual background to illustrate more explicitly how the background limits the thumb size (note: there are lots of tricks you can play with margins, transparency and other image control parameters to do some pretty unique stuff)
--- End quote ---

Thanks for the tips.  I've concluded that getting low-distortion rounded scrollbar handle ends is pretty much a crapshoot discovery process.  First, draw width of the background to set overall scrollbar width, as you suggest.  Then draw the handle images for each state at widths close to what you want relative to the background width.  Set margins and DrawMode to control sub-image stretching.  Finally, iteratively adjust the Scale factors between 1 and 3 until distortion is brought down to an acceptable level.  If the final appearance is not right, start all over again.

The process seems to work, but there really should be a better, more deterministic built-in method wrt to handling distortion once margins and DrawMode are properly set.

On the other hand, if you're satisfied with flat ends, it's more straightforward.

HPBEME:
I would definitely agree that the scrollbar thumbs in particular do not behave like other images. But...

...that doesn't mean you cannot get a perfectly rounded ends, as demonstrated in the attached pic showing the default and mouse-over appearance (this is yet another thumb variation I have in addition to the two shown in my prior posts).

It is definitely not a crap-shoot… you just have to know how to apply certain tricks and use the right image parameters.

Navigation

[0] Message Index

[*] Previous page