Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

Търсене в помощните статии

Избягвайте измамите при поддръжката. Никога няма да ви помолим да се обадите или изпратите SMS на телефонен номер или да споделите лична информация. Моля, докладвайте подозрителна активност на "Докладване за злоупотреба".

Научете повече

How do I change the color of the back/forward/refresh/stop buttons?

  • 8 отговора
  • 5 имат този проблем
  • 6 изгледи
  • Последен отговор от cor-el

more options

I'd like to make the back/forward/refresh/stop buttons transparent. or a different color. What's the css code to do this?

I'd like to make the back/forward/refresh/stop buttons transparent. or a different color. What's the css code to do this?

Всички отговори (8)

more options

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
more options

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?

more options
more options

  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.

Променено на от if6was9

more options

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?

more options

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;
   }

Променено на от if6was9

more options

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.

more options

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.