[Firefox 65+] 'tabs below' / 'tabs not on top' changes

[Jgr9]

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

[jra66]

Hi Aris,

after updating from Firefox 64b to 65b I noticed that moving nav bar up to FX title bar does not work any more, at least with my configuration. I am on Windows 7 with basic theme (non-aero) and use both of your CSS files, "tabs_below_navigation_toolbar_fx65.css" and "tabs_below_navigation_toolbar_higher_navbar_positon_fx65.css". Up to FX 64b everything was ok, but now title bar just remains empty. See the screen shot, I disabled all of my own userchrome files keeping only yours.

Is there any way to get nav bar into title bar again?

Furthermore, I noticed a 1px offset of the bottom line of tab bar, as you see in the screen shot. It's really funny as this offset only occurs in case of tab bar overflow, with only a few tabs all is fine.

Thanks for your great work!

[Aris-t2]

I will look into it. In the mean time replace tabs_below_navigation_toolbar_fx65.css files content with this ones: ...

[jra66]

Thanks, but the downloaded file is identical to the one in v2.3.3 :smile:

[Aris-t2]

https://github.com/Aris-t2/CustomCSSforFx/releases/tag/2.3.4

[jra66]

Thanks a lot Aris, but moving up nav bar for 30px is too much, so it gets cut on top:

I modified it to margin-top: -20px. Now it is ok for me, but I don't know if this can be used in general:

With respect to the 1px offset of the bottom line of tab bar in case of tab bar overflow I noticed that not the bottom line itself changes its position but the tabs are moved 1px to the top.

[Aris-t2]

I see there is room for adjustment. ;-)

[Infernoflower]

Hello, I updated to Firefox 65 today and my menu isn't showing up and my tabs are now on top of my navigation bar. What do I need to do in my userChrome script to change this? I've tried putting in:

/* @import "./css/tabs/tabs_below_titlebar_above_navigation_toolbar.css"; /**/
/* - TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS (tabs not on top) *****************************/
/* [!] Note: do not use OS titlebar with 'tabs not on top' code on macOS ************************/
/* @import "./css/tabs/tabs_below_navigation_toolbar.css"; /**/                     /* <-- tabs not on top */
/* @import "./css/tabs/tabs_below_navigation_toolbar_macOS_fix.css"; /**/               /* <-- macOS fix */
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; /**/                        /* <-- tabs not on top Fx65+ */
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_fix.css"; /**/  /* <-- macOS fix Fx65+ for v1 not v2 */
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_fix_default_tabs.css"; /**/     /* <-- macOS fix Fx65+ for v1 not v2 and default tabs */
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css"; /**/ /* only for multi-lined tabs support, causes glitches with disabled menubar */
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2_force_hidden_menubar.css"; /**/ /* only for multi-lined tabs support, no menubar with OS titlebar */
/* - TABS BELOW MAIN CONTENT (tabs on bottom) - EXPERIMENTAL ************************************/
/* [!] SUPPORT THREAD: https://github.com/aris-t2/customcssforfx/issues/33 **********************/
/* [!] not compatible to 'tabs toolbar - multiple tab lines' option *****************************/
/* [!] not compatible to 'toolbars - add-on bar (simulated add-on bar)' option ******************/
/* @import "./css/tabs/tabs_below_main_content.css"; /**/  /* <--- EXPERIMENTAL */
/* @import "./css/tabs/tabs_below_main_content_fx65.css"; /**/ /* <--- EXPERIMENTAL */ /* <-- tabs below main content Fx65+ */

and that hasn't worked. What should I do? And do I need to delete any parts of it?

[kmssd]

Hello, I updated to Firefox 65 today and my menu isn't showing up and my tabs are now on top of my navigation bar. What do I need to do in my userChrome script to change this? I've tried putting in: ...

and that hasn't worked. What should I do? And do I need to delete any parts of it?

From what I understand you have to remove the "/" and "*" before the @import of the line you wanna use, but I haven't been able to figure out the tabs either.

[Infernoflower]

Thank you very much for your help. Do I need to remove the /**/ at the end too? And which of the commands do I need to use? I'm using a Windows 10 laptop.

[lotte67890]

Thank you very much for your help. Do I need to remove the /**/ at the end too? And which of the commands do I need to use? I'm using a Windows 10 laptop.

No you don´t have to remove the /**/ at the end...

[Infernoflower]

Thank you for your help.

[Infernoflower]

By the way, I've tried getting rid of the "/" and "*" at the beginning of "@import" but the script isn't working.

[lotte67890]

@Aris-t2 Thank you so much for your effort!!! Anyway I would like to have the tabs in between the navigation and the bookmarksmenu... Should that be possible? I´m running OS X 10.11.6...

[lotte67890]

By the way, I've tried getting rid of the "/" and "*" at the beginning of "@import" but the script isn't working.

Be aware that some options only work for specific OS´s... read the comment at the beginning of the section and this thread here... You may also want to start from scratch with having all @import lines begin with "/* " then try them out and configure whats applicable for you...

[Infernoflower]

The operating system I'm using is Windows 10 Home. Which of these scripts will work with it?

/* [only use one at a time] - below titlebar OR below navigation bar OR below main content ******/
/* - TABS BELOW TITLEBAR (Fx56-like) ************************************************************/
/* @import "./css/tabs/tabs_below_titlebar_above_navigation_toolbar.css"; /**/
/* - TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS (tabs not on top) *****************************/
/* [!] Note: do not use OS titlebar with 'tabs not on top' code on macOS ************************/
/* @import "./css/tabs/tabs_below_navigation_toolbar.css"; /**/                     /* <-- tabs not on top */
/* @import "./css/tabs/tabs_below_navigation_toolbar_macOS_fix.css"; /**/               /* <-- macOS fix */
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; /**/                        /* <-- tabs not on top Fx65+ */
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_fix.css"; /**/  /* <-- macOS fix Fx65+ for v1 not v2 */
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_fix_default_tabs.css"; /**/     /* <-- macOS fix Fx65+ for v1 not v2 and default tabs */
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css"; /**/ /* only for multi-lined tabs support, causes glitches with disabled menubar */
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2_force_hidden_menubar.css"; /**/ /* only for multi-lined tabs support, no menubar with OS titlebar */
/* - TABS BELOW MAIN CONTENT (tabs on bottom) - EXPERIMENTAL ************************************/
/* [!] SUPPORT THREAD: https://github.com/aris-t2/customcssforfx/issues/33 **********************/
/* [!] not compatible to 'tabs toolbar - multiple tab lines' option *****************************/
/* [!] not compatible to 'toolbars - add-on bar (simulated add-on bar)' option ******************/
/* @import "./css/tabs/tabs_below_main_content.css"; /**/  /* <--- EXPERIMENTAL */
/* @import "./css/tabs/tabs_below_main_content_fx65.css"; /**/  /* <--- EXPERIMENTAL */     /* <-- tabs below main content Fx65+ */

/* - MOVE NAVIGATION TOOLBAR TO HIGHER POSITON (tabs not on top) - [only use one at a time] *****/
@import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon.css"; /**/          /* <--- EXPERIMENTAL */
@import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon_fx65.css"; /**/         /* <--- EXPERIMENTAL */
@import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon_with_appbutton.css"; /**/  /* <--- EXPERIMENTAL */
@import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon_with_appbutton_fx65.css"; /**/  /* <--- EXPERIMENTAL */
@import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon_with_appbutton_icon_only.css"; /**/  /* <--- EXPERIMENTAL */
@import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon_with_appbutton_icon_only_fx65.css"; /**/  /* <--- EXPERIMENTAL */
/************************************************************************************************/

[lotte67890]

The operating system I'm using is Windows 10 Home. Which of these scripts will work with it?

@import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; /*/ / <-- tabs not on top Fx65+ */

I would try this one first. Btw. CSS is a language that describes the style of an HTML document, not a script (language)

[camartinez1229]

Hello, I just updated to FF65 from 64 today, and now the box surrounding the upper right minimize, restore, and close buttons overlaps into my search box. I'm on Windows 8.1, with v2.3.7 of the custom CSS. Is there a fix for the overlap shown, or will an update fix it?

[Aris-t2]

@all Please don't quote posts with code or at least remove the code before posting, thanks, :-)

Firefox 65 offers some major code changes. It is important to use the latest files of this project and to make sure @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; is active (when using Firefox 65) and not @import "./css/tabs/tabs_below_navigation_toolbar.css";

MacOS users require additional files: @import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_fix.css"; or @import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_fix_default_tabs.css"; for default tabs.

@Infernoflower Follow instructions inside userChrome.css like before. You only need to import a different file now. Make sure you update the whole package and not only a few files. Firefox/menu buttons is still there.

