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

[Aris-t2]

Make sure you updated to the most recent version of this projects files "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 and https://github.com/Aris-t2/CustomCSSforFx/issues/189.

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

Trying to make CSS code ready for Firefox Quantum (57+)? Remove all @namespace references. They are the reason, if your code refuses to work.

Application/hamburger button in tabs toolbar? Look here: #46

Things this project will not target/recreate

• curved tabs
• 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
  • moving bookmarks toolbar to windows bottom is possible
• 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
• preference/options window
• additional location bar
• favicon in location bars identity box
• moving menubar items to a different toolbar
• restart button
• ... many more

[Achille-Grs]

@ImSpecial Try this!

/ size of new tab tabs '+' icon /

TabsToolbar .tabs-newtab-button .toolbarbutton-icon {

padding: 7px !important; margin-left: -2px !important; width: 29px !important; height: 29px !important; border-radius: 0px !important; }

[Thalon77]

Still working on fixing up things after the update of Firefox to V 68, just a quick question to everybody here reading: any of you is using the "colorful tabs" extension? Something went wrong after the update and I'm trying to restore its behaviour (changing the color of the active tab without changing the background color of the address bar around it). I will also ask to the author of that extension (he gave me some custom code to add to the css to allow that but it works no more), but let me know if somebody here already found a solution.

[Aris-t2]

@Acid-Crash Haven't thought about the two column layout. Can the "grid" rule be restricted to just two columns somehow?

@Achille-Grs Mozilla really likes to change or add that areas code. This removes the line:

#navigator-toolbox,
#navigator-toolbox:after {
  border: 0 !important;
  box-shadow: unset !important;
}

@ImSpecial Does it remove the line for you too (instead of modifying new tab buttons dimensions)? The code I previously linked was for the new tab tab, sorry.

#new-tab-button .toolbarbutton-icon{
  min-width: 0px !important;
  min-height: 0px !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0px !important;
  margin-bottom: 0px !important;
  padding: 0px !important;
}

@Thalon77 Haven't used or tested ColorfulTabs add-on for ages.

You could try to override the color by using own colors for toolbars:

.browser-toolbar:not(.titlebar-color) {
  background-color: lightblue !important;
}

[Acid-Crash]

@Aris-t2

Haven't thought about the two column layout. Can the "grid" rule be restricted to just two columns somehow?

I am not that skilled in positioning with flex and grid. Maybe an old timer float could help... Looks like all active extensions are stored under

an disabled - under

[ImSpecial]

@Aris-t2 This fixed my problem right up! Line gone, everything's looking good now. Thanks again, like always.

#navigator-toolbox,
#navigator-toolbox:after {
  border: 0 !important;
  box-shadow: unset !important;
}

[seansweda]

Mac user (v2.5.7) with tabs_below_navigation_toolbar_fx65_macOS and classic_squared_tabs, updating to FF68 I've lost the tab borders on inactive tabs:

FF63:

FF68:

any suggestions?

[Thalon77]

@Aris-t2

Tried the code for colorful tabs but it doesn't work yet, I obtain this:

Seems I need to extend the background color to the right of the tabs and also to the "+ tab" button (which is also affected by colorfult tabs) and change it to a light gray color (which color code should I use? Tried lightgrey but it's still too dark). EDIT: digging up colorful tabs' forums I found this line of code:

toolbar { background: initial !important; }

The result is this (much close to the original):

But the part right of the tabs is still affected...

[Aris-t2]

@Acid-Crash This could help creating columns for active and non-active add-ons, but I don't think this is something that makes sense much.

@seansweda Try to change the 0px value here: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx65_macOS.css#L13

@Thalon77 You need to override tabs toolbar too #TabsToolbar, but most likely a "stronger" rule path is required.

main-window #navigator-toolbox #TabsToolbar

[Achille-Grs]

Hi @Aris-t2 !
Is that possible the urlbar popup results, to opening with less animation speed? Like a slow motion?

[Thalon77]

@Aris-t2 Tried the suggested rules singulary and in combination but it doesn't work.

[Aris-t2]

@Achille-Grs There must be some kind of duration set to the popup. If you increase to 2-3 seconds it might work. Have not tried it yet.

@Thalon77 For me setting a color within header colors of CT add-on settings changes the whole header color and it sticks, if tabs are below navigation toolbar.

@seansweda I had time to recheck Fx68 on macOS and inactive tabs are not cut off on my config (also tested devpixels set to 2.0).

[mchubby]

Hi @Aris-t2, You have mentioned it before, but now that Fx69 is drawing close, don't you think there should be some conspiscuous notice prompting to set toolkit.legacyUserProfileCustomizations.stylesheets to true as the first and foremost instruction of the readme file? And to the release notes as well for good measure.

[Thalon77]

@Aris-t2 Doesn't work yet and I suspect that my problem is caused by a deadly combo between colorful tabs and some settings in your CSS, there's something that overrides my "COLOR VARIABLES FOR DEFAULT BROWSER THEME ONLY - MAIN UI" setting, tried to change it to something else (like classic grey or aero) and the color stays so for only a second at startup, then it switches back to the white you see in my screenshot above. EDIT: find the culprit, it's colorful tabs that overrides everything so forget it, hope its author will read my message and give me a fix.

[Aris-t2]

@mchubby https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L51

@Thalon77 OK

[seansweda]

@Aris-t2 It could be that I'm using a custom userChrome.css rather than the supplied file from the repo and I'm missing an import somewhere. I don't expect you to troubleshoot my custom config, but I'll list all of the files from the repo I'm importing below in case you want to try to figure it out.

FWIW, manually editing the padding to 1px solved my issue so thanks for pointing me in the right direction.

config/general_variables.css
config/color_variables.css
css/tabs/classic_squared_tabs.css
css/tabs/tab_close_always_visible.css
css/tabs/tab_icon_colors.css
css/tabs/tabs_below_navigation_toolbar_fx65_macOS.css
css/toolbars/addonbar_move_bookmarks_toolbar_to_bottom.css
css/toolbars/addonbar_status_in_addonbar.css
css/toolbars/addonbar_content_on_the_right.css

[Thalon77]

BTW @Aris-t2 you gave me this code some time ago to restore the split stop/reload button on the toolbar.

reload-button:not([displaystop]) + #stop-button,

reload-button[displaystop] {

display: block !important; }

It seems it doesn't work anymore after V68 update.

[Aris-t2]

@seansweda Good to hear you were able to solve the issue.

@Thalon77 That code still works for me in Fx70 (yours is missing a # at the beginning):

#reload-button:not([displaystop]) + #stop-button,
#reload-button[displaystop] {
  display: block !important;
}

[rayman89]

Could you add a way to hide/show the "Fx 65+ create additional toolbar for 'bookmarks toolbar items' on navigation toolbar" like you would with bookmark bar?

Something like this or a button @Aris-t2

[LionWrathz]

@Aris-t2 can you help me to change this one color icon to blue inside bookmark.icon,history.icon,download.folder.icon and the back arrow color?

FIXED thanks anyway i got it . .subviewbutton-iconic > .toolbarbutton-icon{ fill: #004e87!important; firefox 68 https://imgur.com/Q7ZhXPA

[Aris-t2]

@rayman89 Not possible with CSS.

[rayman89]

Can you do it with user chrome scripts? or userscripts (using tampermonkey violentmonkey)? @Aris-t2

[Aris-t2]

Already done. I posted a script in my CustomJSforFx repository to create multiple top toolbars: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/additional_top_toolbars.uc.js

[ghost]

In the old version of CustomCSSforFx there was a small margin area above the tabs that made it possible to drag the entire window instead of the tabs, but in the new version this area does not exist. Is there a setting in the new versions that allows to restore this?

Both images are with the default settings

2.6.2 2.3.7a

[krystian3w]

But still sexy.

[Aris-t2]

The area for that is meant to be the space before that tabs (according to Mozilla).

You can add custom code to userChrome.css to increase that space, if required like done in this example:

#TabsToolbar {
  padding-top: 10px !important;
}

[kanade96]

Hi Aris, I've just updated to the latest Firefox version 68.0.01 using v2.6.2 CSS and it seems like hiding "Visit" results from the location bar doesn't work ("./css/locationbar/ac_popup_searchwith_and_visit_items_hidden.css").

Does this function no longer work in Firefox 68+?

FYI, I'm currently using with ""./css/locationbar/ac_popup_classic_with_two_lines_fx68_star_at_the_end.css"" enabled.

[krystian3w]

@kanade96 Function removed from Firefox code - https://github.com/Aris-t2/CustomCSSforFx/issues/215

[kanade96]

@krystian3w So the only way to hide "Visit" is by using the code that permanently hides the first entry? panel#urlbar-results #urlbarView-row-0 { display: none !important; }

[Aris-t2]

@kanade96 Yes, unless Mozilla fixes the browser code (which I doubt), we are not able to distinguish the "Visit" item from the rest. Either always hide the first one and loose the most likely important result of the search/suggestion, history or whatsoever or keep the "Visit...".

[rayman89]

@Aris-t2 Is it possible to add something to the additional_top_toolbars.uc.js script to make the new toolbar appear as it was unticked / hidden / not showing when the browser starts or if that not possible would it be possible to create a key combination to hide/show it? Thank you.

[Aris-t2]

@rayman89 https://github.com/Aris-t2/CustomJSforFx/issues/24

[kanade96]

@Aris-t2 Well that's a shame. I just don't like it when Mozilla decides to break more than fixing things.

Just one last question: I used to adjust the width of the popup classic with two lines (/ for ac_popup_classic_with_two_lines_fx64.css /) in general_variables.css.

Is there a way to make this function work for fx68?

FYI, I used the following values for fx64: :root { --ac_popup_width: 700px !important; / popup width in normal mode / --ac_popup_width_maximized: 1050px !important; / popup width in maximized mode / --ac_popup_width_fullscreen: 1400px !important; / popup width in fullscreen mode / --ac_popup_number_of_results: 10 !important; / value has to be identical to about:config > browser.urlbar.maxRichResults / --ac_popup_maxheight: calc(47.5px ( var(--ac_popup_number_of_results) + 1 )) !important; / calculate maximum height based on items to display / --ac_popup_height: auto !important; / replace auto with 'calc(47.5px var(--ac_popup_number_of_results))' to get a shorter scrollable list for high result numbers / }

[Aris-t2]

There is a files called ac_popup_classic_with_two_lines_fx68.css for Fx68+.

[kanade96]

I've tried adding the lines in "ac_popup_classic_with_two_lines_fx68_star_at_the_end.css" though it doesn't seems to work.

Just to clarify, I'm using ac_popup_classic_with_two_lines_fx68_star_at_the_end.css.

I've saved the following lines: / for ac_popup_classic_with_two_lines_fx68.css / :root { --ac_popup_width: 700px !important; / popup width in normal mode / --ac_popup_width_maximized: 1050px !important; / popup width in maximized mode / --ac_popup_width_fullscreen: 1400px !important; / popup width in fullscreen mode / --ac_popup_number_of_results: 10 !important; / value has to be identical to about:config > browser.urlbar.maxRichResults / --ac_popup_maxheight: calc(47.5px ( var(--ac_popup_number_of_results) + 1 )) !important; / calculate maximum height based on items to display / --ac_popup_height: auto !important; / replace auto with 'calc(47.5px var(--ac_popup_number_of_results))' to get a shorter scrollable list for high result numbers / }

[Aris-t2]

ac_popup_classic_with_two_lines_fx68_star_at_the_end.css imports ac_popup_classic_with_two_lines_fx68.css.

Variables are set inside general_variables.css, if the complete package is used. Variables are valid even for the "_fx68" files.

Look into general_variables.css file, variables look different from what you saved for popup width. https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/config/general_variables.css#L62

[kanade96]

@Aris-t2 Got it, thanks for clearing the misunderstanding.

[Pizzapops]

@Aris-t2 The ac-popup on Nightly is driving Mozilla crazy. The same Chrome folder works fine in 68 & Beta. After playing with every css and js file, I could not find a culprit. I then installed a clean copy of Nightly portable, added today's update, added no themes or extension, added CSS4Fx (NO alterations), added M2 JS4Fx with only 2 scripts: userChrome.import("/userChrome/locationbar_popup_classic_with_two_lined_results.uc.js", "UChrm"); userChrome.import("/userChrome/restart_button.uc.js", "UChrm");

The popup was still 290px to the left. Moving the locationbar to the left has no effect.

It seems like results are hard coded to the left side of screen. Do we have to wait for a Mozilla correction?

[Aris-t2]

I will look into it.

[Aris-t2]

They code needs to be updated.

Try this

#urlbar-results {
   left: unset !important;
   right: unset !important;
}

