I just see a black screen when I click on a video.

The toolbar button on the left is from the Undo Close Tab extension, so technically not a toolbar button and minimize maximize close are self-explanatory.

I'd like them to be rgba(251, 251, 254, 1) like the rest of the UI buttons on the toolbar.

https://preview.redd.it/9ueamxbuwzge1.png?width=1919&format=png&auto=webp&s=bee25dff42debbb39d0b567bfbb440a8c80f33d9

wish I could add a .mov to allow one to see what I am experiencing....

my entire drop down vertical bookmarks list *shifts* slightly up & down when I am cursor scanning the lists.

This anomaly only occurs when I include a 1px border around the shaded/highlighted link that the cursor passes over & or hovers. If I remove the 1px border the list becomes stable & does not slightly move.

You can't see the issue in this screenshot, as soon as I move the cursor off the menu list the highlighted link goes back to it's gray background shade. But if I select one of the links that open the 2nd menu list the entire 2nd list will vertically shift slightly downward as I move the cursor onto the list.

If I remove the css 1px border entry the entire menu settles down & doesn't move at all.

https://preview.redd.it/u2b271u71yge1.jpg?width=1253&format=pjpg&auto=webp&s=ee7e61254f25a85f87d8674ee9ef0e3a89e86a2d

This is the script I am using.........

menu.bookmark-item:hover,menuitem:hover {

background-image: radial-gradient(#C6DDF4,#92b3ce) !important;

border: 1px solid #4379bd !important;

border-radius: 2px !important;

}

here is a sample of what the border looks like.....this is not my actual browser, when one passes the cursor over every link the link is highlighted just in the manner you see here

https://preview.redd.it/pzb2xoy3dyge1.jpg?width=601&format=pjpg&auto=webp&s=b440a824b8a38113c711c8a8f1f0e8613386c764

I read in an old post (https://www.reddit.com/r/firefoxcss/comments/p2b1ln/reduce\_the\_empty\_Spacepadding\_above\_and\_Below\_The/) that to reduce the space between the icons in the toolbat there is this command

: root {-taolbarbutton-inner-padding: 3px! Important; }:

But I see that it no longer works, they have changed something, is there something to modify something in the CSS?

I followed the steps on this github https://github.com/christorange/VerticalFox/tree/main?tab=readme-ov-file

I also noticed the sidebery_styles.css does not have a comment called /*AUTO HIDE SIDE BAR*/ so my guess is that the .css code is missing those lines of code. Please help.

Also i’m on windows

With the following CSS, there's this funky gap. I'm setting .titlebar-buttonbox-container to display:none; but there seems to be a funky gap:

https://preview.redd.it/mmyk7l3qftge1.png?width=323&format=png&auto=webp&s=38d1f451a0ba0beeb7ca1a0d7fb5eed6532c6c6f

how do i remove it? thanks!

Hello, recently I switched from windows to linux and tried to use my theme, it works fine for the most part, but theres some things that I don't know if I can solve.

The first one is if there's a way to remove this

https://preview.redd.it/touute7lfsge1.png?width=1903&format=png&auto=webp&s=123d0544cb00b1d26dc5e3e678c6a8c33cedfeac

In windows the min, max, close buttons are next to the urlbar, but here in Linux there's a bar on top of all the windows and that is where those buttons are. Is there a way to change them back?

The second one is that in the about: pages i had custom settings, but now they dont work. They look like this:

https://preview.redd.it/xozy2iqyfsge1.png?width=974&format=png&auto=webp&s=91d23cb7e77eea85d55df4a9a48fa8aad97e231b

Here's a part of my code, I don't know if I have to add something else for Linux:

/* =============== ABOUT =============== */

@-moz-document url-prefix("about:"),

url-prefix("chrome:")

{

:root {

--uc-my-color: red;

--uc-my-color-hover: color-mix(in oklab, var(--color) 90%, white);

--uc-my-color-active: color-mix(in oklab, var(--color) 80%, white);

--color-accent-primary: var(--color) !important;

--color-accent-primary-hover: var(--color) !important;

--color-accent-primary-active: var(--color) !important;

--in-content-primary-button-background: var(--bgcolor) !important;

--in-content-primary-button-background-hover: var(--bgcolor) !important;

--in-content-primary-button-background-active: var(--bgcolor) !important;

--primary-button-background-color: var(--bgcolor) !important;

--primary-button-hover-background-color: var(--bgcolor) !important;

--primary-button-active-background-color: var(--bgcolor) !important;

}

treechildren::-moz-tree-row(current, focus) {

outline-color: var(--color) !important;

}

treechildren::-moz-tree-drop-feedback {

background: var(--color) !important;

}

::selection {

background-color: var(--bgcolor);

}

}

@-moz-document url("about:newtab"),

url("about:home")

{

:root {

--newtab-primary-action-background: var(--bgcolor) !important;

--newtab-primary-action-background-pocket: var(--bgcolor) !important;

}

}

@-moz-document url("about:firefoxview") {

:root {

--fxview-primary-action-background: var(--color) !important;

}

}

/* For elements in drag state */

#engineChildren .dragging {

border: 2px solid green; /* Replace with your desired color */

}

/* Change the outline color of focused or dragged elements */

#engineChildren .tree-item:focus,

#engineChildren .tree-item:active {

border: 2px solid red; /* Change 'red' to your preferred color */

}

