Close tab button color
Hello guys, how can I change color of close tab button to red?
Valgt løsning
Did you want the X to be red, or did you want a red background behind a white X, or ?? Here's an example of a custom style rule that filled the X with slightly dark shade of red, and when you hover it, it changes to white on red (screenshot attached).
.tabbrowser-tab .close-icon {
fill: #c00 !important;
}
.tabbrowser-tab .close-icon:hover {
fill: white !important;
background-color: #c00 !important;
border-radius: 4px;
}
Just a thought.
You can apply custom style rules to Firefox's user interface area by creating a userChrome.css file. Firefox only reads userChrome.css at startup, but if you want to experiment with variations on it, you can use the Browser Toolbox. There's a lot more to tell about these things, but to get you started:
Sample "step by step" instructions:
Open your current Firefox profile folder -- either
- "3-bar" menu button > "?" button > Troubleshooting Information
- (menu bar) Help > Troubleshooting Information
- type or paste about:support in the address bar and press Enter
In the first table on the page, click the "Open Folder" button. This should launch a new window listing various files and folders in Windows Explorer.
Turn on display of file extensions
By default, Windows hides the .txt and .css file extensions. It is important to show them to make sure the files are named correctly. See this article for more info: https://www.bleepingcomputer.com/tutorials/how-to-show-file-extensions-in-windows/
chrome folder
The userChrome.css file needs to be created in a folder named chrome in your profile folder. Firefox doesn't create this folder during installation, so you most likely need to create it yourself.
If you have the folder already, double-click into it.
If you do not have the folder, either
- right-click a blank area and choose New then Folder
- click the New Folder button on the Windows Explorer toolbar
Name the new folder chrome (all lower case). After the folder appears (usually at the bottom of the list), double-click into it.
userChrome.css file
The userChrome.css file is a plain text file you can create as follows:
right-click a blank area of the chrome folder, choose New, then Text Document, then change the name to userChrome.css. Make sure Windows doesn't sneak the .txt file extension on there. If it does, right-click Rename until the file name is precisely userChrome.css (with that capitalized C and all else lower case).
Editing userChrome.css
Unless you've created a web page before, your system may not have any program set to open .css files. You can assign them to Notepad or to your preferred text editor. Right-click userChrome.css and choose Open With. Then choose to find a program on your computer and select Notepad, for example.
AVOID using a word processor for this purpose, as it may inject formatting codes that corrupt the file. If you want a better text editor, consider:
https://notepad-plus-plus.org/
It does color coding of the contents of known file types which makes it a bit easier to read them.
Once the file is open, you can paste in your custom style rule, for example, the one from earlier in this post.
Then save the file.
Firefox only reads userChrome.css at startup, so in order to test your change, you need to exit out of Firefox and start it up again.
Success?
Les dette svaret i sammenhengen 👍 1All Replies (2)
Try this in userChrome.css.
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 */
.tab-close-button { color:red !important; }
You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.
- Help -> Troubleshooting Information -> Profile Directory:
Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder - http://kb.mozillazine.org/Profile_folder_-_Firefox
- create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
- use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
- paste the code in the userChrome.css file in the editor window
- make sure that the userChrome.css file starts with the default @namespace line
- make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file
Valgt løsning
Did you want the X to be red, or did you want a red background behind a white X, or ?? Here's an example of a custom style rule that filled the X with slightly dark shade of red, and when you hover it, it changes to white on red (screenshot attached).
.tabbrowser-tab .close-icon {
fill: #c00 !important;
}
.tabbrowser-tab .close-icon:hover {
fill: white !important;
background-color: #c00 !important;
border-radius: 4px;
}
Just a thought.
You can apply custom style rules to Firefox's user interface area by creating a userChrome.css file. Firefox only reads userChrome.css at startup, but if you want to experiment with variations on it, you can use the Browser Toolbox. There's a lot more to tell about these things, but to get you started:
Sample "step by step" instructions:
Open your current Firefox profile folder -- either
- "3-bar" menu button > "?" button > Troubleshooting Information
- (menu bar) Help > Troubleshooting Information
- type or paste about:support in the address bar and press Enter
In the first table on the page, click the "Open Folder" button. This should launch a new window listing various files and folders in Windows Explorer.
Turn on display of file extensions
By default, Windows hides the .txt and .css file extensions. It is important to show them to make sure the files are named correctly. See this article for more info: https://www.bleepingcomputer.com/tutorials/how-to-show-file-extensions-in-windows/
chrome folder
The userChrome.css file needs to be created in a folder named chrome in your profile folder. Firefox doesn't create this folder during installation, so you most likely need to create it yourself.
If you have the folder already, double-click into it.
If you do not have the folder, either
- right-click a blank area and choose New then Folder
- click the New Folder button on the Windows Explorer toolbar
Name the new folder chrome (all lower case). After the folder appears (usually at the bottom of the list), double-click into it.
userChrome.css file
The userChrome.css file is a plain text file you can create as follows:
right-click a blank area of the chrome folder, choose New, then Text Document, then change the name to userChrome.css. Make sure Windows doesn't sneak the .txt file extension on there. If it does, right-click Rename until the file name is precisely userChrome.css (with that capitalized C and all else lower case).
Editing userChrome.css
Unless you've created a web page before, your system may not have any program set to open .css files. You can assign them to Notepad or to your preferred text editor. Right-click userChrome.css and choose Open With. Then choose to find a program on your computer and select Notepad, for example.
AVOID using a word processor for this purpose, as it may inject formatting codes that corrupt the file. If you want a better text editor, consider:
https://notepad-plus-plus.org/
It does color coding of the contents of known file types which makes it a bit easier to read them.
Once the file is open, you can paste in your custom style rule, for example, the one from earlier in this post.
Then save the file.
Firefox only reads userChrome.css at startup, so in order to test your change, you need to exit out of Firefox and start it up again.
Success?
