While using hide-tabs-windows.css, any themes with a background image in the theme makes the window control buttons invisble, but you can still click them. Looks like this.

"If you are not familiar with git, feel free to just create an issue with the style you want to add."

I don't know git, and I am new to this Firefox styling. :) Please feel free to mod this as needed! The property -moz-appearance is the most important, because otherwise there are big white sections I can't remove.

/*
 * Description:  Color fix bookmarks library, slightly compacts size (unintentional side effect)
 *
 * Putting this in your userChrome.css fixes the bookmarks library when it opens in another window. 
 * (Ctrl+Shift+O [letter o, not number 0])
 *
 * Putting this in your userContent.css fixes the bookmarks library when it opens in another tab. 
 * ( chrome://browser/content/places/places.xul )
 *
 * This is not intended for styling the bookmarks toolbar or sidebar.
 *
 * Screenshot: https://i.imgur.com/9hTJUni.png
 *
 * Contributor(s): WithThisHerring
 */

@-moz-document url(chrome://browser/content/places/places.xul)
{

  *    /*  note that the asterisk (*) means all items!  */
    {  
    color: #9c9c9c !important;
    background: #2f2f2f !important;
    border-color: #00000000;
    border-width: 1px;
    opacity: 1.0;
    }
  
  treecol,
  treechildren,
  #placesToolbox,
  #places,
  toolbarbutton,
  button,
  textbox
    {
    -moz-appearance: toolbargripper !important;    /* removes white tool sections */
    }
   
  textbox,
  tree
    {
    border-style: solid !important;
    border-color: #111111 !important;
    border-width: 1px !important;
    -moz-appearance: none !important;              /* removes white tool sections */
    }

  treecol
    {
    border-bottom-style: solid !important;
    border-bottom-color: #111111 !important;
    border-bottom-width: 1px !important;
    -moz-appearance: none !important;              /* removes white tool sections */
    }
}

auto-hide.css doesn't work properly for some reason in 58+...

i'm sad. tried fixed it but couldn't figure it out.

just letting you know !

The README.md documentation page should have a minimum info, how this is to be used. What folders and what files should be placed where.

I was able to hide the Pocket icon that appears on the end of address bar, but haven't found a way to hide Reader View, Page Actions (3 dots), the Flag icon & Bookmark (Star Icon).

I'm using Default Bookmark Folder & FlagFox (which is much better than the flag on the address bar). Is there a way to hide the "Show History" (Down arrow) icon as well?

Bonus! Is there a way to move the Status Bar (link bar at the bottom left) to another corner or make it more transparent?

As you can see in the pic above, it's covering a portion of the download bar add-on.

Hi,

After updating to Firefox 74 Icons seems to be arranged horizontally and not vertically like before.

Before I had width set to 77% to accommodate a space for some icons before the bookmarks toolbar:
#personal-bookmarks {
height: 100% !important;
width: 77% !important;
transform: rotate(-180deg)!important;
transform-origin: 50% 50%!important;}

Before transform:
https://i.imgur.com/kee8HoM.jpg

After transform:
https://i.imgur.com/WUgIG3g.jpg

Without bookmarks toolbar:
https://i.imgur.com/UGxO2Pm.jpg

The add-on icons seems to be arranged after the bookmarks toolbar.
Sorry if that seems vague.

Thanks

Despite Firefox 57 nearing and Stylish won't be able to modify UI CSS directly, there is an extension called reStyle that works with Stylish UI styles and therefore could also install the styles from this repository.

These styles should work when installed, but inefficiently - quoting the developer:

[...] reStyle is meant as a replacement for Stylish and requires @document sections to know where to put the different kinds of styles. Without them, the only thing reStyle could do would be to apply the style to the UI, about:-pages and every web page. [...]
Most of the styles in the linked repo should actually be surrounded with this (even when directly pasted to the userChrome.css file):

