What are /r/FirefoxCSS's favorite Products & Services?

From 3.5 billion Reddit comments

Huh, maybe the new version is just a Windows (and I think mac too) thing. Microphone use is indicated by a icon in the taskbar tray area.

Anyway, that old thing is a separate Firefox window, so you should be able to modify it. It's just what do you intend to do with it? You can use browser toolbox to inspect that window, while open click the "iframe selector" button in the toolbox toolbar and activate a document corresponding to the indicator thing. I can't remember what it's url is but probably something with "indicator" in its name. After you find it, you can inspect it like you would inspect any document to figure out how to do what you want.

If you really feel that each update forces you to tweak stuff (I don't see that myself but whatever) then you should probably do yourself a favor and learn a tiny bit about how to use the browser toolbox to figure out how things are styled.

That is especially important since you appear to be using some custom tab styling that could colorize the tabs any number of ways that and we have no idea how it does that.

If the search engine you want to add uses the OpenSearch manifest, for example like https://www.ecosia.org/ - then you can just right click Firefox urlbar and in the menu should be an option to add that site as a search engine. That won't set it as default search I don't think but after that "registration" is done you can go to Settings > Search and set it as default manually.

If however the website doesn't use OpenSearch then I don't think you can set it as search engine. You can add it as keyword search bookmark though. In that case, right click the search bar of that site and there should be an item "add keyword for this site"

In Browser Toolbox open the Style Editor -tab. It should list all the internal CSS files (and unfortunately for you it may also show some others).

On an element-byelement level you can use the Inspector tab to select some element and then in the side-panel select the "Computed" tab (instead of Rules) and inside it check the "Browser Styles" checkbox. Then it should show you all the properties that the particular element has.

For that top border, try this:

:root:-moz-lwtheme { /Properties for the layout Firefox uses when custom themes are enabled/ --toolbox-border-bottom-color: rgba(0,0,0,.0) !important; /Disabling the random divider line that's present when using custom themes/ }

#nav-bar { /Entire Main Toolbar containing address bar, search bar, add-on icons/ box-shadow: none !important; /Starting with Firefox 58, this is needed in addition to :root:moz-lwtheme to disable the divider/ }

Not totally sure about the bottom border, but you could probably it track down using the Browser Toolbox.

https://fonts.google.com/icons?selected=Material+Icons

I'd just spend 20 minutes scrolling through there. to make the icon consistent with firefox's conventions for toolbar buttons, save the icon and open it in adobe illustrator, or sketch, inkscape or something. you can do it by hand in a text editor but it's a lot harder.

change the artboard size to 16px and change the icon bounding box to 14px max. e.g. if the bounding box is square then make it 14px by 14px, if width/height are not equal then constrain proportions and set the higher dimension to 14px. then save as (not save) and make sure you set decimal places to 3. it's 1 by default in illustrator for some asinine reason.

then open the saved file in a text editor. I use visual studio code with the SVG extension by jock (it's the first result when you search svg) so I can open the command palette > minify SVG. that will get rid of most of the extraneous garbage illustrator adds to the icon. you'll still be left with useless attributes like x, y, xmlns:xlink, etc. but you can easily remove those. basically delete every attribute in the main svg element except xmlns and viewBox. then add width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" and you're done

btw, the theme looks very nice, even if the mica effect is fake. maybe fake is better anyway, should the real effect ever work it'll probably be riddled with bugs for a while

Me too! I simply disabled it:
https://winaero.com/how-to-restore-classic-look-in-firefox-89-and-disable-proton-ui/

No worries, and yes in the future just paste the link to a pastebin with the code :)

this is what i came up with https://hastebin.com/nocivekiqo.css

if you want an even bigger bar just change the value of line 20

EDIT: hehey. thanks a bunch. great start to a fresh account.

yeah... I don't think that's the actual profile folder. if you're using the app I think you're using, that's just a spoofed default profile used to speed up app startup. the actual profile folder is supposed to be in the installation directory. so find where firefox portable is installed. the support page says something like FirefoxPortable\Data\profile is where your real profile is. move the chrome folder there. if that doesn't work, maybe you also need to delete the FirefoxPortableSettings.ini file in FirefoxPortable\Data\settings. the support page says something like that.

that's all assuming that this program actually supports userchrome mods. the support page doesn't mention anything about it so idk. but if it does support userchrome mods I think that's where you need to put them

userChrome.css is the file recognized by Firefox where you put your CSS (Cascade Style Sheet) that will override the CSS original codes of the Firefox interface.

Spaces is not required, but it is good for you to keep your changes organized.

Also, anything between /* something */ will not be recognized. Good to use as titles or archived codes.

You can learn more about CSS here: https://www.w3.org/Style/CSS/

No, not really a list, but you can use browser toolbox to find fitting selectors for just about anything.

For menu items though, you can also usually use the label of the menu item to create a selector, like this:

menuitem[label="Close Tab"] would match menuitems that have label "Close Tab". And for the thing you asked you could thus also use menu[label="Close Multiple Tabs"] instead of the element id.

Note, its menu if the element opens a sub menu, and menuitem if it is a single item.

You would use browser toolbox to figure out selectors to use in your CSS. A list that you would want would be impossible to create since it would be practically infinite.

I'm guessing this would work, but it really depends on how you are doing your custom styling:

:root{ --tab-block-margin: 0 !important; } .tabbrowser-tab{ padding-inline: 0 !important; } .tab-context-line{ display: none !important; } .tab-background{ border-block: 2px solid var(--identity-icon-color,transparent) !important; }

You can figure out this and more using browser toolbox

> Is it possible to catch the css for example the one in the version 88. And then use it as userChrome?

Well, technically yes but the internal styles are thousands of lines of CSS. And, it would still not be the same still because CSS is just descriptions to how to show the document structure. But the document structure was changed and there's absolutely nothing you can do to that with CSS.

> Also, is there any way to debug firefox interface to get objects ids and tags to update them css?

Of course. Browser toolbox

> This objects names changes between updates?

Yes, the document structure (DOM) was changed somewhat.

> Do i have to make copies of userChrome before updates?

No, Firefox never writes anything to userChrome.css. I mean there's no harm backing it up but it's not required by any means.

> And one last question bit related, does the other firefox have sync, the wich one maked for maintenance business. And if do, is a big change between firefox?

Do you mean Firefox ESR (Extended Suppot Release)? Yes, I believe it has sync. I believe the old ESR cycle is nearing it's end so right now there should be two ESR releases - the old one is based on Firefox 78 and the new one is based on 91. Support for the old 78 ends in a few months though I think. "Normal" Firefox 91 and ESR 91 should be pretty much identical for the user.

what mods do you use exactly? you should read the tutorials on using the browser toolbox, it would take you 45 seconds to answer the question yourself haha rather than 17 hours of waiting for someone to stumble on your post. anyway you can find all the selectors and the downloads button styles in this stylesheet. personally I think scanning the inspector is a lot easier than deciphering the raw stylesheet, but it's there if you need it.

if you updated recently and have old CSS for the downloads button, it's probably because of the proton update to the downloads button. if I were you I'd just delete all your CSS related to the downloads button and start over, since they completely overhauled the appearance of the downloads button. you can still restore it to its old appearance if you want, I wrote a script just for that, but setting that up is a bit more complicated than CSS, so if you don't mind the new appearance I'd suggest just rolling with it.

Use browser toolbox to find the ID of the button you want to modify and then just override its list-style-image property:

#bookmarks-menu-button { list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important; }

Just wondering if you have ever tried to use the Browser Toolbox tool?

It's quite helpful in learning and customizing what you would like.

https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

1. For editing css without leaving the browser you can use Browser Toolbox. Use this for more info. When you are in Browser Toolbox go to Style Editor and scroll-down to userChrome.css. Edits made here will be istant.
2. Make your own theme with css because it will last long. If they are not working then you need to update them.

Use Browser Toolbox instead which also allows live-editing userChrome.css

Popup elements (including menuitems) can be found easily by disabling popup autohide (there is a toggle for this under the toolbox options button)

I just use another profile for testing. Google.

The Browser tool box is how you find the id/class...

1) somewhat possible but I'm not sure how much you'll gain from it; add these two selectors to list of selectors that set bottom margin to 0

#navigator-toolbox:not(:focus) > #nav-bar:hover, #navigator-toolbox:not(:focus) > #toolbar-menubar:hover ~ #nav-bar,

2) Definitely sounds possible but it entirely depends on what those separators actually are. tollbarseparator -elements are ones that you were able to put there in the past. However, I don't think they can anymore, so I wonder if you separators are actually something else, like perhaps they are just a border on some button. You would need to find this out using browser toolbox

