timvde / userchrome-tweaks Goto Github PK
View Code? Open in Web Editor NEWA community maintained repository of userChrome.css tweaks for Firefox
License: GNU General Public License v3.0
A community maintained repository of userChrome.css tweaks for Firefox
License: GNU General Public License v3.0
With Firefox 75, how to hide tab bar (tabbar) when only one tab is open ?
It was working fine before
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
Move navigation (address) bar to the bottom of that window as it done with tabbar. But make it hold above tabbar.
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!
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.
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.
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.
Title. This userChrome snippet is not working.
For reference, I'm using Mozilla Firefox v86 (32-bit).
on my firefox 65 on windows 10 tab hiding did not work properly.
#nav-bar { margin-top: -28px;}
instead of the -40px
after that it looks like before for me
Regarding the style: compact-findbar-on-top.css
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):
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
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; }
When show-bookmarks-only-on-newtab.css tweak is active, bookmarks toolbar does not appears anywhere in Firefox 72.
Title. Right now, I'm using auto-hide.css and that CSS modification alone, and it makes the bookmark bar unusable.
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?
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 !
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:
I will be grateful for 1-4 and understanding in case of 5. Cheers.
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.
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.
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.
It's hidden but hovering doesn't reveal it.
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'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
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.
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
I just updated to FF58 this morning and i found out that there's a extra gray bar when the navbar is hidden.
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
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.
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
multi-row-tabs-rounded-corners.css
on 77.0.1
does not work properly:
Tia
Since Firefox 72 the script hides the bookmark bar permanently.
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
Before being able to try styles, you need to enable two developer options (only do this once). To do that:
Ctrl
+ Shift
+ I
on Win/Linux or Cmd
+ Opt
+ I
on MacCtrl
+ Alt
+ Shift
+ I
on Win/Linux or Cmd
+ Opt
+ Shift
+ I
on MacThe CSS files should be linted to have a common code style + no errors.
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.
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
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
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.
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
"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 */
}
}
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).
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
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:
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:
How does this sound?
@Madis0 I am particularly interested in your opinion, as I see that you have forked this repository.
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).
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?
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
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 theuserChrome.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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.