/r/FirefoxCSS
Pushing the limits of the Firefox Browser through the use of CSS.
Post your Firefox UI customizations here!
Rules (enforced)
Posts must have flair!
Follow Reddit rules
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.
Guidelines (not enforced)
Consider adding the following info to help people try your tweaks:
Screenshots should have code in comments.
Include Firefox version
When asking for help you should share your custom style to help others understand what you are doing. This is increasingly important the more custom rules you have.
List any other addons that may be changing the UI
If a custom wallpaper is used, include a link to the original.
If someone's comment solves you problem, reply to the comment to let them know, and change your post flair to solved.
Wiki
Find Helpful Knowledge and answers to common issues in /r/FirefoxCSS wiki.
Links
Subreddits
Websites
/r/FirefoxCSS
27,115 Subscribers
Does anyone know if it's possible to move the highlighted icon to the right?
14:54 UTC
Dark, minimal and flat is how I like 'em.
13:24 UTC
Tabs blocked when moving tab after changing height
03:41 UTC
MacOS Vibrancy
A request to those who have MacOS 11+. Install Firefox 126 Beta and activate the browser.theme.macos.native-theme and widget.macos.titlebar-blend-mode.behind-window keys. After enabling these keys, transparency should be enabled. Confirm or deny this.
22:00 UTC
Change background color of list of downloads?
Anyone know how to change the background color of the list of downloads shown when you click on the downloads button on the toolbar? Trying to get it matched to the background color of address and searchbar.
20:17 UTC
Search suggestions blocking address bar after new update
15:59 UTC
New Firefox Update Broke Window Control Buttons - Linux
15:22 UTC
Adding a chrome folder to all new profiles
11:47 UTC
How would I go about making this button (the plus button round). I can't find a CSS property linked to it.
02:56 UTC
Help, How to move the back and forward buttons ?
Hi, the back and forward buttons are locked so I can't move them.
Is it possible please to make them moveable so that I can move them to another toolbar ?
I guess in CSS It's not possible, but in javascript is it possible ?
I'm still using customJS : https://github.com/Aris-t2/CustomJSforFx
But I can't find a script that unlock them...
01:24 UTC
help needed, how to move toolbutton separator ?
i would like to move the toolbuttons separator 2px up and 1px to left since they look off on my userChrome using custom toolbuttons icons, thanks.
21:02 UTC
Help needed, cant find too much information about the canvas button
I would like to tweak the margin of this icon individually a little bit, something like margin-top to make it go down by 1px, but i cant find too much information about it on google results
19:57 UTC
Help needed, how do i remove this hover effect ?
i would like to remove that mouse hover effect on buttons like the reader view, pip and star button, all these buttons located on the right side of the url bar, i would like to remove that darker background effect and have same result as idle when having mouse hover on these buttons
17:33 UTC
Is there a way to make the top transparent (or use system theme)?
Also would be cool to also have the windows 7 close maximize and minimize buttons too.
Long story short: windows 7 aero border for firefox need to go brrrrrr (like in the screenshot)
15:59 UTC
Autohide toolbox but the top gets cut off
I'm using MrOtherGuy's autohide_toolbox.css code it's excellent, but like 4 vertical pixels are gone at the top above the tabs, tried using this code, top doesn't get cut off but it doesn't hide the Bookmarks Toolbar while the setting of Always Shown is on, any help please.
Here's the comparison photos not edited open the 4k overscan test pattern in a separate window to display it correctly
12:44 UTC
Make firefox transparent. But only for background.
Is it possible make Firefox transparent but not the elements like text, image in the website?
This is the CSS I'm currently using.
:root #tabbrowser-tabbox {
-moz-default-appearance: menupopup !important;
appearance: auto !important;
opacity: 0.6;
}
09:08 UTC
[FF 124] Changing tab height, but I'm not there yet
Hi everybody,
I'm using FF (latest version) on Win 11.
FF density is set to "tablet" even though I have a desktop rig, because that's what I prefer visually as a whole.
However, in that mode, tabs are a bit too high for my taste (I understand that it's for tablet purposes):
So I've found this topic and I've tried making some changes to userChrome.css:
#tabbrowser-tabs {
max-height: 26px !important;
min-height: 26px !important;
}
#tabbrowser-tabs {
max-height: 26px !important;
min-height: 26px !important;
}The result was not what I was expecting, lol:
Could you help me solve these two issues? Thanks in advance.
As a side question, I'd also like to reduce vertical spacing in Bookmark folders, menus, etc:
Thanks again.
23:41 UTC
What's the rule for how the star icon changes when a page is bookmarked
The star icon goes blue when visiting a bookmarked page. How do I change the look when it is starred?
21:19 UTC
Disable address bar select on new tab
I have a custom start page that loads on new tabs. This start page has its own search bar that i use.
The problem is that when i make a new tab, firefox auto-selects the default address bar on top, so i have to manually click on the custom search bar.
How do i make it so that firefox doesnt select the default address bar and instead selects the custom page?
I cant modify the code so i can use js on the custom search bar to auto-select it.
Perhaps there's a new tab extension that solves this problem?
17:27 UTC
[HELP NEEDED] Changing text selection color causes font to change in pdfs
I'm using the following in userContent.css
@-moz-document url-prefix(http), url-prefix(https), url-prefix(file) {
::selection {
background-color: #fd6b6b !important; /* Red background */
color: black !important; /* Black text */
}
}This is working fine on HTML, but on pdfs it causes the font of the selection to change as indicated in the attached image
05:37 UTC
Questions about customizing my new tab
I'm an absolute begginer btw, I didn't know anything about CSS 3 days ago.
How do I change the logo image into another image? I tried targetting it with "::before" or ".search-wrapper .logo-and-wordmark .logo" but didn't have much success. Maybe I made some mistake when trying to put the new image in, idk
Also, how would I go about inserting something new into the page? Like text, images with links, etc. ? So far I've only been able to replace existing elements and didn't find any resources on that online...
04:35 UTC
Help again with bottom bookmarks border, is something like this possible ?
Basically i would like to hide-disable that border but only when the bookmarks toolbar is not visible, is something like that possible ?
19:42 UTC
Thunderbird v102. How to add classic Zebra striping in userChrome.css to the email letter list?
Here is a video https://imgur.com/a/Hn50kHF
The first one in the video is v.68 like we want it, and the second one is userChrome.css modified v.102.
How can I make it work like the first one? It is so hard with CSS.
I tried this code and it didnt work iether like the old variant.
https://kb.mozillazine.org/Zebra_striping
Thank you for helping me.
17:00 UTC
Help needed, how to change border color under the bookmarks toolbar ?
Does anyone know to change the color of the border under the bookmarks toolbar with userChrome ? thanks
16:54 UTC
Help needed, how to change toolbar top separator color with css
Hi, i recently found out i can change the toolbar top separator color with the firefox color addon, but i would like to do that with userchrome instead, how can i do that ? thanks
22:41 UTC
change focus-outline-color for some webpage search boxes
Hi, on some websites there is a weird blue outline color in the searchbox. Most of them are neutral but some look like this. How can I change this?
Thank you :)
this is on github
even a simple comment window has this
12:20 UTC
I can't change post flair to "solved"
Hi I'm not able to change my post to solved, I get an error message.
Can someone help?
10:08 UTC
How to remove Firefox nav bar auto hide animation?
09:48 UTC
Is there a way to bring back the infinite scroll bar?
Last year Mozilla changed the way the scrollbar works, so that it no longer loads pages automatically when dragged downwards, and it now stops and becomes unresponsive every time a new page is loaded.
Is there any way to make it work like it did before?
02:08 UTC