Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Things possible in Firefox 57+ (by using CSS code in userChrome.css/userContent.css) #1

Aris-t2 opened this issue Oct 6, 2017 · 5 comments


None yet
3 participants
Copy link

commented Oct 6, 2017

As long as userChrome.css and userContent.css are supported by Firefox, Photon UI content can be modified using CSS tweaks, but CSS code can not create entirely new items, buttons or toolbars.

Most CSS code is copy/pasted from already available 'Classic Theme Restorer' and 'Classic Toolbar Buttons' add-on code.

Promo screenshots (Win7s AeroBlue colors are possible on other OSs too)

bookmarks_menu cbackfor



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

  • [Tabs] squared tabs (with rounded top corners)
  • [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
  • [Buttons] text / icon+text modes
  • [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: classic two lined results
  • [General] hiding ui elements not removable by default (e.g. action menu in location bar, private mask)
  • [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
  • [Add-on Manager] alternative appearance
  • [Add-on Manager] add-on version number in main lists
  • [Preferences] alternative appearance
    Full list: #2


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

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

This comment has been minimized.

Copy link

commented Oct 8, 2017

Nice! I got my 'old' firefox layout back. Still need to configure some/many things though.
Btw, I have some questions:

  1. if I want to change the firefox button (top left) color (in the CTR, we have option to change the color to blue/green/grey etc), which part of the css that I need to change?
  2. if I use the application menu extension, is it possible to show the menu of application menu when I click the firefox button?
  3. Small thing : the ff button seems a bit cropped in the chrome css version (

Thanks for this chrome css!

edit: issue no.3 is fixed in v. 1.0.2


This comment has been minimized.

Copy link
Owner Author

commented Oct 8, 2017

  1. userChrome.css > Application/hamburger button in Firefox titlebar
  2. Popup swapping is not possible with CSS. Once application menu extensions popup will finished, I will add CSS code for it. At the moment most menuitems are grayed out.

@Aris-t2 Aris-t2 changed the title Things possible in Firefox 57+ (by using code tweaks in userChrome.css) Things possible in Firefox 57+ (by using CSS code in userChrome.css/userContent.css) Oct 9, 2017


This comment has been minimized.

Copy link

commented Oct 22, 2017


This comment has been minimized.

Copy link
Owner Author

commented Oct 22, 2017


The mentioned list was mostly about what of CTRs features are still possible in Fx57+, so it obviously does not include any exotic tweaks.

Colorize URL bar in private tabs
There is a tweak to colorize location bar in this collection (although its more general, not specifically for private mode only).

Move tabs to bottom of window
Moving "tabs" to bottom like this, is more like moving the whole main top content to windows bottom, resulting in a not-present "Firefox titlebar", partly visible panel popups and obviously all other toolbars being not on top anymore. Anyway, thanks for the code, the "-moz-box-direction: reverse;" rule looks very interesting.



This comment has been minimized.

Copy link
Owner Author

commented Oct 27, 2017

List of features


Repository owner locked and limited conversation to collaborators Oct 27, 2017

@Aris-t2 Aris-t2 closed this Oct 27, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.