Use the browser toolbox and take a look at the various scrollbars.css files in there to get started. You can't inspect the structure of scrollbars but you can figure out how to use the selectors from there.

Here's some floating scrollbar CSS which I'm going to look in to moving to this implementation.

The code is extremely simple, I kind of made it to encourage you to make some tweaks to make it look just right :)

https://hastebin.com/fahafukoha.css

the code you want

.tab-line { display: none !important; }

.tabbrowser-tab::after, .tabbrowser-tab::before { border: none !important; }

.tab-background:not([selected]) { transition: background-color .25s ease !important; }

.tab-background { border-top-left-radius: 5px; border-top-right-radius: 5px; }

.tab-background[multiselected="true"], .tab-background[selected="true"] { border-top: none !important; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.7); }

#navigator-toolbox { --tabs-border-color: none !important; }

If you are on Windows, a (heavyweight) solution would be to install AutoHotkey and use it to create a hotkey of your choice that sends "Alt + V T B" when the process name of the current window is "firefox.exe". I do this to create hotkeys for various apps, but I'm already an AutoHotkey user.

Ensure you copy the userChrome.css file and the icons folder to the chrome folder within your profile folder.

Also, try enabling legacy stylesheets, as showed here:

https://winaero.com/enable-loading-userchrome-css-usercontent-css-firefox/

Found a solution here: https://winaero.com/enable-hidpi-scaling-firefox/

Got to advanced preferences (`about"config`), search for `layout.css.devPixelsPerPx`.

​

>By default, its value data is set to -1.0, which means "follow the system settings". You can override it by changing the value to a positive number. Start changing it with 1.5 and continue until you satisfied with what you see.

​

In my case 1.4 was enough.

This would require an extensions because there needs to be interaction between website content and chrome.

Extension that colors the chrome

However, if you mean the real titlebar then even this won't work. That's controlled by OS itself and cannot be styled from within Firefox.

Seconded. I used TST for years and delayed upgrading Firefox until it was well-supported as a web extension. Then I found Sidebery and switched after less than a day.

I use following extension: https://darkreader.org/
It's easy to use, I haven't noticed any delays and the advantage is that I can turn it of via shortcut when a site is impossible to use in darkmode.

If you must insist on using a version of Firefox that supports legacy add-ons, please use Waterfox (https://www.waterfoxproject.org/en-US/).

That said, it's only a matter of time before the Waterfox developers update Waterfox to be based off of Firefox Quantum 57+.

.search-wrapper .logo-and-wordmark .logo -> userContent.css inspect with Toolbox

filter: grayscale(1); -> common css

Browser UI userChrome.css debug with Browser Toolbox

Browser toolbox is the tool to use. It's like inspecting the Firefox UI with a special version of the website inspector (and other devtools), so you will find all the properties, attributes, classes etc. good stuff with it.

You can use browser toolbox to find out how to target it. You would find that you could hide it with #star-button-box{ display: none }

Welcome!

With CSS you can modify how the browser UI looks like - you can modify it's layout. So, you can modify the color and size of elements and to some extent their position. An element is for example a toolbar (there are several toolbars), a toolbar element contains several button elements etc.

So, with CSS you can change how the existing elements are presented in the UI, but you cannot create new elements or change what the existing elements do.

The first step is obviously to figure out what you want to do. But suppose you have that, then the next step is to figure out how. For that, there is browser toolbox - yes, I know it might be a bit intimidating at first, but you can't really avoid getting your hands dirty if your intention is to learn internal styling of a very complicated piece of software.

Browser toolbox will help you figure things out.

You should find that it is #PopupSearchAutoComplete. But, since it uses a shadow tree the method to change its background might not be so obvious - this should work though:

#PopupSearchAutoComplete{ --panel-background: #f00 !important; }

no you didn't, you need to hit ctrl + shift + i. that stuff is in the content area, not in browser.xhtml. you use the content toolbox, not the browser toolbox. ctrl + shift + i, not ctrl + shift + alt + i. the css goes in userContent.css not userChrome.css. you should read the tutorials first

since the white border seems to be created by your stylesheet, nobody can fix it for you if you don't show us the stylesheet. of course you can try guessing at it, but since your stylesheet already probably uses !important rules, adding more rules won't work. I think you need to delete rules. go through your stylesheet and look for rules related to tabbrowser-tab, tab-content, tab-background, and tab-stack. the declaration you need to get rid of should say border: 1px solid... or something like that.

if the rules aren't important then you can try throwing down some scattershot rules I guess, like .tabbrowser-tab, .tab-content, .tab-background, .tab-stack { border: none !important; }

if that doesn't work you can try massively increasing the specificity (and thereby override whatever's causing the border) like this: :root #tabbrowser-tabs :is(.tabbrowser-tab, .tab-content, .tab-background, .tab-stack) { border: none !important; }

and you can always open the browser toolbox and see the rules yourself. it's very easy to find the rule, just use the element picker.

Chances are you are talking about this:

menuitem[label="New Tab"] + menuseparator{ display: none }

By the way, you can use browser toolbox to figure out what selectors to use.

You can use browser toolbox to find out.

To inspect popups you would then click the meatball menu button when in the browser toolbox and select "disable popup autohide" then right click a page to open the context menu. Now, if you click somewhere else, Firefox doesn't close the context menu anymore, and you can use the inspector view to find that menuitem. When you find it in the inspector, you will notice that it has id attribute with value context-inspect-a11y. So, in your css file you would then write #context-inspect-a11y{ display:none }

When you are done editing popups, you should probably go to that meatboall menu again and enable popup autohiding again.

You can use browser toolbox to find out this and loads of other things yourself.

