How do I change the color of the back/forward/refresh/stop buttons?
I'd like to make the back/forward/refresh/stop buttons transparent. or a different color. What's the css code to do this?
Svi odgovori (8)
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.]?
- 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.
Izmjenjeno
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; }
Izmjenjeno
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/