Join Us and become a Member for a Verified Badge to access private areas with the latest PS4 PKGs.
Status
Not open for further replies.

PSXHAX

Staff Member
Verified
Moderator
Here's my brief guide on How to Make the New Firefox 57 Quantum Browser Look Like the Older Firefox 56 Browser, since the Classic Theme Restorer is currently not compatible with Firefox Quantum and I didn't want to wait for someone else to revise their add-on.

After searching the Interwebs I ran across the Photon Australis Github project by wilfredwee which I borrowed some code from in my userChrome.css file below. :geek:

I would have skipped this guide and simply used his CSS file, but upon testing it opening new tabs and hovering between them in Firefox 57 ends up 'jumpy' so I pressed onward instead of trying to sort out the margin, padding, etc issues in the code. :confused:

Before updating to Mozilla's new Firefox 57 Quantum I was on Firefox 56.0.2 which looked clean and simple like this:

FireFox56.png

After installing Firefox 57 Quantum (along with enabling the 'Menu Bar' and manually moving some buttons around in the 'Customize Firefox' menu) I'm still left with this fugly UI:

FireFox57.png

So I navigated to Open Menu (click on the Firefox Hamburger Menu Icon) then Add-ons followed by Themes and Enabled Light there.

Next I opened a new tab in Firefox and typed in: about:profiles and clicked on the 'Open Folder' button for the Root Directory which popped up the folder in Windows Explorer.

There I created a new folder called chrome (since one didn't exist already) and inside it I right-clicked, selected New and then Text Document and named it userChrome.css

Then after some Googling I put together this code which I pasted into the userChrome.css file I just created and saved it:
Code:
/* Make Firefox 57+ Like Firefox 56 Tweaks */
/* Borrowed code from https://github.com/wilfredwee/photon-australis */

:root {
  --tabs-border: transparent !important;
}

   /* tab top border roundness */
   #TabsToolbar .tabs-newtab-button,
   #TabsToolbar .tabbrowser-tab,
   #TabsToolbar .tabbrowser-tab .tab-stack,
   #TabsToolbar .tabbrowser-tab .tab-background,
   #TabsToolbar .tabbrowser-tab .tab-content {
       border-top-left-radius: 15px !important;
       border-top-right-radius: 15px !important;
       border: none; !important;
   }

   /* remove colored line above each tab */
   #TabsToolbar .tabbrowser-tab .tab-line {
       visibility: hidden;
   }

   /* remove page actions ... button */
   .urlbar-page-action {display: none !important;}

   /* top and tab background and font colors */
   #toolbar-menubar, #menubar-items, #main-menubar {
   background-color: #c7c7c7 !important;
   color: #000000 !important;
   background-image: none !important;
   }

   .tabbrowser-tab .tab-label {color: #000000 !important;}
   .tabbrowser-tabs  {background: #c7c7c7 !important;}
   .tab-close-button {color: #000000 !important;}

   #main-window .tabs-newtab-button,
   #main-window #TabsToolbar #new-tab-button > .toolbarbutton-icon {color: #000000 !important;}

   /* Hide "Send Link to Device" and separator */
   #contentAreaContextMenu #context-sendlinktodevice,
   #contentAreaContextMenu #context-sep-sendlinktodevice {display: none !important;}

   /* Hide "Search" and separator */
   #context-searchselect {display: none !important;}
Granted some of it hides right-click context menu options I personally don't use that get in my way, but nevertheless here's the result after I restarted Firefox 57 Quantum for the changes to take effect:

FireFox57 Fixed.png

Back to the clean and simple look I prefer, and that I've been used to for many years prior to the Firefox Quantum 57.0 update. (y)

So there you have it folks, and since Firefox 56.0.2 is no longer considered 'safe' by most to use, if anyone reading this doesn't want to go through the above tutorial steps and wishes to downgrade Firefox 57 Quantum you can safely revert to 52.5.0 ESR which will continue getting security updates until May, 2018.

:arrow: Update: After updating to Firefox 59.0.1 I had to further tweak some of the above mods, here's my current userChrome.css file:
Code:
/* Make Firefox 57+ Like Firefox 56 Tweaks */
/* Borrowed code from https://github.com/wilfredwee/photon-australis */

:root {
  --tabs-border: transparent !important;
}

   /* tab top border roundness */
   #TabsToolbar .tabs-newtab-button,
   #TabsToolbar .tabbrowser-tab,
   #TabsToolbar .tabbrowser-tab .tab-stack,
   #TabsToolbar .tabbrowser-tab .tab-background,
   #TabsToolbar .tabbrowser-tab .tab-content {
       border-top-left-radius: 15px !important;
       border-top-right-radius: 15px !important;
       border: none; !important;
       margin-right: .03em !important;
   }

   /* remove colored line above each tab */
   #TabsToolbar .tabbrowser-tab .tab-line {
       visibility: hidden;
   }

   /* curved tabs */
.tabbrowser-tab[selected="true"]::before
{
  border: 1px none !important;
  opacity: 1 !important;
}

.tabbrowser-tab[selected="true"]::after
{
  border: none !important;
  opacity: 1 !important;
}

.tab-background
{
  border-top: 1px solid #9f9fa1 !important;
  border-right: 1px solid #9f9fa1 !important;
  border-left: 1px solid #9f9fa1 !important;
  opacity: 0.7 !important;
}

.tabbrowser-tab::after {

  border: none !important;
  opacity: 1 !important;
}

.tabbrowser-tab[last-visible-tab]::after
{

  border: none !important;
  opacity: 1 !important;
}

   /* remove page actions ... button */
   .urlbar-page-action {display: none !important;}

   /* top and tab background and font colors */
   #toolbar-menubar, #menubar-items, #main-menubar {
   background-color: #e3e4e6 !important;
   color: #000000 !important;
   background-image: none !important;
   }

   .tabbrowser-tab .tab-label {color: #000000 !important;}
   .tabbrowser-tabs  {background: #e3e4e6 !important;}
   .tab-close-button {color: #000000 !important;}

   #TabsToolbar .tabbrowser-tab[selected] {
   background: rgba(245, 246, 247, 100) !important;
   border-bottom: none !important;
   }

   #main-window .tabs-newtab-button,
   #main-window #TabsToolbar #new-tab-button > .toolbarbutton-icon {color: #000000 !important;}

   /* Hide "Send Link to Device" and separator */
   #contentAreaContextMenu #context-sendlinktodevice,
   #contentAreaContextMenu #context-sep-sendlinktodevice {display: none !important;}

   /* Hide "Search" and separator */
   #context-searchselect {display: none !important;}

   /* Hide "Email Image" and separator */
   #context-sendimage {display: none !important;}

   /* Hide Send Link... (when you right-click on link)*/
   #context-sendlink{display:none !important;}

   /* Hide "Fill Login" (when you click a login box) */
   #fill-login-separator, #fill-login{display: none !important;}

   /* Hide Context Menu Separators */
   #contentAreaContextMenu menuseparator{display: none !important;}
:arrow: Update #2: After updating to Firefox 70.0.1 I had to re-enable the Light theme by navigating to Open Menu (click on the Firefox Hamburger Menu Icon) then Add-ons followed by Themes and Enabled Light there.

:arrow: Update #3: After updating to Firefox 89.0 I made the following tweak to the above code:
Code:
/* Make Firefox 57+ Like Firefox 56 Tweaks */
/* Borrowed code from https://github.com/wilfredwee/photon-australis */

:root {
  --tabs-border: transparent !important;
}

   /* tab top border roundness */
   #TabsToolbar .tabs-newtab-button,
   #TabsToolbar .tabbrowser-tab,
   #TabsToolbar .tabbrowser-tab .tab-stack,
   #TabsToolbar .tabbrowser-tab .tab-background,
   #TabsToolbar .tabbrowser-tab .tab-content {
       border-top-left-radius: 15px !important;
       border-top-right-radius: 15px !important;
       border-bottom-left-radius: 0px !important;
       border-bottom-right-radius: 0px !important;
       border: none; !important;
       margin-right: .03em !important;
   }

   /* remove colored line above each tab */
   #TabsToolbar .tabbrowser-tab .tab-line {
       visibility: hidden;
   }

   /* curved tabs */
