Firefox Customs
-
How to get rid of the border around urlbar upon clicking
I tried to set the background colour for my urlbar with
#urlbar-input-container { border: none !important; border-radius: 5px !important; background: light-dark(#ffffffff, #1b1e20ff) !important; }
this works fine for the most part, except on focus it creates some corner effects, which I think might be from the border that gets overlapped somehow.And this is how it looks on focus without my code
How do I get rid of this blue border on focus? Ps: apologies for poor formatting.
-
Help with window controls on linux ':hover' issue
Video
Click to view this content.
hi, I'm using window_control_force_linux_system_style.css and works fine to get the theme styles of the system, but the ':hover' is working bad, the ':hover' effect keep the image or background color even if I'm out of that buttons. with other system themes the effect is more noticeable.
-
Is it possible to change the font color of a n active tab to an animation svg?
Hey I have an svg of a color animation, it's basically a gradient that loops around. And was wondering if it's possible to change the font color of the active tab to that svg animation.
I've been trying to do it with:
.tabbrowser-tab[selected] .tab-content{ text-color: url(../icons/animation.svg) !important; }
but can't get it to work.
Thanks for any help!
-
Change the highlight color when inspecting an element and change the popup when right clicking a style sheet in the toolbox?
Hello! I was wondering how can I change the colors that appear when you inspect an element. They look like this: And also was wondering how can I change the popup that appears when you right click the style sheets in the style editor in the toolbox. It looks like this: https://imgur.com/a/S47spyg
Thanks!
-
I wonder if 'urlbar_container_color_border.css' needs an update!
Hi, I used this code and it used to work perfectly, but I tried it just now and I'm having some visual issues like in the screenshot. 1.- the url border (not open, not focus) display 1px inside the url default border. 2.- when urlbar is open the border don't expand properly. PD: I'm using Firefox beta.
-
apply filter to new-tab makes the page has unwanted horizontal scroll
hi, I wonder if is possible to fix this rare behavior when I apply the next css in the new-tab:
body{ backdrop-filter: brightness(99%); }
if I don't add the filter there isn't a scroll. -
Image in chrome/newtab folder is nor reached by the code
hi, I'm asking for help to solve this inconvenient when I try to replace the default wallpapers in newtab page. Fist of all I'm using the developer Firefox version that use beta version to do this.
I have activated this preference in about:config page:
browser.newtabpage.activity-stream.newtabWallpapers.enabled
totrue
after that I replaced the wallpapers thumbnails successfully with the next code:
``` /* Miniaturas de wallpapers */
/* Dark */
.wallpaper-input.dark-landscape { background-image: url("../newtab/wallpaper-dark.png") !important; }
.wallpaper-input.dark-panda { background-image: url("../newtab/wallpaper-dark2.png") !important; }
.wallpaper-input.dark-color { background-image: url("../newtab/wallpaper-dark3.png") !important; }
.wallpaper-input.dark-sky { background-image: url("../newtab/wallpaper-dark4.png") !important; }
.wallpaper-input.dark-mountain { background-image: url("../newtab/wallpaper-dark5.png") !important; }
.wallpaper-input.dark-beach { background-image: url("../newtab/wallpaper-dark6.png") !important; } ```
but when I try to replace the wallpaper for the first image in newtab page it don't work with the path I used to use, for example this code:
body:has(#dark-landscape[aria-checked="true"]){ --newtab-wallpaper-dark: url("../newtab/wallpaper-dark.png") !important; }
and only works when I use a url for the new image like this:
body:has(#dark-landscape[aria-checked="true"]){ --newtab-wallpaper-dark: url(https://i.imgur.com/It1Ugaa.png) !important; }
so I wonder if is my mistake or is a Firefox bug, or maybe there is a trick to solve it? cause I would like to use local images and not urls.
-
How can I see all the available icons often found in CSS snippets as "chrome://something/something else/etc..." ?
Hello,
basically title.
I often found such icons in CSS snippets, but never truly understood where I could see them all and now that I'm trying to do stuff with icons for my style I would truly benefit understanding how to find all these icons and how I could properly use them.
Thanks in advance to anyone who will try to help me :D
-
Browser toolbox, info popup hidden behind ... popup
This one has been driving me crazy for ages...
When I use the Browser Toolbox - with the option
Disable popup auto-hide
being checked - and I hover over or select an element in the inspector , the info panels/tooltips that are usually displayed above and/or in front of the targeted/selected elements are covered by the open popups.Also, the selected UI popup parts are not highlighted as they would be for other bits, there's only that dotted grid visible - again partially hidden - that gives you a general idea of what you are looking at.
This is on MacOs/Fx 115esr; I understand the issue is the same on Windows.
I've tried lots of css and javascript codes to find a way to target that thing, but to no avail.
The Fx popups in general have a silly high z-index, so that might be part of the issue; I'm wondering if there's any way to fix that.
Screenshot below.
-
Anyone know what happened to the r/FirefoxCSS sub?
EDIT 3 - The r/FirefoxCSS sub 'resurfaced' mid-afternoon today, Saturday 27Apr24... over 4 days after it had closed again due to the 2nd 'gone private' blackout incident triggered for unknown reasons by a person or persons unknown on Tuesday afternoon. Previous and only current Mod 'yawn_zz' reappeared alive and well and apparently back in sole control of "his" sub. Hmm? Mild flamewars and some Mod deleting of critics' and disbelievers' posts ensued.
The good news is that the r/FirefoxCSS sub's extensive and valuable back history appears to be recovered and fully searchable again. :D
No explanation(s) offered for the 2nd 4-day-long blackout period or how/who/why the silly and petulant 'PRIVATE SUB FOR STAR FOX FANS' notice got posted? Same credulity-straining story about Pro-Palestinian protestors hijacking Mod's unlocked phone offered for 1st half-day 'gone private' blackout incident last Monday. Novacula occami... "When you hear hoofbeats, think of horses not zebras"... Caveat emptor!
----------
EDIT 2 - Regrettably the 'gone private' incident resumed pm Tue 23Apr24... this time with a silly 'PRIVATE SUB FOR STAR FOX FANS. BEST NINTENDO GAME EVER!' notice added... suggesting r/FirefoxCSS Mod has been hacked and is being trolled. An alternative suggestion is that sole Mod may be doing the trolling for unknown/unexplained reasons? :(
----------
EDIT 1 -
Gone 'private' incident overr/FirefoxCSSreappeared a short while ago after >8 hours blackout no longer a 'private' sub.Phew!Explanation of sorts was posted by Mod at:https://www.reddit.com/r/FirefoxCSS/comments/1caovpr/why_was_this_subreddit_closed/ (this post and sceptical comments from users Re: Mod's bizarre blackout explanation was then deleted before the 2nd 'gone private' incident began. Unknown if this was just a coincidence or deliberate trolling?)----------
ORIGINAL POST - The r/FirefoxCSS sub suddenly went private this afternoon, Monday 22nd April 2024.
No warning, no discussion, no explanation.
A minor tragedy... all those years of questions and answers, thousands of CSS code snippets, and a myriad of other info about the inner workings of Firefox all now hidden from general view and no longer searchable. What a waste!
A 'private' CSS help sub is next to useless IMO. A sad loss. :(
See also: https://www.reddit.com/r/firefox/comments/1cafqvr/does_anyone_know_why_rfirefoxcss_is_closed/
-
how to apply 'vertical_popup_menubar.css' in main UI and not in Library.
I'm using this stile from @MrOtherGuy : vertical_popup_menubar.css and that makes the menu items from Library disappear, I would like to that style not affect the Library window.
-
Help needed, 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
-
Any way to make Firefox remember what time I pause videos at after closing their tabs?
For instance, I watch a video on Shout Factory and then pause, close the tab and when I go back to the link it goes back to where I left off.
-
[Sidebery] Functional tweaks and recommendations
Been using Sideberry for a couple of days and am really impressed with how its level of customization and performance over Tree Style Tabs. I've configured much of the settings to get to a satisfactory setup but I'm still looking for some improvements (implemented in a way that isn't too distracting or take much valuable screen real estate):
-
Is it possible to move the bottom buttons up to either where the empty space is to the left the top right X, else to the left of the right side buttons on the panels line? And is it possible to move the "+" button for new tab at the position of the first tab?
-
Any ideas on how to make tabs with playing audio more obvious? The audio icon next to the favicon is quite subtle. If it's possible to be where the tab's X button is on the right when you hover it it would be more obvious (especially if it's colored).
-
How to make non-active tabs more white? In Sidebery, I already have "Normal foreground for Tabs" set to #ffffff but it's still fairly more gray compared to Active foreground also set to #ffffff.
-
Is it possible to toggle between a light/dark theme in particular with a hotkey? Useful when working in natural light where sometimes visibility is a priority.
-
Sometimes a tab will have a cyan-colored dot on the bottom left--what is that an indicator for and what other indicators are there? I only know configured styles of "unloaded tabs" and "unread tabs".
-
How to make tab count of folded trees a little more obvious? It's very small on the corner of a tab's favicon. I would be satisfied if it's just larger, else if there's no better way then I guess insert this number between the favicon and the title of the tab?
-
How to make the colors different shades of gray the same for the address bar, Sidebar, and tabs? I would also like to test whether pure black (excluding borders) looks good enough and improves readability for a dark theme.
-
Is it possible to add a small X button to close the browser all the way to the right without adding an extra bar? I disabled the tabs bar.
Also interested in any functional CSS tweaks that anyone found improved their workflow.
Much appreciated.
P.S. Might as well ask Sidebery users an unrelated question:
- What is the "history service" and is it different than Firefox's implementations? When I grant Sidebery permission to use this, the History button at the buttom says "Nothing..." when I visit different sites. I'm not sure it provides any useful info not found by left-clicking and holding the back button fora webpage. Also, does this tweak to highlight opened bookmarks work? I add it to the Sidebery style editor and open a link from bookmark but there's no indicator that it's opened as a bookmark.
-
-
Help for window controls in Linux
I'm using Firefox-beta v.125 on Manjaro-KDE, I use the code from here: window_control_force_linux_system_style.css but seems like don't work right anymore, the system buttons appear overlapping the default, maybe that could be a temporal issue cause is beta version, I don't know.
-
Help with color favicon sites tabs.
Hi, I want to color the tabs URLs icons to red- just the icons of the sites. Someone on reddit gave me that code and explanation:
.tabbrowser-tab .tab-icon-image { filter: sepia(1) saturate(5000%) hue-rotate(0deg); }
What this does is make every icon the same hue with the sepia filter, then, you rotate the hue towards red. You need to use high saturation to make the colours pop and every icon should be red.
https://www.quackit.com/css/functions/css_hue-rotate_function.cfm
It partially succeeded. All the webs icons with one color as github, virusetotal...are colored in red, but all the webs with more than one color as google, amazon.. are colored partially in red. It as like this code can color only one color of the icon. There is any way to color all the icons to red or replace them?
Thanks.
-
Checkboxes in Clear Recent History
The question about checkboxes inspired me to try to change the colour of unchecked checkboxes in Clear Recent History (ctl+shft+del) in History > Clear Recent History.
I found the menu command in the Browser Toolbox and I used that to identify the modal. On my system is was the 343rd menuitem. My code doesn't work but I don't know why.
#menu-history-clear-recent-history{ .checkbox-check { appearance: none !important; background: #e2cfb6; } }
-
Help with checkbox check color
Hi,
libreWolf V.123 (with firefox-gx theme [(https://github.com/Godiesc/firefox-gx)] ), broke the color of the checkbox check. it was black now its white.
the code:
--checkbox-checked-color: black !important;
not working anymore. Not in ogx_notifications.css, and not in ogx_UC-settings-addons-pages.css.There is any code for change the checkbox check to black again?
Thanks :-)
-
Active Tab - An underline reappears in Fx123.0...
A very thin line has reappeared under the Active Tab in Firefox 123.0 when using CSS to create 'connected tabs' (i.e. no boundary between Active Tab and the Nav Bar).
This line had previously been removed in my own CSS styling by using your suggested fix in r/FirefoxCSS topic 'Connected tabs - Proton Tabs Tweaks'..."That's probably solved by simply adding .tabbrowser-tab[selected]{ position: relative; z-index: 1 }" ... however, this fix no longer works in Fx123.0... and not obvious what has changed from my efforts with the Browser Toolbox?
A hint of the problem had reappeared in Fx122... in which, when the browser window did not have focus, the Tab Bar darkened AND a thin line appeared under the active tab... until window focus was restored.
(EDIT - The reappeared Active Tab underline problem only existed if using the 'out-of-date' 25Oct23 version of MrOtherGuy's 'non_floating_sharp_tabs.css' style... the problem had already been fixed... and is NOT present in the current 24Jan24 version.)
The attached image shows the same problem also exists in your 'non_floating_sharp_tabs.css' AFAICS? The LH image is Firefox 123.0 + RH image of LibreWolf 122.0.1-2. (Both browser windows have focus. Both images of clean test profiles on Win10 with only your latest 'non_floating_sharp_tabs.css' style and the Gradient Blue theme added. The UI size has been increased by setting pref 'layout.css.devPixelsPerPx' = 2.5 to improve the image clarity o the two toolbars.)
-
Change favicon of bookmarklets
I have a folder of bookmarklets. They all have the same favicon, i.e. the default (globe) icon. It would be useful to change at least two of them to distinctive icons.
I copied code posted recently on another forum. It is only partly effective in that the default icon disappears but, instead of the icon I have named, there is a faint orange blur. The icon I have named is the Facebook icon, a white f letter on a blue background. I began with an .ico file but changed it to a .jpg file, hoping that would help; it didn't. I also tried changing the size from 1616 to 2424 and 50*50, to no avail.
The code is below.
#personal-bookmarks .bookmark-item[scheme="javascript"][label="zap fb"] .toolbarbutton-icon, #personal-bookmarks .bookmark-item[scheme="javascript"][label="zap fb"] .menu-iconic-icon { width: 0 !important; padding-right: 16px !important; background-image: url ("fb16.jpg") !important; }
-
I would ask the creator of the theme for help but that's me :(
I used this code which places the tab above the vertical bookmarks bar, but in this new Firefox-beta v.123 the code stop working, I tried a bigger number and don't work, I tried to put a lower index to the bookmark-bar and a bigger number to the selected tab and didn't work. I need a beautiful help. my theme is this Firefox-gx
-
How hard is it for you to use Firefox's browser toolbox / dev tools? Do you ever feel like you're fighting it?
Personally I'm pretty frustrated with the way it works. I've noticed all of the following , and at least some of these apply to dev tools too. I don't like the way Google controls the internet with Chrome, but at least its dev tools just work.
- Sometimes when I try to use the element picker tool it actually clicks the element instead of selecting it in the toolbox
- I can't change selectors in CSS files in the sidebar, I have to go the style editor (Chrome lets me do this)
- I can't easily copy HTML attributes, if I double click on an attribute, the text is selected but when I press CMD C, it copies the entire tag with all of its attributes.
- A lot of the time CSS properties I write just don't apply and isn't crossed out. Its like it just has a hard time doing that.
-
help to change the icons used in the animation: reload-stop button.
hi, I use this to change the icons for reload and stop button:
#reload-button { list-style-image: url("../icons/reload.svg") !important; } #stop-button { list-style-image: url("../icons/stop.svg") !important; }
but when the icon start the animation the icons are bigger and cause a unwanted zoom, it's possible to change the icons used in the animation? -
Is it difficult to write or figure out good CSS? Is it normal to revisit your CSS and find lots of ways to improve it?
Firefox's CSS just feels very dirty, like its very tricky to figure out how to best change this or that element because of how many moving parts there are between state changes (like
:hover
) and how variables interoperate. And in some places to make a single change you have to change multiple variables, like if you want to change the height of the URL bar row.I've spent many hours on the CSS, and each time I revisit it, I find that I could've wrote this or that better, and I looked for variables that the UI uses, and wonder why I didn't find them the first time. I've been writing CSS on and off for 8 years now, I wonder if I'm just bad it since I've never done web dev full time, or it's actually a lot of work to write good CSS.
-
is it possible to define a color for this AccentColor?
I would like to change this preference to something like this:
AccentColor: red !important;
but don't work. -
Can't see any comments older than 1 month on fedia.io?
Anyone else having problems reading older comments on the fedia.io Firefox Customs pages (https://fedia.io/m/FirefoxCSS)?
Tried logged-out and logged-in... no comments on posts older than 1 month... although the index pages show many posts have comments?
However, access Firefox Customs pages via lemmy.world (https://lemmy.world/c/[email protected]?dataType=Post&page=1&sort=New)... and all the comments are available right back to first post by MrOtherGuy 5 months ago 'How to set up userChrome.css' (https://lemmy.world/post/1055304).
Am I missing some setting on the direct fedia.io page or link?
-
An idea for vertical tabs...
For years I've been using MrOtherGuy's multi-row_tabs_below_content.css script, ever since XUL add-ons became obsolete, and I had to give up the wonderful TabMixPlus. I have tab width set to 100px, which shows the favicon and the beginning of the tab title, from which I can identify a tab 95% of the time without hovering to see the full title. At this width, I have fifteen tabs per row, so with three rows set I can see 45 tabs at a time. I like to be able to see as many tabs at once as possible, while still being able to identify them, unlike many current users (especially Chrome refugees) who like to scrunch tabs down so narrow as to show only the favicon. :-)
But today the rave seems to be vertical tabs, in part largely, I think, to the 'cool' factor. But when every available browser has vertical tabs available, either natively or via add-on, that cool factor will soon disappear. And yes, there are serious advantages, such as making best use of the available horizontal screen space while freeing up vertical space. And so Firefox has available several vertical-tab add-ons. And now there is MrOtherGuy's vertical_tabs.css script. What I think is cool about this script is that, unlike all the add-ons that I'm aware of, this script doesn't use the sidebar, leaving the sidebar free for other uses. So one can have both the vertical tabs, and the sidebar visible at the same time, even on opposite sides of the window, which leaves the page content centred between them.
Which brings me to the idea: multi-column vertical tabs! Consider, the vertical_tabs.css script creates a vertical-tabs sidebar that is 220px wide, including a vertical scrollbar of perhaps 20px. With my preferred tab width of 100px, I could have two columns of tabs in that same space. At 20 tabs per column, that would give me a total of 40 tabs visible at one time, nearly equal to 45 tabs I now have visible.
How it works: the current multi-row horizontal tab bar shows the number of rows the user has set, and has a narrow (doesn't use much space) vertical scrollbar on the right edge. When the tab bar is scrolled vertically, the top row of tabs scrolls out of view, and the next lower row of tabs scrolls into view at the bottom. So scrolling shows 15 new tabs at a time (in my case).
In like manner, the multi-column vertical tab bar would show the number of columns the user has set, and would have a narrow (doesn't use much space) horizontal scrollbar at the bottom edge. This would free up all of that space used by the current vertical scrollbar, making the entire vertical tab bar narrower (depending on the user's choice of tab width and number of columns). When the tab bar is scrolled horizontally, the left column of tabs scrolls out of view, and the next column of tabs scrolls into view at the right, showing 20 new tabs at a time (depending on the height of the user's window). If the user prefers narrower tabs, as many seem to do, one could have more columns is the same space, or have the same number of columns use even less space.
That's it. But no browser or add-on that I am aware of, currently provides multi-column vertical tabs. If a .css script could be made to do so, that would make Firefox the only browser with such a feature. Now that's cool! :-)
-
Change this blue border selected color in about:profiling?
Hello! In about:profiling, if you go to the bottom of the page there's a box, if you click that box a blue border appears but I don't know how to change it. It is this one:
Thanks!
-
Change this tree background color, and this gray border color?
Hello! I was wondering how am i able to change the tree background color (Some treechildren have gray background and others have black) and also the gray bottom border-color? I think it has to do with a shadow command but I'm not sure.
Thanks!
-
Change this gray color in the popup in about:preferences in import data from another browser
Hey
I want to change this gray background in about:preferences in import data from another browser, I've tried but cant seem to get it to work, I don't know if it's the popup "shadow" or what could it be.
Thanks!
-
Vertical tabs on right
Hi. I've been experimenting with MrOtherGuy's vertical tabs script. I found that the tab bar could be moved to the right side of the window with just two simple changes:
change line 19 from: margin-left: var(--uc-vertical-tabs-width); to margin-right: var(--uc-vertical-tabs-width);
andchange line 31 from: left: 0; to right: 0;
Works for me. -
There is a way to make visible like normal tab the Firefox-view tab?
I use some code that use the position of the tab to give some style but when that Firefox-view tab is active create a invisible tab that makes the code wrong. I would like to have that tab visible, and work with that or I don't know jeje
-
multi-row_tabs_below_content and fake_statusbar_w_bookmarks_bar don't play nice
First, a big thank you to Mr. Other Guy for all his great work!
The following issue is on FF 115 ESR on Windows 10, using a fresh clean profile, using compact mode, with title bar enabled, and static menu bar enabled, and creating a bunch of new tabs in order to fill four rows. Using the July 18 commit of multi-row\_tabs\_below\_content (set for three rows) and trying the March 11 and September 9 commits of fake\_statusbar\_w\_bookmarks\_bar.
With userChrome.css containing only the import of multi-row\_tabs\_below\_content, the three rows of tabs appear correctly at the bottom of the window, and they scroll properly--all good. Interestingly, the bookmark bar now appears at the very bottom of the window, below the tab bar (why?). When the bookmark bar is toggled off/on (Shift-Control-B), the tab moves down/up as it should.
When the import of fake\_statusbar\_w\_bookmarks\_bar (either commit) is added after the tab bar import, the tab bar background appears to be four rows tall rather than three (with the bottom row hidden by the bookmark bar), the top row is empty so that only two rows of tabs are showing, and when the bookmark bar is toggled off, the third row of tabs appears at the bottom. With the bookmark bar visible, there is no indication anywhere of link address or activity when a link is clicked.
When I follow this same testing procedure on my working profile, with just the tabs bar import, the tabs at the bottom work fine, and the bookmarks bar still appears but this time it has all of my extension icons in it (there were no extensions in the clean profile), toward the left end. The link activity is shown in the bottom left corner of the main client area, above the tab bar.
When I add the status bar import, the behavior is the same as with the clean profile, but now the extension icons are at the right end of the status bar, and the link activity appears at the left end of the status bar (the desired behavior).
If I instead import the old version (from FF 99) of the fake status bar, now the tab bar is correct, and the status bar has the extension icons to the right, but the link activity is back in the client area rather than in the status bar.
Any assistance would be greatly appreciated.
-
Someone help me to apply code to the latest tab, I need to add a line after that element but I can't.
My code is this, I tried different codes but not works.
.tabbrowser-tab::after::last-child{ content: "" !important; display: block; height: var(--tab-height-personal) !important; width: 130px !important; border-bottom: 1px solid blue !important; border-image: var(--panel-separator-zap-gradient2) 1 !important; }
-
Change the color of this separators in about:preferences in the translation section?
Hello!
How could I change the separator color in about:preferences in the translation section?
When I put my code in userContent in @ -moz-document url("about:preferences#general")
It doesn't work, I guess that it's because it opens up in a new window, but when I put it outside of it it works, the only problem with that is that I don't know if it will also affect webpages.
Thanks!
-
Has anyone figured out a way to use text for icons in elements?
elements like the previous tab, next tab, and reload buttons? I've been using SVG images for them and I know you can either do that or embed the SVGs right in with a
url()
, but I wonder if anyone has found a workaround for using text, with or without psuedo-elements, like usingcontent
in a:before()
element. -
Fix the position of the hamburger menu when shrinking the window?
Hello! I have a problem with the hamburger menu when I shrink the window. Normally it looks like this: https://imgur.com/a/qU0mpqz
but when I shrink the window it's like it's floating and looks like this:
I was wondering if there's a way to make it not float or to change it's position to the urlbar or something.
Thanks!