I’m customizing the close button in Firefox’s titlebar using CSS. I want the button to stay red (#f25056) at all times, including when hovered or focused. Right now, the button changes color on hover, but I want to prevent that and have it remain red consistently.

Here’s the CSS I’ve been using:

#TabsToolbar .titlebar-buttonbox-container .titlebar-close {
  background: #f25056 !important;
  overflow: hidden !important;
  transition: background-color 200ms ease !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-close::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 2px;
  height: 9px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 1px;
  transition: 200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-close::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 2px;
  height: 9px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 1px;
  transition: 200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::before,
#TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::after {
  opacity: 1;
  top: 50%;
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-close {
  background: #f25056 !important;
  overflow: hidden !important;
  transition: background-color 200ms ease !important;
}


#TabsToolbar .titlebar-buttonbox-container .titlebar-close::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 2px;
  height: 9px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 1px;
  transition: 200ms;
}


#TabsToolbar .titlebar-buttonbox-container .titlebar-close::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 2px;
  height: 9px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 1px;
  transition: 200ms;
}


#TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::before,
#TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::after {
  opacity: 1;
  top: 50%;
}

This is the theme I've been using: https://github.com/datguypiko/Firefox-Mod-Blur

Hello, I am a complete beginner who vaguely remembers CSS coding from a few years ago. I just got Firefox after uBlock suddenly stopped working for youtube on chrome. I love the customization you can have but the urlbar is too long and obstructs eventual images I want to put, also it's not aligned to the left which leaves a void next to the refreshg button which I do not like. Anyway, i tried to fix this but I don't know where to even begin. Any help would be appreciated

https://preview.redd.it/vink4t6o668e1.png?width=1920&format=png&auto=webp&s=a1085c676215456a06f56b6eedeedbfb831ea287

I am trying to figure out how to hide the new tab button but I am just starting out.

/* Hide the New Tab button in the vertical tabs sidebar */

.tabs-newtab-button {

display: none !important;

}

Hi. I've google for answers to the following question (which has been asked by others for years, apparently), but the solutions I've found so far seem to no longer work, at least for me. I appreciate your patience and assistance. So... how can I disable/hide or at least erase the 'Recent bookmarks' list? I do NOT want to delete the actual bookmarks, just the list that's kept of those I recently revisited. It seems odd to me that I can set Firefox to erase or just not save other data, but it obstinately saves this list. I'm surely missing something. Is there a way? Thanks again!

https://preview.redd.it/vwfbajchsx7e1.png?width=1366&format=png&auto=webp&s=b4c6db53abf69322cba3c583e71b8c5af5f3f8bf

I was using the following to hide the entire toolbar so that it only showed the webpage and nothing else, brought up the searchbar with CTRL + L but now it's broke like the image. What adjustments do I need to make to revert back to the previous state? Thanks in Advance

:root {
--arrowpanel-border-radius: 0px!important;
}
#titlebar {
display: none !important;
}
#nav-bar.browser-toolbar {
margin-top: -40px !important;
}
#navigator-toolbox {
border: none !important;
}

#urlbar {
top: 20vh !important;
}
#urlbar-input {
text-align: center !important;
}

It's so frustrating, i want both of two worlds

i want the overall design and stability of this mod : https://github.com/akkva/gwfox

But i just want the url bar on top like arcWTF https://github.com/KiKaraage/ArcWTF , how could i do that ?

PLUS it's super annoying when i want to change the place of the window, because there's not enough space because no url bar on top.

Can anyone help me with getting a single tab button on the far right of the tab bar just above where the burger button is please. I have been using the 'Close Tab Button Quantum' extension but the recent update to 133.0.3 has changed the hover highlight colour so I can't see the black X against my black theme when I hover over it (OCD nightmare).

EDIT:- forgot to mention that I have removed the close tab buttons from the individual tabs already and only want one close tab button on the far right side.

Changing the hover colour to something else would also.

Any help is appreciated.

Thank you.

https://preview.redd.it/n48qtugbvs7e1.png?width=47&format=png&auto=webp&s=348b58a56ab789c92a0f2c62b71319c278596137

is it possible to change this icon?

Is it possible to change the default folder icon for folders in the sidebar, and to set a custom icon for any bookmark in the sidebar?

I've seen and tried several different lots of code but I can't get any of them work. Of course, I may be doing something wrong but some of the code is months, or even years, old and possibly isn't relevant to current versions of FF. I'm new to CSS code but I've set my preferences to use CSS and already have a working userContent.css which changes the background of my new tabs and home page.

https://preview.redd.it/45c408fn7o7e1.jpg?width=1139&format=pjpg&auto=webp&s=af34da1564501026219624332d26af7e74c7f9a5

