[!] GENERAL discussion, feedback, questions belong here! (v11)

[Aris-t2]

Make sure you have updated your configuration to the most recent version of this projects files and are using the latest version of the "options" required by your Firefox version >before< reporting problems!

Continued from https://github.com/Aris-t2/CustomCSSforFx/issues/3, https://github.com/Aris-t2/CustomCSSforFx/issues/41, https://github.com/Aris-t2/CustomCSSforFx/issues/88, https://github.com/Aris-t2/CustomCSSforFx/issues/109, https://github.com/Aris-t2/CustomCSSforFx/issues/133, https://github.com/Aris-t2/CustomCSSforFx/issues/163, https://github.com/Aris-t2/CustomCSSforFx/issues/189, https://github.com/Aris-t2/CustomCSSforFx/issues/211, https://github.com/Aris-t2/CustomCSSforFx/issues/241 and https://github.com/Aris-t2/CustomCSSforFx/issues/273.

Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.

Custom JS scripts to restore more classic features https://github.com/Aris-t2/CustomJSforFx

Things this project will not target/recreate

• a CTR like plugin/application to generate ready-to-use CSS
• curved tabs (thanks those are finally gone!)
• old complete themes

Things not possible with CSS

• more toolbars like add-on/status bar (CSS can not create new toolbars)
  • displaying full sized status popup below window content is possible
  • bookmarks toolbar at windows bottom is possible (simulated addon-bar)
• new buttons (CSS can not create new buttons)
• additional menuitems (CSS can not create new items)
• custom/new/different functions for buttons/menuitems/menus
• activity indicator (see 'custom JS scripts')
• preference/options window
• additional location bar
• favicon in location bars identity box (see 'custom JS scripts')
• moving menubar items to a different toolbar
• restart button (see 'custom JS scripts')
• ... many more

[arcanetrivia]

@yurikhan , no dice, unfortunately. tabs_multiple_lines_fx71.css appears to be having no effect no matter whether tabs_below_navigation_toolbar_fx65_v2.css is on or off - tabs just keep going in a single scrolling row whether above or below. (The menu bar does seem to have become unstuck from the tabs while I was messing about with what was on and what was off, and is now above the address bar where I want it, though I'm not sure how, since tabs_below_navigation_toolbar_fx65_v2.css is what I was trying before... but whatever.)

For the heck of it I also tried it with tabs_below_navigation_toolbar_fx74.css, despite that it sounds from the code remarks like that version should not be compatible with multiple row tabs. Also no effect.

I suppose it's possible it would have worked in 78.whatever it was I was on yesterday but is now broken in 79.0. I'll have to have a look at #39 .

[Altsinn]

Hi @Aris-t2, I have a couple of question: 1) How can I make the corners of 'Firefox' label button a bit rounder? I tried to modify the code from "@import "./css/buttons/buttons_on_navbar_button_roundness.css" but without effect. 2) How to tweak back & forward button css code to dim buttons entirely when inactive ? It worked that way in CTR:

3) I decreased font size in almost entire about:preferences page but I can't find the way to do it for the One-Click Search Engine box:

4) How to decrease spacing between records in Manage Cookies and Site Data box?

I use FX 68 ESR. Thanks in advance.

[clickityclick]

This is not an issue, but a question on how to achieve removing/hiding the tab-bar when there is only one tab present; to save space as depicted in one of the images below. On FF78 the tab can be hidden but I haven't managed to make the tab-bar disappear to use that space for more content. I'm using @import "./css/tabs/tabs_below_navigation_toolbar.css"; /**/ and the following to hide a single tab:

tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {

visibility: collapse !important; display: none !important; }

On older versions of FF removing/hiding the tab-bar was not a problem:

On FF78 it's still there:

Any ideas what might work to make the tab bar disappear?

[glennpc]

@clickityclick

This is the code that's been working for me on the last several versions and the current version of Firefox:

TabsToolbar { border : none !important;}

tabbrowser-tabs, #tabbrowser-tabs arrowscrollbox { min-height: 0 !important; }

tabbrowser-tabs tab { height: var(--tab-min-height); }

tabbrowser-tabs:hover .tabs-newtab-button, .tabbrowser-tab:only-of-type, .tabs-newtab-button

{ display: none !important; }

Make sure you place that code in the my_userChrome.css file.

[arcanetrivia]

@glennpc , you're using Fx 79? It's not working for me there. I wonder if it's conflicting with other things attempting to affect the tab bar, like tabs_below_navigation_toolbar_fx74 or tabs_multiple_lines_fx71_force_newtab_button_visibility. What other bits like that are you using, if any?

[glennpc]

@glennpc , you're using Fx 79? It's not working for me there. I wonder if it's conflicting with other things attempting to affect the tab bar, like tabs_below_navigation_toolbar_fx74 or tabs_multiple_lines_fx71_force_newtab_button_visibility. What other bits like that are you using, if any?

Yes, I'm using Firefox 79. This is how I have it setup:

@import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css"; // @import "./css/tabs/tabs_multiple_lines_fx71.css"; //

tabs_below_navigation_toolbar_fx74 does NOT work. Give that a try.

[clickityclick]

@glennpc The additional code works with @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css"; //, but now toggling the menu bar from the context menu only removes the text and doesn't free-up that space. Also, the desktop shines through where the bar was when toggling it off. The other v2 frees-up the space, but no toggle :( @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2_force_hidden_menubar.css";//

Is there a way to get toggle with hide to work?

[glennpc]

@clickityclick

It could be a possibility of a few things that you have setup different then mine. First off, I'm using "./css/toolbars/toolbar_mode_icons_and_text.css" See attachments below. I'm also using a different theme: https://addons.mozilla.org/en-US/firefox/addon/my-brushed-metal/ Plus, I always have my Menu Bar and Title Bar enabled. I'm also using "./css/toolbars/addonbar_move_bookmarks_toolbar_to_bottom_fx72.css" and "./css/toolbars/addonbar_content_on_the_right.css" not sure if that has anything to do with it.

My Firefox 79 with no tabs open:

My Firefox 79 with tabs open:

[clickityclick]

@glennpc

Does toggling the menu bar free-up that space with your setup?

[glennpc]

@glennpc

Does toggling the menu bar free-up that space with your setup?

It's not the menu bar that's freeing up space, but rather the title bar being enabled that does free up the space. Go into Customize and try the settings I'm using below:

[glennpc]

@clickityclick

Since you are NOT using the Menu Bar and you want to free up some more space, add this line instead:

@import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2_force_hidden_menubar.css";/**/

Of course toggling the Menu Bar on and off won't work anymore.

[clickityclick]

@clickityclick

Since you are NOT using the Menu Bar and you want to free up some more space, add this line instead:

@import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2_force_hidden_menubar.css";/**/

Of course toggling the Menu Bar on and off won't work anymore.

I use the Menu Bar, but would like to toggle hidden on and off. Compact doesn't change anything and still looks like the image I posted.

Yes, I saw and tried force hidden which is what I'm trying to achieve, but with toggle. The strange thing is when I use fx74.css, toggle menu bar actually hides it, but not the tab toolbar as with fx65

[clickityclick]

@Aris-t2 , Is there any code I could add to my_userChrome.css to hide the Tab Toolbar when only one tab is present using your @import "./css/tabs/tabs_below_navigation_toolbar_fx74.css"?

The code from glennPC only works with Fx65_v2 which is a work-around for now.

[Aris-t2]

@Altsin

1. Look inside appbutton_in_titlebar_fx74.css
2. Combining settings makes overriding rules more complex. You are looking for this:

   #main-window #navigator-toolbox #nav-bar :-moz-any(#back-button, #forward-button)[disabled],
   #main-window #navigator-toolbox #nav-bar :-moz-any(#back-button, #forward-button)[disabled] .toolbarbutton-icon,
   #main-window #nav-bar :-moz-any(#back-button,#forward-button)[disabled=true] > .toolbarbutton-icon {
   opacity: .1 !important;
   }

3. This has to be used inside my_userContent.css (you might have to adjust the box size too):

   #handlersView * {
   font-size: 6pt !important;
   }

4. Use browsers developer tools and inspect the page to find items and their code. my_userContent.css:

#permissionsBox > richlistitem,
#sitesList .item-box {
  padding: 0 0 !important;
  min-height: unset !important;
}

@clickityclick The code @Glenn posted works fine, if you remove new tabs button from tabs toolbar in customizing mode.

I recommend not to combine too many tab modifying styles. Especially multiple tab line styles make everything unstable.

In Fx 65 Mozilla made heavy changes to how tabs toolbar is placed inside the top toolbar box. To achieve tabs below navigation toolbar some sacrifices had to be made. One of them makes it either impossible to hide the tabs toolbar with aboves code Glenn posted or makes it impossible to keep menu functionality the way it was. See the descriptions inside userChrome.css

/* - Fx 65+ v2 - mainly for multi-lined tabs (Glitches with inactive menubar!) ******************/
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css"; /**/
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2_force_hidden_menubar.css"; /**/ /* no menubar when OS titlebar is active */

[arcanetrivia]

@import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css"; // @import "./css/tabs/tabs_multiple_lines_fx71.css"; //

tabs_below_navigation_toolbar_fx74 does NOT work. Give that a try.

edit: Duh, I figured out the new tab button was removable in the built-in customize interface. Didn't occur to me that was a draggable element. So this combination does work (although I never get multiline tabs which I already knew). However, it may be a little hard to see in the screenshot, but tabs_below_navigation_toolbar_fx65_v2.css has the negative side effect that the menu bar overlaps the top of the navigation bar a little, cutting off the top of the address bar, add on buttons, etc. This may be because I have the Windows fonts themselves customized to be a little larger than standard, but tabs_below_navigation_toolbar_fx74.css handles this area properly - though it does have its own drawback, that the line drawn under the bottom of the tabs has a break in it...

but it bothers me less.

Maybe there's some element height I could adjust...

[clickityclick]

@Aris-t2

The code @Glenn posted works fine, if you remove new tabs button from tabs toolbar in customizing mode.

I had already moved the new tab button (+ sign) from the tab toolbar and moved it to the nav toolbar. I now removed it from there too via Customize and Glenn's code is still not removing the tab toolbar on v74. Any suggestions on how to make this work?

Also, I would like to keep the toggle functionality for removing the Menu Bar which works in v74.

I recommend not to combine too many tab modifying styles. Especially multiple tab line styles make everything unstable.

I don't use multi line tabs

[Aris-t2]

If you want to use Glenns code to hide tabs toolbar, you have either to keep tabs on top or to loose menubars toggle functionality. You can not have both using this projects files.

[clickityclick]

That's a shame. It would be great if someone came up with a way to simulate or bring back the functionality one had previously in regards to hiding the toolbars. I just don't understand why development broke that design.

[Aris-t2]

There are JS scripts to create more toolbars, but in general you have to ask Mozilla why they went in that development direction.

[clickityclick]

you have to ask Mozilla why they went in that development direction.

LOL. that's a good one.

loose menubars toggle functionality.

Okay, to have more space for content, I decided on the following:

1. Tabs on top
2. Hide Tab-Toolbar with only one Tab
3. Hide Title Bar via Customize
4. Menu Bar off/on via Toggle with Alt-key plus transparent wenn on
5. my_UserChrome changes

/* ===== SET FONTS - first entry used if found  ===== */

 #TabsToolbar, #PersonalToolbar, window, page, dialog, wizard, prefwindow {
 background-color: -moz-dialog !important;
 font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif !important;
 font-weight: bold    !important;
 }

/* ===== MAKE MENU BAR TRANSPARENT to give a unified look ===== */

 #main-menubar { background-color: transparent !important; }

