These files seem to hold the current style rules for those buttons, but I haven't tried to figure out what you would need to change:

chrome://global/skin/toolbarbutton.css
chrome://browser/skin/browser.css

To view those style sheets, simply navigate to those URLs (copy and paste to the address bar).

Selectors for separate back and forward buttons:

#back-button
#forward-button

Selector for combined back/forward button (the two above are inside this one):

#unified-back-forward-button

Selectors for reload and stop when combined into the address bar:

#urlbar-reload-button
#urlbar-stop-button

Selectors for reload and stop when moved outside the address bar:

#reload-button
#stop-button

Thanks, but for some reason the css codes don't seem to work to change the color of the arrows/reload/stop button. Are the arrows/reload/stop button actually pictures and not assigned colors or something?

What rules did you try?

I was just reminded of this previous thread raising a similar question. See: Is there any way to change/modify the forward & back buttons (either using different icons or by changing their default (almost invisible) light grey color ["just" the 2 buttons; I'm not interested in a new theme, etc.]?

1. forward-button, #reload-button, #back-button {

color: transparent !important; background-color: transparent !important; background-image: none !important; -moz-appearance: none !important; }

I've tried other things too, but they only change the background area around the icons. Nothing I tried so far changes the color of the icons.

I have my app button, icons, tabs, url address, and bookmarks all in the top bar to get the most space out of firefox..The arrow & reload icons only look the way I want them to look if I move them to the navigation bar below the tabs and app button..

Here's a picture.... http://i50.tinypic.com/2hxpvdt.png

For some reason the icons change back to default when I move them in the top bar. I'm using an extension called Stratiform to get the arrows/reload icons to look transparent, as is the way they look in the bottom pic. I want them to look like that in the top bar but they don't.

The top bar where the Firefox button lives is a weird mashup of a toolbar and the standard Windows title bar. I've found it difficult to write rules for that area.

How are you changing the orange Firefox button to an icon?

Stratiform extension + this in stylish....

 .... #appmenu-button {
     padding: 0px 0px 0px 0px!important;
     background: none !important;
     border: none !important;
     box-shadow: none !important;
    
   }
   
   #appmenu-button .button-text,
   #appmenu-button .button-menu-dropmarker {
   display:none !important;
   }

is there anyway to move the tabs and firefox/app button down to the nav bar? than i think the arrows/reload icons would stay the same.

You can't move the tabs out off the tab bar.
You will have to move all buttons from Navigation Toolbar to the tab bar.

• Movable Firefox Button: https://addons.mozilla.org/firefox/addon/movable-firefox-button/