But it is a <searchbar> element with id searchbar

You should probably make dedicated post and specify what changes you wish to do.

You can also use browser toolbox and figure out yourself what to do.

> a) You talk about "buttons". I talk about extension icons. Is the same?

In this case, yes. They're toolbarbutton elements.

> b) In my first comment to you (above), I posted each ID of my add-ons. Are these static IDs?

I think so.

> "Button ID" is the same as "Add-on ID"?

No. The button element's ID is derived from the Extension ID, or from a random internal Extension ID if it doesn't have one.

> c) I went to "Inspector", and in "SyleEditor" I can see CSS rules on left sidebar, but is only for webpages/webcontent. I can't see CSS rules for NavBar. Where is it?

Ah, it sounds like you're using the regular page DevTools. You want the Browser Toolbox, as described in the Sticky Post. It works the same, but is looking at the UI rather than the webpage. More details: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

> d) How do I inspect a button?

From the Browser Toolbox's Inspector, click the 'Pick an Element from the Page' button, same as you would to Inspect something on a page with the regular devtools.

edit: I'm off for now, but I'll get back to you later if you have any more questions. Good luck!

>FF beta latest version, with Dark Theme. [...] I will appreciate if you can help me converting to real white this FF icons in my NavBar.

In DevEdition (beta) with the dark theme, the code I posted above appears to fix the opacity issue for me - it's the fill-opacity property of the image element inside the toolbarbutton, so overriding opacity on the button itself won't cut it. If your buttons are still grayed, have a look with the Inspector if fill-opacity it being set elsewhere.

>With "contrast" 200% are almost invisible. So, here please I also need your help to make these 3 icons visible.

It may be that you'll need different filters on different icons. Eg, if the icon has transparency, you might get away with a brightness filter - filter: brightness(300%);.
If you pair brightness and contrast, you should be able to adjust where the black/white threshold lies.

brightness and saturate are filter functions, used just like contrast and grayscale.
Devtools' Inspector has a Filter Editor which should make playing around with them easier.

> And I myself do not know the correct words for the css-code :)

To save us both time, I'm inspecting the box using the browser toolbox on the pages you're opening and looking for the CSS selector shown here in the red box.

