Custom CSS tweaks for Firefox

  • By Aris
  • Last update: Nov 20, 2022
  • Comments: 14

Downloads for Firefox

CustomCSSforFx releases & changelog - Custom JavaScript for Firefox - NoiaButtons CSS tweaks - List of CTR, CTB, GMF & Noia4 CSS tweaks & link to FOXSCAPEuC theme - Firefox Color (compatible with default color preset of CustomCSSforFx)

Want to support this project?

[ Paypal Me ]

Instructions / Howto / Readme

Unlock custom CSS usage

about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true

WebExtensions can not modify Firefox appearance properly

The only way to modify ui is adding custom CSS code to userChrome.css and userContent.css files inside browsers profile folder.
Keep in mind CSS code can not create entirely new items, buttons or toolbars. It only can modify already present ui items.

Where to find Firefox profile folder? The correct location for user styles.

1. Find your profile folder ('profile names are different for everyone').
about:support > Profile Folder > Open Folder
or about:profiles > Root Directory > Open Folder

2. User styles belong into \chrome\ folder. Create it, if there is none yet. It should look like this afterwards:
\ PROFILE FOLDER NAME \chrome\

3. Copy userChrome.css, userContent.css and \config\, \css\, \image\ folders into \chrome\ folder. It should look like this afterwards:
\chrome\config\
\chrome\css\
\chrome\image\
\chrome\userChrome.css
\chrome\userContent.css

(Optional) Profile folders location on drive:
Windows
C:\Users\ USERNAME \AppData\Roaming\Mozilla\Firefox\Profiles\ PROFILE FOLDER NAME \
Hidden files must be visible to see AppData folder. Alternatively open %APPDATA%\Mozilla\Firefox\Profiles\ from explorers location bar.
Linux
/home/ username /.mozilla/firefox/ profile folder name /
Hidden files must be visible to see .mozilla folder.
Mac OS X
~\Library\Mozilla\Firefox\Profiles\ PROFILE FOLDER NAME \ or
~\Library\Application Support\Mozilla\Firefox\Profiles\ PROFILE FOLDER NAME \
\Users\ USERNAME \Library\Application\Support\Firefox\Profiles\

How to use custom user styles?

The userChrome.css and userContent.css files works like an options\configurations file. All main "features" can be enabled and disabled there.
Edit userChrome.css and userContent.css with any text editor (Notepad++ recommended on Windows) and enable or disable any feature you like by modifying, removing or outcommenting available @import strings.
Restart Firefox after every modification for changes to take effect.

Example
If "classic button appearance for navigation toolbar buttons" should be enabled, the corresponding line has to look like this:
@import "./css/buttons/buttons_on_navbar_classic_appearance.css"; /**/

If "classic button appearance for navigation toolbar buttons" should be disabled, the corresponding line has to look like this:
/* @import "./css/buttons/buttons_on_navbar_classic_appearance.css"; /**/

Note
Code between /* and */ won't be used by Firefox unless there are other /* or */ inbetween.

How to find item ids and attributes?

Firefox 57-60

Enable once:
1. Tools > WebDeveloper > Toggle Tools > Toolbox Options > Enable browser chrome and add-on debugging toolboxes
2. Tools > WebDeveloper > Toggle Tools > Toolbox Options > Enable remote debugging

Hit Ctrl+Alt+Shift+I or open 'Tools > WebDeveloper > Browser Toolbox'.

Inspect ui or web content.

Force popups to stay open for inspection:
Click on 'disable popup auto hide' button (= button with four squares) on developer toolbars end.

Firefox 61+

Enable once:
1. Tools > WebDeveloper > Toggle Tools > 'Customize Tools and get help button' (= button with three dots) > Settings > Enable browser chrome and add-on debugging toolboxes
2. Tools > WebDeveloper > Toggle Tools > 'Customize Tools and get help button' (= button with three dots) > Settings > Enable remote debugging

Hit Ctrl+Alt+Shift+I or open 'Tools > WebDeveloper > Browser Toolbox'.

Inspect ui or web content.

Force popups to stay open for inspection: Click on 'Customize Tools and get help button' (= button with three dots) and select 'Disable popup auto-hide'.

How to modify custom user styles?

Open CSS files with a text editor. Look through the code and change values the way you need.
Some files contain additional instructions about how to tweak the ui for individual cases.
Restart Firefox for changes to take effect.

Example
Open ./css/tabs/classic_squared_tabs.css file
Look for /* unloaded/pending tabs color *//*
Remove /* at lines end to make that part of the code active. Save the file and restart Firefox.

Example 2
Open userChrome.css file
Look for @import "./css/tabs/classic_squared_tabs.css"; /**/
Add /* at lines start to remove classic squared tabs.
The result will look like /* @import "./css/tabs/classic_squared_tabs.css"; /**/

Example 3
Open userChrome.css file
Look for /* @import "./css/locationbar/reader_alternative_icon.css"; /**/
Remove /* at lines start to enable this popup appearance.
The result will look like /* @import "./css/locationbar/reader_alternative_icon.css"; /**

Suggested ui tweaks (list might be partly outdated)

Toolbar modes (suggestion: compact mode)
Customize mode > Density > Compact / Normal / Touch

Titlebar modes (suggestion: Firefox titlebar ['application/hamburger button in titlebar' only works in Firefox titlebar])
Customize mode > Title Bar > uncheck checkbox

Drag space above tabs toolbar (suggestion: disable drag space ['application/hamburger button in titlebar' works best without drag space])
Customize mode > Drag Space > uncheck checkbox

Bookmarks menu button on bookmarks toolbar
Customize mode > Toolbars > Bookmarks Toolbar
Customize mode > move 'bookmarks menu' button to bookmark toolbars end

Downloads button always visible
Customize mode > downloads button > click on button and uncheck 'Auto-hide'

Searchbar (suggestion: placed after location bar)
Customize mode > Search(bar) > move to navigation toolbar

Flexible spaces (suggestion: remove spaces after and before location bar)
Customize mode > grab and drag flexible space into palette

RSS icon in location bar
Install Awesome RSS WebExtension

Search within "New Tab page" (Fx69+)
browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar

'about:config' tweaks (list might be partly outdated)

(To revert changes right-click entry and select 'reset')

Tab audio icon
browser.tabs.showAudioPlayingIcon

Tab min width (suggestion: 100)
browser.tabs.tabMinWidth

Insert related tab after current tab (suggestion: enable / set to 'true')
browser.tabs.insertRelatedAfterCurrent

Hide 'http://' from url (suggestion: disable / set to 'false')
browser.urlbar.trimURLs

Open links in new tab/window
browser.link.open_newwindow.restriction > 0 (new tab instead window)

Preview tabs using 'Ctrl + Tab'
browser.ctrlTab.previews

Close window with last visible tab (suggestion: disable / set to 'false')
browser.tabs.closeWindowWithLastTab

Titlebar
browser.tabs.drawInTitlebar

Old about:newtab and about:home pages (Firefox 57-59 only)
browser.newtabpage.activity-stream.enabled
browser.newtabpage.activity-stream.aboutHome.enabled

HTML5 fullscreen warning
full-screen-api.warning.delay > 0 or -1 (reduces delay / hides warning)
full-screen-api.warning.timeout > 0 (reduces delay)

Recently added bookmarks
browser.bookmarks.showRecentlyBookmarked

General animations
toolkit.cosmeticAnimations.enabled

Fullscreen animations for HTML5 content
full-screen-api.transition-duration.enter > 0 0 (reduces animation time)
full-screen-api.transition-duration.leave > 0 0 (reduces animation time)

Add-on manager: remove 'Get Add-ons' category
extensions.getAddons.showPane

Findbar: animated result highlighting
findbar.modalHighlight

Searchbar in 'about:preferences'
browser.preferences.search

Location Bar: search engines at popups bottom
browser.urlbar.oneOffSearches

Searchbar: open search results in new tab
browser.search.openintab

Reader mode
reader.parse-on-load.enabled

Geolocation (suggestion: disable / set to 'false')
geo.enabled

Pocket (suggestion: disable / set to 'false')
extensions.pocket.enabled

Screenshots (suggestion: disable / set to 'true')
extensions.screenshots.disabled

Container tabs
privacy.userContext.enabled

Password viewer in login forms (suggestion: disable / set to 'false')
signon.showAutoCompleteFooter

Font rendering
gfx.canvas.azure.backends > direct2d1.1,cairo,skia (old font rendering)
gfx.content.azure.backends > direct2d1.1,cairo,skia (old font rendering)

Anti fingerprinting (Caution: browser might behave in unforeseen ways!)
privacy.resistFingerprinting
Fingerprinting info at Mozilla Wiki tweaks

Telemetry / data collection (suggestion: disable / set to 'false')
browser.ping-centre.telemetry
toolkit.telemetry.archive.enabled
toolkit.telemetry.bhrPing.enabled
toolkit.telemetry.enabled
toolkit.telemetry.firstShutdownPing.enabled
toolkit.telemetry.newProfilePing.enabled
toolkit.telemetry.reportingpolicy.firstRun
toolkit.telemetry.shutdownPingSender.enabled
toolkit.telemetry.unified
toolkit.telemetry.updatePing.enabled
experiments.enabled
experiments.activeExperiment
experiments.supported
datareporting.healthreport.uploadEnabled
nsITelemetry.canRecordBase
nsITelemetry.canRecordExtended
browser.newtabpage.activity-stream.feeds.telemetry
browser.newtabpage.activity-stream.telemetry
extensions.screenshots.upload-disabled ("true" to disable)

Github

https://github.com/Aris-t2/CustomCSSforFx

Comments(14)

  • 1

    [MULTIROW TABS SUPPORT THREAD] - multiple tab lines

    First of all, Thank you for this FF57 life saver repo 👍

    Maybe you can save my live by finding a solution to had multiple lines tabs possible (was possible via Tab Mix Plus prior to FF57). This will be great as i downgrade back to FF56 for this, session manager and passifox.

    I'm not so confindent asking this as even chrome don't have this function :/

    I really need this.

  • 2

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

    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
  • 3

    General discussions, feedback, questions belong here (v4)

    Continued from https://github.com/Aris-t2/CustomCSSforFx/issues/3, https://github.com/Aris-t2/CustomCSSforFx/issues/41 and https://github.com/Aris-t2/CustomCSSforFx/issues/88.

    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.

    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
  • 4

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

    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 and https://github.com/Aris-t2/CustomCSSforFx/issues/211.

    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
  • 5

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

    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 and https://github.com/Aris-t2/CustomCSSforFx/issues/133.

    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
  • 6

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

    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 and https://github.com/Aris-t2/CustomCSSforFx/issues/241.

    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
  • 7

    General discussions, feedback, questions belong here (v5)

    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 and https://github.com/Aris-t2/CustomCSSforFx/issues/109.

    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
  • 8

    General discussions, feedback, questions belong here (v3)

    Continued from here https://github.com/Aris-t2/CustomCSSforFx/issues/3 and here https://github.com/Aris-t2/CustomCSSforFx/issues/41

    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.

    Trying to make CSS code ready for Firefox Photon (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
    • preferences window
    • additional location bar
    • favicon in location bar
    • moving menubar items to a different toolbar
    • restart button
    • ... many more
  • 9

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

    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
  • 10

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

    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 and https://github.com/Aris-t2/CustomCSSforFx/issues/163.

    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
  • 11

    GENERAL discussion, feedback, questions belong here! (v13)

    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, https://github.com/Aris-t2/CustomCSSforFx/issues/273, https://github.com/Aris-t2/CustomCSSforFx/issues/308 and https://github.com/Aris-t2/CustomCSSforFx/issues/368.

    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
  • 12

    [Win][Fx108] Non-tab content in tab bar gets collapsed with tabs below location bar

    1. Issue description:

    With @import "./css/tabs/tabs_below_navigation_toolbar.css"; enabled, all non-tab content in the tab bar (including new tab button and tab-list dropdown button) gets collapsed. Adding my_userChrome.css with:

    #tabbrowser-tabs {
      width: unset;
    }
    

    fixes this. (The issue also doesn't occur with the _alt version or the _macOS version of the option, but those have other downsides.) (Expected behavior: content added to the tab bar with customize mode remains visible after leaving customize mode)

    1. Does the issue occur with latest CustomCSSforFx release? (Check here: https://github.com/Aris-t2/CustomCSSforFx/releases)

    Yes

    1. Steps to reproduce the issue:
    • Install latest version of CustomCSSforFx (4.2.5v2 at time of writing)
    • Uncomment @import "./css/tabs/tabs_below_navigation_toolbar.css"; on line 570 of userChrome.css
    • In customize mode, place content such as addon buttons on the right side of the tab bar
    • After leaving customize mode, notice that the only thing in the tab bar is tabs (even if there aren't enough tabs to fill the width of the window)
    • To fix: Create my_userChrome.css with content:
    #tabbrowser-tabs {
      width: unset;
    }
    
    1. SCREENSHOT(S) of the issue (drag & drop images into this post):

    before enabling tabs below navigation toolbar: customcss_default

    after enabling: customcss_below_navigation_toolbar_default

    after adding #tabbrowser-tabs { width: unset; }: customcss_below_navigation_toolbar_fixed

    1. Is 'about:config > toolkit.legacyUserProfileCustomizations.stylesheets' set to 'true'? (Custom CSS files will only work, if this pref is set to true!) Yes

    2. System information

    • OS & OS version: Windows 11 Home, 22H2, build 22621.819
    • DPI / HiDPI (e.g. 100%, 125%...): 125%
    • Firefox version: 108.0b6 (64-bit)
    • Firefox theme (e.g. default, dark, 'theme name & link'): Light v1.2 (Mozilla) (default, I think?)
    • This projects userChrome.css/userContent.css 'settings' the issue occurs with: All default except @import "./css/tabs/tabs_below_navigation_toolbar.css"; enabled on line 570 of userChrome.css
  • 13

    [Fx 107.0] Tabs toolbar with multiple lines - additional blank line problem

    1. Issue description: With enabled tabs below navigation toolbar and tabs multiple lines, I get plus blank line below tabs.

    2. Does the issue occur with latest CustomCSSforFx release? Yes (v4.2.4v3)

    3. Steps to reproduce the issue: Enable the following mods in userChrome.css: @import "./css/tabs/tabs_below_navigation_toolbar_alt.css"; @import "./css/tabs/tabs_multiple_lines.css";

    4. SCREENSHOT(S) of the issue (drag & drop images into this post): multiple_tabs_broken

    5. Is 'about:config > toolkit.legacyUserProfileCustomizations.stylesheets' set to 'true'? (Custom CSS files will only work, if this pref is set to true!) Yes.

    6. System information

    • OS & OS version: Windows 10 21H2
    • DPI / HiDPI (e.g. 100%, 125%...): 100%
    • Firefox version: 107.0
    • Firefox theme (e.g. default, dark, 'theme name & link'): Default grey.
    • This projects userChrome.css/userContent.css 'settings' the issue occurs with: @import "./css/tabs/tabs_below_navigation_toolbar_alt.css"; @import "./css/tabs/tabs_multiple_lines.css";
  • 14

    When Forward Button Hidden, Rounded-Connected Back Button and Identity Box don't connect properly like in classic versions

    1. Issue description: When the forward-button is hidden, the rounded old-style connected-back-button looks incorrect when compared to previous versions (the "background" of the button is seemingly invisible and blends in with the colour of the page rather than having a visible outline, no matter if it's active or inactive) and it doesn't correctly connect to the identity box when the identity box is set to have colours like it used to. The spacing of the padlock and tracking protection icons is also way off. It seems the Identity Box also doesn't align with the megabar correctly anymore, having a bit of extra space at the top and botto, rather than seamlessly connecting with the top and bottom of the bar. Also, kind of erroneously, the hover colour-change for the identity box is active when hovering over the padlock icon, but not when hovering over the tracking protection icon, and if the cursor is far right enough from the padlock, the identity box itself can be visually "clicked" like a button on its own (although nothing happens).

    Additional mild annoyance: The particular padlock and tracking protection icons I previously used (default Firefox 70-80ish I think? Visible in the "old" picture) aren't available to select it seems. It would be nice if they could be included in future versions.

    Edit: The connected back button, when inactive, also looks kind of messed up on pages which don't have the identity box like "about:blank"

    1. Steps to reproduce the issue: N/A

    2. SCREENSHOT(S) of the issue (drag & drop images into this post): Old compared to current view: oldvsnew The broken hovering/clicking of the identity box: Animation The messy looking back button on pages that don't show the identity box: image

    3. about:config prefs (custom CSS files won't work, if these prefs are set to false)

    • toolkit.legacyUserProfileCustomizations.stylesheets > true (yes / no): Yes
    • browser.proton.enabled > true (yes / no): Yes
    • does the issue occur with latest CustomCSSforFx release (yes / no): Yes
    1. System information
    • OS & OS version: Windows 10 v1909
    • Firefox version: Waterfox G4.0.8 (Based on Gecko 91.3, unsure exact Firefox version)
    • Firefox (lw) theme (e.g. default, dark, 'theme name/link'): Modern Light (Default)
    • This projects userChrome.css/userContent.css 'settings' the issue occurs with:
    custom_backforward_connected.css
    custom_backforward_connected_to_location_bar.css
    identitybox_colors.css
    forward_button_hide_when_disabled.css
    

    I understand this could just be a Waterfox issue, but to my knowledge the UI is identical to the matching Firefox version it's based off in each iteration, and I previously used the addon on Waterfox without any Waterfox-based cosmetic problems. Granted, that could have changed in this more recent version. Apologies if that's the case.