@-moz-document
    url(chrome://browser/content/browser.xul)
{
    /* css from file here */
}

Without a surrounding @document rule (or a @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");), reStyle will not recognize a style as a UI style.

What do you think? Would you be willing to add these lines to all scripts posted here?

Hello,

not sure if this is perhaps a bug in the Developer Edition but since yesterday (and build 65.0b1, Firefox Developer Edition), the autohide of the navigation bar is not working properly.

https://i.imgur.com/EQ03ciC.png

Nothing I try seems to make the width of the dropdown match the width of the bar. I can get it to match in one size, but once I resize the window, it doesn't line up anymore.

I tried applying a max-width to the url bar and that seems to work -- but not for the dropdown.

hello,

need help modifying userChrome.css so that I could read the bookmarks (losing my eyesight ;-{, and tons of bookmarks being used) .. have tried most anything I could find discussed, but none of it works .. (the zoom about:config setting is NOT what I need, as that changes the tab-font-size too, and I'd like that to stay as is, same for menus)

any help would be appreciated

thanks

Title. Right now, I'm using auto-hide.css and that CSS modification alone, and it makes the bookmark bar unusable.

At my workstation I find if comfortable to have the tabs arraigned vertically on the left. This allows for better vertical space, especially with wide and ultrawide displays. Is this possible to do with css tweaks?

Timvde/UserChrome-Tweaks/hamburger/move-to-top-left-Linux-Windows.css
Tested on Firefox 65.0.1 (64-bit) for Windows with default dark theme enabled.

The original emty space before the first tab reappears to the right of the newly moved hamburger menu only when windowed.

Here is a list of my styles that should work in Firefox 57, please add them to this repository. Maybe you can get the original screenshots with some hacking around, or just make new ones.

https://userstyles.org/styles/146846/android-style-tabs-fx-57 - androidStyleTabs.css

https://userstyles.org/styles/121537/compact-find-bar-fx-50 - compactFindBar.css

https://userstyles.org/styles/140689/gray-flat-tab-icons-fx - flatTabIcons.css

https://userstyles.org/styles/92774/hide-back-forward-in-maximized-window-fx-42 - hideBackForward.css

https://userstyles.org/styles/146845/merge-tabs-and-navigation-bar-fx-57 - mergeTabsNavigation.css

https://userstyles.org/styles/121010/move-identity-box-to-the-right-fx-50 -identityBoxRight.css

https://userstyles.org/styles/146843/prevent-tab-overflow-fx - preventTabOverflow.css

https://userstyles.org/styles/141315/private-browsing-address-bar-background - privateAddressBackground.css

Since Firefox 72 the script hides the bookmark bar permanently.

Title.
In Firefox 75, possibly a product of the Megabar, the position of the navbar is off when using toolbars/auto-hide.css.
https://streamable.com/tze7ej

I checked this on Windows 7 Professional x64 and Windows 8.1 Professional x64 too.
If I use the code from auto-hide.css, this is the result I get:

That strange white bar that appears alongside the Google tab is actually a part of the webpage I'm visiting, Google.

If I modify it in the same way mentioned by @lokmeinmatz right here, Firefox on Fullscreen does look correct, as you can see right below:

Note: I had to modify the amount of pixels from 7 to 5 for Firefox to look correct on my end.
I suppose that might depend on the user's desktop resolution? Mine's 1360x768, in case that matters.

But then the problem becomes the Windowed mode, as you can see here, with a strange black bar showing up:

As a matter of fact, I noticed that on Windows 7 the issue is not present if you turn off Aero. Sadly, that is something you can't just do in Windows 8/10, because it breaks a lot of stuff.

EDIT: Oh yes, I am using Mozilla Firefox v68.0.2 x86, by the way.

Title. This userChrome snippet is not working correctly.

It displays a weird black bar on the place where the bookmarks toolbar is originally located.

For reference, I'm using Mozilla Firefox v86 (32-bit).

Here are some userstyles I've made in the past: https://userstyles.org/users/134599

Most of them are probably irrelevant/outdated but there might still be stuff that's usable, not sure.

The area of the hamburger menu button now takes up the entire length of the tab bar and the address bar. With no tweaks it looks like this:

I was able to get the button "image" back into the corner by tweaking the padding/margins but the clickable button remains the same size (as illustrated in this gif):

With Firefox 75, how to hide tab bar (tabbar) when only one tab is open ?
It was working fine before

Shortly after opening any link, be it on a new tab or not, you can see the bookmarks bar for some seconds before it dissapears.

On FF 59

was using the snippet here:
https://github.com/Timvde/UserChrome-Tweaks/blob/master/toolbars/show-bookmarks-only-on-newtab.css

Worked for awhile, soon as I upgraded to version 66, this stopped working. Far as I can tell the new tab title is still "New Tab" , or "about:newtab". Any pointers would be great!

Thanks!

In the latest nightly the bookmarks bar overlaps the location bar when sliding up. I worked aroud it by scaling it in from the top instead of sliding it but it doesn't quite look as cool. I've attached a patch for this.
sliding-bookmarks-bar-patch.zip

The latest auto-hide.css works well for me on nightly (thanks for that) except that it isn't expanded when focused using the keyboard shortcut (Ctrl-L).

The margin-bottom on :root:not([customizing]) #navigator-toolbox doesn't take into account the drag space, chewing up 8px (var(--space-above-tabbar)) of the web page content area space thing.

Hi there,

Updated to 72 this morning and noticed that something must have changed that affects auto-hide.

Display remains the same when selecting url bar via ctrl-L but flickers if you attempt to hover

Firefox 66.0.3

I'm using https://addons.mozilla.org/en-US/firefox/addon/reload-in-address-bar/

This CSS no longer works in Firefox.
https://github.com/Timvde/UserChrome-Tweaks/blob/master/extensions/force-reload-in-address-bar-to-end.css

Does anyone know how to fix? Thank you.

Hello,
I'm posting the tutorial for easily (kinda) previewing styles, you could add this to the readme for example.

Feel free to modify this in any way (wording, markup, simplification). Reference: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox https://developer.mozilla.org/en-US/docs/Tools/Style_Editor

Testing styles

Pre-setup

Before being able to try styles, you need to enable two developer options (only do this once). To do that:

1. Press Ctrl + Shift + I on Win/Linux or Cmd + Opt + I on Mac
2. Click on the cog that appears in a right or left top corner, next to other buttons.
3. Scroll down to Advanced Settings and check the settings "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging".
4. Close the developer tools panel and proceed with next tutorial

Testing a style

1. Press Ctrl + Alt + Shift + I on Win/Linux or Cmd + Opt + Shift + I on Mac
2. Click on the tab Style Editor, choose file userChrome.css on the sidebar
3. Choose the style you want to preview from this repository, copy the code
4. Scroll down on the development tools window textbox, paste the code
5. You should see the style being applied. If you like what you see, you can click Save, otherwise it will disappear after restarting the browser.

Move navigation (address) bar to the bottom of that window as it done with tabbar. But make it hold above tabbar.

When show-bookmarks-only-on-newtab.css tweak is active, bookmarks toolbar does not appears anywhere in Firefox 72.

@BubiBalboa:

There was a tweak where the sound indicator would be moved to the left of the tab, overlapping the favicon to save space. This tweak like many others broke with FF63, I think. Is it still possible to achieve this?

https://github.com/Timvde/UserChrome-Tweaks/blob/master/tabs/sound-indicator-to-the-left.css

I dunno how to make PR so I figured I'll contribute this way.
Tested on W10/57.0a1 (2017-09-03) (64-bit). Not sure if complete, also probably hacky, so if someone can make it better you are welcome 👍

/* Remove circle, background, padding from backbutton */
:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
    background-color: unset !important;
    border: unset !important;
    padding: var(--toolbarbutton-inner-padding) !important;
    border-radius: var(--toolbarbutton-border-radius) !important; }
/* Hover and Active states to mimic other buttons */
:root:not([uidensity="compact"]) #back-button:hover:not([disabled]) > .toolbarbutton-icon {
    background-color: var(--toolbarbutton-hover-background) !important; }
:root:not([uidensity="compact"]) #back-button:active:not([disabled]) > .toolbarbutton-icon {
    background-color: var(--toolbarbutton-active-background) !important; }
/* Remove pre-padding */
:root:not([uidensity="compact"]) #back-button {
    /*padding-top: unset !important;
    padding-bottom: unset !important;   /* These two will screw nav-bar height (Nightly57)*/
    padding-inline-start: 3px !important; }

