Firefox Customs

### [Friendly-Fox](https://codeberg.org/user0/FriendlyFox) Updates: **\*Important\*** This update requires a fresh install: 1. run `uninstall.sh` script manually or by using FriendlyFox desktop icon 2. select option to `Remove FriendlyFox desktop icon` 3. delete `Mobile-Friendly-Firefox` directory 4. download FriendlyFox using instructions in `README.md` 5. run `install.sh` script and follow prompts * Modified `friendlyfox.desktop`, `friendlyfox.sh`, `customize.sh`, `update.sh`, `install.sh`, `uninstall.sh`, `.mff-rm-old.sh`, and `README.md`: * Mobile-Friendly-Firefox -> FriendlyFox #MobileFriendlyFirefox #FriendlyFox ~ Emma ❤️ #FirefoxCSS

### [Mobile-Friendly-Firefox (Friendly-Fox)](https://codeberg.org/user0/Mobile-Friendly-Firefox) Updates: * Modified `true_mobile_landscape-alt.css`, `true_mobile_landscape.css`, `fenix_fox-alt.css`, `fenix_fox.css`, `fenix_one-alt.css`, and `fenix_one.css`: * fix: decreased width of tab manager menu in landscape orientation * Modified (default-colors) `userContent.css` and (fenix-colors) `userContent.css`: * fixed librewolf and experimental categories buttons #MobileFriendlyFirefox #FriendlyFox ~ Emma ❤️ #FirefoxCSS

### [Mobile-Friendly-Firefox (Friendly-Fox)](https://codeberg.org/user0/Mobile-Friendly-Firefox) Updates: * Modified `true_mobile_landscape-alt.css`, `true_mobile_mode-alt.css`, `single_tab_mode-alt.css`, `fenix-alt.css`, `fenix_fox-alt.css`, and `fenix_one-alt.css`: * fixed main app menu #MobileFriendlyFirefox #FriendlyFox ~ Emma ❤️ #FirefoxCSS

### [Mobile-Friendly-Firefox (Friendly-Fox)](https://codeberg.org/user0/Mobile-Friendly-Firefox) Updates: * Modified `install.sh`, and `uninstall.sh`: * added support for firefox flatpak #MobileFriendlyFirefox #FriendlyFox ~ Emma ❤️ #FirefoxCSS

I'm a heavy user of Firefox & Tree Style Tabs. Recently, I tried Zen Browser. There's a lot there to like, but I think I'm sticking with FF. *That said...* there is one thing from Zen I'd love to bring back to FF: That awesome collapsible sidebar for tabs. It's great: The sidebar is totally usable in its narrow, collapsed state (which only shows a vertical stack of favicons). But if I want to expand it, I just click a button and I can see the favicons + website names. I've tried to achieve the same thing in FF & TST with the CSS below, but it's not the same: This CSS creates a minimized sidebar that expands whenever I hover over it. That's not as useful as the behavior in Zen. In fact, it gets pretty annoying. Does anyone know how to get Zen-style vertical tabs? Thank you!! The CSS I'm currently using in FF: ``` /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Show sidebar only when the cursor is over it */ /* The border controlling sidebar width will be removed so you'll need to modify these values to change width */ #sidebar-box { --uc-sidebar-width: 60px; --uc-sidebar-hover-width: 210px; --uc-autohide-sidebar-delay: 100ms; /* Wait 0.6s before hiding sidebar */ position: relative; min-width: var(--uc-sidebar-width) !important; width: var(--uc-sidebar-width) !important; max-width: var(--uc-sidebar-width) !important; z-index: 1; background-color: #110a0d !important; } #sidebar-box[positionend] { direction: rtl; } #sidebar-box[positionend] > * { direction: ltr; } #sidebar-box[positionend]:-moz-locale-dir(rtl) { direction: ltr; } #sidebar-box[positionend]:-moz-locale-dir(rtl) > * { direction: rtl; } #main-window[sizemode="fullscreen"] #sidebar-box { --uc-sidebar-width: 1px; } #sidebar-splitter { display: none; } #sidebar-header { overflow: hidden; /* color: var(--chrome-color, inherit) !important; */ padding-inline: 0 !important; } #sidebar-header::before, #sidebar-header::after { content: ""; display: flex; padding-left: 8px; } #sidebar-header, #sidebar { transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important; min-width: var(--uc-sidebar-width) !important; will-change: min-width; } #sidebar-box:hover > #sidebar-header, #sidebar-box:hover > #sidebar { min-width: var(--uc-sidebar-hover-width) !important; transition-delay: 0ms !important; } .sidebar-panel { /* background-color: transparent !important; */ /* color: var(--newtab-text-primary-color) !important; */ } .sidebar-panel #search-box { -moz-appearance: none !important; /* background-color: rgba(249, 249, 250, 0.1) !important; */ color: inherit !important; } /* Add sidebar divider and give it background */ #sidebar, #sidebar-header { background-color: inherit !important; border-inline: 1px solid rgb(80, 80, 80); border-inline-width: 0px 1px; } #sidebar-box:not([positionend]) > :-moz-locale-dir(rtl), #sidebar-box[positionend] > * { border-inline-width: 1px 0px; } /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ #sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel { inset-inline: auto 0px !important; } #sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label { margin-inline: 0px !important; border-left-style: solid !important; }```

### [Mobile-Friendly-Firefox (Friendly-Fox)](https://codeberg.org/user0/Mobile-Friendly-Firefox) Updates: Firefox-ESR 128 update! The Tab Manager Menu is better than ever, now featuring container tab indicators thanks to [X-m7](https://codeberg.org/X-m7). Another wonderful development is that this new version of Firefox includes a fix for a pesky bug. With the new fix, the Tab Manager Menu is now stable, and with the addition of container tab indicators, Firefox on mobile Linux devices possesses yet another feature to show off which is not available on Android/iOS devices. I hope everyone enjoys the new update! * Modified `true_mobile_landscape-alt.css`, `true_mobile_landscape.css`, `true_mobile_mode-alt.css`, `true_mobile_mode.css`, `single_tab_mode-alt.css`, `alt-single_tab_mode-alt.css`, `single_tab_mode.css`, `fenix_theme.css`, `fenix-alt.css`, `fenix.css`, `fenix_fox-alt.css`, `fenix_fox.css`, `fenix_one-alt.css`, and `fenix_one.css`: * fixed Nav Bar * Modified `tabmenu.css`, `true_mobile_landscape-alt.css`, `true_mobile_landscape.css`, `fenix_fox-alt.css`, `fenix_fox.css`, `fenix_one-alt.css`, and `fenix_one.css`: * added container tab indicators to tab manager menu* * Modified `tab_manager_button.css`, `true_mobile_landscape-alt.css`, `true_mobile_landscape.css`, `fenix_fox-alt.css`, `fenix_fox.css`, `fenix_one-alt.css`, and `fenix_one.css`: * disabled tab manager menu tab counter * In order to allow container tab indicators to be shown to the left of tabs in the tab manager menu, the tab counter within that menu has been disabled instead of relocated. * Modified `fenix_theme.css`, `fenix-alt.css`, `fenix.css`, `fenix_fox-alt.css`, `fenix_fox.css`, `fenix_one-alt.css`, and `fenix_one.css`: * themed closeDuplicateTabs button * Modified `fenix_colors.css`, `fenix_one-alt.css`, and `fenix_one.css`: * colorized closeDuplicateTabs button * Modified `appMenu.css`: * fixed Main App Menu width * Modified `custom_rules.css`: * unhide container tab line by default * Modified (default-colors) `userContent.css` and (fenix-colors) `userContent.css`: * fixed addon toggle button and more options button positions * Modified (fenix-colors) `userContent.css`: * fixed addon toggle button color *Thanks to [X-m7](https://codeberg.org/X-m7) for submitting issue [#8](https://codeberg.org/user0/Mobile-Friendly-Firefox/issues/8) which has been implemented in this release. #MobileFriendlyFirefox #FriendlyFox ~ Emma ❤️ #FirefoxCSS

