Closed Nicholas-Steel closed 9 hours ago
Aris-t2
commented
4 days ago You have to get and use the latest release of this projects files. Rebuild your userChrome based on the latest userChrome.css
Some things I enabled during tests with your setup: menubar_color.css tabs_below_navigation_toolbar_fx133.css megabar_expanding_breakout_disabled_fx133.css urlbar_background_color.css
Not sure why your tab text looks like that. Start with a clean setup and enabled everything step by step.
Nicholas-Steel
commented
4 days ago hmm, I thought \config\ folder and the userChrome.css and userContent.css files don't usually need updating (since there's no easy way to do that that keeps your changes), just updating the css and maybe the images folders are usually all that needs to be done.
Looking at my copy of userChrome.css and the latest copy I... guess things have changed quite a bit since v4.1.3 (at least formatting wise) and new entries may have been added/files renamed.
Aris-t2
commented
3 days ago Most of the time its is enough to just update the /css/ folder, but not this time.
Nicholas-Steel
commented
3 days ago Hmm, well based on the changelog for v4.6.1 and v4.6.2 as well as the variables you'd previously mentioned... I tried replacing the config, css and image folders with 4.6.2 and then updating the following values in userChrome.css to their Firefox 133 equivalents:
@import "./css/tabs/tabs_below_navigation_toolbar_fx133.css"; // @import "./css/locationbar/megabar_expanding_breakout_disabled_fx133.css"; //
I also added this variable: @import "./css/locationbar/urlbar_background_color.css
This: Did not fix the colouring issues with the tab bar Fixed the URL & search bars having a awful gray background Fixed the Megabar popup being too wide and wrongly positioned
tabs_below_navigation_toolbar_fx133.css incorrectly caused the Menu Bar to be moved up, reducing the padding between it and the Title Bar, this doesn't happen if I use the regular tabs_below_navigation_toolbar.css which seems to work fine with regards to positioning and makes me curious as to why a 133 version needed to be made...
wrong (tabs_below_navigation_toolbar_fx133.css):
Correct (tabs_below_navigation_toolbar.css).
Aris-t2
commented
2 days ago Maybe this is related you your OS theme/colors. Could you try to set a different OS/accent color than black?
It is also possible to override tab text colors using custom_tab_text_settings.css.
Nicholas-Steel
commented
2 days ago Just seems odd for Firefox 133 to need more work to keep it looking like it was, the only custom tweaks I've made that aren't a part of CustomCSSforFx are located at the very bottom of userChrome.css, in my_userChrome.css and in user.js
There's one tweak in the userChrome.css because it doesn't seem to work if I put that one in the my_userChrome.css file (dunno why). It's kinda broken though, it causes the Search Box and add-on icons to the right of the URL Bar to disappear if I fullscreen and then exit fullscreen of a embedded Youtube video, if I then re-enter browser fullscreen with F11 and then hit F11 again... the missing elements are restored. I don't expect support for solving this here.
Here's a copy of my user.js file: user.zip
Edit: I forgot to mention, I tried your idea of changing Colour Ascents in Windows with no effect on Firefox.
Aris-t2
commented
2 days ago Lets try a different approach.
Download and setup PortableFirefox.
Start FirefoxPortable.exe and enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config.
Create /chrome/ folder and extract latest release (zip file) from here to it.
Start FirefoxPortable.exe , take and post a screenshot of the window showing this projects default setup (looks like this for me).
Enable tabs_below_navigation_toolbar_fx133.css, restart Firefox and post a screenshot of the result (looks like this for me).
This is were we would start troubeshooting.
MaxPSN
commented
2 days ago I think it could be profile related? I have the same problem but this won't occur if I use a fresh new profile
Here is what it should look like with Firefox 132 + CustomCSSforFx 4.5.4 :
Here is what it looks with Firefox 132 + CustomCSSforFx 4.6.3 :
Here is what it looks with Firefox 133 + CustomCSSforFx 4.6.3 :
Here is what it looks with a fresh new profile (Firefox 133 + CustomCSSforFx 4.6.3) :
As of the 4.6.3 CSS being used between Firefox 132 and 133, only
@import "./css/tabs/tabs_below_navigation_toolbar.css"; /**/ /* for Firefox 132 and below */
and
@import "./css/tabs/tabs_below_navigation_toolbar_fx133.css"; /**/ /* for Firefox 133+ */
being altered
The address bar will go up there if I turned on @import "./css/toolbars/addonbar_move_bookmarks_toolbar_to_bottom.css"; /**/ on Firefox 133 but I guess that's off topic
(Now I noticed I forgot to include the separate stop and reload buttons script but that should not really matter)
Windows 10 22H2 DPI: 96 (100%) default windows mode: dark default app mode: light Firefox theme: System Theme/Auto Windows system theme is Aero10 By vaporvance with DWMBlurGlass
joefiesta
commented
1 day ago @Aris_t2:
Following your instructions for using Firefox portable (above), when I start the .exe I am told another version of FF (my 132.0.2) is running. I would think that--it being portable--it uses entirely different resources. Why can the portable and "installed" version not run side by side?
Aris-t2
commented
1 day ago The can, but this has to be setup.
You need a file FirefoxPortable.ini inside where FirefoxPortable.exe is.
Its content looks like:
[FirefoxPortable]
FirefoxDirectory=App\firefox
ProfileDirectory=Data\profile
SettingsDirectory=Data\settings
PluginsDirectory=Data\plugins
FirefoxExecutable=firefox.exe
AdditionalParameters=-purgecaches
LocalHomepage=
DisableSplashScreen=true
AllowMultipleInstances=true
DisableIntelligentStart=false
SkipCompregFix=false
RunLocally=false
# The above options are explained in the included readme.txt
# This INI file is an example only and is not used unless it is placed as described in the included readme.txtAllowMultipleInstances=true has to be present.
Nicholas-Steel
commented
1 day ago Lets try a different approach.
1. Download and setup [PortableFirefox](https://sourceforge.net/projects/portableapps/files/Mozilla%20Firefox%2C%20Portable%20Ed./Mozilla%20Firefox%2C%20Portable%20Edition%20133.0/FirefoxPortable_133.0_English.paf.exe/download). 2. Start `FirefoxPortable.exe` and enable `toolkit.legacyUserProfileCustomizations.stylesheets` in `about:config`. 3. Create `/chrome/` folder and extract [latest release (zip file) from here](https://github.com/Aris-t2/CustomCSSforFx/releases) to it.  4. Start `FirefoxPortable.exe` , take and post a screenshot of the window showing this projects default setup (looks like this for me).  5. Enable `tabs_below_navigation_toolbar_fx133.css`, restart Firefox and post a screenshot of the result (looks like this for me). This is were we would start troubeshooting.
1) I installed Firefox Portable (why does it have an installer? Doesn't that run counter to being portable?)
2) I copied the Chrome folder from my existing install of Firefox in to the Portable version's Profile and enabled toolkit.legacyUserProfileCustomizations.stylesheets in about:config.
3) I updated the CSS folder with the copy from the newly released 4.6.4 package.
4) I enabled the Menu Bar and Title Bar.
This is the result:
If I copy my old copy of user.js it still looks correct. If i copy my old copy of Prefs.Js however... things revert to the Tab Bar looking incorrect. So presumably a change that something made in About:Config is breaking it.
Nicholas-Steel
commented
1 day ago MaxPSN wrote:
I think it could be profile related? I have the same problem but this won't occur if I use a fresh new profile
Here is what it should look like with Firefox 132 + CustomCSSforFx 4.5.4 : ![Firefox 132]
Here is what it looks with Firefox 132 + CustomCSSforFx 4.6.3 : ![Firefox 132 2]
Here is what it looks with Firefox 133 + CustomCSSforFx 4.6.3 : ![Firefox 133]
Here is what it looks with a fresh new profile (Firefox 133 + CustomCSSforFx 4.6.3) : ![Firefox 133 2]
As of the 4.6.3 CSS being used between Firefox 132 and 133, only
@import "./css/tabs/tabs_below_navigation_toolbar.css"; /**/ /* for Firefox 132 and below */and@import "./css/tabs/tabs_below_navigation_toolbar_fx133.css"; /**/ /* for Firefox 133+ */being alteredThe address bar will go up there if I turned on
@import "./css/toolbars/addonbar_move_bookmarks_toolbar_to_bottom.css"; /**/on Firefox 133 but I guess that's off topic (Now I noticed I forgot to include the separate stop and reload buttons script but that should not really matter)Windows 10 22H2 DPI: 96 (100%) default windows mode: dark default app mode: light Firefox theme: System Theme/Auto Windows system theme is Aero10 By vaporvance with DWMBlurGlass
Check if this exists in your Prefs.js file (in the root of the Profile folder)
user_pref("layout.css.prefers-color-scheme.content-override", 0);
Delete it if it does, deleting this seems to resolve my issue. I've no idea what put that command in to my Prefs.js file.
Nicholas-Steel
commented
1 day ago Thank you Aris-t2 for your persistent support and suggestion of messing around with a portable install of Firefox, this made it easy to test changes and narrow down the cause.
user_pref("layout.css.prefers-color-scheme.content-override", 0); (delete this from prefs.js to fix the Tab Bar issue)
Thank you MaxPSN, your examples of Firefox in various conditions reinforced the idea that the issue was related to something within the Profiles folder and that the issue wasn't external.
MaxPSN
commented
1 day ago Can confirm removing user_pref("layout.css.prefers-color-scheme.content-override", 0); from prefs.js fixes it
Thanks
jmcken1
commented
1 day ago Having the same problem with tab colors after updating to CSSforFx v4.6.4 on Firefox v133.0. I didn’t delete layout.css.prefers-color-scheme.content-override in Prefs.js, and instead found it in about:config and reverted it to its default (2), and I can confirm this fixes the tab colors. However, it also reverts Firefox’s own pages (settings, add-ons, etc.) from my preferred dark mode to light mode, so that’s not ideal.
jmcken1
commented
1 day ago Slight update: So, that setting seems to be the same one as Settings → General → Website appearance. “Automatic” and “Light” work fine, but “Dark” breaks the tab colors. Is this a bug with CSSforFx or Firefox itself?
Firefox v133.0 & CSSforFx v1.6.4 with “Dark” mode enabled (dark page background, broken tab colors)
Firefox v133.0 & CSSforFx v1.6.4 with “Light” mode enabled (light page background, normal tab colors)
MaxPSN
commented
1 day ago Having the same problem with tab colors after updating to CSSforFx v4.6.4 on Firefox v133.0. I didn’t delete
layout.css.prefers-color-scheme.content-overridein Prefs.js, and instead found it inabout:configand reverted it to its default (2), and I can confirm this fixes the tab colors. However, it also reverts Firefox’s own pages (settings, add-ons, etc.) from my preferred dark mode to light mode, so that’s not ideal.
So the root course should be the css reads the website appearance settings instead of the current browser theme That explains why the tab colors are correct if I switched to dark theme
MaxPSN
commented
1 day ago Temporary solution
Switch back to old version that has the correct tab colors for you (for me: v4.5.4)
Download the latest one (v4.6.4), drag and drop replace everything in v4.5.4's css\locationbar with the latest version's
Replace those lines in v4.5.4's userChrome.css
/* --------------------------------------------------
MEGABAR - settings for 'megabar' & 'megabar popup'
--------------------------------------------------
*/
@import "./css/locationbar/megabar_expanding_breakout_disabled.css"; /**/
@import "./css/locationbar/megabar_disable_openviewonfocus.css"; /**/
/* @import "./css/locationbar/urlbar_border_roundness.css"; /**/
@import "./css/locationbar/urlbar_restore_visible_border.css"; /**/
/* -------------------------------------
Megabar/location bar background color
-------------------------------------
[!] only use one option at a time
*/
/* @import "./css/locationbar/urlbar_background_color.css"; /**/ /* default white background color */
/* @import "./css/locationbar/urlbar_background_color_dark.css"; /**/ /* force dark color for e.g. dark lw-themes */
with v4.6.4's
/* --------------------------------------------------
MEGABAR - settings for 'megabar' & 'megabar popup'
--------------------------------------------------
*/
@import "./css/locationbar/megabar_disable_openviewonfocus.css"; /**/
/* @import "./css/locationbar/urlbar_border_roundness.css"; /**/
@import "./css/locationbar/urlbar_restore_visible_border.css"; /**/
/* -------------------------------------
Megabar expanding_breakout_disabled
-------------------------------------
[!] only use one option at a time
[!] megabar_expanding_breakout_disabled_fx128-fx132 is for Firefox 128-132.
*/
@import "./css/locationbar/megabar_expanding_breakout_disabled.css"; /**/
/* @import "./css/locationbar/megabar_expanding_breakout_disabled_fx128-fx132.css"; /**/
/* -------------------------------------
Megabar/location bar background color
-------------------------------------
[!] only use one option at a time
*/
@import "./css/locationbar/urlbar_background_old_colors.css"; /**/ /* colors from Firefox 132 and older */
/* @import "./css/locationbar/urlbar_background_color.css"; /**/ /* default white background color */
/* @import "./css/locationbar/urlbar_background_color_dark.css"; /**/ /* force dark color for e.g. dark lw-themes */
Edit: Tested on both FX133 and 132 on Windows, can finally update to 133 without dealing with broken UI
Aris-t2
commented
23 hours ago Having the same problem with tab colors after updating to CSSforFx v4.6.4 on Firefox v133.0. I didn’t delete
layout.css.prefers-color-scheme.content-overridein Prefs.js, and instead found it inabout:configand reverted it to its default (2), and I can confirm this fixes the tab colors. However, it also reverts Firefox’s own pages (settings, add-ons, etc.) from my preferred dark mode to light mode, so that’s not ideal.So the root course should be the css reads the website appearance settings instead of the current browser theme That explains why the tab colors are correct if I switched to dark theme
You were right, I found the code causing this. The issue will be fixed on next update.
Classic squared tabs had a wrong @media rule, that looked for the website related pref too.
Nicholas-Steel
commented
13 hours ago So with all this sorted, my original assumption of only needing to update the CSS folder is back to being correct.
This project is awesome, thanks everyone that works on it. Is much simpler for me to get Firefox looking the way that I want it than when I was hunting down snippets of code here and there on the interwebz.
Does the issue occur without any files inside /chrome/ folder? No. -> If it does, it might be a Firefox bug not related to this projects files, so "the issue report" is most likely wrong here.
Issue description, userChrome.css/userContent.css 'settings' the issue occurs with and steps to reproduce the issue: chrome.zip Here is the contents of my Chrome folder, the issue is I think clearly conveyed in the images further down in this report.
Does the issue occur with the most recent version of CustomCSSforFx (release/test/dev build)? Yes. -> Check here: https://github.com/Aris-t2/CustomCSSforFx/releases <-
Screenshots showing the issue (drag & drop images into this post): So far I've noticed (after updating these tweaks) the Inactive tabs are the wrong colour, Active tab is the wrong colour, Close Tab button on the Active Tab is invisible, gray background in Address Bar and Search Bar.
The popup for Autocompleting a URL in the Address Bar is also broken, it's positioned higher and takes up entire width of display as seen in the below image (the narrow white line at the very top middle of the image is a bug with the Windows Snipping tool in Windows 10 and should be ignored).
System information
If this is wrong use of Issue Reporting than let me know where I should go to discuss this kinda situation.