Help with 'All Programs" background please!
Monday, April 26, 2004 by Robyn Henke | Discussion: Skinning
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.
 |
|
Page 2 of 2 | |
|
|---|
Shameless Designs
Reply #22 Friday, April 30, 2004 2:02 AM
Reply #22 Friday, April 30, 2004 2:02 AM
By the way, on a completely off topic note, I love threads like this where truly interested people give and take for the good of all. Even though I didn't start this thread, I learned from it. I want to thank all of you. Threads like this are what got me excited about skinning when I first came to WC. It feels good to be involved in a discussion about skinning instead of reading another complaint list or flame war. You all gave me something to look forward to the last couple days. So, thanks again. 
SelfExiled
Reply #23 Friday, April 30, 2004 4:13 AM
Reply #23 Friday, April 30, 2004 4:13 AM
Very good, SD. I like that theme too. That all programs section can be a bit of a pain. But, all constraints on it are gone now. It just takes a little creativity. Again, good work. 
SelfExiled
Reply #24 Friday, April 30, 2004 4:19 AM
Reply #24 Friday, April 30, 2004 4:19 AM
My question now becomes, does the original theme look that good? Probably not as most artists don't seem to care about that part of the skin. But, I think it can ruin a great skin. 
mitchec
Reply #25 Friday, April 30, 2004 12:11 PM
Reply #25 Friday, April 30, 2004 12:11 PM
This is the best way I have found to get around the problem
1. Adjusting the More Programs Backgrorund Image left hand margin to -120 pushes the single mouseover colour off the screen
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.
3. Set up a new image 3 x the copied size. This will be 450 x 28 pixles. Paste the copied area for the normal, mouseover and pressed states.
4. Create a new arrow image for each of the three states and paste these in place. You may also wish to add some text as previously altering the margins pushes the text of the screen.
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.
6. Save the image as .bmp
https://www.wincustomize.com/skins.asp?library=1&SkinID=4101
for an example of how it works.
Hope this is of some use.
1. Adjusting the More Programs Backgrorund Image left hand margin to -120 pushes the single mouseover colour off the screen
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.
3. Set up a new image 3 x the copied size. This will be 450 x 28 pixles. Paste the copied area for the normal, mouseover and pressed states.
4. Create a new arrow image for each of the three states and paste these in place. You may also wish to add some text as previously altering the margins pushes the text of the screen.
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.
6. Save the image as .bmp
https://www.wincustomize.com/skins.asp?library=1&SkinID=4101
for an example of how it works.
Hope this is of some use.
SelfExiled
Reply #26 Friday, April 30, 2004 3:09 PM
Reply #26 Friday, April 30, 2004 3:09 PM
Well, this is the best way I've found to fix the problem. 
http://www.guiolympics.com/skins2004.asp?skinid=118
http://www.guiolympics.com/skins2004.asp?skinid=118
Shameless Designs
Reply #28 Friday, April 30, 2004 8:13 PM
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.
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
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 #28 Friday, April 30, 2004 8:13 PM
| 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]
Shameless Designs
Reply #29 Friday, April 30, 2004 9:55 PM
Reply #29 Friday, April 30, 2004 9:55 PM
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.
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.
Essencay
Reply #30 Friday, April 30, 2004 9:56 PM
Reply #30 Friday, April 30, 2004 9:56 PM
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
mitchec
Reply #31 Saturday, May 1, 2004 3:26 AM
Reply #31 Saturday, May 1, 2004 3:26 AM
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.
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.
mitchec
Reply #32 Saturday, May 1, 2004 4:04 AM
Reply #32 Saturday, May 1, 2004 4:04 AM
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.
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.
Shameless Designs
Reply #33 Saturday, May 1, 2004 10:24 AM
Reply #33 Saturday, May 1, 2004 10:24 AM
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.
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.
CerebroJD
Reply #34 Saturday, May 1, 2004 11:35 AM
Reply #34 Saturday, May 1, 2004 11:35 AM
Wow! This is a great thread. Its good to see all the great suggestions in here.
Shameless Designs
Reply #35 Saturday, May 1, 2004 6:02 PM
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 #35 Saturday, May 1, 2004 6:02 PM
| 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]
Essencay
Reply #36 Saturday, May 1, 2004 9:45 PM
Reply #36 Saturday, May 1, 2004 9:45 PM
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
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
mitchec
Reply #37 Sunday, May 2, 2004 2:50 AM
Reply #37 Sunday, May 2, 2004 2:50 AM
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.
Essencay
Reply #38 Sunday, May 2, 2004 8:11 AM
Reply #38 Sunday, May 2, 2004 8:11 AM
That would be cool if Shameless found a standard setting for the left margin
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
|
|
Page 2 of 2 | |
|
|---|
Reply #21 Friday, April 30, 2004 1:40 AM
I do admit that the items are not lined up perfectly in the center of the panel, but they are centered in the "flat" part of the panel above the bevel, and I think it looks quite good, myself. The point is, that with a very little judicious editing in skin studio, often times these things are quite easy to adjust for either a skin artist creating the skin, or a skin user tweaking it for use on her/his computer.
I guarantee you, this is easier than replacing the whole works with an oversized MoreProgsArrow graphic. There is still times when that method has a advantages. If I didn't think so, I wouldn't have worked as hard as I did in that other thread to convince you it could be done the last time we had a big discussion about this topic.
I mainly just wanted to show here that both methods of dealing with the highlight are equally viable depending on the skin. I think I came close to that objective at least.