Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Where to find names for buttons and toolbars for use in userChrome.css?

  • 8 replies
  • 13 have this problem
  • 341 views
  • Last reply by Bijnok

more options

I'm trying to change the layout of the new beta 8 browser, I would like to put the tab bar up into the title bar. The only problem with this is that the Home button and the New Tab button then stop working. I know that the Home button is called "home-button" but I don't know what the new tab button is called. I was merely wondering if there was a way of finding this out at all and if so how I would go about it.

Thanks.

I'm trying to change the layout of the new beta 8 browser, I would like to put the tab bar up into the title bar. The only problem with this is that the Home button and the New Tab button then stop working. I know that the Home button is called "home-button" but I don't know what the new tab button is called. I was merely wondering if there was a way of finding this out at all and if so how I would go about it. Thanks.

Chosen solution

You can use the DOM Inspector to find the IDs of toolbar buttons.

There are two new tab buttons in Firefox 4, the regular toolbar button that shows in the customize palette and the new tab button that you see on the tab bar.

#new-tab-button, .tabs-newtab-button {display:none !important;}
.tabs-newtab-button{visibility:hidden !important}
Read this answer in context 👍 1

All Replies (8)

more options

Chosen Solution

You can use the DOM Inspector to find the IDs of toolbar buttons.

There are two new tab buttons in Firefox 4, the regular toolbar button that shows in the customize palette and the new tab button that you see on the tab bar.

#new-tab-button, .tabs-newtab-button {display:none !important;}
.tabs-newtab-button{visibility:hidden !important}
more options

The MozillaZine Builds forum also has a lot of userChrome.css tweaks posted in many thread.
http://forums.mozillazine.org/viewforum.php?f=23

more options

Thanks to both of you, like I was saying google hadn't been too helpful. maybe I was just searching the wrong thing. Again, thanks!

more options

Hello,

I tried to use DOMInspector to see the details of toolbars; specifically to see the name of windows button but DOM only works with what's inside Firefox and not with the browser itself (I mean, not with toolbars, buttons...) Am I missing something? I search on the internet but I only see how to tweak pages and not Firefox itself.

Thanks !

more options

Yes, you need to inspect a Chrome window.

The DOM Inspector (DOMi) has a menu item (Search > Select Element By Click) and a button to "Find a node to inspect by clicking on it" (left icon on the toolbar).
You first need to open the browser window in the DOMi (File > Inspect Chrome Document) and choose the first from the list or choose the window that you want to inspect if you ave opened more.
Click the Find button and use the keyboard (Alt Tab) or the Task bar to go back to the browser window (do not click in the browser window).
Click that element with the mouse and keep the button pressed until you see a red border to indicate the the DOMi has located that element in the DOM tree.

more options

Nice, that was of great help. I'm a beginner in CSS too. So with DomI I found the class of my three buttons in both normal mode and fullscreen mode as shown in the picture.

Any clues, to set the fullscreen button for normal mode ? (first pic shows the normal mode class, second shows the fullscreen mode class).

  1. https://support.mozilla.com/media/uploads/images/2011-05-19-02-12-08-a830ef.png
  2. https://support.mozilla.com/media/uploads/images/2011-05-19-02-12-17-ca2b26.png

Sorry for annoying you...

more options

Finally,

I make the 3 normal button transparent with :

 #titlebar-restore,#titlebar-max,#titlebar-min,#titlebar-close {

opacity: 0 !important; }

I could have use the class name but I find it clearer in this way.

Now I need to activate the #minimize-button, #restore-button #close-button in normal mode and that'll be nice.

Modified by Bijnok

more options

Finally,

I make the 3 normal button transparent with :

#titlebar-restore,#titlebar-max,#titlebar-min,#titlebar-close {

opacity: 0 !important; }

I could have use the class name but I find it clearer in this way.

Now I need to activate the #minimize-button, #restore-button #close-button in normal mode and that'll be nice.

___________________

EDIT: this doesn't work on Win 7 (only on Xp  :( ). When I try to inspect the min/max/close button on 7, nothing happens (no red square around the button). Does that mean that FF4 does not behave in the same way for Xp and 7, meaning FF4 does not take in charge the buttons of 7?

Modified by Bijnok