Firefox Customs

Not a user of 'autohide_sidebar.css'... however, on testing (new profile of Fx132.0.2 on Win10), it appears that the behaviour of the userstyle has changed after a recent Firefox update and/or a recent Commit? Was this change intended or accidental?

IIRC the userstyle's previous behaviour, when the sidebar opened on hover, was that the page Content window was resized smaller to accommodate the presence of the expanded sidebar? Thus no page content was obscured.

Using the current version of 'autohide_sidebar.css' the open sidebar now overlays and obscures part of the page Content window.

See recent r/FirefoxCSS topic 'Sideberry Autohide Doesn't Work'.

I'm using this autohide sidebar css for sidebar to autohide unless mouse hover. But dragging tabs on sidebery causing the sidebar to collapse. This issue was fixed few months ago, but it's back again. Is there anything I can change in the css to make it work? I'm using firefox 132.0.2 on linux.

I have created a standard hover background which, using various stanzas, applies to everything except the toolbar bookmark items and buttons. The following code doesn't have the desired effect on bookmarks. What will? The browser toolbox only shows the main window so I have improvised.

toolbarbutton.bookmark-item(hover) { background-color: #6495ed !important; }

I can't think what to use for toolbar buttons such as UBlock Origin.

Tested in Firefox developer edition
Hi, I used this two files (window_control_placeholder_support.css + hide_tabs_toolbar.css) for tree-tabs but seems like they will need an update. The window controls only shows when press Alt and the menubar shows behind the urlbar.

For some time the colours of the popup on about:addons has had the native colours (black on white) instead of the colours set in userContent.css. The addons page itself still has the colours set in the css file.

I opened the Browser Toolbox and disabled popup auto-hide but I wasn't able to identify the selector(s) to use.

This is my code :

@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){ :root { --in-content-page-color: #000080 !important; --in-content-text-color: #000080 !important; --in-content-page-background: #dbc3a3 !important; --in-content-box-background: #e2cfb6 !important; --in-content-deemphasized-text: var(--in-content-text-color) !important; scrollbar-color: #6495ed #d9d9d9 !important; /*var(--in-content-text-color) var(--in-content-page-background) !important;*/ color:var(--in-content-text-color) !important; }

What do I add to change the colours of the popup to conform with the page itself?

Issue in Firefox beta
hi, I set a z-index in 2 elements but don't work and I can't solve it.
I have this code to move the hamburger menu to left top side:

:root:not([chromehidden~="toolbar"]) #PanelUI-button {
        position: fixed;
        display: flex;
        top: var(--windowed-top-padding, 0px);
        left: 0px !important;
        z-index: 3 !important;
    }

and I have this code to move higher the Firefox Sidebar:

:root:not([sizemode="fullscreen"]):has(sidebar-main:not([expanded])) {
        & #sidebar-main {           
                /* Bakground-color necessary for gradient line color */
            background-color: var(--lwt-frame) !important;
                /* Top-bottom margins */
            padding-top: var(--padding-top-left-sidebar) !important;
                /* Gradient line */
            margin-top: calc( -1px - var(--bookmarksbar-height-personal, 0px) - var(--toolbar-height-personal) -
                             var(--Space-before-gradient-line)) !important;
            border-inline-end: 1px solid red !important;
            z-index: 2 !important;
        }
    }

the problem is the hamburger menu stay behind the Sidebar, I wonder why the z-index don't work.

Friendly-Fox 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) 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) Updates:

• Modified install.sh, and uninstall.sh:
  • added support for firefox flatpak

#MobileFriendlyFirefox #FriendlyFox

~ Emma ❤️

#FirefoxCSS

Mobile-Friendly-Firefox (Friendly-Fox) 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

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) Updates:

Firefox-ESR 128 update! The Tab Manager Menu is better than ever, now featuring container tab indicators thanks to 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 for submitting issue #8 which has been implemented in this release.

#MobileFriendlyFirefox #FriendlyFox

~ Emma ❤️

#FirefoxCSS

Mobile-Friendly-Firefox (Friendly-Fox) 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 (@[email protected]) for submitting a pull request 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?

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 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

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,@chrisA 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?