[9jkh]

Haven't done much with CSS since around 3/2018. Probably was the v.1.5.3.1, plus some CSS incorporated from versions from a bit later. Have been on the 60esr all the while, and all is good there. Recently updated to the 68.0.1esr, and, surprisingly, found that much of what I did back then is still quite usable.

However, wondering if there's any way, without losing all the work I already put into this back then, to incorporate only some of the CSS from the more recent v.2.6.2, or even later version, if necessary. Would like to be able to use the following in userContent.css (maybe show version number no longer works, but think that addons manager alternative still does):

@import "./css/aboutaddons/addonlists_show_addon_version_number.css"; // @import "./css/aboutaddons/addons_manager_alternative_appearance.css"; //

And, if possible, a CSS to bring back the older "Clear Recent History," and the Old Search, instead of what's being shown now with the current 68esr. And is there any CSS for the AOM to show install all updates, instead of doing them one by one?

I realize that the XML directory from the version (s) I am still employing has been discontinued, so perhaps none of what I want to accomplish can be done without a wholesale revision, which I would like to avoid. But any specific suggestions would be welcome, including any general suggestions about how to incorporate some of the CSS from recent versions.

If it makes any difference, this is Mac 10.13.6.

Thanks.

[Pizzapops]

@Aris-t2 It took a couple minutes to figure out where to insert the code. That fixed it! Here is lines 127-134 of the js file after pixel mods.