For example, this is the screenshot of https://www.goodreads.com - background must be white. I do not remember that I set gray somewhere...

In about:preferences the page background became white on switching Website appearance to white...

https://preview.redd.it/vgtwwdzg9o7e1.jpg?width=753&format=pjpg&auto=webp&s=22b913e649fb8dbba09c71bcc9eac75a128c80ae

https://github.com/SasoDuck/FirefoxCSS/blob/main/2024-12-18%20userChrome.css

Link to my current css above (updated with my actual current CSS... whoops). I've tried various forms of replacing the old code I had with what was provided in this thread but haven't been able to get it to work. Am I inserting the new code incorrectly? Is something in my other css items interfering with the tab bar code?

Thanks in advance for any assistance

Hey folks! I'm having a weird interaction between Sidebery and Ultima. On my old computer (running Beta channel), Sidebery accepted the light/dark theme from the system setting appropriately. On a fresh install on a new Win11 system running the Stable channel, Sidebery incompletely or does not follow the system theme for all of the elements, making it unusable in dark mode.

I've linked to my Ultima github issue with pics here, and have tried several troubleshooting steps.

1. I have tried to pull the working profile from my old computer. This straight up does not work at all and Firefox forces a new profile to be made.
2. Sidebery without Ultima accepts the theme properly, and transitions between light/dark mode properly. Only once Ultima is installed does the issue come up.

Any insight y'all have would be super appreciated. I'm not particularly well versed in CSS or theming, so I'm not totally clear where to even start debugging. Thanks!

Previously when I opened Firefox I could easily differentiate between what tabs I had already loaded as they had standard white text whilst the unloaded tabs had a grey text to them. After updating today to 133 it naturally broke most of my custom CSS and now by default all tab text is just white making it impossible to tell the difference between loaded and unloaded tabs. Is this still possible to achieve this?

This CSS snippet adds context menu icons in Firefox, as well as popup menu icons.

Features

• Adds icon to almost every entry in context menus and toolbar popups
• Uses Firefox's built-in icons as much as possible, and matching inline icons otherwise
• Adds checkboxes to toggleabble menu items (such as "Loop" in video context menu)
• Icons are slightly dimmed relative to the text (75% opacity). Can be modified by --uc-popup-menu-icon-color variable

Link:
https://gist.github.com/emvaized/a379d61ed8970e5711ca7278a39c1895

https://preview.redd.it/v08fwv9hgg7e1.png?width=1406&format=png&auto=webp&s=0d049f7e0d6d736e869934ada7e9bd85d2be405d

Hi!

I'm using a custom theme, trying to using with Mica in W11, it was working great until a few days ago and I don't know what happened. The colors are off, the blur only works sometimes, the buttons and spacing are completely weird (although this only happens when its fullscren), the dropdown bookmark tab doesn't work...

I've tried to use Firefox without any themes and there are some things that are still broken, so I think the about:config settings must be doing something weird.

Here is a screenshot of the theme, this is the theme I'm using (I can't attach a pastebin because there are many files) and this is the code I'm using for the dropdown bar (i added it at the end of the base.css file). I don't know how to export the about:config settings tho.

I appreciate any help! Thanks!

I now have an iMac m4 and the letters in FireFox in the tabs and url bar are very small. Also the background of the URL no longer changes to blue but to light gray. How can I change all this?

Something changed in nightly (135) where the sidebar customizations changed? I once used a css file from MrOtherGuy which would let the sidebar expand on hover. Also, I could find before how to adjust opacity of the sidebar, I no longer can. I expect it's just how you call the sidebar in css that has changed? I'm quite willing to wait until whatever changes they are become part of the stable build to find out.

This update my custom css from gwfox, really like it. no zen browser just firefox with my customization

https://preview.redd.it/oui5istnnb7e1.png?width=1474&format=png&auto=webp&s=d7553c96804aec84574eb602b6b985ab347cc724

https://preview.redd.it/9voka2mtnb7e1.png?width=1463&format=png&auto=webp&s=95442381c0c593658417afa59b3a246ac6172311

There is this really nice custom CSS that was postet here a couple months ago:

https://www.reddit.com/r/FirefoxCSS/comments/1e6f2zg/a_clean_and_compact_firefox_theme_designed_to/

I followed all the steps but just can't get it to work. (I am using Firefox Nightly on Mac.)

I followed the following steps:

• about:preferences
  • Set appearance to automatic.
• about:configRequirements
  • Set toolkit.legacyUserProfileCustomizations.stylesheets to true.
  • Set svg.context-properties.content.enabled to true.
  • Set widget.non-native-theme.use-theme-accent to true.

and I pasted the chrome folder into the profile folder of firefox.

