Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Since 61.0.1 everything is small again the css hack isn't working, how do I make the UI larger?

  • 6 replies
  • 1 has this problem
  • 4 views
  • Last reply by walbrecht

more options

Since 61.0.1 the UI is back to being very small and the css hack no longer works so how do I enlarge? I can barely read the words on the UI.

Since 61.0.1 the UI is back to being very small and the css hack no longer works so how do I enlarge? I can barely read the words on the UI.

Chosen solution

layout.css.devPixelsPerPx does not exist in about:config. If you know of an extension, Please tell me what it is because I can not find it.

I copied and pasted wrong. Yes, this worked, thank you

Read this answer in context 👍 0

All Replies (6)

more options

Which CSS hack? There has been a minor change to some selectors; if you provide that code we should be able to tell what edit is needed to fix it for 61.0+.

more options

Here is the document you requested. Thank you

This was in a folder named chrome in the old firefox.

Modified by walbrecht

more options

I can not read that. Copy and Paste to a reply please.

more options

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* ^ The above line needs to be there. You can delete this line though. */

/* Below this is where you put CSS code that alters the user interface, like the one I posted at the top */

  • { font-size: 14pt !important; }



/* Tab bar below Navigation & Bookmarks Toolbars */

  1. nav-bar { /* main toolbar */
 -moz-box-ordinal-group: 1 !important;
 box-shadow: none !important;

}

  1. PersonalToolbar { /* bookmarks toolbar */
 -moz-box-ordinal-group: 2 !important;

}

  1. TabsToolbar { /* tab bar */
 -moz-box-ordinal-group: 3 !important;
 padding-top: 0 !important;

} /* Clean up spacing */ .titlebar-placeholder {

 display: none !important;

} toolbarbutton.bookmark-item {

 padding-top: 2px !important;
 padding-bottom: 2px !important;

}

/* If you display either:

  (1) The title bar, or
  (2) On Windows, the menu bar
  You might not want the following extra space above the main toolbar. 
  In that case, delete the following rule:
  • /
  1. navigator-toolbox {
 padding-top: 20px !important;

}

/* Background for Light and Dark themes */

  1. main-window[lwthemetextcolor="bright"] #TabsToolbar,
  2. main-window[lwthemetextcolor="dark"] #TabsToolbar {
 background-color: var(--chrome-secondary-background-color) !important;
 background-image: none !important;

}

  1. main-window[lwthemetextcolor="dark"] .scrollbutton-up,
  2. main-window[lwthemetextcolor="dark"] .scrollbutton-down,
  3. main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
  4. main-window[lwthemetextcolor="dark"] #new-tab-button,
  5. main-window[lwthemetextcolor="dark"] #alltabs-button {
 fill: var(--lwt-text-color) !important;

} /* Left and right borders on Win 7 & 8, but not on 10 and later: */ @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {

 /* Vertical toolbar border */
 #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
   border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
   border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
   background-clip: padding-box;
 }

}

more options

You can set layout.css.devPixelsPerPx to 1.0 (default is -1) on the about:config page. Adjust its value in 0.1 or 0.05 steps (1.1 or 0.9) until icons or text looks right. Modifying layout.css.devPixelsPerPx affects user interface and web pages (global zoom). You can use an extension to correct the appearance of web pages.

more options

Chosen Solution

layout.css.devPixelsPerPx does not exist in about:config. If you know of an extension, Please tell me what it is because I can not find it.

I copied and pasted wrong. Yes, this worked, thank you

Modified by walbrecht