Solved How to Increase Bookmark Toolbar and Tab Size in Any Browser?


eclas

Well-known member
Member
Local time
12:20 AM
Posts
81
OS
Windows 11 Pro
I've been searching for a way (in ANY browser) to be able to increase the size of the bookmarks toolbar and the tab size itself so it's easier to read.
I'm not talking CTRL-+. Also the Windows key-+ will zoom the whole screen but that is useless.
Is it impossible?
 
Last edited:

My Computer

System One

  • OS
    Windows 11 Pro
    Computer type
    Laptop
    Manufacturer/Model
    Lenovo Legion 5 Pro 16ARH7H
    CPU
    AMD Ryzen 6800H
    Memory
    16gb
    Graphics Card(s)
    NVidia GeForce RTX 3060 / AMD Radeon
    Sound Card
    Realtec audio
    Screen Resolution
    2560x1600
    Internet Speed
    cable
    Browser
    Edge/Chrome
    Antivirus
    Win Defender
I've only ever found a way to increase the font size..., in Chrome only...

0006324.jpg

0006325.jpg
 

My Computers

System One System Two

  • OS
    Windows 11
    Computer type
    PC/Desktop
    Manufacturer/Model
    ASUS ROG Strix
  • Operating System
    Windows 11
    Computer type
    Laptop
    Manufacturer/Model
    ASUS VivoBook
Might also have to right-click the Desktop, choose Display settings and change the Scale, but that will change most everything.

1706476760824.png
 

My Computers

System One System Two

  • OS
    Win11 Pro RTM
    Computer type
    Laptop
    Manufacturer/Model
    Dell Vostro 3400
    CPU
    Intel Core i5 11th Gen. 2.40GHz
    Memory
    12GB
    Hard Drives
    256GB SSD NVMe M.2
  • Operating System
    Windows 11 Pro RTM x64
    Computer type
    PC/Desktop
    Manufacturer/Model
    Dell Vostro 5890
    CPU
    Intel Core i5 10th Gen. 2.90GHz
    Memory
    16GB
    Graphics card(s)
    Onboard, no VGA, using a DisplayPort-to-VGA adapter
    Monitor(s) Displays
    24" Dell
    Hard Drives
    512GB SSD NVMe, 4TB Seagate HDD
    Browser
    Firefox, Edge
    Antivirus
    Windows Defender/Microsoft Security
Thanks Das, I tried your route. Changed stylesheets to true in about:config. Created userChrome.css file, put it in profile folder and copied your code into the css file but nothing changed. Yes I restarted firefox. Any ideas on why it didn't take?
 
Last edited:

My Computer

System One

  • OS
    Windows 11 Pro
    Computer type
    Laptop
    Manufacturer/Model
    Lenovo Legion 5 Pro 16ARH7H
    CPU
    AMD Ryzen 6800H
    Memory
    16gb
    Graphics Card(s)
    NVidia GeForce RTX 3060 / AMD Radeon
    Sound Card
    Realtec audio
    Screen Resolution
    2560x1600
    Internet Speed
    cable
    Browser
    Edge/Chrome
    Antivirus
    Win Defender
In case it helps, the basic procedure for using one's own userChrome.css file is as follows:

Enter about:config in the URL bar, and toggle the following preference to true.
toolkit.legacyUserProfileCustomizations.stylesheets
ff_about_config.png

Enter about:support in the URL bar, and find your Firefox Profile folder.
ff_about_support_profile_folder.png

Click the "Open Folder" button and it should open the folder in Windows Explorer.
Once in Explorer, create your own folder called "Chrome", so it is in line with the other folders like bookmarkbackups, cache2 etc.
ff_Profile.png

Put your own userChrome.css file inside the Chrome folder.

Restart Firefox, for the userChrome.css file to take effect.

Presumably you followed these steps, particularly the placement of userChrome.css file inside the Chrome folder?

I have modified the userChrome.css file slightly . Also, note that you may need to adjust the pixel sizes to match your own monitor display size.
Code:
/* SET minimum/maximum height here in px */
:root {
 --tab-min-height: 35px !important;   /* set the min-height of tabs here */  
 --tab-max-height: 35px !important;   /* set the max-height of tabs here */
}

/* min tab widths */    
    .tabbrowser-tab:not([pinned]) {
      min-width: 280px !important;   /* defalt appears to be 225px  */
}
/* tab font size weight etc */
.tabbrowser-tab label {
    font-size:   20px !important;
  /*font-weight: 600 !important;*/  /* if wanted */
}
/* tab icon sizes for ALL tabs (adjust pinned tab icons below in next section) */
.tabbrowser-tab .tab-icon-image {
    min-height: 24px !important;   /* make h=w */
    min-width:  24px !important;
}
/* pinned tabs icons  -can't be adjusted too much without possibly additional code ; */
/* so make them either slightly bigger than default                                  */
/* or else revert them if the pinned tabs get overlapped                             */
.tabbrowser-tab:is([pinned]) .tab-icon-image {
    min-height: 20px !important;  
    min-width:  20px !important;
}

/* tab close button adj. */
.tab-close-button {
  margin-inline-end: calc(var(--inline-tab-padding) / -2);
  width:  30px !important;
  height: 30px !important;
}
.close-icon {
  padding: 4px !important;
}

/* draw border around NOT selected tabs - if wanted */
.tabbrowser-tab:not([selected]) .tab-background {
    outline: 1px solid lightgrey !important;
}


/* The Bookmarks Toolbar (Places Toolbar) */
#PlacesToolbar {
  align-items:      center !important;;
  min-height:       24px !important;
}

#PlacesToolbarItems .bookmark-item {
  font-size:        24px  !important;
  /*font-weight:    600 !important;*/  /* if wanted */
  min-width:        None !important;
  max-width:        28em !important;  /* width of the bookmarks in the Places Toolbar */
  outline:          1px solid lightgrey !important;
  margin-inline:    2px !important;
}


/* The Bookmarks Toolbar icon sizes */
#PlacesToolbar image {
  min-width:  24px !important;
  min-height: 24px !important; 
}

#OtherBookmarks.bookmark-item[container] > menupopup .bookmark-item {
  font-size:        24px  !important;
  /*font-weight:    600 !important;*/  /* if wanted */
  min-width:        None !important;
  max-width:        28em !important;  /* width of the bookmarks in the Places Toolbar */
}

/* width of the Bookmarks on the Menu bar */
.bookmark-item {
  &:is(menu, menuitem) {
  max-height:  32px !important;  
  font-size:   18px !important;  
  /* font-weight: bold !important;*/ /* if wanted */
  min-width:   0    !important;
  max-width:   40em !important;  
  }
}
/* size of icons in Menubar */
.bookmark-item image {
  min-width:  24px !important;  /* make w=h */
  min-height: 24px !important;  /* make w=h */
}

I hope it works for you.
 

My Computer

System One

  • OS
    Windows 11 23H2
    Computer type
    PC/Desktop
    Manufacturer/Model
    custom
    CPU
    intel i7-8700 (non-K)
    Motherboard
    Asus Z370 TUF Gaming
    Memory
    32Gb
    Graphics Card(s)
    On-board Intel iGPU
    Sound Card
    On-board Realtek
    Hard Drives
    Samsung_SSD_850_EVO
    PSU
    Corsair Rm850X
    Cooling
    All air
my bad. I neglected to put the css in the chrome folder. Thanks a bunch. Now I have to experiment with the pixels to get it right. You are amazing! :-)
 

My Computer

System One

  • OS
    Windows 11 Pro
    Computer type
    Laptop
    Manufacturer/Model
    Lenovo Legion 5 Pro 16ARH7H
    CPU
    AMD Ryzen 6800H
    Memory
    16gb
    Graphics Card(s)
    NVidia GeForce RTX 3060 / AMD Radeon
    Sound Card
    Realtec audio
    Screen Resolution
    2560x1600
    Internet Speed
    cable
    Browser
    Edge/Chrome
    Antivirus
    Win Defender

My Computer

System One

  • OS
    Windows 11 Pro
    Computer type
    Laptop
    Manufacturer/Model
    Lenovo Legion 5 Pro 16ARH7H
    CPU
    AMD Ryzen 6800H
    Memory
    16gb
    Graphics Card(s)
    NVidia GeForce RTX 3060 / AMD Radeon
    Sound Card
    Realtec audio
    Screen Resolution
    2560x1600
    Internet Speed
    cable
    Browser
    Edge/Chrome
    Antivirus
    Win Defender

Latest Support Threads

Back
Top Bottom