Logoff Buttons on Start Menu
Sunday, February 19, 2006 by jazzymjr | Discussion: WindowBlinds
I am trying to make my first transparent Start Panel. All has gone well up to this point. I decided I didn't want the buttons on there, just a button for the text (Logoff/Turn off Computer, etc.). Well I made a "dummy" transparent image to use as the buttons. However, the transparent image comes up as a black square where the button should be. So then I made an image the same color as the bottom bar, but when I make it transparent, it comes up black as well. If I don't make it transparent, it comes up as the color of the bottom bar before the transparency was applied, so you can see the "square" a little, and, needless to say it is not transparent. Is there anyway to do this in WB5?
Thanks in advancy for any help.
MJ
Thanks in advancy for any help.
MJ
 |
|
Page 1 of 2 | |
|
|---|
jazzymjr
Reply #2 Sunday, February 19, 2006 10:47 PM
Reply #2 Sunday, February 19, 2006 10:47 PM
Thanks for the suggestion. I will try that...about the 1 pixel images. I'll post back and let you know if I was successful. About the transparency thing, I think I did have the settings right. Part of my problem is that the whole start panel is an image that is muted shades of a color, not one solid color. If I can't figure it out, I will send you the skin. I appreciate your help. 
jazzymjr
Reply #3 Monday, February 20, 2006 8:22 AM
Thanks so much, Craig! That did the trick...yea!!!!
Reply #3 Monday, February 20, 2006 8:22 AM
| The buttons, whether transparent or not will still be part of the button background. Make your logoff/shutdown button images 1 pixel wide each. This way your background image will only be the size of the text. |
Thanks so much, Craig! That did the trick...yea!!!!
jazzymjr
Reply #4 Monday, February 20, 2006 2:33 PM
What I did was make the shutdown/logoff buttons tiles of 1px wide by 24px long for each, so that my final image for them was 9px wide by 24 px long. I made them a color to match my bottom bar as much as I could. Then I made my buttons (called buttons background in the tree on the left). You cannot just remove the attribute for the logoff buttons...if you do that, you will wind up with the default microsoft logoff images. Yes, my text buttons do have mouseovers.
I hope I didn't confuse you even more!
Reply #4 Monday, February 20, 2006 2:33 PM
| Are you saying the logoff button images should be tiles of 1px by 1px each in a color that matches? I think I understand what jazzymjr is doing with the logoff background to effectively create a 'button' for the text, but the actual logoff button image part is confusing. |
What I did was make the shutdown/logoff buttons tiles of 1px wide by 24px long for each, so that my final image for them was 9px wide by 24 px long. I made them a color to match my bottom bar as much as I could. Then I made my buttons (called buttons background in the tree on the left). You cannot just remove the attribute for the logoff buttons...if you do that, you will wind up with the default microsoft logoff images. Yes, my text buttons do have mouseovers.
I hope I didn't confuse you even more!
Daiwa
Reply #5 Monday, February 20, 2006 2:46 PM
Reply #5 Monday, February 20, 2006 2:46 PM
NT -
I'm having some difficulty picturing this in my mind (nothing strange, there).
Are you saying the logoff button images should be tiles of 1px by 1px each in a color that matches? I think I understand what jazzymjr is doing with the logoff background to effectively create a 'button' for the text, but the actual logoff button image part is confusing.
If you do it that way, will the 'buttons' have 'states' - will mouseovers, etc., work for the 'buttons'?
Thanks
I'm having some difficulty picturing this in my mind (nothing strange, there).
Are you saying the logoff button images should be tiles of 1px by 1px each in a color that matches? I think I understand what jazzymjr is doing with the logoff background to effectively create a 'button' for the text, but the actual logoff button image part is confusing.
If you do it that way, will the 'buttons' have 'states' - will mouseovers, etc., work for the 'buttons'?
Thanks
NightTrainthedark
Reply #6 Monday, February 20, 2006 3:53 PM
1 pixel wide ..height depends. The background images play off of the button image sizes when they stretch. Thats why these are tricky. Using 1 pixel wide images leaves the text clear and aligned on the buttons but the backgrounds still stretch vertically. I can never really get it 100% figured out so everytime I do the buttons I tweak the images accordingly to get the look I want. I am sure there is an easier way, I just haven't fumbled upon it yet.
You can make the images .png with full tranparency execpt for the upper left pixel. Make that 1% transparent and it will blend with anything.
No. If you use a background image for the text, the button states will not work. You need to create the mouseover with the background images. You can combine the 2 for a desired effect as well but thats a little trickier. Best I can say is take a look at the way different people have done their buttons. It an area where you can be a little creative as well. The skin I am working on, I got the buttons to have a mouseover state and the backgrounds to have a state. I am so proud. It looks so cool.
Reply #6 Monday, February 20, 2006 3:53 PM
| Are you saying the logoff button images should be tiles of 1px by 1px each in a color that matches? |
1 pixel wide ..height depends. The background images play off of the button image sizes when they stretch. Thats why these are tricky. Using 1 pixel wide images leaves the text clear and aligned on the buttons but the backgrounds still stretch vertically. I can never really get it 100% figured out so everytime I do the buttons I tweak the images accordingly to get the look I want. I am sure there is an easier way, I just haven't fumbled upon it yet.
You can make the images .png with full tranparency execpt for the upper left pixel. Make that 1% transparent and it will blend with anything.
| If you do it that way, will the 'buttons' have 'states' - will mouseovers, etc., work for the 'buttons'? |
No. If you use a background image for the text, the button states will not work. You need to create the mouseover with the background images. You can combine the 2 for a desired effect as well but thats a little trickier. Best I can say is take a look at the way different people have done their buttons. It an area where you can be a little creative as well. The skin I am working on, I got the buttons to have a mouseover state and the backgrounds to have a state. I am so proud. It looks so cool.
Daiwa
Reply #7 Monday, February 20, 2006 11:20 PM
Reply #7 Monday, February 20, 2006 11:20 PM
The lingo gets a little confusing when "button" means two different things. 
I think I understand, except that I was actually asking whether the background can have "states" - effectively mimicking a "real" button. Sounds like, if you figure out how to do it right & using .png images, you can get both to have states, then?
You mean the "button" images or the "background" images?
I think I understand, except that I was actually asking whether the background can have "states" - effectively mimicking a "real" button. Sounds like, if you figure out how to do it right & using .png images, you can get both to have states, then?
| You can make the images .png with full tranparency execpt for the upper left pixel. Make that 1% transparent and it will blend with anything. |
You mean the "button" images or the "background" images?
jazzymjr
Reply #8 Tuesday, February 21, 2006 5:32 AM
Now, I am confused...lol. Are you talking about the button images or the background images?
What is a "state"? This is a new one for me... My background "buttons" images have mouseovers.
Reply #8 Tuesday, February 21, 2006 5:32 AM
| You can make the images .png with full tranparency execpt for the upper left pixel. Make that 1% transparent and it will blend with anything |
Now, I am confused...lol. Are you talking about the button images or the background images?
| The skin I am working on, I got the buttons to have a mouseover state and the backgrounds to have a state. I am so proud. It looks so cool. |
What is a "state"? This is a new one for me... My background "buttons" images have mouseovers.
jazzymjr
Reply #9 Tuesday, February 21, 2006 5:33 AM
Now, I am confused...lol. Are you talking about the button images or the background images?
What is a "state"? This is a new one for me... My background "buttons" images have mouseovers.
Reply #9 Tuesday, February 21, 2006 5:33 AM
| You can make the images .png with full tranparency execpt for the upper left pixel. Make that 1% transparent and it will blend with anything |
Now, I am confused...lol. Are you talking about the button images or the background images?
| The skin I am working on, I got the buttons to have a mouseover state and the backgrounds to have a state. I am so proud. It looks so cool. |
What is a "state"? This is a new one for me... My background "buttons" images have mouseovers.
NightTrainthedark
Reply #10 Tuesday, February 21, 2006 7:02 AM
actually both. They both support transparency but I was talking about the buttons themselves. Making it transparent, you don't have to worry about matching color.
Normal state, disabled state, mouseover state, etc
Reply #10 Tuesday, February 21, 2006 7:02 AM
| Now, I am confused...lol. Are you talking about the button images or the background images? |
actually both. They both support transparency but I was talking about the buttons themselves. Making it transparent, you don't have to worry about matching color.
| What is a "state"? This is a new one for me... My background "buttons" images have mouseovers. |
Normal state, disabled state, mouseover state, etc
Daiwa
Reply #11 Saturday, April 29, 2006 6:19 PM
Reply #11 Saturday, April 29, 2006 6:19 PM
Night Train -
Can you point me to a skin or two which have managed to get a mouseover to work for the button images? Or share the "trick"?
I've been able to get the background mouseover to work using .tga's & using the "transparent button image" suggestion you made above, but I'm looking to do just the opposite - get the button image mouseover to work (with or without a background).
Thanks,
Daiwa
Can you point me to a skin or two which have managed to get a mouseover to work for the button images? Or share the "trick"?
I've been able to get the background mouseover to work using .tga's & using the "transparent button image" suggestion you made above, but I'm looking to do just the opposite - get the button image mouseover to work (with or without a background).
Thanks,
Daiwa
thebleedingedge
Reply #12 Saturday, April 29, 2006 6:31 PM
Reply #12 Saturday, April 29, 2006 6:31 PM
this is an easy fix; done this many times. go into skinstudio and make an image for the logoff buttons that is transparent. next go into logoff buttons background and again make a transparent image. next in logoff buttons background glyph is where you will put your shutdown buttons. play with the alignments a little and the buttons actually will show in normal and mouseover. any ? contact me. 
Daiwa
Reply #13 Saturday, April 29, 2006 7:53 PM
Reply #13 Saturday, April 29, 2006 7:53 PM
Thanks.
Your should consider changing that handle to "sharp" razr.
'Preciate it.
Your should consider changing that handle to "sharp" razr.
'Preciate it.
Daiwa
Reply #14 Saturday, April 29, 2006 9:15 PM
Reply #14 Saturday, April 29, 2006 9:15 PM
Well, I've got a completely transparent LogoffButton image (.tga), and a completely transparent LogoffButton Background image. So far, so good.
If I put the glyph image in the Button section, the correct buttons (ShutDown, Logoff, etc.) are displayed in the correct locations but there is no mouseover state. If I put the glyph in the Background section, the mouseover effect works but there are 3 "buttons" for each button & they appear beneath the text.
I'm sure it's something simple I'm doing wrong - any ideas?
Thanks!
If I put the glyph image in the Button section, the correct buttons (ShutDown, Logoff, etc.) are displayed in the correct locations but there is no mouseover state. If I put the glyph in the Background section, the mouseover effect works but there are 3 "buttons" for each button & they appear beneath the text.
I'm sure it's something simple I'm doing wrong - any ideas?
Thanks!
Daiwa
Reply #15 Saturday, April 29, 2006 9:55 PM
Reply #15 Saturday, April 29, 2006 9:55 PM
I guess part of the reason you can't use the button glyphs in the background section is that there are only 3 background tiles vs. 9 tiles for the buttons themselves, so the "states" can't jive.
Again, it's the 9-tile button image that I want to get working with a mouseover.
Thanks.
Again, it's the 9-tile button image that I want to get working with a mouseover.
Thanks.
thebleedingedge
Reply #16 Saturday, April 29, 2006 10:12 PM
Reply #16 Saturday, April 29, 2006 10:12 PM
use the three button state. trust me it works. i've done this many times. iwhen you use the three button state it will show both logoff and shutdown buttons. i can't think of a reason you would need anymore than logoff
and shutdown. the nine button state will not show mouse over. the only way to get that to work is using the xp classic colors.
leave the nine button state the way it is in the buttons section. everything you need to do is in the background section.
and shutdown. the nine button state will not show mouse over. the only way to get that to work is using the xp classic colors.
leave the nine button state the way it is in the buttons section. everything you need to do is in the background section.
thebleedingedge
Reply #17 Saturday, April 29, 2006 10:26 PM
Reply #17 Saturday, April 29, 2006 10:26 PM
if you want to use my current theme as an outline to go by. email me or post and i'll get it to you.
Daiwa
Reply #18 Saturday, April 29, 2006 10:52 PM
Reply #18 Saturday, April 29, 2006 10:52 PM
No email link in your profile & I don't find any skins using your handle as author.
But I think I'm beginning to understand. My only remaining question would be the left-to-right order of placement of the background glyph images. Should I use images of two buttons in three states or three buttons in two states? And should the order be:
B1Normal - B1M/O - B2Normal - B2M/O - B3Normal - B3M/O or:
B1Normal - B2Normal - B3Normal - B1M/O - B2M/O - B3M/O
I guess that's 3 questions.
Thanks.
But I think I'm beginning to understand. My only remaining question would be the left-to-right order of placement of the background glyph images. Should I use images of two buttons in three states or three buttons in two states? And should the order be:
B1Normal - B1M/O - B2Normal - B2M/O - B3Normal - B3M/O or:
B1Normal - B2Normal - B3Normal - B1M/O - B2M/O - B3M/O
I guess that's 3 questions.
Thanks.
thebleedingedge
Reply #19 Saturday, April 29, 2006 11:09 PM
Reply #19 Saturday, April 29, 2006 11:09 PM
all you need is a set of 3 three buttons. normal, pressed and mouse over. the three buttons will be used on both logoff and shutdown. typically i use generic buttons, that way there is none of the mixing of logoff for shutdown or vice versa.
thebleedingedge
Reply #20 Saturday, April 29, 2006 11:11 PM
Reply #20 Saturday, April 29, 2006 11:11 PM
also i just fixed my email not showing. it's now visible.
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 1 of 2 | |
|
|---|
Reply #1 Sunday, February 19, 2006 9:56 PM
The buttons, whether transparent or not will still be part of the button background. Make your logoff/shutdown button images 1 pixel wide each. This way your background image will only be the size of the text.
Feel free to send me the skin if you can't find the solution.