MozillaZine

Problem with skinning toolbar buttons

Discuss application theming and theme development.
chrisn
mozillaZine Admin

User avatar
 
Posts: 16
Joined: November 4th, 2002, 5:46 pm

Post Posted November 11th, 2002, 8:31 am

I'm having a problem regarding the skinning of the back and forward buttons. Take a look at the following image:

<img src="http://www.mozillazine.org/problem.jpg" width="262" height="89">

That an example of the backbutton with the "dropmarker" for the back history. The problem, that you can see on the right, is that the bounding box of the dropmarker crosses over the back button, so that you only have 2/3 of the back button that is useful, and the rest gets used by the dropmarker.

I went into browser.xml in the classic skin, and inside the toolbar-menu-button binding I tried switching the toolbar button and dropmarker so that the dropmarker appeared under the toolbar button, instead of over it:

<xul:dropmarker ... />
<xul:toolbarbutton ... />

instead of

<xul:toolbarbutton ... />
<xul:dropmarker ... />

That fixes the issue of the overlap, but when I do that the dropmarker no longer will process its clicks and show the history menu, and instead it will move back one page in the history, as if you clicked on the back button. The back button behaves as normal.

I've tried messing with the various attributes of those two elements, but to no effect (because I don't know what I'm doing). I need to get the dropmarker to appear behind the back button, but process its clicks as it normally would.

Does anyone have an idea as to how to fix this? If my explanation isn't clear, let me know.

--chris

Stefan

User avatar
 
Posts: 2051
Joined: November 5th, 2002, 2:46 am

Post Posted November 11th, 2002, 8:40 am

AtomB's post in this thread should give you a clue or two

http://www.mozillazine.org/forums/viewtopic.php?t=469

chrisn
mozillaZine Admin

User avatar
 
Posts: 16
Joined: November 4th, 2002, 5:46 pm

Post Posted November 11th, 2002, 12:47 pm

Stefan wrote:AtomB's post in this thread should give you a clue or two

http://www.mozillazine.org/forums/viewtopic.php?t=469


Actually, this has to do with event propagation, not positioning. But thanks!

Stefan

User avatar
 
Posts: 2051
Joined: November 5th, 2002, 2:46 am

Post Posted November 11th, 2002, 3:51 pm

chrisn wrote:
Actually, this has to do with event propagation, not positioning. But thanks!


OK, but from your description it seemed like you wanted to know how to make the "toucharea" of the dropdownbox smaller.
And the thread I linked to to me seems like it has code in it that show just how to do it... using CSS rect to define the toucharea.

But if you say it's not it then I guess it's not it :)

AtomB

User avatar
 
Posts: 312
Joined: November 8th, 2002, 12:22 am

Post Posted November 11th, 2002, 11:46 pm

yeah my original post was just dealing with icon sizing. i'm going to be looking into this for lynchknot and will post my results in here as well.

chrisn
mozillaZine Admin

User avatar
 
Posts: 16
Joined: November 4th, 2002, 5:46 pm

Post Posted November 12th, 2002, 5:50 am

AtomB wrote:yeah my original post was just dealing with icon sizing. i'm going to be looking into this for lynchknot and will post my results in here as well.


Cool! Any help would be appreciated. I just don't know enough about XUL at this point to figure out a solution.

AtomB

User avatar
 
Posts: 312
Joined: November 8th, 2002, 12:22 am

Post Posted November 12th, 2002, 3:49 pm

chrisn wrote:
AtomB wrote:yeah my original post was just dealing with icon sizing. i'm going to be looking into this for lynchknot and will post my results in here as well.


Cool! Any help would be appreciated. I just don't know enough about XUL at this point to figure out a solution.


hehe well guess what. i really don't know any thing about it either. i just study the .css files and try to figure out what ever thing means. i haven't had a chance to look at it yet but i'll be sitting down and working on a new theme tonight, so hopefully i'll get it figured out.

Stefan

User avatar
 
Posts: 2051
Joined: November 5th, 2002, 2:46 am

Post Posted November 12th, 2002, 11:58 pm

AtomB wrote: i haven't had a chance to look at it yet but i'll be sitting down and working on a new theme tonight, so hopefully i'll get it figured out.


Well if you can't, check out this link which deals with Image maps (touch area shapes) were also the word RECT appear (which is why I thought your other thread was related...).

http://www.w3.org/TR/html4/struct/objec ... adef-shape

AtomB

User avatar
 
Posts: 312
Joined: November 8th, 2002, 12:22 am

Post Posted November 13th, 2002, 2:48 am

thanks for that link i'll take a look at it and see what i can get figured out. i'm new to all this as well and i'm learning it as i go.

chrisn
mozillaZine Admin

User avatar
 
Posts: 16
Joined: November 4th, 2002, 5:46 pm

Post Posted November 13th, 2002, 5:53 am

Stefan wrote:
AtomB wrote: i haven't had a chance to look at it yet but i'll be sitting down and working on a new theme tonight, so hopefully i'll get it figured out.


Well if you can't, check out this link which deals with Image maps (touch area shapes) were also the word RECT appear (which is why I thought your other thread was related...).

http://www.w3.org/TR/html4/struct/objec ... adef-shape


The problem is that this isn't a matter of clickable areas. If you have an image map, and only part of the image map is clickable, events outside the clickable area don't propagate down to the element underneath the image.

The problem is that the dropmarker image in this instance has a bounding area that covers the back button. There are only two possible solutions that I see:

1) Mozilla alters their event model to allow click events to pass through transparent areas of images

or

2) The dropmarker needs to be physically placed behind the back button so that the back button isn't obscured by the click area of the dropmarker. I can't figure out how to make this happen. The two buttons are in a stack, and changing their z-order via CSS has no effect. The dropmarker still appears in front of the back button because of its placement in the stack. I've changed the order of the stack in the binding for the menubutton, but the the events don't propagate properly. Clicks on the dropmarker don't show the history menu, and instead the event becomes a "back one page in browser's history" event, even though the back button itself isn't clicked or moused over.

I don't know how to explain it better beyond that, and I can't get a grip on XUL's syntax at all.

Stefan

User avatar
 
Posts: 2051
Joined: November 5th, 2002, 2:46 am

Post Posted November 13th, 2002, 8:45 am

chrisn wrote:The two buttons are in a stack, and changing their z-order via CSS has no effect. The dropmarker still appears in front of the back button because of its placement in the stack. I've changed the order of the stack in the binding for the menubutton, but the the events don't propagate properly.


Are you familear with how z-index works?
If not, the most common misconception is that the values are "global" in the entire document. However they are in fact local.

eg take this example

<div style="z-index:1;"><p style="z-index:5000000;></p></div>

<div style="z-index:2;"><p style="z-index:0></p></div>

In this case the second <p> will be ABOVE the first one even if the first has a z value of 5 000 000 and the second 0, becuase it's parent is higher (2 is above 1).



Also isn't there also an option 3 = make the dropdown button smaller? Then it won't cover so much of the backbutton... :)

And option 4, don't use a dropdown button at all :D You can get the dropdown manu by simply rightclicking the button anyway :)

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest