Increase height of custom toolbar
I created a custom toolbar and I know there is a way using the css file to change the height but I need the code. The toolbar is too narrow. Thank you.
Chosen solution
After much searching and realizing I was asking the wrong question, I solved the problem and I'll say how so that it may help someone else. What I wanted bigger, I now realize, was the search bar, not the whole toolbar. I finally found the following code:
- search-container {
font-Tahoma: !important; font-size: 16pt !important; height: 22px !important;
and it did what I wanted it to do. Even though the search box shares a toolbar with other buttons, it was the search box I wanted bigger. The code I found actually had Arial black monospace instead of Tahoma, but I wanted Tahoma.
Problem solved.
Read this answer in context 👍 0All Replies (9)
You can use the code posted here to find the IDs of all toolbars.
- [/questions/807135] How can I move my toolbars up and down?
You can try this CSS rule in the userChrome.css file:
#(toolbar ID) { height: 40px !important; }
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 */
Modified by cor-el
Actually, what's weird is it's my bookmarks toolbar although there are no bookmarks on it. I had to create a "special" toolbar for bookmarks. So it's really the built-in bookmarks toolbar. I am able to change the height of the "special" toolbar through about:config using layout.css.devPixelsperPx but I can't find anything to change the bookmarks one. I just want it a little bit higher because my search box is also on that toolbar and although the search box is the right length, it's very skinny. Thank you.
Why didn't you leave the "Bookmarks Toolbars Item" on the Bookmarks Toolbar and move the search bar to the other toolbar?
Did you try to set a larger height for the personal toolbar?
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 */
#PersonalToolbar { height: 25px !important; }
The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.
I am curious as to why you are using the old Firefox 22 version, from June 2013, which isn't supported any longer?
Are you aware that Firefox 29 is the latest version, with Firefox 30 due to be released in 3 weeks, on June 10th?
1. The interface is ugly. 2. Many of my addons won't work 3. The interface is ugly like Chrome, which I won't use. 4. I don't want to. 5. The interface is ugly.
You can use the code posted here to find the IDs of all toolbars.
/questions/807135 How can I move my toolbars up and down?
You can try this CSS rule in the userChrome.css file:
(toolbar ID) { height: 40px !important; }
I tried adding this line - it did nothing. Yes, I closed Firefox before I edited the userChrome.css file. I'm not understanding the first two sentences. Can you explain what you mean by using the code posted to find all the toolbar ids? The toolbar I want wider is the one that has the search bar on it and then to the right of that New Tab Remove Tabs, Close Tabs
Modified by caltroon
Chosen Solution
After much searching and realizing I was asking the wrong question, I solved the problem and I'll say how so that it may help someone else. What I wanted bigger, I now realize, was the search bar, not the whole toolbar. I finally found the following code:
- search-container {
font-Tahoma: !important; font-size: 16pt !important; height: 22px !important;
and it did what I wanted it to do. Even though the search box shares a toolbar with other buttons, it was the search box I wanted bigger. The code I found actually had Arial black monospace instead of Tahoma, but I wanted Tahoma.
Problem solved.
If you want the Tahoma font then you need to change "font-Tahoma: !important;" to: font-family: Tahoma !important;
#search-container {
font-family: Tahoma !important;
font-size: 16pt !important;
height: 22px !important;
}
Thank you - changed it. Seems to work fine.