Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

Thread: Firefox 91 - GUI changed again - whitespace in menus.

  1. #11
    Join Date
    Jun 2016
    Beans
    2,286
    Distro
    Xubuntu 20.04 Focal Fossa

    Re: Firefox 91 - GUI changed again - whitespace in menus.

    Quote Originally Posted by ajgreeny View Post
    However it does not give me the coloured icons in the toolbar that make life a lot quicker for me;
    Which icon do you want colored?
    Xubuntu 20.04/Pop!_OS 21.04/System76 hardware ♦ Debian 10/Xubuntu/VirtualBox
    If your questions are resolved to your satisfaction, please use Thread Tools > "Mark this thread as solved..."

  2. #12
    Join Date
    Jul 2005
    Location
    I think I'm here! Maybe?
    Beans
    Hidden!
    Distro
    Xubuntu 20.04 Focal Fossa

    Re: Firefox 91 - GUI changed again - whitespace in menus.

    All of them!

    I've tried just about all the available options in the userChrome.css but can not get away from monochrome toolbar icons so far, but it's a huge css file (899KB) so I may have not searched well enough so far; too many other more important things to do!

  3. #13
    Join Date
    Dec 2014
    Beans
    1,851

    Re: Firefox 91 - GUI changed again - whitespace in menus.

    The (built-in) browser tools allow you to select elements of the UI and get the CSS-rules that govern their look. Call them either from 'Extras' in the menu or hit 'ctrl-shift-alt-i'. For example the icon for the back-button has a rule
    Code:
    #back-button {
        list-style-image: url("chrome://browser/skin/back.svg");
    }
    overriding this should allow you to style the back-button any way you want ...

    Holger

  4. #14
    Join Date
    Jun 2016
    Beans
    2,286
    Distro
    Xubuntu 20.04 Focal Fossa

    Re: Firefox 91 - GUI changed again - whitespace in menus.

    Quote Originally Posted by ajgreeny View Post
    I've tried just about all the available options in the userChrome.css but can not get away from monochrome toolbar icons so far, but it's a huge css file (899KB) so I may have not searched well enough so far;
    Wait, what? That sounds more time consuming than just coming up with the code yourself. It isn't hard once you know how.

    Use Browser Toolbox to inspect the element so you can determine the best CSS selector: first ensure about:config > devtools.chrome.enabled and devtools.debugger.remote-enabled are both set to true , then do Ctrl-Alt-Shift-I, click OK on the dialog and the devtools should be up. Click Inspector, then click the arrow icon in the top left so you can click on the element (in this case, toolbar icon) you want to inspect. Once you've inspected the element and decided on a CSS selector, then try various different methods of re-styling images until you find one that works.

    For example, to restyle Reload button, Stop button, and Back/Forward buttons, does the following CSS work? (adjust the colors to suit your preferences) -
    Code:
    #reload-button {
      fill: #0000ff !important;
    }
    #stop-button {
      fill: #ff0000 !important;
    }
    #back-button, #forward-button {
      fill: #009900 !important;
    }
    Xubuntu 20.04/Pop!_OS 21.04/System76 hardware ♦ Debian 10/Xubuntu/VirtualBox
    If your questions are resolved to your satisfaction, please use Thread Tools > "Mark this thread as solved..."

Page 2 of 2 FirstFirst 12

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •