Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Èròjà atẹ̀lélànà yii ni a ti fi pamọ́ fọ́jọ́ pípẹ́. Jọ̀wọ́ béèrè ìbéèrè titun bí o bá nílò ìrànwọ́.

How to resize the Bookmarks Toolbar

more options

I would like to make my Bookmarks Toolbar about 20-40% bigger with larger bookmark icons and text. How can I do this?

I would like to make my Bookmarks Toolbar about 20-40% bigger with larger bookmark icons and text. How can I do this?

Ọ̀nà àbáyọ tí a yàn

You can experiment with code like this in the userChrome.css file or with the Stylish extension if you prefer.

Add code to the userChrome.css file below the default @namespace line.

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

#personal-bookmarks .bookmark-item > .toolbarbutton-text { font-size:12pt !important; font-weight:bold; }
#personal-bookmarks .bookmark-item > .toolbarbutton-icon { height:24px !important; width:24px !important; }

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.


Ka ìdáhùn ni ìṣètò kíkà 👍 2

All Replies (8)

more options

If you aren't able to find an add-on for this, someone might be able to help with custom style rules. Applying those is a little more complicated, but do-able.

more options

The only addons or guides I can find are for multi-row toolbars or to just increase font size.

more options

This style rule will enlarge the text by 40% and the icons by 25%:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#PersonalToolbar .bookmark-item {
  font-size:140% !important;
}
.bookmark-item:not(#bookmarks-menu-button) > .toolbarbutton-icon {
  width: 20px !important; /* 25% over 16px default */
  height: 20px !important; /* 25% over 16px default */
}

I created a blank rule using the Stylish extension then pasted the above in. Screen shot attached showing before and after.

more options

Ọ̀nà àbáyọ Tí a Yàn

You can experiment with code like this in the userChrome.css file or with the Stylish extension if you prefer.

Add code to the userChrome.css file below the default @namespace line.

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

#personal-bookmarks .bookmark-item > .toolbarbutton-text { font-size:12pt !important; font-weight:bold; }
#personal-bookmarks .bookmark-item > .toolbarbutton-icon { height:24px !important; width:24px !important; }

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.


Ti ṣàtúnṣe nípa cor-el

more options

Thanks. The only problem left is the font of bookmarks inside a folder is strangely larger than the font of the bookmarks (and folders) on the toolbar.

Also what is the namespace url for?

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

  1. PersonalToolbar .bookmark-item {
 font-size:120% !important;

} .bookmark-item:not(#bookmarks-menu-button) > .toolbarbutton-icon {

 width: 22px !important;
 height: 22px !important;
 }

Ti ṣàtúnṣe nípa Joshopolis

more options

The code from JScher2000 also affects the code for the folders as well as it uses #PersonalToolbar .bookmark-item

The code that I posted should only work for the Bookmarks Toolbar and not within folders as it uses ".bookmark-item > .toolbarbutton-text" in the selector.

more options

I see. Works perfectly, thanks guys.

more options

Hi Joshopolis, I didn't notice that, but it's due to using a % measurement. As you drill down deeper and deeper into the hierarchy, it seems to multiply. Using a fixed measurement will make the text size in the folders the same as the bar.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#PersonalToolbar .bookmark-item {
  font-size:18px !important;
}
.bookmark-item:not(#bookmarks-menu-button) > .toolbarbutton-icon {
  width: 20px !important; /* 25% over 16px default */
  height: 20px !important; /* 25% over 16px default */
}

Ti ṣàtúnṣe nípa jscher2000 - Support Volunteer