@lotte67890 This project does not offer code for positioning tabs toolbar between navigation toolbar and bookmarks toolbar.

@camartinez1229 Does this happen using the latest files too? Have you tried to disable the "tab title in titlebar" code.

[camartinez1229]

I am using the latest v2.3.7 files, and have @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; enabled. I tried disabling the "tab title in titlebar", and it didn't help.

[Infernoflower]

The operating system I'm using is Windows 10 Home. Which of these scripts will work with it?

@import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; /*/ / <-- tabs not on top Fx65+ */

I would try this one first. Btw. CSS is a language that describes the style of an HTML document, not a script (language)

Thank you very much for your help, lotte. Hope it can help me.

[Aris-t2]

@camartinez1229 I will look into it. Its been a while since I started a Win8 VM.

[Infernoflower]

I've tried, only enabling the script listed and that hasn't put my tabs on the bottom of the navigation bar. Do I need to get rid of the EXPERIMENTAL next to it? And what does 'own new option' mean?

[radar54]

I keep getting a rendering error, so I can not show a screen shot of my file installation.

I copied all files and folders in "custom_css_for_fx_v2.3.8_preview2.zip" into my chrome folder within my firefox profile. I did not modify any of the files. Is this the proper way to install the files? If so, what else must I do to get the multi tabs to work in Firefox 65+ (Windows 10 Home x64) because the new css files do not seem to do anything.

Thanks

[Aris-t2]

@camartinez1229 Latest release should fix the issue.

@Infernoflower The EXPERIMENTAL is just text to inform users this option is experimental. Try to setup everything again and only "enable" the desired option the way it is described on the main page or the top area of userChrome.css.

@radar54
Everything on how to setup the files can be found on this projects main page. https://github.com/Aris-t2/CustomCSSforFx#where-to-find-firefox-profile-folder-the-correct-location-for-user-styles

[camartinez1229]

My issue is fixed in 2.3.8. Thank you!

[prkos]

Thank for all your work @Aris-t2 :bouquet:

I only wanted to get "tabs below the Navigation bar after 65 update" feature, and following https://support.mozilla.org/en-US/questions/1242706

I took the files:

• tabs_below_navigation_toolbar.css
• tabs_below_navigation_toolbar_fx65.css

put them in /chrome/ folder inside my profile and added:

@import "./tabs_below_navigation_toolbar.css";
@import "./tabs_below_navigation_toolbar_fx65.css";

to my userChrome.css. I've done it this way instead of using your entire package because I already have modifications in my userChrome.css and userContent.css I want to keep.

But since I already have @namespace in there, the imports work only when placed before it, it doesn't work if they're added at the end of the file. It might be worth to include that info somewhere in your description, to save others some debugging.

[Aris-t2]

@prkos I do not offer support for CSS, if @namespace is used. @namespace is useless anyway, no need for it.

[fbnk]

Hey there, which lines/commands do I have to enable (or disabale?), when using Aris-t2 script (2.3.8) on a Mac running macOS 10.14 and FF 65.0 to achieve the changes shown in the screenshot below? Thanks in advance!

[Aris-t2]