### [Mobile-Friendly-Firefox (Friendly-Fox)](https://codeberg.org/user0/Mobile-Friendly-Firefox) Updates: Support for Firefox-ESR 115 ends with this release (Version 2.11.2). * Modified `appMenu.css`, `iconized_main_menu.css`, `dynamic_popups.css`, `dynamic_popups_plus.css`, `dynamic_popups_max.css`, `dynamic_popups_pro.css`, `dynamic_popups_pro_max.css`, `true_mobile_landscape-alt.css`, `true_mobile_landscape.css`, `fenix_theme.css`, `fenix-alt.css`, `fenix.css`, `fenix_fox-alt.css`, `fenix_fox.css`, `fenix_one-alt.css`, and `fenix_one.css`: * added CSS ID `#appMenu-mainView` to support renaming from `#appMenu-protonMainView` in Firefox 127* * Modified `README.md`: * fixed download links *Thanks to [1peter10](https://codeberg.org/1peter10) (@linmob@fosstodon.org) for submitting a [pull request](https://codeberg.org/user0/Mobile-Friendly-Firefox/pulls/9) which adds the CSS ID `#appMenu-mainView` (renamed from `#appMenu-protonMainView`) to ensure good user experience on Firefox 127 and Firefox-ESR 128. #MobileFriendlyFirefox #FriendlyFox ~ Emma ❤️ #FirefoxCSS