/* ===== HIDE TAB BAR when only one tab -- For Firefox 76 ===== */

 tab:only-of-type, tab:only-of-type + #tabs-newtab-button { display: none !important; }

 #tabbrowser-tabs, #tabbrowser-arrowscrollbox { min-height: 0 !important; }

[B00ze64]

Good day @Aris-t2.

Well, it took quite some time didn't it? There is a sh!tload of menus in Firefox, and they're not all created the same way (you can tell this is a community project) but here it finally is: https://github.com/B00ze64/FF-Menu-Icon-Plus-CSS. Not sure if you use the menubar yourself, but it does add icons to the context menus as well. Let me know what you think. Now I'm not sure how to let ppl know this exists...

By the way I found some FF code that uses ::Before to add icons to the devtools; even Mozilla uses that! And I also found a shadowdom inside another shadowdom, in the AddOns page gear menu, which of course Dom-Inspector is unable to show - hopefully they do not do this too often or I will be unable to style the new panels...

Best Regards,

[Aris-t2]

Impressive, good work.

[B00ze64]

Good evening. Thank you, this took quite a while to do! Credit goes to the Author of the original extension really, and ::Before goes to you :-) Crystal, Tango and Oxygen were all used on Linux. Fugue was used in Paint.NET until recently, and Silk is used in Notepad++ so these are familiar icons. I'm taking a break, but the PANELS are next - better start on those, Mozilla is bound to eventually transform all of XUL into panels anyway; and it will all have to be redone. You want to look at one of the themes, or use the Menus-Worksheet, and add German in the few places where I have used a label to select an element? I could probably change this to use stuff like first-child and last-child etc, but those tend to be fussy, if your element is not always at the same position you end-up wrong. I know, I tried it with the Containers sub-menu and got burnt. Anyway, it's up to you. You should probably add German to the DevTools appMenu icons that I pushed, as well, in the 2 or 3 places where I've had to use the labels. Best Regards,

[Mokura]

Is it possible to move the plain vanilla menu icon (the burger) into the titlebar/tab bar? Like your CSS mod in Thunderbird:

And like you can do in Vivaldi:

So far I've only seen options for various versions of the colored/gradient tab. Which is pretty great but also not quite what I am after - am I missing something really dumb? Thank you so much for your hard work.

Edit: I realize that the CSS is moving the button to the titlebar and not so much the tabs bar - is there an option to move the hamburger there?

With #PanelUI-button { -moz-box-ordinal-group: 0 !important; -moz-padding-end: 1px !important; } I can get it to the first position in the navigation toolbar, which is halfway there.

[Mokura]

It's SUPER hacky but I fiddled with the icon-only CSS for Fx74+ and got most of it to work except there's still space between the button and the start of tabs in un-maximized windows.

https://gist.github.com/Mokura/df65aac874b70bfc9b62c604ce2bc2e8

[Aris-t2]

@Mokura

Remove tab toolbars placeholders to get rid to the "space" space you are referring to.

#TabsToolbar .titlebar-spacer[type="pre-tabs"],
#TabsToolbar .titlebar-spacer[type="post-tabs"] {
  display: none !important;
}

[BoomerangAide]

Hi, Tried to update my portable version of Firefox from 76.0.1 to 79 to test how broken thing would become. Not as much as I thought, possibly thanks to upgraded files from here (megabar wasn't as scary as expected notably). There's one thing that got broken though: labels on secure sites. Before: After: I didn't find an option in about:config to make that work, and I haven't enabled /* @import "./css/locationbar/identitybox_labels_hidden.css"; /**/ either, if that was supposed to hide it. Any idea?

[Aris-t2]

Mozilla removed certificate string from identity box on recent builds. There was a switch in about:config for that, but most likely it is gone too.

_identitybox_labelshidden.css is obsolete now.

[Speravir]

(Ping) Aris, I did not observe any change myself using one of your throbber styles, but apparently something’s changed in v.80 for the default throbber – and this seems to be OS dependent, see Tab Throbber neues Icon in Camp-Firefox.de. (Also, the animations have to be enabled - or: not to be disabled.)

[2BeeOrNot]

I had this happen on my Macs. Reduce motion was enabled in system preferences.

From FF 80 release notes: For users with reduced motion settings, we’ve reduced a number of animations such as tab loading to reduce motion for users with migraines and epilepsy.

If you want to keep reduce motion in OS but want to use one of the throbber styles add this integer setting in about:config: ui.prefersReducedMotion And set its value to: 0 - no preference or 1 - reduce animations Worked for me on my Macs setting the value to 0.

[Aris-t2]

@Speravir Is the ui.prefersReducedMotion preference a solution for the issues on Camp-Firefox.de forums too.

Removing the ::before from the throbber code causes both animations to occur at the same time for me on Windows 10. I stopped testing on Win 7/8 a while ago.

@2BeeOrNot Thanks for pointing to the preference.

[Speravir]

Is the ui.prefersReducedMotion preference a solution for the issues on Camp-Firefox.de forums too.

I do not know. As I wrote above I myself do not observe an issue. I just wanted to point you to this thread. But message #30 in this thread seems to support this if I do not misunderstand.

Removing the ::before from the throbber code causes both animations to occur at the same time for me on Windows 10.

Also confirmed in Camp Firefox (for transparent throbbers, of course). It seems only in windows 8 ::before has to be removed. (I am still under Win 7, btw.) But there is a contradicting reply that it seems to depend on activation state of window animation, see messages #29 and #35.

[krystian3w]

Maybe broken in FX 75/76 - also I used CSS to disable animations instead simple ui.prefersReducedMotion.

[9jkh]

FF78 CSS needed to remove, or at least push off to the edge of the page very distracting "actions/options" box in reader view?

https://i.postimg.cc/SxC3fJFY/FF-78-reader-view-actions-box-copy.jpg

[krystian3w]

@9jkh

about:reader?url=https://github.com/Aris-t2/CustomCSSforFx/issues/308

so in my_userContent.css can you use:

div#toolbar div.toolbar.reader-toolbar { display: none !important }

[9jkh]

Thanks krystian. Didn't have one, so had to create a my_userContent.css. Placed the code there, then tried adding it to the ordinary userContent.css, and even to userChrome.css. But doesn't appear to have any effect.

Could be because I'm still using a quite old version from 2018, which still works quite well with a few modifications. Haven't wanted to write an entirely new configuration based on the latest. Do you think that could be the problem?

[krystian3w]

Maybe, also first version of code was published with typo:

-div#tollbar
+div#toolbar

[9jkh]

Didn't notice the typo in the first version. Now it's working! Thanks for this. Really appreciated. That box was very annoying.

[bendover22]

I don't think tabs_multiple_lines has anything to do w/ my question. The note on screenshot sums it up. The background color of the "tabs bar" (not the correct name) is probably controlled by a generic selector. Thanks.

[ajheeger]

This is what I have in my my_userChrome.css (Win7), blue and yellow are used on purpose to show the difference and area affected.

/* to allow tabs background over-ride */
#navigator-toolbox > #titlebar {
    -moz-appearance: none !important;
}
#TabsToolbar {
    background: transparent !important;
}

/* inactive window background */
#navigator-toolbox:-moz-window-inactive {
    background: blue !important;
    /*background-image: linear-gradient(#e1e1e1, #b1b1b1) !important;*/
}
/* active window background */
#navigator-toolbox {
    background: yellow !important;
    /*background-image: linear-gradient(#cfcfcf, #b8b8b8) !important;*/
}

[bendover22]

@ ajheeger, thanks. You saved me from checking myself into a psychiatric ward. I haven't tried it, but it appears your code, "#navigator-toolbox" will change backgrounds on URL bar, #TabsToolbar & #toolbar-menubar (if shown) & titlebar - all the same color - correct? Because you haven't specified a different color just for #TabsToolbar? But I assume you can use different colors or gradients on each bar, now that we know each selector?