.tabbrowser-tab[selected="true"]::before
{
  border: 1px none !important;
  opacity: 1 !important;
}

.tabbrowser-tab[selected="true"]::after
{
  border: none !important;
  opacity: 1 !important;
}

.tab-background
{
  border-top: 1px solid #9f9fa1 !important;
  border-right: 1px solid #9f9fa1 !important;
  border-left: 1px solid #9f9fa1 !important;
  opacity: 0.7 !important;
}

.tabbrowser-tab::after {

  border: none !important;
  opacity: 1 !important;
}

.tabbrowser-tab[last-visible-tab]::after
{

  border: none !important;
  opacity: 1 !important;
}

   /* remove page actions ... button */
   .urlbar-page-action {display: none !important;}

   /* top and tab background and font colors */
   #toolbar-menubar, #menubar-items, #main-menubar {
   background-color: #e3e4e6 !important;
   color: #000000 !important;
   background-image: none !important;
   }

   .tabbrowser-tab .tab-label {color: #000000 !important;}
   .tabbrowser-tabs  {background: #e3e4e6 !important;}
   .tab-close-button {color: #000000 !important;}

   #TabsToolbar .tabbrowser-tab[selected] {
   background: rgba(245, 246, 247, 100) !important;
   border-bottom: none !important;
   }

   #main-window .tabs-newtab-button,
   #main-window #TabsToolbar #new-tab-button > .toolbarbutton-icon {color: #000000 !important;}

   /* Hide "Send Link to Device" and separator */
   #contentAreaContextMenu #context-sendlinktodevice,
   #contentAreaContextMenu #context-sep-sendlinktodevice {display: none !important;}

   /* Hide "Search" and separator */
   #context-searchselect {display: none !important;}

   /* Hide "Email Image" and separator */
   #context-sendimage {display: none !important;}

   /* Hide Send Link... (when you right-click on link)*/
   #context-sendlink{display:none !important;}

   /* Hide "Fill Login" (when you click a login box) */
   #fill-login-separator, #fill-login{display: none !important;}

   /* Hide Context Menu Separators */
   #contentAreaContextMenu menuseparator{display: none !important;}
 
Status
Not open for further replies.
Back
Top