Firefox Skin.. Please Help..

well im not sure if its possible but i was wondering if you could move the drop down arrow for the back and forward buttons..

so that way for liek someof the milk themes and such it doesn't get coverd and you can still click and get the drop downs..

the best example would be like the milk beta theme

http://www.deviantart.com/view/5732073/

the arrow pointing down next to the forward button.. the one for the back is missing because its getting covered by the forward button.. so i was wondering if it was possible if i could move that arrow to the other side.. so it shows...

#141499

Why not just get rid of both of them? You can invoke the dropdown by right clicking on the button.

#141510

hmm right clicking never occurd to me.. so i guess i could do that.. although it would be nice to be able to move it regardless.. hehe..

#141550

well unhappy with just taking the arrows out.. i set out to figure out how to move it.. and after hours of frustration.. there was a simple way of doing it.. but as usual its a bit sloppy but i couldn't figure out any other way of doing it.. and this is what i came up with..

the screen shot is a personal milk theme modded from this one

http://www.aqua-soft.org/board/index.php?showtopic=13332

rounded url was taken from

http://www.aqua-soft.org/board/index.php?showtopic=14359

images were updated to look nicer.

here is the damn drop arrow for the back button.. on the left side instead of hidden under the forward hehehehe

here is how its done(these are the steps i took it might be different on yours).

things changed

in the global/toolbarbutton.css file change

.toolbarbutton-menubutton-dropmarker  {
  -moz-box-align: center;
  -moz-box-pack: center;
  list-style-image: url("chrome://global/skin/arrow/arrow-dn.png");
}

.toolbarbutton-menubutton-dropmarker[disabled="true"] {
  list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.png") !important;
}

to

.toolbarbutton-menubutton-dropmarker,
.toolbarbutton-menubutton-dropmarker2 {
  -moz-box-align: center;
  -moz-box-pack: center;
  list-style-image: url("chrome://global/skin/arrow/arrow-dn.png");
}

.toolbarbutton-menubutton-dropmarker[disabled="true"],
.toolbarbutton-menubutton-dropmarker2[disabled="true"] {
  list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.png") !important;
}

add the following in browser/browser.xml

  <binding id="toolbar-menu-button2" display="xul:menu"
           extends="chrome://global/content/bindings/toolbarbutton.xml#menu-button">
    <content>
      <children includes="observes|template|menupopup|tooltip"/>
	<xul:stack class="box-inherit toolbarbutton-menubutton-stack" flex="1">
        <xul:toolbarbutton class="box-inherit toolbarbutton-menubutton-button"
             anonid="button" allowevents="true"
             xbl:inherits="disabled,image,label,crop,accesskey,command,
                           buttonover,buttondown,align,dir,pack,orient"/>
        <xul:dropmarker type="menu-button" xbl:inherits="open,disabled"
                        class="toolbarbutton-menubutton-dropmarker2"/>
      </xul:stack>
    </content>
  </binding>

add and change the following in browser/broswer.css

if you have this set of code

#forward-button,
#back-button {
  -moz-binding: url("chrome://browser/skin/browser.xml#toolbar-menu-button");

remove it and add

-moz-binding: url("chrome://browser/skin/browser.xml#toolbar-menu-button2");

under #back-button and add

-moz-binding: url("chrome://browser/skin/browser.xml#toolbar-menu-button");

under #forward-button

replace

toolbar[mode="text"] .toolbarbutton-menubutton-dropmarker,
toolbar[mode="text"] .toolbarbutton-icon {
  display: none;
}

with

toolbar[mode="text"] .toolbarbutton-menubutton-dropmarker,
toolbar[mode="text"] .toolbarbutton-menubutton-dropmarker2,
toolbar[mode="text"] .toolbarbutton-icon {
  display: none;
}

finally add the following

.toolbarbutton-menubutton-dropmarker2 {
margin-left: -xxpx !important;
 margin-right: xxpx !important;
}

toolbar[iconsize="small"] .toolbarbutton-menubutton-dropmarker2 {
margin-left: -yypx !important;
 margin-right: yypx !important;
}

fill in the xx and the yy with the numbers you want.. you have to keep the xx's the same and the yy's the same or the button will look off...

i think that was everything.. if done right you will get the same resault i got.. just as a note you can move the arrow too far out.. it will disappear.. i had that problem so i had to make a larger transparent area on the back button so it will look the same on both sides... well enjoy!!!

soo much work for something soo simple.. hehehe

#142515