Restarted the browser but no change.

Am I missing something? (Some people complained that some custom CSS seem to be broke with some newer update of firefox.)

I am greatfull for any help with this issue, cheers!

My firefox window is too tall and now there's a void where the buttons should be. Latest update killed off my buttons but I managed to bring them back, but they still aren't in their little nook.

https://preview.redd.it/bzimivgmq57e1.png?width=1394&format=png&auto=webp&s=6d9fbe9a1e8dbd5cfedbc0db3c005916dfa4bb44

https://pastebin.com/zksR8C4e (Userchrome.css)

I could hide URL-bar with the code below, but it doesn't work anymore-

#navigator-toolbox{

overflow: var(--is-bar-visible);

width: calc(100%) !important;

min-height: 0px !important;

height: 0px !important;

padding-left: 180px;

border-color: transparent !important;

opacity: 0;

transition: 0.1s !important;

} in userchrome.css

https://preview.redd.it/p4mci9icy07e1.png?width=1920&format=png&auto=webp&s=e5ed52ad1ac2f7bc7b833e0b6053c94a82ad863c

Now, the translucent url bar is fixed on the top of the window.

How can I deal with it on userChrome.css?

Hi,

I had this CSS config for long time. It broke once updated to 133.0. And I would like some help.

It URL-Bar should be visible only as it has focus or hovered like in second screenshot, otherwise it auto-hide.

Here are a couple of screenshots:

Neither hovered nor focused

Hovered or focused

EDIT: I want as long the tab bar is not hovered nor url-bar has focus. It to be hidden. Like this screenshot. Notice that in post. The URL is overlapping the tabs bar. The expected is like this screenshot

https://preview.redd.it/t0zz51hza07e1.png?width=1920&format=png&auto=webp&s=ceed1b8e14a9154aec58c486d054d62836ad9176