#engineChildren .tree-item:focus {

border: 2px solid red !important;

}

Thanks!

Hi all, so I have my tabs and address bar set up like so:

https://preview.redd.it/ah24jzjs9rge1.png?width=1920&format=png&auto=webp&s=273d35c9e03f91df6ffadfcf6ec06ce2c768f571

I would however, like the tabs to be BELOW the address bar, and for the address bar autofill box to flow upward (currently, the box does NOT flow upward and instead flows down, and gets cut off by the window bounds). I'm familiar with the userChrome.css file and if you are interested in seeing what I am currently using, please feel free to ping me and I can post it here. I am using the following css files:

https://preview.redd.it/9v9gsjyearge1.png?width=1920&format=png&auto=webp&s=44e4676b2d6b06337e6005d10f942825a3c205b4

How do I target, e.g. Google Maps correctly and implement it into this snippet?

.bookmark-item[label="Google Maps"] > .toolbarbutton-icon {

width: 0px !important;

height: 0px !important;

padding: 0 0 20px 20px !important;

background-image: url("Google Maps.svg") !important;

background-size: cover !important;

}

https://preview.redd.it/3i7o4vkgrpge1.png?width=1713&format=png&auto=webp&s=00f2c40c7b1436060bb72e6287275daf8bad8c26

URL dropdown now takes nearly entire page. Started about one or two updates ago. Not sure if they changed something or the way userChrome.css works. But can anyone help. Here's my userChrome.css if that helps.

https://github.com/bonelifer/my-firefox-userChrome.css

I have used userchrome.css to remove some unused elements from my right click context menu. However, when clicking on a link, it shows some options/elements like email image or set image as desktop background. Since I rarely, if ever, use those options, how could I remove them?

I know putting the appropriate names for them in the file, usually #context-name does the job. However, I am not sure what their elements name is.

Where can I find or does anyone have the css code to make the new tab page icons bigger?

I found this thread to on the topic and tried their method. It works for menus, but not for single items. The first one works. Anyone know why number two and three don't work?

menu[id^=_2e5ff8c8-32fe-46d0-9fc8-6b8986621f3c_-menuitem-0] > .menu-iconic-left { content: url("Image.svg") !important;}



menuitem[id^=jid1-93WyvpgvxzGATw_jetpack-menuitem-_translatePage] > .menuitem-iconic-left { content: url("Translate.svg") !important;}



 menuitem[id^=uBlock0_raymondhill_net-menuitem-_uBlock0-blockElement] > .menuitem-iconic-left { content: url("uBlock Origin.svg") !important;}

https://preview.redd.it/cehwtpjpnlge1.png?width=1124&format=png&auto=webp&s=a136becb0697cabf18c1230db87fae9f307825f2

I've been looking and can't find what i'm looking for. I had it all saved in a text file, but accidently deleted that partition and lost everything on there.

Does anyone know the code to make the buttons on the toolbar bigger and add the text as well? Forward, Backward, Refresh, etc.

Basically as stated in title my userchrome changes seem broken.. or maybe some other update has just mucked around with the UI and resulted in it being broken.