#urlbar-results { 
  -moz-margin-start: 0 !important; 
  left: unset !important; 
  right: unset !important; 
  margin-top: -6px !important; 
  margin-left: 1px !important; 
  border: 1px solid ThreeDShadow !important; 
} 
Thanks again and please note previous message was not meant to disparage your work.

[Pizzapops]

@Aris-t2 It looks like white background needs to be expanded vertical 62px when search suggestions are shown. If suggestions are toggled OFF, bottom bar is grey not semi-transparent. Followup: I found a quick & dirty fix for lines 159 and 162.

    #urlbarView-results, 
        #PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistbox { 
        height: auto !important; 
159     max-height: calc(62px * '+urlbar_results+') !important; 
        } 
        #urlbar-results {
162            max-height: calc(62px * '+urlbar_results+') !important; 
        } 

[Aris-t2]

@9jkh @import "./css/aboutaddons/addons_manager_alternative_appearance_fx68.css"; @import "./css/aboutaddons/addonlists_show_addon_version_number_fx68.css";

The old xml base features do not work anymore on recent Fx versions.

CSS can not restore "clear recent history" or "old search". For the old search there was a js script within my JS repository, but some features had to be removed for Fx67+ recently.

@Pizzapops I haven't looked into the js script yet, but some of the issues are already fixed within the CSS for this projects next update. I will look into the js script later. Edit: Posted a new version of the js file.

[9jkh]

@9jkh @import "./css/aboutaddons/addons_manager_alternative_appearance_fx68.css"; @import "./css/aboutaddons/addonlists_show_addon_version_number_fx68.css";

Copied those 2 over from userContent.CSS, v.26.3, to the older userContent.CSS, while commenting out the 2 original ones. But I'm afraid that nothing changes.

Is there something else I must incorporate from the v.2.6.3, or possibly remove from the older one without doing anything destructive to the current appearance elsewhere, to make this work?

[krystian3w]

You enabled XUL / XBL old code? extensions.htmlaboutaddons.enabled

https://github.com/Aris-t2/CustomCSSforFx/issues/211#issuecomment-501622789

[9jkh]

Thanks, krystian3w, very interesting. Wouldn't have guessed in a million years that that setting changed from true to false was responsible. That certainly changes the look of the AOM (but alas, no version number listed directly -- suppose that's no longer possible.)

Is this what the Alternative AOM is supposed to look like? Not sure yet what I think about it.

https://i.postimg.cc/2SjYSqmK/Alternative-AOM.png

This is the 60.8esr appearance, which I much prefer. Suppose there's no way to get closer to that, without version numbers?

https://i.postimg.cc/d0S2HSJj/Alternative-AOM-60-8esr.png

[ImSpecial]

Aris, what line in what file do I need to change to make the search bar "popup position" 0px instead of whatever it's set at now (I'm guessing -1px)

I've already changed your "ac_popup_classic_with_two_lines_fx68" from -4px to 0px which fixes the location bar, but my OCD is bugging me about how the search bar is not lined up properly.

Location Bar (0px) - https://i.imgur.com/Mboe4u5.png Search Bar (looks to be -1px) - https://i.imgur.com/KaJllf4.png

This is what I changed to get the Location Bar to look right.

`/ popup position /

urlbar-results {

-moz-margin-start: 0px !important; left: unset !important; right: unset !important; margin-top: -4px !important; border-block: 0px !important;

-4px to 0px

[Aris-t2]

@9jkh

Please always test this projects complete package to avoid issues with custom setups. Many "options" import other files.

@ImSpecial You have to appy margin rule to search popups panel.

#PopupSearchAutoComplete {
  margin-top: 0px !important;
}

[ImSpecial]

That worked but at 1px instead of 0px to have them match. Thanks yet again Aris.

[9jkh]

Looks like trying to incorporate features from latest version is not going to work out very well. Will continue to tinker a bit, but for the most part will keep things as they are. Actually prefer the Alternative AOM as it is now to the Alternative in the latest version (with the entire new css extracted to Chrome, everything prior removed.)

https://i.postimg.cc/xCQpN7Zg/AOM-68.png