Devtools browser toolbox only showed me #navigator-toolbox once I found the secret spot to place mouse pointer to select from URL bar thru the menu bar (if shown). Even when selected / outlined, It didn't show #TabsToolbar until I used "search HTML." Basically, know the exact selector name, do a search, then it will show it.

Code that works in Windows usually works in Linux, but not 100%.

[bendover22]

@ ajheeger, I copied your code as is, & commented any code I had on changing color of nav-bar & the others. It didn't change anything. I double checked for my syntax errors. So I tried something like below, which worked:

#nav-bar {
    -moz-appearance: none !important;
  background-image: linear-gradient(to bottom, #C2DDF0, #72A0bf) !important;
}

#TabsToolbar {
    -moz-appearance: none !important;
/*  background: transparent !important;*/
  background-image: linear-gradient(to bottom, #C2DDF0, #72A0bf) !important; }

If it was other code somewhere in my_userChrome or the few things I use from CustomCSSforFx - interfering w/ your code, seems odd it wouldn't also interfere w/ my code. Could be a Linux thing, but I'm not expert enough on any of this to say, unless I stumble across the reason at some point.

[Aris-t2]

There is a more general way to modify toolbar colors. userChrome.css imports color variables, that are meant to work across settings this project provides. Look here: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L109

You can either modify the default color variables file to add your own file there. https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/config/color_variables.css

[ajheeger]

@Aris-t2 I tried it with only color_variables.css (by disabling my_userChrome.css), at least on Win7, it won't change default blue window titlebar color, so there is a need to add some additional code for that. But other than that, yes, it makes things more simple than what I have right now.

BTW I discovered that when Browser Toolbox "crashes" (Ctrl+Shift+Alt+I), the way to get it open again is just to delete chrome_debugger_profile/parent.lock, no browser restart needed. This way, all the Toolbox settings stay the same. Only solution I knew working before was to delete the whole chrome_debugger_profile folder, which also reset all the settings.

[EdwardKiefer]

There is a more general way to modify toolbar colors. userChrome.css imports color variables, that are meant to work across settings this project provides. Look here: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L109

You can either modify the default color variables file to add your own file there. https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/config/color_variables.css

Can you also adjust the scrollbar on right side to make colors contrast better in that same file?

Edit: I tried messing with custom_scrollbar_appearance.ccs but didn't seem to make a differance on active tab of scrollbar (not background).

[krystian3w]

@EdwardKiefer try paste in both "custom_userChrome.css" and "custom_userContent.css":

:root { --scrollbar-color: rgb(0, 0, 255) rgb(255, 255, 0) !important; }

when no works, so still disabled for about: pages.

demo of colors (maybe better for Color blindness / color vision deficiency community):

rgb(0, 0, 255) rgb(255, 255, 0)

"custom file" may need enable in main "userContent.css" and/or "userChrome.css".

PS. Scrollbar still no support custom colors after focus / hover as CSS property - Mozilla strengthens the color for the slider with some algorithm that it should be darker/lighter:

on blue #0000FF: yellow #FFFF00 - "gold" #CFCF00 - "dirty gold" #797900

[sixshotx]

@krystian3w Thanks for the reply. I deleted the previous question which might make people confused.

In the previous post, I would like to remove the copy/paste/cut button in appbutton. I found the following code works for me.

#appMenu-edit-controls,
#appMenu-edit-controls+toolbarseparator {
  display: none !important;
}

[Altsinn]

Hi @Aris-t2,

Is there a way to move #alltabs-button from the tabs bar to the navigation bar?

[krystian3w]

https://github.com/Aris-t2/CustomCSSforFx/issues/308#issuecomment-691532565 - @Aris-t2 possible enable for stock or again Mozilla something break and need again disable for wide?

[Aris-t2]

@Altsinn You can not move the button to another toolbar using CSS.