I have like a auto hide setup and it basicallly just doesn't work anymore, even navigating here to write this post was a pain.

I'm on Firefox 134.0.2. Idk if it was a firefox update or maybe some extension updates which broke things.

Any one have any ideas?

EDIT: Ok so I've replaced the auto hide code I was using with autohide_toolbox.css from MrOtherGuy / firefox-csshacks.

This works pretty much like my old auto hide code (although it's much more verbose, perhaps that's required now).

The one thing I can't figure out is how to off set the toolbars like I had it before so they only take up the upper right section of the screen rather than the whole top. Like this. Currently tinkering with the code to try and figure out how to do it.

It was recommended that I repost this here…

I swear I have seen this before. I'm not talking about trimming off the https:// bit.

So because of plugins, the horizontal space for my address bar/field is not super long. However there is a site I use all the time where I need to look at the very end of the url frequently.

What I would like to have happen is that when I click inside the address bar, if the url doesn't fit within the available space, then the text field would extend to multiple lines.

As it is, I can move my cursor to all parts of the url, but I'd rather that the whole thing became visible once I clicked in the field.

Here I was given some css to try that does a right justify so the end of the url is visible when not clicked in. It does what it claims to do, which is better than nothing. However it's a little wonky when you click into it.

I am trying to move the whole Screenshot Preview dialog to under the Toolbar by modifying margin-top. It works well in Browser Toolbox, where I can change the margin for the .dialogBox element or alternatively the .dialogFrame element. However when adding the code

.dialogBox { margin-top: 10px !important; }

or more specific selector varieties thereof to my userChrome.css, nothing happens. The style does not even show up in Browser Toolbox. I have also tried to add it to userContent.css but with no result.

Is it possible to target these dialog elements in userChrome.css at all?

(To bring up the Screenshot Preview, click Take Screenshot from context menu and then click one of the two panel buttons in the upper right.)

Screenshot Preview dialog

In the show all downloads window, to the right of each download is a folder icon if it was successful or a retry circular arrow or x if it fails.

The folder and retry icons are too similar to me and I sometimes miss when it's possible to retry, thinking it succeeded.

How can I change these icons or at least change the color of one? I'm using v134.0.2 (64bit), with the default theme.

i want set fixed with for vertical tab,but when i opend bookmark sidebar,vertical tab to minimize.

how to fix this?

https://preview.redd.it/281hkq1cetfe1.jpg?width=462&format=pjpg&auto=webp&s=0e31d48aebfc790bc88eeabe734f78785925ce1e

*|div#fullscr-toggler {display:none!important;}

That's the only command I'm trying to pass with no avail.

I carefully went step by step creating a new profile according to: https://gist.github.com/MrOtherGuy/9db4690e1c459e7cedf3b8db1b39adf0

I've enable the legacy toolkit in about:config

I am new to either css and styling thing. A thing I always come to wonder is that when i open a lot of tabs it limits the width of the tab buttons to a value that shows not very much of title texts, I usually have to open drop down tab list to see the full text. I just want to make tab title texts several dozens of pixels longer so that i can briefly read something instead of showing me "(41) Y" when it is "(41) YouTube". Thanks a bunch.

Hi, I used to use userChrome.css a long time ago to hide my tabs and address bar menu completely so I can save precious screen realsate. Of course that was a few years ago and updates happen quickly on the internet. Can anyone help me? Did they change something so that the code I used to use is obsolute? I use to use:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#navigator-toolbox {
    height: 0px !important;
    min-height: 0px !important;
    overflow: hidden !important;
}

#navigator-toolbox:focus,
#navigator-toolbox:focus-within,
#navigator-toolbox:active {
    height: auto !important;
    overflow: visible !important;
}

Where I pulled that code off superuser: https://superuser.com/questions/977912/firefox-hide-everything-except-content-area-of-the-browser

I know my folder is in the right location and everything is spelled correctly and in the correct casing, so, I don't understand what I am missing. I also have the css turned on in the settings. Please help, I am just coming back into the community and the general ricing ocmmunity and I am a little rusty.

Hello, I set up a userChrome.css in order to mimic the behavior of the firefox nav/tab bar when it is in fullscreen mode. I had to do this because I have an OLED screen and want both my KDE Plasma task bar and firefox nav bar to be hidden unless I hover over them to prevent burn in. I have tab dragging working for the most part, except when I drag a tab to the very left edge or the very right edge of the draggable tab space, it essentially locks the entire nav bar opacity at 1. Below is my full userChrome.css:<br><br>