It's hidden but hovering doesn't reveal it.

This is my collection of snippets for FF Quantum, I figured you might want to add some of them. https://gist.github.com/ewasion/a85e770e64b03b1a1da555c4b9d2e2d8

on my firefox 65 on windows 10 tab hiding did not work properly.

1. I had to make the menu permanent to see the minimize/maximize/close-button
2. had to adjust to #nav-bar { margin-top: -28px;} instead of the -40px

after that it looks like before for me

Thanks a lot for this excellent tweak. I'm already using it full-time.

This is to point out a minor issue. When the nav bar shows, the content is quickly shifted down by 1 or 2 pixels, and shifted back up after the nav bar is hidden. Here is a screen-cast of the problem:

https://i.imgur.com/jotJ0fb.mp4

This is on Debian stable.

Tagging @AlexVallat who proposed the PR.

When the navbar appears on hover, the content moves down by a bit, so that it's still fully visible. I assume that's the desired behavior. Since I keep a few firefox windows around, when I am mousing around to find things the browser content keeps moving up and down. I was wondering if it could be possible to switch the behavior to having the navbar overlap content, and keep the content exactly where it is. I don't need to see the first line or two of the content when I am acting on the navbar, at least I don't see the use case. Unfortunately I am not versed enough in CSS to pull it off (despite a few pitiful attempts, autohide.css is complex enough to thwart my efforts). I foresee five possible outcomes:

1. Everybody agrees this should have been the behavior all along and it becomes default
2. It becomes an option with some simple switch
3. It becomes some fork of auto-hide
4. It doesn't become anything but the CSS gurus would be willing to give me some hints as to how to get it done
5. I am on my own.

I will be grateful for 1-4 and understanding in case of 5. Cheers.

multi-row-tabs-rounded-corners.css on 77.0.1 does not work properly:

1. All non-active tabs are displayed but hidden
2. All tabs are still displayed in single row
3. Firefox opening becomes slow enough

Tia

Hi all,

I started this repository because I had the feeling somebody needed to step up and do it. Over the past year-and-a-few-months, I learned a few things:

• Requiring my extremely high quality standards on minor stuff like git history has been tough for contributors. Many people contributing know CSS a lot better than me, but don't know git very well. I got some remarks on this in the beginning, and I believe those people were right.
• This repository got way more popular than I initially imagined. While this is of course positive, I always wanted to test every piece of CSS by myself. I did find some bugs and blocked PRs based on them, even though they were, again, sometimes relatively minor. This also can be demotivating for developers, and testing on three platforms was also a lot of work for me, so I ended up losing my motivation too (as you probably have noticed).
• I even required specific code style for the CSS, without providing the actual linting or CI to check it. This also proved to be frustrating for many, and understandably so.

So, how would I like to proceed? I still think that this repository can have purpose for many, and seeing PRs arrive every now and then, I think I'm not alone. So I'd like to make this a real community repository that minimizes the work for me, and gives all of you more freedom. More concretely:

• I stop testing all code. It's on you. I trust you to test it yourself. If you want me to test it on a specific platform because you don't have access to it, I will, but you need to ask it.
• I stop caring about git history (for this specific project). I will keep using the "Squash and rebase" button, hoping that it will help, but I'm not going to do manual rebases anymore.
• Use whatever code style you want. I will leave the guidelines in the contribution guide, and I still encourage being consistent, but I won't block PRs on it.

How does this sound?

@Madis0 I am particularly interested in your opinion, as I see that you have forked this repository.

Originally, I thought it just stopped working, but then I noticed that the margin (10px by default) onto which you'd move your mouse to make the sidebar pop out would be visible while a new page was loading into a blank tab, but would be gone by the time the page loaded up. It seems almost as if the page loads on top of the sidebar, such that I can't bring it back to the foreground to be usable.

Hi

I just updated to FF58 this morning and i found out that there's a extra gray bar when the navbar is hidden.

https://imgur.com/a/HLQgA

It seems that the variable --tab-toolbar-navbar-overlap is undefined by default. So I've changed the line 20.

Before :
--tabbar-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tab-toolbar-navbar-overlap));

After :
--tabbar-height: calc(var(--tab-min-height) + var(--space-above-tabbar));

That workaround is causing a minor glitch. When I hover the tabbar the webpage seems to go up by 1px.

EDIT
[2017-11-23] See #67

Title. This userChrome snippet is not working.

For reference, I'm using Mozilla Firefox v86 (32-bit).

I've updated firefox to version 60.0~b6+build1-0ubuntu0.17.10.1 today and noticed that tabs are fat again (too fat because I set layout.css.devPixelsPerPx to 1.5 in about:config due to dpi problems).
I assume that one stopped working: https://github.com/Timvde/UserChrome-Tweaks/blob/master/tabs/more-compact-tabs.css

Thank you for your snippets. To reduce flickering, I would like to replace :hover with a click on the tab bar. It is fine that the bar disappear on hover out, but IMO it would make more sense to only display it after the tab bar is purposely clicked.

Can it be done? I tried replacing :hover with :active, but the bar disappear as soon as the left click is released.

The CSS files should be linted to have a common code style + no errors.

There isn't much else to say, really.
auto-hide.css breaks Firefox 72 entirely. The browser is not really usable with it alone.
https://streamable.com/efz9t

I'm not entirely sure if this is a bug or if it's the intended behavior of the CSS, so I decided to bring up the matter just in case.
On Windows 10, by using tabs/more-compact-tabs.css and that alone, the window of Firefox has this empty line above the tabs bar.
https://streamable.com/zzhkkw

It doesn't happen on Windows 8.1, as I use the same code there and "the issue" is not present.
I'm not sure if it'd be possible to "fix it" on Windows 10?

Regarding the style: compact-findbar-on-top.css