robynjh robynjh

Help with 'All Programs" background please!

Help with 'All Programs" background please!

How do I get the background for "All Programs" to not color on mouseover? I have some themes that this happens with and I have several that it does not happen with and I cannot figure out what they do not have in common (I am modifiying themes I have downloaded for my personal use). Thanks.
9,226 views 38 replies
Reply #26 Top
Well, this is the best way I've found to fix the problem.

http://www.guiolympics.com/skins2004.asp?skinid=118
Reply #28 Top
1. Adjusting the More Programs Backgrorund Image left hand margin to -120 pushes the single mouseover colour off the screen


Actually, that''s not true. a negative left content margin of that size will actually pull the text and the MoreProgsArrow.tga (MPA graphic) to the left, and if the MPA graphic is large enough, it will cover the mouseover color (highlight) so that you don''t see it. I set up a delay of the menu opening so I could capture this shot from your skin so you can see what I mean:



The shot above was taken with the cursor over the MPA graphic before the More Programs Menu actually opened. The green arrow is pointing to the highlight which is still partially uncovered by your graphic because the graphic doesn''t fill the whole panel width. I mostly just wanted to show here that the highlight is still there, it''s just covered by the graphic, and shortly after hovering, by the menu as well.

But you can see something else here as well. Note how you can see the whole outline of the MPA graphic due to the pattern mismatch. That is because the whole graphic is not in the window. Only 133 pixels in width is showing, with the left part of the graphic pulled off-screen. More on this later.

2. You will now have to create a new image for the arrow. Copy the left hand side of the background image. I have found that if the background is 190 x 28 pixles then copy 150 x 28.


The size of the graphic really depends on the graphic elements in the background. a graphic that size wouldn''t work for example on Copperdeck 2, which I think you can see if you look at post #29 of this thread: https://www.wincustomize.com/msgboard.asp?id=262666&BID=WCH&page=1#266760

5.As previously mentioned set the Background contents Left margin to -120. Set the Right hand margin to 40 as this is the amount subtracted from the background image to create the arrow image.


Ok, we''ve seen that the content margins of Left neg 120 and Right 40 result in a misaligned graphic in the screenshot above. I maintained in that thread I posted that a left content margin setting of about neg 90 would be right so let''s see what happens:



As you can see with the Left set at neg 90 and the Right at 40, now the graphic is lined up correctly with all 150 pixels in width showing. But it doesn''t make sense, because we shifted the content margin by 30 pixels to the right, but the graphic only shifted 17 pixels. What happened?

Notice the highlight is missing completely in that screenshot. The reason the MPA graphic only moved 17 pixels is that it bumped into the right content margin. We can prove this by setting the Right content margin to 0 as you see below:



As you can see, the highlight is now completely shifted to the right edge of the panel at x:190. But the MPA graphic did not shift as far to the right as the highlight did. It only shifted 14 pixels to the right, pulling the text along with it. Why? The answer is this:

The mouseover color highlight is unaffected by the left content margin and can only be pushed to the left by setting a positive right content margin. The MPA graphic, on the other hand, is influenced mostly by the left content margin, pulling it left when the setting is negative and pushing it right when the setting is positive. The only time the right content margin affects the MPA graphic is to limit movement to the right.

To prove it, here is one last screenshot. In this shot the right content margin remains set at 0, and the left content margin is shifted 14 pixels to the left to neg 104:



As you can see, the MPA graphic is once again properly aligned and the highlight is still all the way over to the right edge of the panel.

PS: By the way, the default image type for the More Programs Arrow is now .tga, not .bmp. Bitmaps will work, and if you plan to cover the whole panel with the MPA graphic, then I don''t think it matters too much, but in most cases, I think I''d prefer to use a targa and take advantage of the alpha blending.
[Message Edited]
Reply #29 Top
mitchec,

I wanted to add that I really do like your Marmo skin. It is great to see someone using some different textures and taking a different approach. Marble, wood, and other irregular patterns can be tough to pull off in a WindowBlinds skin, but you did a great job with it. Congratulations, and thanks for offering us your hard work.

I also want to thank you for taking the time to post on this thread. I wish more people would participate on this board and share their knowledge. There used to be a lot more activity on the skinning board. I wish it would pick up again. It's one of the things I like most about WC.

By the way, there were a couple of other things I noticed while I was playing with your skin for this thread. Just a few things you might want to take a look at if you're interested. My email is listed in my profile, just click on my name.
Reply #30 Top
Another thing you'll run into if you're trying to hide the mouseover with a .bmp, if you use magic pink the mouseover will show through. So using a .tga as Shameless said is the direction to go in
Reply #31 Top
Shameless,