/* 
1) Fix the toolbox at the very top, ensuring it stays on top of everything 
------------------------------------------------------------ */
#navigator-toolbox {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  pointer-events: none !important;

  /* Transparent background to avoid black bar appearance */
  background: transparent !important;
  border: none !important;
}

/* 
2) Create a 5px-high "hover trigger" at the very top 
------------------------------------------------------------ */
#navigator-toolbox::before {
  content: "";
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;  /* Size of the hover trigger zone */
  pointer-events: auto !important;
  z-index: 9998 !important;  /* Above page content */
}

/* 
3) Hide all elements inside the toolbox by default 
   This includes:
     - Tab bar (#TabsToolbar)
     - Navigation bar (#nav-bar)
     - URL bar (#urlbar)
------------------------------------------------------------ */
#navigator-toolbox * {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease-in-out !important;
  z-index: 9999 !important;  /* Ensures clickability when hovering top edge */
}

/* 
4) Show the toolbox when hovering or interacting with elements inside it 
   Activation triggers include:
     - Hovering over the trigger area
     - Clicking or focusing within the toolbox
     - Dragging a tab (detected via [movingtab])
------------------------------------------------------------ */

#navigator-toolbox:hover,
#navigator-toolbox[movingtab] {
  pointer-events: auto !important;
}

#navigator-toolbox:hover *,
#navigator-toolbox[movingtab] * {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 
5) Prevent the bar from disappearing while dragging a tab 
------------------------------------------------------------ */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar,
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* 
6) Style tweaks for appearance 
------------------------------------------------------------ */
#TabsToolbar {
  background-color: black !important;
}

/* 
7) New tab button adjustments
   - The button itself (#tabs-newtab-button) is clickable
   - The icon (.toolbarbutton-icon) is styled for transparency 
------------------------------------------------------------ */
#tabs-newtab-button .toolbarbutton-icon {
  background: transparent !important;  /* Personal style preference */
  pointer-events: none !important;
}

/* 
8) Disable pointer events for back/forward buttons to avoid interference 
------------------------------------------------------------ */
#back-button .toolbarbutton-icon, 
#forward-button .toolbarbutton-icon {
  pointer-events: none !important;
}

/* 
9) Hide the toolbox again when not hovered and not dragging a tab 
------------------------------------------------------------ */
#navigator-toolbox:not(:hover):not([movingtab]) * {
  opacity: 0 !important;
  pointer-events: none !important;
}

i tried echelon and on linux (im on ubuntu 16.04) it looks weird because it was built for windows so is there any actual themes that have the australis ui that works on linux

I need help. I tried this code in my usercontent file to change the blank page background color:

@-moz-document url("about:home"),url("about:blank"),url("about:newtab") {
.activity-stream {
background-color: #191919 !important;
}
}

@-moz-document url("about:home"),url("about:blank"),url("about:newtab") {
body {
background-color: #191919 !important;
}
}

This works when i open a new tab in the browser but when i first open firefox the new tab page is still the old color. I tried everything and can't get it to work, Removing all other code out of my userchrome and usercontent files doesn't fix it so there doesn't seem to be a conflict there.

https://preview.redd.it/wuxryux3lhfe1.png?width=521&format=png&auto=webp&s=acd01f2808d8ea7e450c95618beac78cea685f0b

https://preview.redd.it/lx2wewa5lhfe1.png?width=513&format=png&auto=webp&s=62946e430ee517532d9e87c4de66710ef3a449d0

https://preview.redd.it/lm4fk0u8wife1.jpg?width=1920&format=pjpg&auto=webp&s=ec9f62a1ccb41f94a17e5be3f292552f0dc8fe8e

https://preview.redd.it/mx0u3s69wife1.jpg?width=1006&format=pjpg&auto=webp&s=e9fef3fe28cf8c0383eeeaa5e1c0acd31733179d

https://preview.redd.it/vhne4gh9wife1.jpg?width=1015&format=pjpg&auto=webp&s=8ba6d3b3f5abc0834d4d0aa1dce4f12fc7287a09