MozillaZine

firefox skinning equivalent of this...

Discuss application theming and theme development.
Rexel
 
Posts: 77
Joined: March 26th, 2009, 3:44 pm

Post Posted April 8th, 2009, 3:22 pm

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..

Aronnax!
 
Posts: 1006
Joined: October 1st, 2004, 10:24 am
Location: Germany

Post Posted April 8th, 2009, 3:44 pm

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
Last edited by Aronnax! on April 8th, 2009, 4:46 pm, edited 1 time in total.

Rexel
 
Posts: 77
Joined: March 26th, 2009, 3:44 pm

Post Posted April 8th, 2009, 4:34 pm

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

Rexel
 
Posts: 77
Joined: March 26th, 2009, 3:44 pm

Post Posted April 27th, 2009, 2:45 pm

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.

Rexel
 
Posts: 77
Joined: March 26th, 2009, 3:44 pm

Post Posted April 29th, 2009, 2:37 pm

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.

Image

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.

Aronnax!
 
Posts: 1006
Joined: October 1st, 2004, 10:24 am
Location: Germany

Post Posted April 29th, 2009, 2:56 pm

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

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

Post Posted April 29th, 2009, 3:25 pm

"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...
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.

Rexel
 
Posts: 77
Joined: March 26th, 2009, 3:44 pm

Post Posted April 29th, 2009, 3:32 pm

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.
Last edited by LoudNoise on April 29th, 2009, 6:00 pm, edited 1 time in total.
Reason: Language edit

Rexel
 
Posts: 77
Joined: March 26th, 2009, 3:44 pm

Post Posted April 29th, 2009, 3:34 pm

"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?

Aronnax!
 
Posts: 1006
Joined: October 1st, 2004, 10:24 am
Location: Germany

Post Posted April 29th, 2009, 4:04 pm

Rexel wrote:the background-position allows you to control that?


yes

LoudNoise
New Member

User avatar
 
Posts: 40048
Joined: October 18th, 2007, 1:45 pm
Location: Next door to the west

Post Posted April 29th, 2009, 6:04 pm

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.
Post wrangler
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest