How do I hide the close X on all tabs (including the active tab)?
Currently, the X doesn't show on tabs other than the active tab. Ideally, I don't want the X on the active tab either. The stanza I am using in userChrome.css is
.tab-close-button{ display: none !important } (suggested in a post in GitHub) This is the current stanza and doesn't hide the X on the active tab.
I have tried setting the value of browser.tabs.tabClipWidth to 9999 as suggested in another question and that doesn't get rid of the X on the active tab. I have also tried the following css solution :
#tabbrowser-tabs .tabbrowser-tab .tab-close-button { display:none!important; } (also suggested in another question but it doesn't hide the X on the active tab)
I searched for an extension and got a lot of links; I looked through the first three pages and nothing relevant was listed.
Modified by ender21
Chosen solution
What worked is using two stanzas together, thus :
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {display:none !important}
#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
display: none !important;}
I also tried using the second stanza alone; that didn't work.
Read this answer in context 👍 0All Replies (16)
For css usage you should contact the site that created the css your using for how they configure changes from the default FF settings.
That code should work.
Are you sure that there isn't a problem with the userChrome.css file you created?
Add code to the userChrome.css file below the default @namespace line.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {display:none!important}
It is not that difficult to create userChrome.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.
You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted.
In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as". Check that the file doesn't have a double .css file extension (userChrome.css.css).
You need to close and restart Firefox when you create or modify the userChrome.css file.
Thanks for the replies. I know how to create a userChrome.css file. I have been using one for years. It doesn't have a double .css extension. I restarted after trying each option.
I have just re-added the following stanza (and commented out the other) after exiting Firefox then restarted Firefox. The X is still on the active tab.
Does other code in the file work?
Firefox would normally hide the close X on other tabs in case a lot of tabs are open, so may test this with only two of three tabs open.
Can you attach a screenshot that shows this file?
- https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem
- use a compressed image type like PNG or JPG to save the screenshot
Thanks for replying. Most of the code in the file works. There are two stanzas relating to the colours of tabs which don't work as expected.
I currently have 20 tabs open. I suppose you don't want a screen shot of the width of the screen so my screen shot shows only the active tab and two tabs on either side.
Somewhere in a built-in style sheet for Windows, I found a rule that had a more detailed (more specific) chain, so I have been using this to modify the tab close button. You could try it with your display:none preference:
#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
display: none !important;
}
Please do not trust email confirmations with CSS, always copy from the forum. Especially because we sometimes notice a typo and fix it here, but no new email is generated.
jscher2000 said
Somewhere in a built-in style sheet for Windows, I found a rule that had a more detailed (more specific) chain, so I have been using this to modify the tab close button. You could try it with your display:none preference:#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button { display: none !important; }Please do not trust email confirmations with CSS, always copy from the forum. Especially because we sometimes notice a typo and fix it here, but no new email is generated.
Thanks. I have copied that code. What do you mean by "with your display:none preference"? Is your code to be used along with the following?
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {display:none!important}
I have just noticed that there is no space between 'none' and'!' I'll fix that and restart. No, adding a space made no difference.
Modified by ender21
Try using a space between none and !important
none !important
#tabbrowser-tabs .tabbrowser-tab .tab-close-button
{display:none !important}
the-edmeister said
Try using a space between none and !important none !important#tabbrowser-tabs .tabbrowser-tab .tab-close-button {display:none !important}
Thanks. I made that change earlier (after exiting Firefox) and restarted Firefox. The change made no difference.
ender21 said
jscher2000 saidThanks. I have copied that code. What do you mean by "with your display:none preference"? Is your code to be used along with the following?#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button { display: none !important; }
No additional rules needed. What I posted is a complete solution for hiding all tab close buttons, tested on Firefox 61 on Windows 7.
Chosen Solution
What worked is using two stanzas together, thus :
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {display:none !important}
#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
display: none !important;}
I also tried using the second stanza alone; that didn't work.
Modified by ender21
Use <pre> before and </pre> after code blocks.
For some reason, there is a closing } missing after the second rule.
jscher2000 said
Use <pre> before and </pre> after code blocks. For some reason, there is a closing } missing after the second rule.
Thanks. Edited accordingly.
It is not necessary to leave a space before and after the "!", it should work either way. The Firefox source code use these spaces to make it easier to spot the important flag (display: none ! important;)
Did you test the code with only two or three tabs open like I suggested above?
cor-el said
It is not necessary to leave a space before and after the "!", it should work either way. The Firefox source code use these spaces to make it easier to spot the important flag (display: none ! important;) Did you test the code with only two or three tabs open like I suggested above?
Thanks. I didn't test the code with only two or three tabs open. Is there any need for that now that I have code that works? I always save the session when exiting so I would have to close tabs I want to save.