Code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
* {
  font-family: "Iosevka" !important;
  font-size: 12px !important;

  --arrowpanel-background: #11171D !important;
  --arrowpanel-border-color: #0D1217 !important;
  --autocomplete-popup-highlight-color: #E0E0E0 !important;
  --autocomplete-popup-highlight-background: #80A1C1 !important;
  --toolbarbutton-active-background: #80A1C1 !important;
  --lwt-toolbarbutton-icon-fill-attention: var(--button-primary-bgcolor, #80A1C1) !important;
  --toolbar-field-focus-border-color: #80A1C1 !important;
}
.toolbar {
  background-color: #11171D !important;
}
window,
#main-window,
#toolbar-menubar,
#TabsToolbar,
#PersonalToolbar,
#navigator-toolbox,
#sidebar-box {
  background-color: #0D1217 !important;
  -moz-appearance: none !important;
  background-image: none !important;
  border: none !important;
}
.tab-background[selected="true"] {
  background-color: #11171D !important;
  -moz-appearance: none !important;
  background-image: none !important;
  border: none !important;
}
.tab-background {
  background-color: #0D1217 !important;
  border-radius: 0px !important;
  margin-block: 0px !important;
  border-bottom: 2px solid #1A2028;
}
.tabbrowser-tab:hover .tab-background {
  background-color: #1A2028 !important;
}
.tabbrowser-tab[selected="true"] .tab-background {
  background-color: #11171D !important;
}
.tabbrowser-tab[fadein] {
  max-width: 100vw !important;
}
#urlbar {
  background-color: #11171D !important;
  border-radius: 10px !important;
}
#urlbar-input, #urlbar-scheme, .searchbar-textbox {
  color: #1A2028 !important;
}
#nav-bar {
  background-color: #0D1217 !important;
  -moz-appearance: none !important;
  background-image: none !important;
  border: none !important;
  transition: margin 0.5s !important;
}
#TabsToolbar {
  z-index: 1000 !important;
}
#mainPopupSet menupopup,
menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
  border: 0 !important;
  border-radius: 0px !important;
  padding: 0px 0px 0px 0px  !important;
}
.tabbrowser-tab {
  height: 35px !important;
  z-index: 1000 !important;
  padding: none !important;
  padding-inline: 0px !important;
}
#navigator-toolbox:not(:focus-within):not(:hover) #nav-bar {
  margin-top: -40px !important;
}
.tab-line {
  display: none !important;
}
.tab-icon-image:not([pinned]){
  display: none !important;
}
#tab-content {
  vertical-align: middle !important;
}
.tab-text,
.tab-label {
  -moz-box-flex: 1 !important;
  text-align: center !important;
}
.tab-secondary-label {
  display:none !important;
}
.tab-label {
  padding-top: 5px !important;
  overflow: hidden !important;
}
.tabbrowser-tab .tab-label-container {
  margin-inline-end: 7px !important;
}
.tab-label-container {
  -moz-box-pack: center !important;
  -moz-box-orient: horizontal !important;
  display: grid !important;
  justify-content: safe center !important;
}
#tabbrowser-tabs {
  -moz-box-flex: 1 !important;
  text-align: center !important;
}
#tabs-newtab-button{
  display: none !important;
}
.tabbrowser-tab::before,
.tabbrowser-tab::after{
  display: none !important;
}
.tab-close-button {
  display: none !important;
  border-radius: 10px !important;
}
#identity-box,
#tracking-protection-icon-container {
  display: none !important;
}
#back-button>.toolbarbutton-icon {
  transform: scale(.85, .85) !important;
  animation: none !important;
  border: none !important;
  box-shadow: none !important;
}
#back-button:not(:hover),
#back-button:not(:hover) > .toolbarbutton-icon {
  background: none !important;
}
#back-button:hover,
#back-button:hover > .toolbarbutton-icon {
  border-radius: 2px !important;
}
#back-button {
  list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfiAxMSNzVLQoGBAAAAb0lEQVQoz43ROQqDUBSF4UMEESKCBBehOODK7ezSWZnGJmuI4xp+66CX9077FXc40k1o+fCSFRoOOgKLa3Z6QosrNt5EFpesDDwtLlgYSSzOmZlILY758SW7ykO+cYzwWNLjTI9HSc5XS86ypP+6Tw/fVEqhFbEZAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAzLTE5VDE4OjU1OjUzKzAxOjAwq3ccegAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMy0xOVQxODo1NTo1MyswMTowMNoqpMYAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC') !important;
}
#forward-button {
  list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfiAxMSOA3k2CXQAAAAbklEQVQoz5WRMQqDABAEF4UgKEIIPkKJii+3s7NLpY1N3qBR84axsPYOt1sYuNtdSZLEi5FG1yKk5U9tIQ86dioLiejZKC0k5sPK20JSBn4UFvJkYiG3kIwvM8npAt2Vc8J50onpFOVU7Y51PfcBtUFUSir+geUAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDMtMTlUMTg6NTY6MTMrMDE6MDDECqmDAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAzLTE5VDE4OjU2OjEzKzAxOjAwtVcRPwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAASUVORK5CYII=') !important;
}
#whats-new-menu-button,
#pocket-button,
#save-to-pocket-button
#pageActionSeparator,
#reader-mode-button {
  display: none !important;
}
#star-button {
  color: #80A1C1 !important;
}
#save-to-pocket-button {
  visibility: hidden !important;
}
#PanelUI-button {
  border-image-slice: 0 !important;
}
#urlbar-input {
  background-color: #11171D !important;
}
.urlbar-input-box {
  text-indent: 4px !important;
  padding-left: 4px !important;
}
#urlbar-results {
  background-color: #11171D !important;
  border-radius: 5px !important;
}
#urlbar-results .urlbarView-row:hover {
  color: #80A1C1 !important;
  border-radius: 5px !important;
}
.urlbarView-row[selected] .urlbarView-row-inner {
  border-radius: 5px !important;
  background-color: #80A1C1 !important;
  color: #11171D !important;
}
.urlbarView-body-inner {
  border-top: none !important;
}
#nav-bar {
  border-bottom: 0px !important;
  box-shadow: none !important;
}
#urlbar ::-moz-selection,
.searchbar-textbox ::-moz-selection {
  background-color: #E0E0E0 !important;
  color: #1A2028 !important;
}
#tabbrowser-tabpanels {
  background-color: #E0E0E0 !important;
}
urlbar > #urlbar-background {
  background-color: #11171D !important;
}
#urlbar-background {
  background-color: #11171D !important;
  color: #0D1217 !important;
  border: 1px solid #80A1C1 !important;
}
#urlbar-background:not([focused]) {
  background-color: #11171D !important;
  color: #0D1217 !important;
}
#urlbar-one-offs-header-label{
  display: none;
}
.search-one-offs > .search-panel-one-offs-header::before{
  display: block;
  content: "Search With:";
  padding-inline: var(--urlbarView-item-inline-padding) 18px;
  opacity: 0.6;
}
.checkbox-check[checked] {
  color: #1A2028 !important;
}
.browserContainer > findbar {
  background-color: #1A2028 !important;
}

Hello, first time here,

Is there anyway to remove the volume icon, whenever I switch ELEMENTS i keep clicking the icon and It would mute, I would like to listen to the audio while going to other elements it's just annoying I keep pressing it thank you!

https://preview.redd.it/rbtbhd019z6e1.png?width=219&format=png&auto=webp&s=295d7d1db43afb9acf728ea2f64b6d67b32079ac