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
Notes
[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
This is good news!
There still is some hope at the end of this gruesome, forever bumpy ride with Firefox (Mozilla).
If you ever find something akin to Beyond Australis, please let us know.
Sure.
Thank you so much for your efforts.
Without classic theme restorer, I suspect we’d have been stuck with Australis for the foreseeable future, with Miozil taking no notice whatsoever of dissent.
Thankfully Australis & the attitude that imposed it have been dumped in the bin. The Photon approach is better, but regrettably only a little better – the reaction to robust criticism is still to stifle it, lest we upset the precious designers. Aspects of the underlying tech were long overdue for a revamp, which is welcome, but I’m not sure the security and ‘idle resource management’ are quite right yet. And I’m not at all happy about the imposition of leaks, hidden addons, and integration of commercial ventures that could be independent features. Don’t even get me started on MITI and the proposed imposition of censorship to protect us all with a little temporary safety.
Whoa, way off topic.
In other respects – in terms of dumping on add-on contributors & slavishly following fashions of other companies they would rather be working for – I still feel that Mozilla management has lost its way in the corporate wilderness.
Let’s all hope for a change for the better.
Thank you for all your hard work. Is there a way to move the tabs to the bottom of the screen?
You may try adding this css
/* Puts tabs on the bottom */
#TabsToolbar {
-moz-box-ordinal-group: 2;
border-bottom: 1px solid #888 !important;
}
#nav-bar{ border-top-width: 0px !important; }
The code did not seem to work. Just to be safe I put it in to a blank userChrome.css file. Any suggestion?
Hope you’re asking about tabs bottom css code.
@Ann Rein
Here is the proof that the code I said is working for me
https://imgur.com/a/pKBmC
I think there is a misunderstanding. I was looking for tab at the bottom of the screen not below the address bar.
Oh, not aware of that, sorry for misunderstanding.
Nothing changed. I copied all of the files in the zip file to my Chrome folder (I had already made one and made one tweak, from another source, and that worked) that moved the tabs to below the address bar – now everything is above the address bar now :/ What am I doing wrong?
I’ve added the code to userchrome.css file and tabs moved to bottom, that worked for me.Ensure you’ve downloaded latest zip file of Aris.
On Linux the profile subfolder names are case sensitive, it must be ‘chrome’ not ‘Chrome’
OK, thanks for that. Linux users will find your comment useful.
What about the ability to double-click the tab bar to open a new tab? Any way to recreate this in userChrome.css?
You don’t need any css or add-on as you just need ensure title bar is displayed. Click on menu, select customize and enable title bar, now double clicking on tab bar will open a new tab.
Classic’ CSS tweaks for Firefox 57+ v1.4.3 moved the bookmarks toolbar to the bottom. Please move it back to the top.
Its bit difficult for us to come up with an answer when CSS code changes, better you switch to v1.42 which has not that change. Honestly, I don’t make any changes to Firefox, I use Nigthly though.
I’ve followed all the steps exactly, but nothing changes. Any suggestions?
Definitely you’ve not followed the steps in right way. Please try again.
Sorry to resurrect an old thread, but I’d like to modify the autocomplete popup as follows:
1. Have it be the same width as thww URL bar, as in the two-line style (I loathe the full-page-width look).
2. Keep each item on one line, with the separator, as in the default.
3. Tighten the spacing between items — about what it is in the two-line style between the url and the following page title.
4. Have a scrollbar.
5. Restrict the height to 700 px.