Firefox 57, how do I change font size of text on extensions

Discussion in 'other software & services' started by roger_m, Dec 6, 2017.

  1. roger_m

    roger_m Registered Member

    Joined:
    Jan 25, 2009
    Posts:
    6,120
    I am looking for a way reduce the size of text displayed on the icons of extensions. As an example of what I want to do, the following image shows the icon for Adguard in Firefox on the left and in Chrome on the right.

    FF vs Cent.png

    I want to change the font size so that it is closer the size in Chrome, if it is possible to do so. I do not want to change the font size for web pages, only for extensions.
     
  2. Krusty

    Krusty Registered Member

    Joined:
    Feb 3, 2012
    Posts:
    4,888
    Location:
    Among the gum trees
    I haven't done it in case I can't get it back how it is now but if you right click above the address bar > Customise, you can drag it down. Does that enlarge the toolbar icons?
     
  3. roger_m

    roger_m Registered Member

    Joined:
    Jan 25, 2009
    Posts:
    6,120
    @Krusty I don't want to change the icon size, just the text.
     
  4. Krusty

    Krusty Registered Member

    Joined:
    Feb 3, 2012
    Posts:
    4,888
    Location:
    Among the gum trees
    Yeah, I know. Was just a thought. I'd be interested to know too.

    ... Watching. :geek:
     
  5. vasa1

    vasa1 Registered Member

    Joined:
    May 1, 2010
    Posts:
    4,216
    That would require modifying the extension itself. Even if that's done, will the extension still work? I'm thinking about the requirement that extensions are to be "signed".
     
  6. roger_m

    roger_m Registered Member

    Joined:
    Jan 25, 2009
    Posts:
    6,120
    @vasa1 But the font size is the same for all extensions used, rather than being individual.
     
  7. vasa1

    vasa1 Registered Member

    Joined:
    May 1, 2010
    Posts:
    4,216
    I get your point. Thanks for clarifying!
     
  8. wshrugged

    wshrugged Registered Member

    Joined:
    Jun 12, 2009
    Posts:
    214
    Last edited: Dec 6, 2017
  9. vasa1

    vasa1 Registered Member

    Joined:
    May 1, 2010
    Posts:
    4,216
    Okay, I went into developer tools and got this code:
    Code:
    .toolbarbutton-badge {
      background-color: #d90000;
      font-size: 18px !important;
      padding: 0 2px 1px;
      color: #ff00ff !important;
      border-radius: 2px;
      box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
                  0 -1px 0 hsla(0, 0%, 0%, .1) inset,
                  0 1px 0 hsla(206, 50%, 10%, .2);
      margin: -6px 0 0 !important;
      margin-inline-end: -8px !important;
      min-width: 14px;
      max-width: 28px;
      line-height: 10px;
      text-align: center;
      -moz-stack-sizing: ignore;
    }
    
    The line with "font-size" seems to be determinative. Since my existing font on the "badge" was tiny, I made it larger. This code goes into my Firefox profile in the "chrome" subfolder in a file called "userChrome.css". Everything is case-sensitive. In case the chrome subfolder doesn't exist, you'll have to create it.

    In the image I'm attaching, the uBlock origin icon is behind the number 10! The other icon is that of Stylus showing that one style is active on the page.
    GS20171206205107.png
     
  10. wshrugged

    wshrugged Registered Member

    Joined:
    Jun 12, 2009
    Posts:
    214
  11. roger_m

    roger_m Registered Member

    Joined:
    Jan 25, 2009
    Posts:
    6,120
    Thanks. This is what have at the moment:
    Code:
    .toolbarbutton-badge {
      font-weight: normal !important;
      font-size: 7.3px !important;
      padding: -10px 022px 0px 022px !important;
      margin: 11px 0 0 !important;
      margin-inline-end: -8px !important;
      line-height: 10px;
    }
    FF.png
    I now have the font size how I want it. When I want to do and haven't been able to figure out how to do so, is to make the border around the text smaller.
     
  12. vasa1

    vasa1 Registered Member

    Joined:
    May 1, 2010
    Posts:
    4,216
    I think you could reduce the padding from 22px for both left and right. I haven't tried anything but integers but since 7.3px works for you, that's great! I think you can play around fearlessly so long as you keep a record of what's being done :)
     
  13. roger_m

    roger_m Registered Member

    Joined:
    Jan 25, 2009
    Posts:
    6,120
    I spent a lot of time messing around this morning and could not figure out how to reduce the borders. Changing the padding does nothing.
     
  14. vasa1

    vasa1 Registered Member

    Joined:
    May 1, 2010
    Posts:
    4,216
    Please try this:
    Code:
    .toolbarbutton-badge {
      background-color: #5CFF5C;
      font-size: 10px !important;
      padding: none !important;
      color: #ffffff !important;
      border: none !important;
      box-shadow: none !important;
      min-width: 1px !important;
      max-width: 28px;
      line-height: 10px;
      text-align: center;
      -moz-stack-sizing: ignore;
    }
    But the numbers are not centered vertically.
     
  15. roger_m

    roger_m Registered Member

    Joined:
    Jan 25, 2009
    Posts:
    6,120
    Thanks for that :thumb: I now have it looking very similar to Chrome, with the following:
    Code:
    .toolbarbutton-badge {
      font-weight: normal !important;
      font-size: 7.3px !important;
      padding: none !important;
      margin: 11px 0 0 !important;
      color: #ffffff !important;
      border: none !important;
      box-shadow: none !important;
      min-width: 1px !important;
      max-width: 28px;
      line-height: 10px;
      text-align: center;
      -moz-stack-sizing: ignore;
    }
     
  16. vasa1

    vasa1 Registered Member

    Joined:
    May 1, 2010
    Posts:
    4,216
    For my own interest, I fiddled a bit more:
    Code:
    .toolbarbutton-badge {
      background-color: #5CFF5C;
      font-size: 10px !important;
      padding: 2px 2px 0 2px !important;
      color: #ffffff !important;
      border: none !important;
      box-shadow: none !important;
      min-width: 1px !important;
      max-width: 28px;
      line-height: 10px;
      text-align: center;
    /*  -moz-stack-sizing: ignore;*/
    }
    and here is a somewhat blurry image because it's a blow-up.

    GS20171207112000.png
     
  17. roger_m

    roger_m Registered Member

    Joined:
    Jan 25, 2009
    Posts:
    6,120
    I have made some more changes, and I'm really happy with the way it looks now.
    FF 2.png
    Code:
    .toolbarbutton-badge {
      font-weight: normal !important;
      font-size: 8px !important;
      padding: 0px 3px 0 3px !important;
      margin: 11px 4 0 !important;
      color: #ffffff !important;
      border: none !important;
      box-shadow: none !important;
      min-width: 1px !important;
      max-width: 28px;
      line-height: 10px;
      text-align: center;
      -moz-stack-sizing: ignore;
    }
     
Loading...