CustomCSSforFx releases & changelog --- Custom JavaScript for Firefox --- NoiaButtons CSS tweaks
List of CTR, CTB, GMF & Noia4 CSS tweaks & link to FOXSCAPEuC theme by Michael Walden
- WebExtensions can not modify Firefox Quantums appearance properly
- Where to find Firefox profile folder? The correct location for user styles.
- How to use custom user styles?
- How to find item ids and attributes?
- How to modify custom user styles?
- Suggested ui tweaks
- 'about:config' tweaks
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.
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\
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.
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'.
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"; /**
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
(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)