@fbnk Add /* before

@import "./css/appbutton/appbutton_in_titlebar.css";
@import "./css/appbutton/appbutton_in_titlebar_autocolor.css";
@import "./css/locationbar/icons_colorized.css";

Remove /* before

/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css";
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_fix.css";

The blue star is there by default.

Try this:

#urlbar #star-button[starred],
#urlbar #star-button-animatable-box[starred]:-moz-any(:hover,:hover:active),
#urlbar #star-button[preloadanimations][animate][starred]:-moz-any(:hover,:hover:active),
#urlbar #star-button-box[open] #star-button[starred],
#urlbar #star-button[starred]:-moz-any(:hover,:hover:active) {
  filter: grayscale(100%) !important;
}

[Slouch123]

@Aris-t2

I noticed that on a 64-bit Win 7 machine, newly opened tabs are animated. They expand horizontally (slide to the right) when opened, and shrink horizontally (slide to the left) when closed. Plus the new tab will show a blue flash of color sweeping from left to right when opened (see "New Tab" in image).

However, on a 32-bit Win 7 machine, the same FF65 tabs do not display this behavior - they simply "snap" open and closed, with no animation.

Is this animation a function of the custom css? Is there a way to control this behavior?

Thanks!

[fbnk]

@Aris-t2 Thanks! Almost, but now it looks like this :)

[Aris-t2]

@Stouch This is seems to be a default browser feature. CustomCSSforFx does not offer such a feature.

@fbnk Does this also happen with "classic squared tabs" too? Not sure when I last tested "default" browser tabs on macOS.

[fbnk]

@Aris-t2 What do I have to enable/disable?

[Aris-t2]

@import "./css/tabs/classic_squared_tabs.css" should stay enabled. Since it is active by default, you must have disabled it. You are using the complete package and enabling/disabling options through userChrome.css, right?

[fbnk]

Yes, the list isn't shortened in any way - if it's that what you mean. Unfortunately "@import "./css/tabs/classic_squared_tabs.css" didn't work.

[mckay17]

EDIT again xD

The tabs are shorter now.. How can i make them large again, so i can read all tab titles?

[Infernoflower]

Hello, I've tried enabling each of the tabs not on top options in my userChrome script, but the tabs won't move underneath the navigation bar. Am I doing something wrong or do the userscripts just not work on my operating system, which is a 64-bit Windows 10?

[radar54]

If I understand what I read in the userContent.css and userChrome.css files, these 2 files create a menu with buttons. Where do I find this menu with the button? Or maybe I have no idea what I'm reading in these files.

[mckay17]

EDIT: I found it under about:config browser.tabs.tabMinWidth now finally, i can enjoy my fox again :)

@Aris-t2 Thank u alot for the files, its much better with tabs on bottom 👍

@radar54 :D no, u dont understand it..

u have to edit the userChrome.css file with notepad++ u can read all this on the main page

@Infernoflower Hello, I've tried enabling each of the tabs not on top options in my userChrome script, but the tabs won't move underneath the navigation bar. Am I doing something wrong or do the userscripts just not work on my operating system, which is a 64-bit Windows 10?

u have to copy all files and folders to the Chrome folder in ur firefox profile. It works perfect with win10 64bit

[Aris-t2]

@fbnk I will investigate this as soon as I have time to run macOS again.

@Infernoflower Of course this works on Windows 10, you just have to use the correct folders like mentioned on the main page.

@radar54 After correctly setting up latest release files, you can edit css files with an application like Notepad++. Just read the main page. All "how to" setup and edit information is there.

[fbnk]

@Aris-t2 Hey, many thanks! Don't rush it :) I hope I didn't screwed it up myself. Just in case, I attachted my userChrome.css userChrome.css.zip

[radar54]

@Aris-t2 Thanks for the very useful reply, unlike some of the other ones that don't realize that not everyone is a programming wizard

[Aris-t2]

@fbnk I moved the potential bug to an own issue thread: https://github.com/Aris-t2/CustomCSSforFx/issues/186 Continue there.

@radar54 I tried to write everything about how to set up this projects files as detailed as possible on the main page. I know it can be difficult seeing such an amount of instructions for the first time.

[fbnk]

@Aris-t2 Thanks!

[radar54]

In Firefox v65.0 (Windows 10 x64), I want to move my tab bar so that it's "BELOW NAVIGATION AND BOOKMARKS TOOLBARS". So I edited the userChrome.css file on line 334 (in custom_css_for_fx_v2.3.8.zip) and deleted the leading "/*" characters (see below). After closing and restarting Firefox, the toobar has not changed position - it is still below the menu bar and above the Navigation bar. What else do I have to do to make this change take affect?

@import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; /*/ / <-- tabs not on top Fx65+ */

[Aris-t2]

Are you files inside the correct folder? How does your window look after you add this projects complete package to /chrome/ folder as described on main page?

This is the default view (excluding some of the buttons) after adding the files to chrome folder:

[radar54]

Hi Aris-t2,

Here is my folder structure. All I did was drag and drop the folders and 2 .css files directly from the zip file into my chrome folder and edit the userContent.css file, as shown in my previous post (I only made the 1 change).

Here is what my FF looks like:

Thanks for your help

[Aris-t2]

Are you sure its the correct profile folder? Do this:

• open about:support
• look for Application Basics > Profile Folder
• hit 'Open Folder' button

[radar54]

Wow, do I feel foolish. I was, in fact, using the wrong profile folder. As can be seen below, the .css files are indeed working, as advertised.

One more thing, which setting would I use to get back to the Navigation bar icons I had in my previous post? Where the individual icons do not have borders around them?

THANKS

[Aris-t2]

Add a /* before @import "./css/buttons/buttons_on_navbar_classic_appearance.css"; @import "./css/buttons/icons_colorized.css";