You can add all the ones you like before the { by adding ,[class^="<PASTE IN THE CLASS= HERE>"] > #identity-iconin until you've satisfied all cases.

I guess it's something. Still, it might be easier for you to figure this out yourself, because OS dependent styling basically requires someone to try this in same OS that you have.

Start with Browser Toolbox

There are some helpful sites out there that help you configure css settings. For example, this is a great site that helps customize your address bar/drop down menu:

https://www.jeffersonscher.com/gm/url-bar-tweaks.html

In terms of previews, have you looked into using the Developer Toolbox? You can at least see the changes you make live instead of having to save userChrome.css and restarting the browser.

you can use autohotkey to change the window style of your firefox window, ahk_class(MozillaWindowClass). there are specific styles for the window controls, meaning unskinned buttons can be removed outright. but skinned buttons can also be removed, you might be able to use CSS to isolate the window controls into their own row above everything else, and then use WinSet, Region to cut that whole row off the window. like you may not be able to move the window controls down but you could turn some other less-vital element into a -moz-box, moving everything else down, and the window controls should automatically stick to the top right corner.

check out these threads for the ahk stuff:
https://autohotkey.com/board/topic/48197-is-it-possible-to-remove-the-minimizemaximize-from-windows/
https://autohotkey.com/board/topic/21070-wincut-cut-out-piece-of-window-on-the-fly/page-2#entry149777

nice, so it's saving the note content correctly?

edit: btw I guess I changed the font in the addon stylesheet itself, didn't realize that. it uses cutive mono but I guess you don't have it installed since it looks like it's using times new roman

It is an extensions Tabliss , the image in the preview is this one.

You can config the extension to change picture every new tab , after a specific period or to stay the same.

Ok. You can think of context menu as a list of elements that are normally shown in the order they appear in the document that defines them. By default all those elements have a property -moz-box-ordinal-group with value 1 so now if you want to change the order they appear in you will need to give them some other values. Elements with value smaller value will appear before anything with larger value.

So then, the only remaining question is how to select particular element for which you can then assign some non-default value. Well, browser toolbox is the tool for that.

But, as you know context menus disappear when you click outside of them. Browser toolbox includes additional control checkbox that you can use to make context menus stay open which then allows you to inspect them. You can find that "disable popup autohide" checkbox inside the meatball menu button in the top right corner of the toolbox.

By favorites I assume you mean bookmarks? There isn't a one-size-fits-all solution. Many elements can have favicon images. Some of them (like the bookmark items in the library dialog or the sidebar) are not actually elements at all, and cannot have rules like transform applied to them. You could approach it like this:

.menuitem-with-favicon .menu-iconic-icon[src]:not([src=""]), .bookmark-item.subviewbutton-iconic .toolbarbutton-icon[src]:not([src=""]), .tabs-container .item-tabs-list .item-icon-container[style]:not([style=""]), .all-tabs-button .toolbarbutton-icon[src]:not([src=""]) { background-color: darkgray !important; border-radius: 15%; padding: 1px; } @-moz-document url-prefix("chrome://browser/content/places") { treechildren::-moz-tree-image { padding: 1px; } treechildren::-moz-tree-image(leaf) { background-color: darkgray !important; border-radius: 15%; padding: 1px; } treechildren::-moz-tree-image(query) { background-color: transparent !important; border-radius: initial; } }

I might be forgetting some. But it's easy enough to use the browser toolbox to find elements yourself.

Haha whoa, that took me back. I forgot neopets even existed. You should read the browser toolbox guide so you can find any elements in the DOM yourself and determine the best selector for them. If the separator doesn't have a unique class or ID, then I'd say using the + selector is best, like previousSibling + separator. But I'm not sure what you're trying to do. If you're trying to hide ALL context menu separators then you might wanna just do #contentAreaContextMenu menuseparator or #tabContextMenu menuseparator to hide all of them in a given menu at once.

Your best bet is to check the website: https://www.opera.com/gx

But a few features are:

• bandwidth, ram, and CPU limiting, so your browser doesn't interfere with your game
• integrated game release calendar
• twitch, discord, messenger, music player, and a host of other integrations

And more. It's just a neat browser.

are you talking about the windows taskbar? those are not favicons, they are file icons. those icons are defined by the .lnk shortcut or .exe file. maybe you should ask on a windows ricing forum but I don't think there's any way for one program to have 2 different icons, especially given that (in firefox's case) they share a parent process.

you could always merge the buttons I guess. that's what I do. right click the taskbar > taskbar settings > combine taskbar buttons: "Always, hide labels". that's what I do, but then I also use winaero tweaker to make clicking the button cycle through the windows rather than its default behavior of showing a list of thumbs. that one's quick without winaero tweaker, you can just edit a registry key

yeah flaticon.com is nice, although this is the best one for monotone icons. they added two-tone icons too though, I might start using that for bookmarks/places since the built-in places icons are two-tone. it's just a bit of a hassle to add material icons in bulk since the proportions aren't right, and I can't fix that in a text editor. need to use illustrator to change them to 14px vector in a 16px artboard. and illustrator totally butchers the SVG code so I then have to open it in a text editor and remove all the garbage attributes and metadata, and add the context property stuff. so I've been pretty lazy about it lately lol

Well finally got it working tweaked my code and works better than before thanks to /u/It_Was_The_Other_Guy for the xiaoxiaoflood which provide a detailed direct method to enabling the status bar and i eliminated some old legacy code on my own css like moz bining and some padding that previously added.

my userchrome.css code: https://hastebin.com/izihiwelub.css

screenshot: Imgur

Use this one, you can just drop these files into your Firefox folder and into your profile/chrome folder and then rename your old JS script into .uc.js

https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme/tree/master/Multirow%20and%20other%20functions/JS%20Loader

And here is your "old" JS (it comes from CCS that you linked) https://hastebin.com/raw/ehusibaxut , re-save it into profile/chrome, for example with userChrome.uc.js name

edit: Btw, i dont think you even need your "old" JS anymore, just "install" JS Loader and rename all your JS files in the profile/chrome folder into .uc.js as i told you before.

Hello everyone. Would you like to help me with this? Like on the sshot:
- History icon is now centered, I would like to move it to right side, next to the minimize button.
- Tabs bar and address bar they changed places.
My userchrome.css: https://hastebin.com/etawavucih.css
Please, help me restore it like it was in previous version.
Many thanks!

Hey would you mind sharing how you made a margin on the left and right?

The width for #PopupAutoCompleteRichResult only seems to work with a static px, like width: 900px instead of something like width: 80%. Here's what it currently looks like for me. Here's the userChrome.css currently Help a newbie out please?

issue is that you're using userContent.css - This is only for webpages.

userChrome.css is for browser styling. The elements that you're trying to change are part of the browser.

there is a built in tool for how you can get the elements that you want to change.

https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

make sure to use a userChrome.css file

Use browser toolbox. In the top right of the toolbox is a menu button, click that and one of the options should be "disable popup autohide" - select that one.

Next open the popup you want to inspect, it should now stay open even if you click somewhere else. Then back in to the toolbox, click the inspect element button in the top left, and then click on an element you want in your popup. The inspector view should now focus the corresponding node in the tree and you can find out all about it.

You can use browser toolbox to find out selectors for pretty much anything in the UI.

But yes, it should work. Usually all icons works in such a way that the icon stays exactly the same whether the button is hovered, pressed or neither. Instead the element background color changes. If for some reason the window control icons work differently on your system then the worst case is that the icon just doesn't change at all when it's hovered.

From within Firefox, the chromemargin attribute on the window element should be able to remove the borders. No good way to access that now. There's some "userChrome.js" thing floating around which is a little fragile. Or you might be able to do it with a custom XBL binding.

Otherwise, you might be able to make the window borderless with AHK or something, but then you lose shadows, I think.
https://autohotkey.com/docs/commands/WinSet.htm

I can't test Windows 7 stuff, though.

Don't show Firefox update notifications. Stop automatic updates with policies.json file.

Disable Updates in Firefox 63 and above

Alterivate Solution

https://winaero.com/disable-updates-firefox-63-above/

{

"policies":

{

"DisableAppUpdate": true

}

}

Erase Covid-19.

@-moz-document domain("youtube.com") { #clarify-box {display: none !important;} }

Don't show Firefox update notifications. Stop automatic updates with policies.json file.

Disable Updates in Firefox 63 and above

Alterivate Solution

https://winaero.com/disable-updates-firefox-63-above/

{

"policies":

{

"DisableAppUpdate": true

}

}

&#x200B;

Erase Covid-19.

@-moz-document domain("youtube.com") { #clarify-box {display: none !important;} }

Use the browser toolbox to inspect https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

From the element you inspect, you may need to go up a level or two to get to what you need.

In this case, you'd inspect the label, but need to go up a level and look at the tab-label-container class.

Use the browser toolbox. Play around with it. Look at the Rules tab, the Layout tab > Box Model, and Computed tab to see what's affecting the element and how.

https://i.imgur.com/1qogoyy.png

In this case I added margin-left: -5px; to the element to see what it would do. Since it worked, you'd then want to do this for the class: .tab-label-container {margin-left: -5px !important;} Using !important ensures it overrides others.

The #urlbar element receives a few attributes depending on what state it is in, but otherwise it should be mostly the same. You can find out exactly what changes are applied by instepecting it using browser toolbox

The "snap" directory in the user home directory is the home directory ofyour snaps. it allow users to deny snaps to read their entire homedirectory.

Ubuntu Makes Firefox Snap Default in 21.10

https://www.omgubuntu.co.uk/2021/09/ubuntu-makes-firefox-snap-default

Right click - Save as.. - Whole webpage (.htm, .html). Just saved https://weboas.is/ and it works fine.

Why can't you search from address bar? What's the point of having 3 textboxes to type in if all actions can be done in a single one? If you really want to have another search bar, you'll need some JS to set focus on it. Can't help with that.

Honestly you should just complain to Google and tell them to fix their page layout. If your window isn't wide enough then their layout just doesn't work regardless of your browser (happens in (chromium) Edge as well)

Apparently they just decide to waste all the space on the left so stuff will just overflow on the right side. Really their results page seems to be just a complete pile of shit.

You could use another search provider like https://duckduckgo.com or https://www.qwant.com The latter seems to properly scale their results view even on very narrow windows.

Note, I haven't used qwant ever before and I can't really say if it's trustworthy or not. But DuckDuckGo is pretty great.

That's because you have the default density applied for the theme. Go to Menu > Customize and next to the themes button there's a drop-down list for density. picture Choose Compact for the small back button

You might try using this method in reverse, i.e., remove your current search box by dragging it down to the box shown. Then click "Done" (lower right-hand corner). Then do the process as is shown on the page listed above.

I believe it may work by allowing FF to set the width. It worked for me.

Could you clarify what you mean? I assume that you are referring to the close/maximize/minimize buttons; that's the default KDE Plasma theme, and it's controlled by my desktop, not Firefox. You might be able to simulate it using CSS, but I don't know how. If you want help you should post your own question on this subreddit; I'm sure someone more knowledgeable would be happy to help.

Am I supposed to add

transform: translateY(-38px) !important; z-index: 2 !important;

To the end of that line, or just edit the line above?

Changing that value doesn't have any effect on the buttons on the tab line. I need them to move over to that blank space as you can see.

http://imgbox.com/ZTuVdmIx

The correct terminology is url('file:///C:/Users/InfernusZ9/Pictures/logo.jpg') but there are valid security considerations why this is blocked in modern web browsers.

The only way to get a local file to load in any web page is to run a web server on your local machine and then reference the image via url('http://1270.0.0.1/logo.png'). Unless you set up a HTTPS certificate for the localhost, the mixed content warnings/blocks can create its own problems.

The much simpler solution is to either not host images locally but use an online service that allows hotlinking, or to store the image in a data URI instead. There are converters for that, but I wouldn't suggest this method unless the images are optimized and web friendly.

You're amazing, always helping everybody, sharing your huge knowledge, thank you mate! This /r/FirefoxCSS is a great subreddit thanks to guys like you.

Thank you also for your addons. I'm sure that your last CSS with your addons plus something else, all together in the end might fill my necessities. But this way is going to be too complex for my taste. I'll request help to the community for something simpler. And if it can't be done in a simpler way, then I'll quit my idea.

But if by chance you can help me for the last time, here I have my last CSS simpler idea: In my nav bar, from left to right, window buttons, addon icon, navigation buttons, and then the url bar. Navigation icons are going to be replaced with 3 rectangles (forming a square like this). Back rectangle is going to be on top, stop-reload on middle, and forward on bottom. The 3 rectangles are going to be visible all the time, but opacity will change according to enable and disable status. Is it possible? I can live with the 3 navigation buttons always visible, but I need a sort of more condensed navigation button, a kind of 3 in 1, let's say one square formed with 3 rectangles (vertical or horizontal), or a square in the middle with two semicircles on right and left, or any kind of 3 buttons that can be condensed into the most saving space way. If this idea can be done with CSS then my needs are going to be solved. Please can you give a hand?

the button icon is there : %23ExitButton { .... }

but you can change it by doing this :

list-style-image: url('icon.svg') ;

your icon can be an svg file or png , your icon must be 8x8 or 16x16 pixels colored or not and in the root of the chrome folder, you can copy/paste a base64 image coding line too, go to iconfinder or some other icons sites to do it as https://www.flaticon.com/free-icon/x-button_458594

It's not a FirefoxCSS theme. This is a schematic diagram made by me with Figma. If you interest this design you can check it out here 😉

&#x200B;

Figma file

Hey, thank you for your (off-topic) comment and suggestion. Sure, I'm not ignoring your comment, it's very valid.

BTW, I use Enpass as my primary password manager (I actually use / test several password managers, including KeePass), and yes, I prefer the managers that allow me to manage my passwords in offline mode (at the beginning I used a lot of LastPass, until I switched to Bitwarden, and now I use Enpass, which it is more "flexible" in terms of features).

That's interesting, but I have no idea what is going on there. (Ctrl+J opens downloads for me on Windows.)

For future reference, Firefox 78 (or 79?) will treat the address bar like a search bar for purposes of "search history" and show a small number of search history matches in the drop-down as you type. Maybe that extra plumbing will be useful to you somehow eventually? You can install Developer Edition and Nightly side-by-side with regular and ESR releases if you want to give them a try.

https://www.mozilla.org/firefox/channel/desktop/

I really like ShadowFox in userContent, because it takes care of FF about:"X" pages. And I also like my buttons. So, I will going to "inspect" more, because I want to keep both.

Today I can't, but tomorrow again I will inspect everything I can, looking for more details, backgrounds in element's parents, box-shadow, border etc.

Thanks a lot for all your help, for your teachings (I learnt a lot with you), for your time and patience. You have been great with me!

PS: If by chance you want to take a look, here is a kind of clone of my FF. It is a portable FF ready to use, clean install, just with my CSS codes + add-ons. If you delete the userContent, you will see black squares disappearing.

According to CSPscanner the DuckDuckGo CSP img-src directive does allows for data: values. So instead of having a hard-coded image URL, you could have a base64 encoded version of the image.

Instead of: .header-wrap--home { background-image: url("https://picsum.photos/1920/1080") !important; ... } Do: .header-wrap--home { background-image: url("data:image/png;base64,BASE_64_ENCODED_IMAGE_HERE") !important; ... }

Hope this works out...

Perhaps that theme styles tabs very differently than normal. You can try using browser toolbox to so find what style is applied to tabs in your setup and then counter that.

You can find that and more or less everything else using browser toolbox.

The urlbar is pretty complicated though, so it changing its size may not be as straightforward as you would think. It would also depend a lot on the definition of what exactly do you mean by "adjust its height" - this would match that description for example I think, but it might not be what you intended: #urlbar-background{ inset-block: 2px !important; }

> Maybe they're called something different in proton?

you need to learn how to use the browser toolbox...

Tool to inspect the UI

https://old.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/

>Can't get the download, history and extensions buttons to work.

#downloads-indicator-anchor { list-style-image: url("image.svg") !important; } #history-panelmenu { list-style-image: url("image.svg") !important; } #add-ons-button { list-style-image: url("image.svg") !important; }

you need to download the icon to your chrome folder and then use rule like this:

#PanelUI-menu-button { list-style-image: url("menu-16.svg") !important; }

Tool to inspect the UI

Hmm, would adding this solve the vertical alignment problem?

.tltlebar-buttonbox-container{ top: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)) !important }

Anyway, browser toolbox is the tool to use to figure out just about anything you want about the Firefox UI.

Sorry, I can't really help you debug Win7 specific stuff.

> But I'm curious, Is there a list somewhere where I can find all the names of the icons and buttons so I don't get stumped like this again?

You should use browser toolbox for that. It's like the website inspector but for Firefox UI.

You would use Browser toolbox to find what selectors to use to target specific parts of the UI. Browser toolbox also shows you what styles are currently applied to each elements per Firefox's internal rules.

honestly I have no idea, since your CSS is just full of import rules and I have no way of knowing what they lead to. I'm not familiar with the pack you're talking about. I haven't used anyone else's stylesheets before so I'm probably not the right person to ask about that. personally the way I'd go about solving this would be to use the browser toolbox.

after all, it's not like I have all this information memorized and can rattle it off on-demand. the only reason I'm able to answer any of your questions is because I learned how to use the devtools so I know how to find the answer. so you can do the same, and since you're the one experiencing the problem you'll actually be able to see it, whereas I'd just have to make a lucky guess.

you can turn off popup auto-hide by clicking the 3 dots button at the top of the browser toolbox. then click in the searchbar, type something, then alt+tab back to the browser toolbox and the search panel will stay open. then you can just use the element picker to click it, and view the popup in the inspector. there you can see where its background color is coming from, which will tell you what stylesheet you need to edit.

if you're trying to combine stylesheets and stuff this is something you should get familiar with anyway. can't expect disparate stylesheets to play nicely together without modifications. you either have to get used to changing things yourself, or just pick one theme and accept it the way it is. I have some useful links for learning this stuff down here at the bottom

To keep menus from closing when you switch focus to the Inspector:

There's a little ... menu on the right side of the Inspector with that optionor you can toggle this in about:config: ui.popup.disable_autohide => false

You'll want to change it back because it gets annoying to always have to tap the Esc key to close menus.

Spotting shadow trees -- they have a shadow-root element as shown here:

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#shadow_roots

This should work:

:root{ --arrowpanel-border-radius: 0 !important; --tab-border-radius: 0 !important; --toolbarbutton-border-radius: 0 !important; --arrowpanel-menuitem-border-radius: 0 !important; } .menupopup-arrowscrollbox{ border-radius: 0px !important; }

To get started with browser toolbox you should probably read the MDN article

It shouldn't have been there everI think. That toolbox (F12) shows styles that apply to that page so userContent.css could be there, but userChrome.css applies to Firefox UI so you would use browser toolbox to find it - among quite a lot of other files.

You can use browser toolbox to inspect the browser like a web page so you can figure it out yourself.

But I think this should work for these:

.tab-background, #urlbar-background, #searchbar, menupopup, .menupopup-arrowscrollbox{ border-radius: 0 !important; } :root{--arrowpanel-border-radius:0px !important;}

For the #1 you could use this:

.tabbrowser-tab[pending]{ color: #eff !important; } .tabbrowser-tab[pending] > .tab-stack > .tab-background{ background-color: #f00; }

For the #2 this add this:

.tabbrowser-tab[notselectedsinceload]{ color: #eff !important; }

Browser toolbox is very helpful in figuring out what attributes might be set for elements in specific scenarios.

To modify this and all other context menus you can do the following:

• Open browser toolbox
• In the top right corner of the toolbox is a menu button - click that.
• In the menu dropdown click "disable popup autohide"
• Open the context menu you want to inspect
• you can now click elsewhere and the menu should stay open.
• So back in the toolbox (inspector tab) hit the "inspect" button in the top left
• The inspector selecting mode is now active, so click the menu item in the opened context menu to select that item.
• The inspector should now highlight the corresponding item in the inspector tree view and you can see all the properties of those elements yourself.

For extension button icons you will need the extension id to construct selectors for your CSS. You can find that out other ways, but in the end its probably easiest to just use browser toolbox

But this should work. Point is, you'll need to do two things; reduce the empty padding around the icon and make the icon bigger. If you do only one of these things then the icon will either stay small, but the area around it is too small, or the bigger button just forces the whole toolbar to be bigger.

So this should work.

#99138ee6-534b-402d-b59d-29b29b786867-browser-action { --toolbarbutton-inner-padding: 0px } #99138ee6-534b-402d-b59d-29b29b786867-browser-action .toolbarbutton-icon{ width: 28px !important; height: 28px !important; }

you should definitely check out the toolbox then! It can help a lot when looking for the id of an element

Oh, so they don't work? I think I cant help you then

If anything, those selectors would match the area that is "behind" the web content - which is normally invisible since content is in front of them. I mean that's the only place where a tabpanels elements are and an element with class browserContainer is there.

To chamge the background of the menu panels is something totally different although I can't remember what exactly. But if that's what you intend to do then I'm sure someone can help you out.

You can use Browser toolbox to figure out how to target specific elements yourself.

You can just use the normal devtools inspector for the newtab page. If you want to inspect the UI (toolbars etc) then you need Browser Toolbox for that, but the idea is the same.