How to resize the Bookmarks Toolbar
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.
- [/questions/965032] Hoe kan ik de grootte van het letters van de bladwijzerbalk veranderen
- [/questions/905731] how do i increase the size of icons in the toolbars
All Replies (8)
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.
The only addons or guides I can find are for multi-row toolbars or to just increase font size.
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.
Ọ̀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.
- [/questions/965032] Hoe kan ik de grootte van het letters van de bladwijzerbalk veranderen
- [/questions/905731] how do i increase the size of icons in the toolbars
Ti ṣàtúnṣe
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);
- 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
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.
I see. Works perfectly, thanks guys.
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