Classic Theme Restorer Add-on developer, Aris has released userChrome.css file that modifies Firefox 57’s Photon UI.

Classic Theme Restorer add-on which used by Firefox users to revert from Australis to classic UI, will be dead when Firefox 57 aka Firefox Quantum arrives with Photon UI on November 14, 2017.

Currently, CTR add-on which uses legacy technology has more than 3 lakh users.

Classic Theme Restorer add-on developers’s UserChrome.css file modifies Firefox 57 Photon UI like before

CTR developer, Aris says Photon UI can be modified using CSS tweaks, but confirms the new CSS code he is going to offer, cannot create new items or toolbars or buttons.

The UserChrome.CSS file contains most of the code from his two add-ons: Classic Theme Restrorer and Classic Toolbar buttons.

Screenshots posted by Aris confirms modifying the Firefox Photon UI is very much possible. Check the below screenshot for the proof.

Changing Firefox 57 Photon UI using userChrome.css file

As userChrome.css file now available

1. Visit this page on github and download the Custom_CSS_for-Fx zip file to your computer.

Note: Ensure you always download the latest version.

2. Extract CSS, image, and XML folders, and userChrome and usercontent css files to a folder.

3. After doing that, follow the below steps.

  • Install Firefox 57  on your computer
  • Visit about:support page and open the Profile folder, close Firefox.
  • Create a new folder called ‘Chrome’ in the profile sub folder and copy and paste all the files we extracted earlier to it
  • Reopen Firefox browser to see UI changes.

Tested / confirmed working in userChrome.css (at the moment)

[Tabs] squared tabs (with rounded top corners), Read: Firefox 57 : Photon Rectangular Tabs, New Icons and more
[Tabs] custom tab height
[Tabs] (old) tab appearance/colors for active/non-active/hovered/pending/unread tabs
[Tabs] remove ridiculous tab toolbar gap before first tab (in normal window mode without menubar)
[Tabs] tabs not on top: tabs toolbar after navigation and bookmarks toolbars
[Tabs] empty tab favicon: tab icon for tabs without favicons
[Tabs] hide tabs toolbar for tab sidebar WEs (not visible on screenshots)
[Buttons] navigation toolbar buttons: ‘classic’ button appearance (like offered by Classic Toolbar Buttons add-on)
[Buttons] bookmarks toolbar buttons: ‘default’ button appearance
[Buttons] default browser buttons: custom icon colors
[Buttons] application/hamburger button: move button to the left
[Buttons] application/hamburger button: cheat button into tabs toolbar
[Buttons] application/hamburger button: custom label (“Firefox” on screenshots)
[Buttons] application/hamburger button: different colors (Default, Aurora, Nightly, Transparent…)
[Buttons] bookmarks menu button: label on bookmarks toolbar
[Buttons] bookmarks menu popup: classic appearance
[Buttons] custom images for toolbar buttons (like offered by Classic Toolbar Buttons add-on)
[Buttons] downloads button: always visible (there is also an option for that in ‘Customize…’ mode)

[Buttons] ‘more’ compact navigation toolbar buttons
[Location Bar] location bar and search bar text size
[Location Bar] location bars dropmarker at the end
[Location Bar] change location bars icon padding
[Location Bar] identity box colors for secure/valid connections
[Location Bar] width/height tweaks to location bar popup
[Location Bar] location bar popup: two lined results (buggy in some cases)
[General] hiding ui elements not removable by default (e.g. action menu in location bar, private mask)

Firefox 57: First Look At Page Action Menu

[General] context menu item labels instead of icons for back, forward, reload, bookmark this page
[General] lw-theme support for squared tabs and ‘tabs not on top’ appearance
[General] bookmarks toolbar: old padding
[General] bookmarks toolbar: old height


[Buttons] application/hamburger button ‘in titlebar’: space before tabs has to be adjusted manually (depends on custom button title length), ‘Titlebar’ and ‘Drag Space’ checkboxes have to be disabled ‘Customize…’ area)
[Buttons] application/hamburger button jumps back to nav-bar, if menubar is visible (prevents overlapping glitches)
[Location Bar] popup width has to be adjusted manually to match location bars width for normal, maximized and fullscreen window modes

Already in Firefox 57+ without installing WebExtensions (compared to Firefox 56 or older)

[Buttons] star/bookmark button: button in location bar
[Buttons] bookmarks menu button: disconnected from star button (see ‘Customize…’ area)
[Buttons] back and forward buttons: disconnected from location bar
[Buttons] back and forward buttons: separately movable within navigation toolbar bar
[Buttons] stop and reload buttons: buttons combined and outside location bar
[Buttons] sidebar button: one button for bookmarks, history and synced tabs
[Buttons] application/hamburger button: popup ‘closer’ to the old one (no huge icons)
[Buttons] downloads button: progress indicator below icon
[General] flexible spaces (see ‘Customize…’ area)
[General] drag space: space above tabs toolbar (see ‘Customize…’ area)
[General] toolbar modes: compact, normal, large (see ‘Customize…’ area)

Things possible by installing WebExtensions

[Buttons] Old ‘Firefox’ menu (WIP): Application Menu
[Buttons] RSS button in location bar: Awesome RSS
[General] custom ‘about:newtab’ page: New Tab Override
[Tabs] Sidebar tabs: Tabs Center Redux (additional CSS code in userChrome.css required to hide default tabs toolbar for now)
Not properly working using CSS tweaks

[Tabs] custom tab widths: issues with overflow mode like on previous Fx versions, if modified through custom CSS areas

Not possible

  • ‘real’ buttons in titlebar (moving buttons to a toolbar and cheating them into titlebar is possible)
  • Actually/manually moving existing buttons to different locations than toolbars (e.g. feed button in location bar,
  • Application/hamburger button to tabs toolbar)
  • Additional toolbars, add-ons bar, status bar
  • Custom scrollbars
  • (Re)binding xml code: ‘old search’, autoresizing autocomplete popup