Skip to content

WagnerGMD/CustomCSSforFx

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Download Classic Theme Restorer / Classic Toolbar Buttons / GlassMyFox CSS tweaks for Firefox 57+
Download NoiaButtons CSS tweaks for Firefox 57+

Instructions / Howto / Readme

Want to support this project?

[ Paypal Me ]

WebExtensions can not modify browsers appearance in Firefox 57+

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 and what is 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
or Shift+F2 to open Firefox's command line, then enter the command folder openprofile

2. User styles belong into \chrome\ folder. Create it, if there is none yet.
\ PROFILENAME \chrome\

3. Copy userChrome.css, userContent.css and the folders into \chrome\ subfolder so the results look like this.
\ PROFILENAME \chrome\css\
\ PROFILENAME \chrome\image\
\ PROFILENAME \chrome\xml\
\ PROFILENAME \chrome\userChrome.css
\ PROFILENAME \chrome\userContent.css

(Optional) Profile folders location on drive:
Windows
C:\Users\ USERNAME \AppData\Roaming\Mozilla\Firefox\Profiles\ PROFILENAME \
Hidden files must be visible to see AppData folder. Alternatively open %APPDATA%\Mozilla\Firefox\Profiles\ from explorers location bar.
Linux
\home\ USERNAME \.mozilla\firefox\ PROFILENAME \
Hidden files must be visible to see .mozilla folder.
Mac OS X
~\Library\Mozilla\Firefox\Profiles\ PROFILENAME \ or
~\Library\Application Support\Mozilla\Firefox\Profiles\ PROFILENAME \
\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 btw. 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 url(./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 url(./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?

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.

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 url(./css/locationbar/ac_popup_classic_with_two_lines.css);
Add /* at lines start and */ at lines end to remove classic popup.
Look for /*@import url(./css/locationbar/ac_popup_url_and_title_50percent_width.css);*/
Remove /* at lines start and */ at lines end to enable this popup appearance.

Suggested ui tweaks

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

'about:config' tweaks

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

Flyweb
dom.flyweb.enabled

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

About

Custom CSS tweaks for Firefox 57+

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 100.0%