Vista-style toolbar buttons

[XTAL256]

I want to emulate the Vista style of toolbar buttons on XP. I am using my own custom theme, on my Vista machine the buttons have the glass look and i want to have that look on my XP machine, i.e. i want to change the css of toolbarbutton. I have been trying to look for other themes as examples but i can't see how to do it in any of the themes i looked at.
What i want to know is how to skin the buttons so that they can be properly resized. I can take a screenshot of the button in Vista (in hover and pressed state) then use an image editor to erase the icon and add an alpha channel and use that as the button background. But that will only work for a certain size. I want to be able to stretch the button and have the outline and shading and all that look proper and not stretch too. I was thinking i could use some css for that using border or outline properties and giving it a rounded edge. But i'm not sure if i can do the shading that way.

[patrickjdempsey]

You can do this with a combination of images and borders by creating two fairly large graphics (say 100px x 100px). The first graphic would have your chromy part along the center (from left to right) and the rest is blank and the second graphic would be a shadow on the top and left edges and the rest blank. Notice that in the original Windows graphics the hover graphic has a subtle curvature to the gloss, to a background repeat will not work. Also, background graphics do not stretch they can only be cropped or repeated.

The code would look something like this:

Code: Select all


blah {
border: none;
background: none;
}

blah:hover {
border: 1px solid rgba(0,0,0,.3);
-moz-border-radius: 4px;
background-color: transparent;
background-image: url('hoverbackground.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

blah:[selected="true"],
blah:hover:active {
border: 1px solid rgba(0,0,0,.6);
-moz-border-radius: 4px;
background-color: transparent;
background-image: url('activebackground.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
}


This would let the button "stretch" in icon+text mode. Notice that I have repeated redundant instructions here, the reason is so you get the "pressed" effect when you use it with buttons like the bookmarks sidebar button. There are some peculiarities, like making sure that the background image and the border always cover the same area... but this is a start. You can define these properties under toolbarbutton.css in the global folder. I like to use rgba values to make transparencies of black instead of ThreeDShadow and ThreeDDarkShadow because it is more consistent on different platforms, but either will work. You might have to define these settings for each toolbar button individually by making a selector list where you list out all of the buttons separated by commas before the commands.

[XTAL256]

So you mean the ~100x100 shadow image would be placed in the top left corner and then cropped, so the shadow will run the full length of the top and left edges provided they are less than 100px long? That seems reasonable. It won't be identical to Vista, the shadow won't curve on the top right and bottom left corners, but it will look good enough.
I will try it out, if i don't like it maybe i can just scrap the shadow and see how it looks without it.

thanks for your help

[patrickjdempsey]

Yes, but -moz-border-radius *should* round off the corners.

[XTAL256]

Yes, but -moz-border-radius *should* round off the corners.

Are you talking about what i said about the shadow not curving on the top right and bottom left corners? I am meaning the actual shadow image gradient, it will not curve around the rounded border. ANyway, it doesn't matter, the curve is only 2-3 pixels radius anyway so it won't even be noticeable.

[patrickjdempsey]

I thought that the border command would crop the background image.... I would have to play with it myself to see what's happening.

[patrickjdempsey]

Proof of concept running in my Black Stratini theme,

Code: Select all

#back-button,
#forward-button,
#stop-button,
#reload-button,
#history-button,
#home-button,
#print-button,
#bookmarks-button,
#downloads-button,
#new-tab-button,
#new-window-button,
#cut-button,
#copy-button,
#paste-button {
  background-image: url("chrome://global/skin/icons/toolbarbutton-background.png");
    background-position: center;
        background-repeat: no-repeat;
   border: 1px solid yellow !important;
-moz-border-radius: 8px;
min-width: 35px !important;
padding: 3px !important;
margin: 3px !important;
}

#back-button:hover:not([disabled="true"]),
#forward-button:hover:not([disabled="true"])
#stop-button:hover:not([disabled="true"]),
#reload-button:hover:not([disabled="true"]),
#history-button:hover:not([disabled="true"]),
#home-button:hover:not([disabled="true"]),
#print-button:hover:not([disabled="true"]),
#bookmarks-button:hover:not([disabled="true"]),
#downloads-button:hover:not([disabled="true"]),
#new-tab-button:hover:not([disabled="true"]),
#new-window-button:hover:not([disabled="true"]),
#cut-button:hover:not([disabled="true"]),
#copy-button:hover:not([disabled="true"]),
#paste-button:hover:not([disabled="true"]) {
  background-image: url("chrome://global/skin/icons/toolbarbutton-background_hover.png");
    background-position: top left;
   border: 1px solid red !important;
}


Note that I had to use the important tag here to override settings elsewhere in my theme, but if you set yours up correctly from the beginning you shouldn't need to use it. And of course yours would be different from mine in the fact that I'm showing the hover state as the regular state and the active state as the hover state. The minimum width should probably be different in small icons mode, as well as icons + text mode so things don't look too awkward.

[XTAL256]

Thanks mate but you really didn't need to go to all that trouble. I never said that it wouldn't work, you misunderstood me. Although i don't quite understand how i will add a gradient as well as the shadow background. You use background-image: to add the shadow image but i also need to add the gradient image first. Can i use two background images?

[patrickjdempsey]

The example I show uses two different background images. The regular state is a blue square with a red dot in the center. That would be where you would use the glassy gradient. The the second background image is the pink background with the green "shadow" line. That would be your active button shadow. There does not appear to be a gradient on the active button, just a shadow. I would bet money that the buttons in Vista are drawn in a very similar method.

[XTAL256]

There does not appear to be a gradient on the active button, just a shadow.

Actually, that's not the case. It probably looks like that on the image i posted but that image is low quality (imageshack converted it from bmp to png and must have reduced the quality in the process). In fact, the pressed image has the same gradient but maybe a bit darker and with the shadow image overlayed on it.
I don't think i will use a shadow anyway. The XP style does not have a shadow and it looks alright when pressed so i can probably achieve a good effect even without a shadow.

[patrickjdempsey]

XP style buttons look like they could be created just using an rbga border (maybe 4px) and an rgba background color.... although the hover might have a very very subtle gradient that goes from top to bottom, the active just looks like a flat transparent black. If I was attempting to recreate those Vista buttons in an active state I would use a shadow image and use a background color to make it darker... like rgba(0,0,0,.2). You cannot load two background images.

[patrickjdempsey]

Hmm, wait.... how about this... generate the shadow in CSS, use the same background image as the hover button, and add an rgba background color to make it darker?

Code: Select all

blah:[selected="true"],
blah:hover:active {
border: 4px solid;
-moz-border-radius: 4px;
-moz-border-top-colors:  rgba(0,0,0,.6) rgba(0,0,0,.3) rgba(0,0,0,.15) rgba(0,0,0,.05);
-moz-border-right-colors: rgba(0,0,0,.6) rgba(0,0,0,.3) rgba(0,0,0,.15) rgba(0,0,0,.05);
-moz-border-left-colors: rgba(0,0,0,.6) transparent transparent transparent;
-moz-border-bottom-colors: rgba(0,0,0,.6) transparent transparent transparent;
background-color: rgba(0,0,0,.2);
background-image: url('hoverbackground.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}


[XTAL256]

I also noticed that you said background images cannot be stretched. That seems pretty silly although if i am not mistaken the next version of CSS will allow it, am i right? Is there anyway i can get around it? Since i am only using gradients i can use -moz-linear-gradient when it is introduced in FF 3.6 but until then i guess i will just have to make the images the same height as the buttons.

[patrickjdempsey]

Yes, CSS will carry background image stretching, but I don't think Firefox will support it for some time to come. Making the background image larger and centering the gradient will allow it the button border to stretch and reveal more of the image when it goes into icons+text mode.

[XTAL256]

Hi again, with more questions
I noticed that Vista buttons have a light inner border as well as the medium-grey outer border:

I would like to know if this is possible to do? I tried grove and inset border styles but they don't allow me to set the each colour and the lightening/darkening.