MozillaZine

Stretch a background image for buttons?

Discuss application theming and theme development.
ehume

User avatar
 
Posts: 6714
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted February 17th, 2009, 9:46 pm

I've been relying on OS's for the look of the buttons on most of my themes. But I have come to realize that this looks pretty ugly on Linux. So I've been trying to get a stretchable image to work for my buttons. In button.css, the following code gives me a background image, but one that repeats instead of stretches:

Code: Select all
.button-box {
   etc.
  -moz-box-align:stretch;
  background-image: url("chrome://browser/skin/butt1.gif");
}


Does anyone know how to put an image in one's button so that it stretches?

Thanks.
Firefox: Sic transit gloria mundi.

ShareBird

User avatar
 
Posts: 2704
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil

Post Posted February 18th, 2009, 5:05 am

Hallo Ed, I don't use it, so I'm not that sure about it, but I guess -moz-border-image could do what you want...

http://ejohn.org/blog/border-image-in-firefox/
https://developer.mozilla.org/En/CSS/-moz-border-image
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.

ehume

User avatar
 
Posts: 6714
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted February 18th, 2009, 7:16 pm

Hi SB

I don't think border coding will cut it. With all of my themes, each button must be able to expand to accommodate large text. I am looking for the ability of the interior image to stretch along with the button. After all, in Windows when you have -moz-appearance: button, the OS-provided button image stretches to accommodate larger button sizes. I would like to be able to do the same when I have -moz-appearance: none.

I initially chose .button-box because it specifically inherits the align function, which includes stretch.

Any thoughts at all would be appreciated.
Firefox: Sic transit gloria mundi.

ehume

User avatar
 
Posts: 6714
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted February 18th, 2009, 7:33 pm

I'm trying to comprehend the issues. Using list-style-image instead of background-image, I get my 30x8-pixel image stretched to 30x16, but to the left of the button text. It appears that align: stretch does not apply to background images.

So how does Windows do it?
Firefox: Sic transit gloria mundi.

ShareBird

User avatar
 
Posts: 2704
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil

Post Posted February 18th, 2009, 8:35 pm

Hi Ed,

hmmm... I don't think OS uses CSS to build the appearance for elements pointed from -moz-appearance, but I really don't know how it does. Background-images aren't able to stretch in CSS. List-style-images can do this, but I don't think will solve the issues you're having. The new property -moz-border-image can solve your problem (I really think it's possible, have a look how Aronnax! is using it). I'm using bindings for my buttons using the three-parts approach.

Cheers
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.

Frank Lion

User avatar
 
Posts: 17709
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist... United Kingdom

Post Posted February 19th, 2009, 4:19 am

ehume wrote:Does anyone know how to put an image in one's button so that it stretches?

Yeah, is a bear in the woods, Catholic? ;)

First, definitions. A true 'stretchable image' will be a distorted image, by definition. Don't you just want a background image that matches the width of the text on the button? If so, this is done by a 'clever' choice of background image and (the OS does it like this as well) and repeating or chopping to the required length. The background appears to stretch...but it is not.

Throw away this ' -moz-box-align:stretch;' stuff - not needed. The text determines the width (and height in large font sizes) you just do the background and put it in the right place. You can do this, single part, 2 part (as I do) or 3 part, end/slice/end.

You adjust how much background shows either side of the text (looks cramped otherwise) simply by using -moz-padding-start/end on the .button-box. The actual coding for a single part button background with border and neatly laid out is very simple. But....in Firefox 3 ...the world and his wife are now defined as 'buttons' when they are not, so much time is taken up, seriously, defining :not([class="whatever"]) everywhere. That part can be 'difficult'...

So, have a think. Clearly define what you mean/want. A few mockup pics as well is a 'good thing' as I no longer *do* second guessing. :)
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

ehume

User avatar
 
Posts: 6714
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted February 19th, 2009, 6:01 pm

Here is a button with fontsize = 20: Image

Here is a button with fontsize = 10: Image
Firefox: Sic transit gloria mundi.

ehume

User avatar
 
Posts: 6714
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted February 19th, 2009, 6:08 pm

As you can see, Windows has stretched the background image when fontsize=20, not simply taken a bigger hunk out of an image. I'd like to replicate that, if I can.

Otherwise, I have to do exactly what Frank suggests: as a button expands, let it take a bigger central bite out of a fixed image. Doable. but I'm not sure whether I'll be able to get that nice punched-in look when the user clicks on the button.

I fear that SB is right about not being able to stretch a background image in CSS, so I may be stuck with Frank's method.
Firefox: Sic transit gloria mundi.

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted February 19th, 2009, 9:10 pm

Ed, which image is Windows stretching? In CSS, AFAIK stretching a background image is not possible.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

ehume

User avatar
 
Posts: 6714
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted February 19th, 2009, 10:07 pm

In the top image, you can see that the "Clear List" button background is a series of stripes of ever-darkening color. In the lower picture, the image is the same, but smaller (I know this because I have cut and pasted these things into Paintshop Pro and enlarged them). So the OS is doing something we can't do in css.
Firefox: Sic transit gloria mundi.

Frank Lion

User avatar
 
Posts: 17709
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist... United Kingdom

Post Posted February 20th, 2009, 7:29 am

ehume wrote: So the OS is doing something we can't do in css.

Quite right. I did some work on msstyles ages ago and for horizontal expansion they, as I mentioned, chop or repeat (which I picked up from looking at the images used) But, and I didn't notice this at the time, as I never changed OS font sizes, for vertical expansion, they do indeed zoom (stretch) to fill the vertical area.

I didn't think we could do this in css and just checked and it 'can't be done'. That is not strictly true - if it was really important, there is a way, but it involves js and css. Of course, you could also use a conditional technique to swap to a zoomed version of the image, when the conditional criteria was matched.

However, the graphics answer to this, which I've used in the past, is really very simple - position an oversize background image using center center !important ...that's it. As the required vertical space increases then more of the lower and upper part of the image is revealed, unlike the default top left position where just the lower part would increase. If that image was a grad then it would appear to be a genuine stretched image, as long as the grad was done right.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

ehume

User avatar
 
Posts: 6714
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted February 20th, 2009, 5:24 pm

Frank Lion wrote: . . . as long as the grad was done right.


Well, that's the trick, isn't it? Getting that gradient right is a tricky trial-and-error proposition. I fussed around last night and got it right for normal text sizes (8-10). It looks OK at huge size. Not great, but OK.

I figured it would come to this after I looked at your scrollbar thumb buttons a while ago, but I was hoping . . .
Firefox: Sic transit gloria mundi.

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted February 20th, 2009, 5:52 pm

Another method you could use is to position the background-image at the top, do a repeat-x, then select the color of the bottom-most portion of the image and use that as a background-color. I did this with some buttons that are 'abnormally' increased in height by some extensions. It's a sort of fool-the-eye approach, but it works.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

ehume

User avatar
 
Posts: 6714
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted February 20th, 2009, 7:47 pm

CatThief wrote:Another method you could use is to position the background-image at the top, do a repeat-x, then select the color of the bottom-most portion of the image and use that as a background-color. I did this with some buttons that are 'abnormally' increased in height by some extensions. It's a sort of fool-the-eye approach, but it works.


I use this method for my tabs, to allow them to grow and grow.
Firefox: Sic transit gloria mundi.

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted February 20th, 2009, 8:51 pm

Frank Lion wrote:
ehume wrote:Does anyone know how to put an image in one's button so that it stretches?

Yeah, is a bear in the woods, Catholic? ;)


You crack me up, Frank. Now I have to ask... is a bear in the woods a Pope? :P
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest