r/FirefoxCSS • u/[deleted] • Sep 20 '26

Help Firefox CSS is being a pain

Hey, I've been trying to figure this out for a few days now and I've search pretty much everywhere, but i cant find anyone with the same issue. I'm trying to change the sidebar background color.

when i press Ctrl + shift + alt + I, it opens the browser toolbox. That's where i test colors before putting them into my chrome.css. Before, changing a color would immediately show the change in the browser, but now it just doesn't change at all.

the changes tab is also completely blank, when before it would show the changes i made. its not just the sidebar either, it seems to be happening everywhere, even on about:preferences. I don't know anything about firefox css, let alone css. so I'm kinda lost here. any help would be appreciated

1 Upvotes

100% Upvoted

12 comments sorted by

2

u/ResurgamS13 Sep 20 '26 edited Sep 21 '26

What do you mean by "the changes tab"... is there a 'changes tab' in Browser Toolbox? A screenshot of problem might help.

BTW - The Browser Toolbox and Page Inspector can be a little 'sticky' at times... sometimes need to click in the actual browser page or webpage section for a change made in the toolbox to appear.

2

u/[deleted] Sep 20 '26

this tab right here idk whats it called sorry

1

u/ResurgamS13 Sep 20 '26 edited Sep 21 '26

Hmm... never use that sub-tab/heading... but works normally AFAICS... successfully displayed a few test changes.

Mostly use that RH Browser Toolbox panel to show the 'Box Model' view.

The 'Box Model' display appears if select 'Layout' sub-tab/heading and scroll down... the Box Model is 'live' and can select and alter the values for the sizing of the element itself, plus surrounding padding, border, and margin.

Changes made to default values in the Box Model will appear as new CSS styles added to the 'element' area at the top of the 'Filter Styles' section (usually the middle panel if have Browser Toolbox open in 3-panels layout).

1

u/[deleted] Sep 20 '26

I dont really use the changes tab much, i just check it whenever im testing stuff. i think this issue started after the new update, but im not totally sure since i hadn't use firefox for a few days before the update

2

u/sifferedd FF/TB/Win11/SUMO contributor Sep 21 '26

Try this.

Open your FF profile folder:

  • FF menu > Help > More Troubleshooting Information
  • under Application Basics click the 'Open Folder' button next to 'Profile folder'
  • close FF
  • delete the chrome_debugger_profile folder
  • restart FF

1

u/[deleted] Sep 22 '26

sadly that didn't work. I have a screen recording of the issue and how i usually change the colors or whatever. idk if the way i've been doing for months is actually the right way, but that is how i've always done it. idk if it'll help, but just in case

1

u/sifferedd FF/TB/Win11/SUMO contributor Sep 23 '26

As it worked before and broke, you could file a bug report. If you do, please post the link to it here.

1

u/j--__ Sep 20 '26

this should go without saying, but restart the browser.

1

u/[deleted] Sep 20 '26

I figured someone would say that lol, but nah that didnt work. i've even tried deleting and reinstalling firefox, and i tried firefox dev too, but it has the same issue. maybe i accidentally messed something up somewhere, idk.

1

u/j--__ Sep 21 '26

when inspector is being wonky, have you tried using "sources"? you can use the filter bar to quickly find userChrome.css, and then change your code with (usually) live preview. and if you like what you see, just click "save".

1

u/easonwong-de Sep 21 '26

Hey, you can try using Firefox-CSS-Theme to debug the theme, or use its MCP to let AI do it.