these settings are for m2 gui skinning
these settings just cut the image up so that the left border and right border from the image are 8px, 18px...
Tab.Active.Image=control\tab_active.png
Tab.Active.Image.StartOffset=8
Tab.Active.Image.EndOffset=18
Tab.Active.Image.Stretch=0
...and the mid section of that image is repeated along the length of the tab width up to the right border.. I think you get the idea.
So what is the mozilla/firefox css equivalent of getting the same thing done..
firefox skinning equivalent of this...
-
- Posts: 1006
- Joined: October 1st, 2004, 10:24 am
- Location: Germany
- Contact:
Re: firefox skinning equivalent of this...
I use in my new FF 3.5 themes versions now a -moz-border-image: solution
http://www.takebacktheweb.org/
One image ... settings just cut the image up so that the left border and right border ... the mid section of that image is repeated along the length of the tab width up to the right border..
This is exactly how -moz-border-image stuff works.
An example from my themes:
.tabbrowser-tab[selected="true"] {
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab-active.png") 0 3 repeat stretch;
}
More about it:
http://ejohn.org/blog/border-image-in-firefox/
Cheers
http://www.takebacktheweb.org/
One image ... settings just cut the image up so that the left border and right border ... the mid section of that image is repeated along the length of the tab width up to the right border..
This is exactly how -moz-border-image stuff works.
An example from my themes:
.tabbrowser-tab[selected="true"] {
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab-active.png") 0 3 repeat stretch;
}
More about it:
http://ejohn.org/blog/border-image-in-firefox/
Cheers
Last edited by Aronnax! on April 8th, 2009, 4:46 pm, edited 1 time in total.
-
- Posts: 77
- Joined: March 26th, 2009, 3:44 pm
Re: firefox skinning equivalent of this...
I'm surprised this hadn't already been implemented :S
anyway thanks it does work.. guess I'll work on the theme for 3.5 then
anyway thanks it does work.. guess I'll work on the theme for 3.5 then
-
- Posts: 77
- Joined: March 26th, 2009, 3:44 pm
Re: firefox skinning equivalent of this...
hmm so I had better look this "-moz-border-image: solution "
but really its not at all as useful as the m2 skinning method..
reason being is that well you still have to a have a border in order to use it.. so for purpose of a background hover.. that appears behind a toolbarbutton stretches the mid section, and left/right sides remain properly fixed.. while not having to make things look extra fat by adding in a border width.. this solutions seems to suck.. maybe I'm missing something.. but I don't want to be using a border width...
-moz-border-image:
does not at all compare to the m2 background image slicing method.
but really its not at all as useful as the m2 skinning method..
reason being is that well you still have to a have a border in order to use it.. so for purpose of a background hover.. that appears behind a toolbarbutton stretches the mid section, and left/right sides remain properly fixed.. while not having to make things look extra fat by adding in a border width.. this solutions seems to suck.. maybe I'm missing something.. but I don't want to be using a border width...
-moz-border-image:
does not at all compare to the m2 background image slicing method.
-
- Posts: 77
- Joined: March 26th, 2009, 3:44 pm
Re: firefox skinning equivalent of this...
just for anyone who doesn't get the m2 method of
"Tab.Active.Image=control\tab_active.png
Tab.Active.Image.StartOffset=8
Tab.Active.Image.EndOffset=18
Tab.Active.Image.Stretch=0"
seeing as its not really a css spec, and just a specifically designed for m2.
Why isn't there css spec with this method.. this entire -moz-border-image method is well a bit rubbish in way.. specially if you dont' want to be adding any extra border width.. which in Firefox seeing as toolbar buttons/tabs already take up enough space adding more border width is just stupid.. or going through the huge hassle of resizing existing settings just so that a border-image method fits in once you've messed about fine tuning border width.. its crap.
.. this method just implements the fine tune control over slicing an image, still allowing the stretch/tile while just rendering it like a background image, not extra border width nonsense.
"Tab.Active.Image=control\tab_active.png
Tab.Active.Image.StartOffset=8
Tab.Active.Image.EndOffset=18
Tab.Active.Image.Stretch=0"
seeing as its not really a css spec, and just a specifically designed for m2.
Why isn't there css spec with this method.. this entire -moz-border-image method is well a bit rubbish in way.. specially if you dont' want to be adding any extra border width.. which in Firefox seeing as toolbar buttons/tabs already take up enough space adding more border width is just stupid.. or going through the huge hassle of resizing existing settings just so that a border-image method fits in once you've messed about fine tuning border width.. its crap.
.. this method just implements the fine tune control over slicing an image, still allowing the stretch/tile while just rendering it like a background image, not extra border width nonsense.
-
- Posts: 1006
- Joined: October 1st, 2004, 10:24 am
- Location: Germany
- Contact:
Re: firefox skinning equivalent of this...
Rexel wrote:Why isn't there css spec with this method.. this entire -moz-border-image method is well a bit rubbish in way..
Yes, why? Heaven knows, but who cares
To bug the W3C with your wishes
You can use the usual well known CSS stuff .. and new with FF 3.5 is -moz-border-image and multiple background images http://www.w3.org/TR/css3-background/#layering
Still not enough? Then build your own browser and invent your own CSS
Cheers
- ShareBird
- Posts: 2740
- Joined: December 8th, 2004, 7:09 am
- Location: Berlin | Made in Brasil
- Contact:
Re: firefox skinning equivalent of this...
"there is no data. there is only xul"
Because my theme still compatible to FF 1.5 - 1.6a1 I use XBL to do this...
Because my theme still compatible to FF 1.5 - 1.6a1 I use XBL to do this...
-
- Posts: 77
- Joined: March 26th, 2009, 3:44 pm
Re: firefox skinning equivalent of this...
this Layering multiple background images... it seems like it might come close with a lot more hassle in manual providing pre sliced images (instead of just doing as above).. but even then I'm thinking.. it repeats each layer? so while I could provide [left image], [center image(repeated)], [right image].. the center image would still get shown behind the left/right images transparent areas.. , unless I'm not reading it all cleary and the background-position allows you to control that?
would also be nice if w3c could be bothered to provide decent visual examples of the more complicated css declarations -it would help.
"To bug the W3C with your wishes".. might have to do that
"-moz-border-image" ...nah given up on that... just pointless for using in the FF UI imo.. maybe for certain webpage it'll come in handy-maybe... but trying to implement that into things like tabbar buttons or tabbutton graphics while making a decent skin looking .. pointless everything just looks bloated and **** because you have to have increase the border width just to see any of the sliced image.. tis stupid really... that same level of slicing control,stretch/repeat etc over a background image instead where you can leave existing border widths if any alone and not have to mess about readjusting everything.
would also be nice if w3c could be bothered to provide decent visual examples of the more complicated css declarations -it would help.
"To bug the W3C with your wishes".. might have to do that
"-moz-border-image" ...nah given up on that... just pointless for using in the FF UI imo.. maybe for certain webpage it'll come in handy-maybe... but trying to implement that into things like tabbar buttons or tabbutton graphics while making a decent skin looking .. pointless everything just looks bloated and **** because you have to have increase the border width just to see any of the sliced image.. tis stupid really... that same level of slicing control,stretch/repeat etc over a background image instead where you can leave existing border widths if any alone and not have to mess about readjusting everything.
Last edited by LoudNoise on April 29th, 2009, 6:00 pm, edited 1 time in total.
Reason: Language edit
Reason: Language edit
-
- Posts: 77
- Joined: March 26th, 2009, 3:44 pm
Re: firefox skinning equivalent of this...
"Because my theme still compatible to FF 1.5 - 1.6a1 I use XBL to do this..."
0_o?
I'm not following... what are you saying exactly?
0_o?
I'm not following... what are you saying exactly?
-
- Posts: 1006
- Joined: October 1st, 2004, 10:24 am
- Location: Germany
- Contact:
Re: firefox skinning equivalent of this...
Rexel wrote:the background-position allows you to control that?
yes
- LoudNoise
- New Member
- Posts: 39900
- Joined: October 18th, 2007, 1:45 pm
- Location: Next door to the west
Re: firefox skinning equivalent of this...
Rexel
You mind dropping the four letter words? faq.php?mode=rules#f41 .
Also, are you developing a theme? I ask because this seems to be a discussion about the merits of particular technologies. If that is the case it really belongs in Tech rather than here.
You mind dropping the four letter words? faq.php?mode=rules#f41 .
Also, are you developing a theme? I ask because this seems to be a discussion about the merits of particular technologies. If that is the case it really belongs in Tech rather than here.
Post wrangler
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."