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

Firefox 90.0.1: Increase just toolbar and tab fonts?

  • 10 replies
  • 1 has this problem
  • 58 views
  • Last reply by flycaster

more options

Got my menu bar's fonts just right, but the fonts on the bookmarks, address toolbar and tabs need to be made larger. I do not want to increase the size of any other text within FF. Thanks.

Chosen solution

Problem got solved on another forum. In response to the guy that helped.

"Not exactly sure what made things work, but here's what I did.

1. In general, I had deleted all previous codes and had been testing only one code at a time to avoid confusion. But, up til now, nothing worked. 2. toolkit.legacyUserProfileCustomizations.stylesheets was reset from false to true, as you suggested. Interestingly, there was another toolkit.xxxx that had been previously set to true, also. And when trying your code, I must have confused the two and had not reset the "stylesheets" one. 3. Finally, I had been moving the chrome folder around, not really sure where to place it within the Profile folder structure. So, now, I just placed it as a sub-folder of Profile. Previously, I had it as a sub-folder of the default profile."

BTW, here's the code:

menupopup > menuitem, menupopup > menu {

 padding-block: 2px !important;
 font-size: 16px !important;

} /* add to the above font-weight: bold !important for phatness */

root {
 --arrowpanel-menuitem-padding: 4px 8px !important;

}

/* 21/8/22 -- width of bookmark menu */ menu.bookmark-item, menuitem.bookmark-item { max-width: 44em !important; }


/* 21/8/22 -- urlbar font size */

  1. urlbar, #searchbar {
   font-size: 16px !important;
   font-weight: bold !important;

}

Read this answer in context 👍 0

All Replies (10)

more options

How did you manage to get the menu bar font right ?

You can possibly use this code in userChrome.css to set a font-size (and possibly other like the font-family) for the #navigator-toolbox container.

Add CSS code to the userChrome.css file.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#navigator-toolbox * { font-size: 16px !important; }

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

See also:

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

Helpful?

more options

Thanks for the effort, Cor-el, but it didn't seems to help. Although I really don't understand how to write code, I can understand some of it when already written and I do know how to place it into the chrome folder, I also know I can screw things up pretty good. If possible, I'd appreciate if you could take a look at my present css code and perhaps "straighten" it out. Most of the code was taken from my previous PC where it got the tabs to appear under the Bookmarks and not on top. I can live with the tabs remaining on top (if they can be placed bellow,) but increasing the font size of the tabs, Bookmarks and address bar would really be helpful. BTW, I think I got my Menu bar's text to be bold/italic was through using free Winaero. Here's my present code:

/* TABS: below nav-bar - updated for 89+ */

*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;

  --tab-min-height: 32px !important; /* adjust */
  --tab-min-width:  80px !important; /* adjust */
}

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group: 10}
#navigator-toolbox #TabsToolbar {-moz-box-ordinal-group: 1000 !important}

#navigator-toolbox #TabsToolbar {
  display: block !important;

Modified by cor-el

Helpful?

more options

Having trouble navigating this forum, so another post. This is the correct css that I have:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#navigator-toolbox * { font-size: 18px !important; }


/*** Tighten up drop-down/context/popup menu spacing ***/

menupopup > menuitem, menupopup > menu {
  padding-block: 16px !important;
}
:root {
  --arrowpanel-menuitem-padding: 8px 16px !important;
}


/*** CODE FROM PREVIOUS PC ***/

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 80px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 40px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/*Inactive tab text color*/
.tabbrowser-tab:not[selected] .tab-content{
    color: black !important;
}



/* text color */
.tabbrowser-tab[selected] .tab-label {
  color: white !important;
}



/*bold*//*
.tabbrowser-tab[selected] .tab-label {
  font-weight: 900  !important;
}
/* italic *//*
.tabbrowser-tab[selected] .tab-label {
  font-style: italic !important;
}



/* Rounded Tabs*/

.tabbrowser-tab {
    box-sizing: border-box;
    margin: 0 1px 0 1px !important;
    border-radius: 10px 10px 0 0 !important;
}


.tabbrowser-tab .tab-text.tab-label {
    color: black !important;            /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-text.tab-label {
    color: white !important;            /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-background {
    border: 3px solid black !important;  /* color is customizable */
    border-bottom: none	!important;
    opacity: 1;
}


.tab-background {
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    background: black;
    opacity: .1;
}


.tab-line {                             /* = light top line in selected tab in Quantum default */
    display: none !important;
}


.tabbrowser-tab:hover,
.tabbrowser-tab .tab-text.tab-label:hover {
    cursor: pointer !important; 
}


.tabbrowser-tab:hover {
    border: 1px solid grey !important;
}


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


[tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after {
    border: none !important;                /* leave as is; affects the New Tab icon (the plus) */
}


.tabbrowser-tab .tab-label {
  font-weight: 900 !important;
}



.tabbrowser-tab:not([selected]) .tab-close-button {
  visibility: hidden !important
}

.tabbrowser-tab:not([selected]):hover .tab-close-button {
  visibility: visible !important
}


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
menupopup{
  --menuitem-hover-background-color: #e0e0e6 !important;
  --menu-background-color: #f9f9fb !important;
  --menu-color: #15141a !important;
  --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4) !important;
  --menu-disabled-color: rgba(21, 20, 26, 0.4) !important;
  --menu-border-color: #cfcfd8!important;
  --menu-icon-opacity: 0.7 !important;
}

Modified by cor-el

Helpful?

more options

Your code for the tab on bottom (below the Navigation Toolbar) is outdated and no longer works and you need newer code, see the CSS code in this article:

Best in you case is to remove all @namespace lines in the file to prevent issues.

The code where you are modifying the popup menu spacing also looks weird and I'm not sure what you intend to achieve. Do you want to increase the padding (i.e. have more space) ?

/*** Tighten up drop-down/context/popup menu spacing ***/

menupopup > menuitem, menupopup > menu {
  padding-block: 16px !important;
}
:root {
  --arrowpanel-menuitem-padding: 8px 16px !important;
}

Helpful?

more options

Totally deleted all my css code and installed the suggested code, but nothing happened. The namespace line only occurs once at the top of the code. As for the popup menu code, I don't remember what I did with it...probably increased the px values, but don't remember their initial values. In fact, I've deleted all previous codes and the only code in chrome is the suggested code...nothing, anywhere, has changed.

As I have said, I can live with the tabs on top, but would really appreciate increasing the sizes of the tab, address bar, bookmarks bar fonts.

Thanks for your help.

Helpful?

more options

This code in userChrome.css should work.

  • #navigator-toolbox * { font-size: 18px !important; }

If it doesn't work and the code for the tabs below the nav-bar also doesn't work then it is likely that there is a problem with your userChrome.css file.


It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

See also:

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

Helpful?

more options

Don't know what to say? I've tried all the suggested codes (saved as All Files (.*) one at a time, and in all instances nothing in FF changed from what I started with. Although I can't write code, I'm fairly certain that I know how to enter and save it. Also, the file structure looks to be right:

             ...Firefox\Profiles\chrome\xxxxxx.default-release
                    "      \      "     \chrome...userChrome.css

Helpful?

more options

I see chrome twice in the path you wrote above:

  • Firefox\Profiles\chrome\xxxxxx.default-release\ should likely be:
    Firefox\Profiles\xxxxxx.default-release\

Did you use the button the the "Help -> More Troubleshooting Information" (about:support) page ?

  • C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxx.default-release\chrome\userChrome.css

Helpful?

more options

With "C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxx.default-release\chrome\userChrome.css" are you saying that chrome should be a sub folder of xxxxx.default-release and not a sub of Profiles (as I now have it?). Other than this may make a difference, I can see no other possible mistakes made when entering code. Also, should the first line of code be @namespace......?

Helpful?

more options

Chosen Solution

Problem got solved on another forum. In response to the guy that helped.

"Not exactly sure what made things work, but here's what I did.

1. In general, I had deleted all previous codes and had been testing only one code at a time to avoid confusion. But, up til now, nothing worked. 2. toolkit.legacyUserProfileCustomizations.stylesheets was reset from false to true, as you suggested. Interestingly, there was another toolkit.xxxx that had been previously set to true, also. And when trying your code, I must have confused the two and had not reset the "stylesheets" one. 3. Finally, I had been moving the chrome folder around, not really sure where to place it within the Profile folder structure. So, now, I just placed it as a sub-folder of Profile. Previously, I had it as a sub-folder of the default profile."

BTW, here's the code:

menupopup > menuitem, menupopup > menu {

 padding-block: 2px !important;
 font-size: 16px !important;

} /* add to the above font-weight: bold !important for phatness */

root {
 --arrowpanel-menuitem-padding: 4px 8px !important;

}

/* 21/8/22 -- width of bookmark menu */ menu.bookmark-item, menuitem.bookmark-item { max-width: 44em !important; }


/* 21/8/22 -- urlbar font size */

  1. urlbar, #searchbar {
   font-size: 16px !important;
   font-weight: bold !important;

}

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.