Closed Jgr9 closed 3 years ago
radar54
commented
5 years ago Thanks Aris-t2. I appreciate your help.
Is there anything that can get the search bar back to what it was in v63.x (wider and either at the end of the Menu bar, as shown below, or in its own toolbar)? I tried the search bar mods in the .css file but they did not seem to give me what I'm looking for. thanks.
Aris-t2
commented
5 years ago @radar54 You can restore some features of the old searchbar using JavaScript. You can find the code in my CustomJSforFx collection: https://github.com/Aris-t2/CustomJSforFx/issues/11
Infernoflower
commented
5 years ago I tried copying the whole userChrome script into my profile, and it seems to have moved the tabs underneath the navigation bar. However, there is a space between the tabs and navigation bar, and the tabs look tinier underneath there. Is there a way to fix this? Here's what I mean:
Aris-t2
commented
5 years ago @Infernoflower Doesn't happen here on Win10 with latest files. Can anybody confirm the issue occurring for Infernoflower ?
yurikhan
commented
5 years ago I took the plunge today. Installed Firefox 65 and spent some time re-customizing userChrome.css.
From what I gather, the current DOM structure is:
which makes it a nuisance to put anything in between the menu bar and the tab bar, especially in the multi-row tab bar case. Because of that, we have to either hide the menu bar altogether, or always have it visible. (Am I getting it right?)
Would it be feasible to keep the menu bar stuck to the tab bar while making the tab bar multi-row and putting the titlebar container below navigation?
← → [info|http://somewhe.re/ … *] (addons) (hamburger)
Bookmark 1 Bookmark 2 Bookmark 3
File Edit View History Bookmarks Tools Help
[Tab 1][Tab 2][Tab 3] |Bookmark 1|
|Bookmark 2|
|Bookmark 3|This way maybe we could have a menu bar that pops up when invoked but hidden most of the time, and a sensible order of toolbars when the menu is hidden?
gunnora
commented
5 years ago Firefox "upgraded" me to Firefox Quantum 65.0 today, messing up my tab placement. I'm on Windows 7 Home Premium 64-bit (6.1, Build 7601) Service Pack 1
Not sure what I'm doing wrong. Went to about:profiles, opened the folder, created a \chrome\ folder, and unzippedcustom_css_for_fx_v2.3.8.zip into it. I actually have two profiles, one in Roaming and another, so I put the files in both places.
Additionally, I edited userChrome.css to add a /* before:
@import "./css/buttons/buttons_on_navbar_classic_appearance.css";
@import "./css/buttons/icons_colorized.css";I closed Firefox and restarted. Unfortunately, my tabs are still up top, where they are disembodied from the data they represent. Tabs should be next to the page they open, darn it.
Any suggestions what I should change?
Acid-Crash
commented
5 years ago @gunnora Uhmmm, have you enabled/uncommented the corresponding line for the feature?
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; /**/ /* <-- tabs not on top Fx65+ */@yurikhan Yes, it would be possible to move the "titlebar" container to the bottom of navigation toolbox keeping menubars and tab toolbars internal features intact. You still would need to "fix" the top area where the actual titlebar was and also force move caption buttons to the top again, because Mozilla devs though it was a good idea to put two sets of captions buttons into Fx65+, one set on menu (if it is visible) and one set on tabs toolbar (if menubar is hidden), makes sense, right?
From my point of view the only logical toolbar configuration should be this (DO IT Mozilla devs, if you read this!!! ;-)):
--> Offering a default option to change the order of toolbars (excl. titlebar)
gunnora
commented
5 years ago @gunnora Uhmmm, have you enabled/uncommented the corresponding line for the feature?
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; /**/ /* <-- tabs not on top Fx65+ */
D'oh! Thank you!
justsome12
commented
5 years ago @Aris-t2 first thanks for you great work! Second I have a question: What is the easiest way if I only want the tabs below and nothing else?
Acid-Crash
commented
5 years ago Hi @Aris-t2,
Recently I've run into another CSS solution for TabsBelow Navbar (single row) .
IMHO it looks neat and "native" (at least on Windows)))
Maybe you find it useful for potential improvement of your own solution.
Original link (in russian) https://forum.mozilla-russia.org/viewtopic.php?pid=766645#p766645
Kaneki-0
commented
5 years ago Hi there, i'm using Firefox 65 with the latest css version (2.4.0).
I've managed to put tabs below the navigation toolbar and bookmarks using the code "./css/tabs/tabs_below_navigation_toolbar_fx65.css", but their size won't change, even using the code "./css/tabs/classic_squared_tabs.css".
It always worked past updates. What am i doing wrong?
I'm using windows 10.
Aris-t2
commented
5 years ago @itge13 Use tabs_below_navigation_toolbar.css + tabs_below_navigation_toolbar_fx65.css
@Acid-Crash Thanks.
@Kaneki-0 Works fine for me on Windows 10 with tabs on top and not on top. Test a clean setup and only change "--classic_squared_tabs_tab_height" in config/general_variables.css
KathrynBassett
commented
5 years ago I'm still having a problem. Firefox Quantum 65.0 and it says it's up to date (Win 8.1)
I made css folder in profile\chrome\ and tabs folder in the css folder.
I put tabs_below_navigation_toolbar.css and tabs_below_navigation_toolbar_fx65.css in the profile\chrome\css\tabs folder
I downloaded https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css version 2.4.0 and put it in profile\chrome folder
In userChrome.css, I deleted /* from line 328 so I have @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css
Tabs are now on the same line as my bookmarks. What did I do wrong?
Kaneki-0
commented
5 years ago @Aris-t2 Thank you for your reply. Seems like i had the density interface set to "touch", changing it to "normal" has solved my problem! :)
TLoATDaE
commented
5 years ago @Aris-t2 I'm (desperately) trying to implement this fix, but I must be doing something wrong... First, let me provide a bit of summary, here: Win10 Home 64bit FF 65.0 (64bit) Did the Copy/Paste of the file here: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css I had to paste the file into Notepad++ and save it into my "chrome" directory. Added the files: tabs_below_navigation_toolbar.css and tabs_below_navigation_toolbar_fx65.css to the /css/tabs/ folder in my chrome directory. (I think that's where they are supposed to go). In the userChrome.css file, I removed the "/* " from (what is for me) line 327, so it looks like this: @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; /*/ / <-- tabs not on top Fx65+ */ Then saved the file off, closed Firefox, and restarted the program... Sadly, no joy here. Maybe I'm missing a step, or something else rather critical, perhaps? I'm going to review the 2 downloaded files, and see if they are what I expect, or if I have to do the cut/paste/save routine like I did for the userChrome.css file, and see if that makes a difference.
Will update when I have seen something happen. ~Peace
UPDATE OK, I found the page: https://github.com/Aris-t2/CustomCSSforFx/releases and downloaded/installed the files from the archive. Next, I edited line 338, as mentioned above, saved off, and restarted Firefox.
VICTORY!!
Let me thank you profusely for your diligent work, here! Mozilla keeps breaking the fixes, and wondering why people gripe incessantly about it. It's great to see someone in the community willing to put in the effort to keep up and fix thing that Mozilla keeps monkeying with. Now, if I can just get back my "Image Toolbar" extension that use to work well, I'll be more content...
~Peace!
KathrynBassett
commented
5 years ago @TLoATDaE - Thanks to your update, my issue has been solved as well.
MappyT
commented
5 years ago I grabbed the 2.4 release from the page: https://github.com/Aris-t2/CustomCSSforFx/releases
And I enabled line 338 but it still has my tabs on the top, and I can't figure out which step I must be missing.
Aris-t2
commented
5 years ago @MappyT Are you using the full release? Try to setup /chrome/ folders content from scratch.
MappyT
commented
5 years ago @Aris-t2 I'm using 2.4, I just deleted my chrome folder, made a new one, unloaded the zip contents inside, to start fresh.
All the other settings i have set in the userChrome.css work except the tabs underneath
Aris-t2
commented
5 years ago Backup your browser profile and test with a new one. I have no idea what is causing this on your system, but maybe your browser profile is somehow broken. Are you using any JS scripts?
TLoATDaE
commented
5 years ago @KathrynBassett That's why we share our results! Glad I was of help :)
@MappyT Just curious here, but did you just drop all the files directly into your "chrome" folder, or did you extract them with their file structure intact? The archive makes a series of sub-folders referenced by the css script. Something also of note: Are you using the Windows 10 modification, or are you running iOS? Those are different lines in the code. In the ReadMe part, it refers to "use only one of these at a time", so you might have to try a different line.
I'm going to shut up now, as you have Aris-t2 helping you, and he'll be a LOT more help than I will.
Good luck!
MappyT
commented
5 years ago @Aris-t2 I tried it on a fresh one and it worked, i then tried using my userChrome.css in that fresh profile and it doesn't.
So I started from there and went one by one turning the settings I wanted on, saving, reopening fireox and everything is good now, I don't know how I screwed up my previous userChrome file.
Everything is good now though, thank you for the help.
Michas0206
commented
5 years ago Awesome, got tabs down again easily with your files, good work. Thats the look how Firefox should be delivered. But I still have a little problem, I added
/* Menubar Fog - *********************************************************/
#main-window[style*='--lwt-header-image'] #navigator-toolbox #toolbar-menubar:-moz-lwtheme {
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
}from my old files to get my menubar into my 'correct color' - but can someone give me a hint how I now get my Navbar + shortcutbar - background into the same color as the menubar and active tab?
Aris-t2
commented
5 years ago Try
#main-window[style*='--lwt-header-image'] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
}Replace background-image with background, if it does not work.
paravz
commented
5 years ago First - thank you @Aris-t2 this repo!
If anyone finds it helpful, to get simplified Tabs below navigation using this repo, the following is enough
@import "./tabs_below_navigation_toolbar.css"; /**/ /* changed to import here for visibility */
@import "./tabs_below_navigation_toolbar_fx65.css"; /**/ /* <-- tabs not on top - Fx65+ - Windows/Linux */
/* Don't show line on active tab - literal content of "./css/tabs/default_tabs_no_tab_line.css"; instead of import /**/
.tab-line{
display: none !important;
}
diff -U1 -br tabs/tabs_below_navigation_toolbar.css ./tabs_below_navigation_toolbar.css
--- tabs/tabs_below_navigation_toolbar.css 2019-02-02 06:21:25.219439600 -0800
+++ ./tabs_below_navigation_toolbar.css 2019-02-13 23:28:56.406712600 -0800
@@ -12,3 +12,3 @@
--general_toolbar_color_navbar: linear-gradient(#f9f9fa,#f9f9fa);
- --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa);
+/* --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa); /* Disabled to use FF defaults, since this makes active tab color non-distinguishable from non-active tab*/
--tabs_toolbar_border-tnot_normal_mode_size: 1px;
diff -U1 -br tabs/tabs_below_navigation_toolbar_fx65.css ./tabs_below_navigation_toolbar_fx65.css
--- tabs/tabs_below_navigation_toolbar_fx65.css 2019-02-08 13:10:25.044063400 -0800
+++ ./tabs_below_navigation_toolbar_fx65.css 2019-02-13 23:15:30.710286300 -0800
@@ -5,3 +5,3 @@-@import "./tabs_below_navigation_toolbar.css"; +/* @import "./tabs_below_navigation_toolbar.css"; /*/ / imported from top level for visibility */
@@ -150,2 +150,3 @@ height: 18px !important;
Try
#main-window[style*='--lwt-header-image'] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{ background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important; }
In general your code works, navbar and bookmarks are now in bright grey as the should - but now the space right to the tabs is also bright grey instead of dark grey/without fog:
Is there a way to leave the empty space right of the tabs in dark grey/without fog?
EDIT: Solved by just removing #TabsToolbar, now it looks good, many thanks. Is there also a trick to remove the black line between the menu- and navbar, or to change its color?
Aris-t2
commented
5 years ago Try
#main-window[style*='--lwt-header-image'] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{
margin: 0 !important;
padding: 0 !important;
}or
#main-window[style*='--lwt-header-image'] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{
margin: -1px 0 !important;
padding: 0 !important;
}Try
main-window[style*='--lwt-header-image'] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{
margin: 0 !important; padding: 0 !important; }
or
main-window[style*='--lwt-header-image'] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{
margin: -1px 0 !important; padding: 0 !important; }
Your code added a line to the bottom of my navbar. So I removed it and added
margin: -0.5px 0px !important;
to my menubar-fog-line, so this code here I´ve added
/* Menubar Fog - *********************************************************/
#main-window[style*='--lwt-header-image'] #navigator-toolbox #toolbar-menubar:-moz-lwtheme {
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
margin: -0.5px 0px !important;
}
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: 24px !important;
}
#main-window[style*='--lwt-header-image'] #navigator-toolbox :-moz-any(#nav-bar, #PersonalToolbar):-moz-lwtheme{
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
}
is producing this:
fbnk
commented
5 years ago @Aris-t2 The title bar does not react to any clicks (left click/right click). This means that I cannot move the browser window. I have to resize the whole window to see what's behind it. I marked the affected area in the screenshot. Any ideas?
Aris-t2
commented
5 years ago @fbnk Test version 2.4.4.2. The draggable titlebar issue should be gone now.
fbnk
commented
5 years ago @Aris-t2 Thank you, but now it looks like this again, and the titlebar is still not draggable::
The tabs settings are the following:
@import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS.css";
@import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_default_tabs.css";Thank you in advance :)
Aris-t2
commented
5 years ago Pick only one of them, not both. Test 2.4.4.3.
Aris-t2
commented
5 years ago In my tests the glitch shown on your screenshot is not present with 2.4.4.3. Further more Fx titlebar can be grabbed and moved in normal and maximized window mode for both "classic squared tabs" and "browsers default squared tabs" when using the correct options.
For "classic squared tabs" (Fx65+ & macOS):
@import "./css/tabs/classic_squared_tabs.css"; /**/
...
@import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS.css"; /**/For "browsers default squared tabs" (Fx65+ & macOS):
/* @import "./css/tabs/classic_squared_tabs.css"; /**/
...
@import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_default_tabs.css"; /**/@Aris-t2 It worked. Thank you very much again 👍
radovar
commented
5 years ago I have a problem with tabs in Private mode in Ubuntu. Firefox 65.
@import "./css/tabs/tabs_below_navigation_toolbar_fx65.css";
Aris-t2
commented
5 years ago Are you using the latest files? Are there any buttons on tabs toolbar?
radovar
commented
5 years ago Aris-t2
commented
5 years ago Looks like current code failed to remove private browser indicator from tabs toolbar properly. Test _custom_css_for_fxv2.4.5v2.zip from releases area.
radovar
commented
5 years ago Works now, thanks!
uhle
commented
5 years ago It really works great for "normal" Firefox windows, but not with Firefox windows in "Private Browsing" mode. Please see below the capture from Firefox 65.0.1 in Ubuntu.
Aris-t2
commented
5 years ago Test custom_css_for_fx_v2.4.5v2.zip from releases area.
uhle
commented
5 years ago Thanks a lot for the hint! It's working right away though it does not show the "Private Browsing" icon, but I don't need it anyway.
Aris-t2
commented
5 years ago The icon was causing the glitch so I removed it for now. :-)
ArkadiuszMichalski
commented
5 years ago In last Nightly 68 this @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css"; make that buttons min/max/close dissappear.
This @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; still work correct (buttons are visible), but this style is not designed for multiline tabs.
Aris-t2
commented
5 years ago Only happens with lw-themes. Will be fixed on next update.
ArkadiuszMichalski
commented
5 years ago Right, I did not notice this, thanks for the quick solution.
ArkadiuszMichalski
commented
5 years ago @Aris-t2 in full screen mode we don't see min/max/close buttons when using any of tabs_below_navigation_toolbar files. It's intentional?
Aris-t2
commented
5 years ago Test this:
/* show window caption buttons in fullscreen mode */
#main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"] #TabsToolbar #window-controls {
position: absolute !important;
display: block !important;
top: 0 !important;
right: 0 !important;
margin-top: -32px !important;
z-index: 1000 !important;
}
#main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"] #nav-bar {
-moz-padding-end: 110px !important;
}
@media (-moz-os-version: windows-win10) {
#main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"] #TabsToolbar #window-controls *,
#main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"]:-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar #window-controls * {
color: black !important;
fill: black !important;
}
#main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"]:-moz-lwtheme #TabsToolbar #window-controls * {
color: white !important;
fill: white !important;
}
}
@media (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
#main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"] #nav-bar {
-moz-padding-end: 60px !important;
}
}Not work, still not visible, if I unset tabs_below_navigation_toolbar also not visible, when remove above code buttons appear. Hmm this margin-top: -32px !important; is wrong, I will study why.
Edit: ok when set to 0px then we see buttons:
Once again thx for fast help. This also should by apply default to your style.
Edit: wait, we lost hamburger:) Edit: now I see that we lost hamburger when using any of tabs_below_navigation_toolbar, above code will bring back min/close/max, better this than nothing...
Ok, so I'm here (for the first time) after my Tabs Below the Nav Bar and Bookmark Bar userChrome code has apparently been broken again by the most recent Nightly. 20181106
I've tried yours, and if I've implemented it correctly (I'm kind of a novice), it also doesn't seem to have an effect. I haven't used a css folder and @import before, so I created one in the folder along with my userChrome and put your extra css in it. I uncommented the line in your userChrome, and also just tried the line all by itself. Like the code I have, it doesn't seem to be working anymore on the new Nightly, unless I did something wrong or there is something else that I need to do.
65.0a1 (2018-11-06) - 20181106 - Windows 64 bit
Oh and I'm just realizing now you're the CTR guy... lol