I can only tell you what i have observed while using skinstudio. In your first screen shot you show the arrow image misaligned with the grey panel showing through. This does not happen on my computers.

I stand by what i originaly said.




Powered by SkinBrowser!
Reply #32 Top
Shameless,

Ive just been trying some alternative settings with the left hand margin and it appears that -90 is acceptable, anything less than this has no effect affect on the skin.

P.S appologies if i sounded a bit negative in the previuous message. I dont pretend to know everything about skinning, I was just giving my opinion on what i've found works for me.





Powered by SkinBrowser!
Reply #33 Top
mitchec,

I sincerely hope that you didn't take my post showing the examples of your skin as a criticism of you or the skin. I did not intend at all to imply that, in fact, quite the opposite. I'm sorry if I left that impression.

I don't know everything about skinning either, but I am determined to learn as much as I possibly can. Several of us have been wrestling with this More Programs panel and trying to make sense of what is happening for some time now. The reason I made such a lengthy post with all the illustrations in response to you was to show that there was new information that came out because of your post.

We all, I think, learned some new things we had not known about the behavior of these items due to the content margin settings because of this thread. At least it is information about them that I have never read anywhere, and trust me, I have looked very hard. I got excited about it and wanted to post it as soon as possible and with as much detail as possible. In my enthusiasm, looking back now, I realize that it could be interpreted as a harsh criticism. I'm sorry for that. it was not intended that way at all.

I really do thank you for your post. Without your post, I would not have checked this out and made this discovery, and it has helped me, at least, a lot. So thank you once again.
Reply #34 Top
Wow! This is a great thread. Its good to see all the great suggestions in here.
Reply #35 Top
I can only tell you what i have observed while using skinstudio. In your first screen shot you show the arrow image misaligned with the grey panel showing through. This does not happen on my computers.I stand by what i originaly said.


Mitch,

that first screenshot was taken with the skin setting exactly as I downloaded it from WC. However, the reason it probably looks different to you is that I took the screenshot with the mouse cursor hovering over the MPA graphic before the More Programs menu popped up. I had to set a long delay using Tweak Now in order to get that shot.

The reason you and almost everyone else doesn''t see the grey highlight is that the MPA graphic and the menu graphic cover it up. The left edge of the More programs menu aligns itself to the right edge of the MPA graphic so the part of the highlight you can see in my screenshot will only be seen for milliseconds before the menu pops open. Most people will never ever see it.

I didn''t post that to show the highlight as some kind of glitch in your skin. The reason I posted that there, along with the other shots, was to show that the left content margin has practically no affect on the mouseover color location. Only the right content margin setting affects the highlight.

As for the MPA graphic being slightly misaligned with the background, that''s exactly the way it was when I opened the skin. If you say you aren''t seeing the misalignment on your rig, I believe you, and I think I may even have a reason why you might not see it the same way I did.

One of the things we''ve discovered is that the location of The "All Programs" text is not only dependedent on content margin settings for the panel background. The location of the text also depends on the font setting used for the text and the screen resolution setting of the monitor. The location of the MPA graphic also depends on the text location, so if you and I run different screen resolutions and/or have different system font settings, the location of the graphic may be slightly different.

Which is why I got so excited about the discovery about the different affects of the right and left content margin on these elements. Think about this for a moment: I got the MPA graphic to line up perfectly using two very different content margin settings! using L:neg 90, R:40 as one setting and L:neg 104, R:0 for the other setting. This tells me it''s possible to not be so dependent on the resolution or text settings. I think I see, if not a formula, at least some better ways to control the location of the highlight and the MPA graphic so we are not so dependent on screen resolution or font settings to precisely locate these items in a skin.

I am still doing some experimenting, but I feel one hell of a lot closer to a reliable solution we can all use than I did 2 days ago. And I might never have looked at all this if you hadn''t posted, so thanks again.
[Message Edited]
Reply #36 Top
I hope you're right Shameless this skin which does some serious altering of the Start Menu has misaligned All Programs graphics when I use the ultra-compact 16x16 icon substyle...with 16x16 icons, though it shows pretty nice in the preview. http://www.guiolympics.com/skins2004.asp?library=33&searchtext=kewk&category=WindowBlinds&sort=date&order=Descending
Reply #37 Top
After Essancay posted his last comment I decided to have a look at the start menu icon size. Previously I had been using large icons. After changing to the small icon size I got the misalignment problem. Setting the left margin to -90 as you suggested fixes the problem for both icons sizes.





Powered by SkinBrowser!
Reply #38 Top
That would be cool if Shameless found a standard setting for the left margin