Please would you explain why adding ' > slot' fixed Issue: [toolbarbuttons_in_tabs_periphery.css makes some tabs jump several by pixels when hovered, resizing of tabs is weird #419](https://github.com/MrOtherGuy/firefox-csshacks/issues/419)? What underlying change in Firefox 131 made this necessary? Similarly, why adding ' > slot' to the 'scrollbox[orient="horizontal"] selector' also fixes this old tab-centering code broken by Fx131.0 update? #tabbrowser-arrowscrollbox:not([overflowing]){ --uc-flex-justify: center; } scrollbox[orient="horizontal"]{ justify-content: var(--uc-flex-justify,initial); } CSS userstyle from OP YOUBESEENUMBA1's post 'Update 131.0 broke tab-centering code': https://www.reddit.com/r/FirefoxCSS/comments/1fxb0wb/update_1310_broke_tabcentering_code/ (Note. Fedia's codebox not playing... '#tabbrowser' is always displayed as an unwanted circular link to this site?)

Hello, I've already hided the preview of tab name on hover when they introduced it back then with: `/* disable preview of a tab name as you hover over it */ #tabbrowser-tab-tooltip { display: none !important; }` but I can't seem to find the selector to hide this new feature as well, so I was wondering if I could get some help :D Thanks in advance!

hi, I would like to know how to Apply margin to web content but not when a video is in fullscreen? and keep the margin when Firefox is in fullscreen. I mean I would like to apply a margin to web content that not affect when a video is in fullscreen. I used this code: ``` :root:not([chromehidden~="toolbar"]) { /* Web content */ & #appcontent{ margin-inline-start: var(--my-vertical-toolbar-width) !important; } /* Sidebar + sidebar content */ & #sidebar-box[checked="true"] { margin-inline-start: var(--my-vertical-toolbar-width) !important; } /* Sidebar + sidebar content + web content */ & #sidebar-box[checked="true"] ~ #appcontent { margin-inline-start: 0px !important; } } ``` but that applies a margin when a video is in fullscreen, I tried too this code but removes the margin when Firefox is in fullscreen: ``` :root:not([chromehidden~="toolbar"],[sizemode="fullscreen"]) { ... } ```

Hello. When you open the browser toolbox theres a popup message that says if you want to allow the connection and there are three buttons: Accept, deactivate and Cancel. I'm trying to change the style of the deactivate button and I'm not being able to do it. I've tried with this: ``` button[dlgtype="accept"]:hover, button[dlgtype="deactivate"]:hover, button[dlgtype="cancel"]:hover { color: var(--color) !important; background-color: black !important; } ``` And it looks like this: I don't know if there's a way to disable that message so that it always enters the browser toolbox. Thanks for any help!

Hey! I am trying to make a line that goes from one side of the screen to the other under the navbar or the tabs, I have a gradient I'd like to use. I've tried with border bottom but haven't been able to achieve it. Any suggestions? Thanks!

Hello! I am trying to move the windows buttons (min, max, close) in the top right corner. I changed my tabs to be under the urlbar. It looks like this: Thanks for any help!

Hello, I've been using [this script](https://gist.github.com/Minibus93/052e8c2de4458eb9b8d8b4515d76f00c) for ages, up to the point I forgot that ctrl-f to open and close the findbar wasn't a native behavior. Today I noticed it doesn't work anymore and I think it's FF128 that broke it...but I can't seem to see how to fix it. Anyone's got ideas?

I'm actually pissed. I and many other users on the forum got an email from Chris Hayes on this: Hello, This is a friendly email to make you aware that your personal email address is currently visible to the whole internet via Mozilla's Discourse forum. It will show up in Google Search results. The affected email is the one that this email was sent to. Many users may not be aware that their email address is publicly visible and Mozilla has not done anything about it in the 4 years it has been known, so I've taken this into my own hands to inform you. ## What can you do? You can update your profile name to be something else (actually, profile name is completely optional, so you can leave it blank if you want). **Steps to update profile name:** 1. If you search for "**Mozilla Discourse forum**" it should be one of the first results. 2. Login. (Top-right) 3. Click on your **profile picture** at the top right. 4. Then, click on your **username,** at the top of the dropdown menu. 5. Click on the "**Preferences**" button. 6. Change the "**Name**" field, and click "**Save Changes**". ## How did this happen? There's a misconfiguration with Mozilla's Discourse forum that when you sign up with your Firefox account, it will ***by default*** **use your personal email address as your profile's public name**. This is not a new issue, and has been **known since 2020**. The Mozilla Discourse forum is not actively maintained by Mozilla, so this has yet to be fixed. You are one of **4,630** other users impacted by this privacy issue. It impacts **19%** of all forum users, and **28%** of new users. ## More information: There's a Discourse discussion about this problem here: [https://discourse.mozilla.org/t/email-is-displayed-by-default-for-the-new-account/92266](https://discourse.mozilla.org/t/email-is-displayed-by-default-for-the-new-account/92266) If you have connections to Mozilla, please help escalate this issue to the right people. This is a serious and long-standing privacy issue at an organization that *should* value "Privacy by default". Sincerely,[@chris](https://people.mozilla.org/p/chris)A fellow Mozillian **I am not Mozilla:** This is **not** an official Mozilla email, I do not represent or work for Mozilla. This is an email from a fellow community member spreading awareness of this unaddressed privacy issue.

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

 This colour does not follow my accent colour in KDE plasma. How do I customise it?

hi, I'm using [window\_control\_force\_linux\_system\_style.css](https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/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.

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!

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!

Hi, [I used this code](https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/urlbar_container_color_border.css) 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. []()

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.

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` to `true` 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.

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

Hello, I used to open the browser toolbox (since the keyboard shortcut never worked for me on none of my 4 PCs) opening the hamburger menu, clicking more tools and there there was an entry for it, but it's now missing. Did they move it or what?

Hello, guys. I am having trouble editing the New Tab. for some reason, i am unable to edit the .logo image. not even in the inspector. the new image just doesnt load. i tried .svg and .png files, neither worked. i feared it could be where the new image location, but then i put the full path and it did load anyway. everything else i did on the about:newtab work. i even managed to change the color of the "Firefox" trademark what should i do? the file is in <profile>/chrome/fb1.png that is my code ``` .logo { background-image: url("fb1.svg") !important; } ```

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. 

**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 over~~ r/FirefoxCSS ~~reappeared 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/

I'm using this stile from [@MrOtherGuy](https://lemmy.world/u/MrOtherGuy) : [vertical\_popup\_menubar.css](https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/vertical_popup_menubar.css) and that makes the menu items from Library disappear.

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](https://github.com/TinyRaindrop/Firefox-UI-customization/blob/master/Toolbars/floating_toolbars_on_hover.css) 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](https://imgur.com/a/7EAC4mk) photos not edited open the 4k overscan test pattern in a separate window to display it correctly

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.

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](https://0x0.st/Xza8.png) 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](https://0x0.st/XzaP.png) 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](https://old.reddit.com/r/FirefoxCSS/comments/14aty2x/highlight_opened_bookmarks_in_sidebery/joh1qrn/) 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.

I'm using Firefox-beta v.125 on Manjaro-KDE, I use the code from here: [window\_control\_force\_linux\_system\_style.css](https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/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.

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](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.

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; } }`

Hi, libreWolf V.123 (with firefox-gx theme [([https://github.com/Godiesc/firefox-gx](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 :-)

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](https://www.reddit.com/r/FirefoxCSS/comments/113ckjk/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](https://github.com/MrOtherGuy/firefox-csshacks/blob/df4462f5d98266012569768ed570db5aa080030b/chrome/non_floating_sharp_tabs.css)' style and the [Gradient Blue](https://addons.mozilla.org/en-US/firefox/addon/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._)

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 16*16 to 24*24 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 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](https://github.com/Godiesc/firefox-gx)