How to l increase header size for my theme? Firefox 40
l didn't want to neco post so l made my own support thread. l would like to increase the size of my header for firefox 40. l read on a different thread you can use the stylish firefox extension to increase the header size. l was just wondering how exactly you use the stylish add on to increase the header size. Thanks
(No clue as to why firefox didn't just build in the option for a bigger header...)
All Replies (2)
You want to make the toolbar area taller so that more of your theme is visible up there?
Built-in Options
One option is to show all available bars, and the window title (this is set in the page and normally shows only on the tab). You can use one of these methods to show the toolbar list and turn on the desired bars there:
- right-click a blank spot on the tab bar (or the "+" button)
- tap the Alt key to activate the classic menu bar > View > Toolbars
- in Customize mode > Show/Hide Toolbars (see: Customize Firefox controls, buttons and toolbars)
To turn on the Bookmarks Toolbar, Menu Bar, or other bars, click it on the list.
You can turn on the window title using the Customize feature: Customize Firefox controls, buttons and toolbars. There's a button at the lower left.
Custom Style Rules
You can use custom style rules to modify the appearance of Firefox's interface, and apply them using either the Stylish extension (a bit easier) or a userChrome.css file. Either way, someone needs to write a rule to make something taller. I'm not sure what would be the most aesthetically pleasing way to do that for your theme. Would the blank area look best above the tabs, between the tabs and the main toolbar, etc.?
You can find previously written custom style rules on https://userstyles.org/ and probably on this forum and on http://forums.mozillazine.org/ among others. Not sure of the best search query for this project.
See:
- [/questions/1076533] How to increase size of header bar so that I can view the theme more clearly?
A Light weight theme (Persona) covers the user interface part of Firefox (toolbar area) and not the browser window with internet pages.
To see more of the Persona you can set a min-height to the navigator-toolbox with code in the userChrome.css file or by using the Stylish extension.
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 */
#navigator-toolbox {min-height:200px!important; box-shadow:ThreeDShadow 0 -1px inset;}
The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.
You can use this button to go to the current Firefox profile folder:
- Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)
- http://kb.mozillazine.org/Profile_folder_-_Firefox
- Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
- Use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
- Paste the code in the userChrome.css file in the editor window
- Make sure that the userChrome.css file starts with the default @namespace line
- Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file
Modified by cor-el