X
Tap here to go to the mobile version of the site.

Support Forum

How to adjust/reduce hight of menu-bar using userChrome.css in Firefox 65?

Posted

I use Firefox 65 on Windows 10 computer. Since Feb 9 i used instructions found in Answers to the "How to use userChrome.css to move Tabs to the bottom" Question, to: - adjust height of Address, Bookmarks and Tabs lines - underline Bookmarks and Tabs lines - adjust width of Tabs,

but could not find way to adjust Menu-bar line height.

It would be nice to get instructions about rules and list of commands that can be used how to design userChrome.css file.

I use Firefox 65 on Windows 10 computer. Since Feb 9 i used instructions found in Answers to the "How to use userChrome.css to move Tabs to the bottom" Question, to: - adjust height of Address, Bookmarks and Tabs lines - underline Bookmarks and Tabs lines - adjust width of Tabs, but could not find way to adjust Menu-bar line height. It would be nice to get instructions about rules and list of commands that can be used how to design userChrome.css file.
Quote
cor-el
  • Top 10 Contributor
  • Moderator
16995 solutions 153465 answers

You can use the Browser Toolbox to find these selectors.

See also this Reddit forum.

You can use the Browser Toolbox to find these selectors. *https://developer.mozilla.org/en-US/Tools/Browser_Toolbox See also this Reddit forum. *https://www.reddit.com/r/FirefoxCSS/

Modified by cor-el

Was this helpful to you? 0
Quote

Question owner

I tried to find answer and nothing i did would do the trick. Whatever changes i tried had surprising results. I could not resolve a problem by changing parameters in "css" file (I could not figure out how "css" works.) Any change I did just messed up css that worked (at least partially).

But, on a bright side, I am not one who easily give up!

I tried to find answer and nothing i did would do the trick. Whatever changes i tried had surprising results. I could not resolve a problem by changing parameters in "css" file (I could not figure out how "css" works.) Any change I did just messed up css that worked (at least partially). But, on a bright side, I am not one who easily give up!
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
16995 solutions 153465 answers

Helpful Reply

The height of the menu bar would be this selector:

#toolbar-menubar { height: 17px !important; min-height: 20px !important; }

Make sure you use the !important flag. You may have to add a min-height settings.

See also:

  • chrome://global/skin/toolbar.css
  • chrome://browser/skin/browser.css
toolbar[type="menubar"] {
	-moz-appearance: menubar;
	color: -moz-menubartext;
	min-width: 1px;
	min-height: 20px;
	padding: 1px 0px;
}
The height of the menu bar would be this selector: #toolbar-menubar { height: 17px !important; min-height: 20px !important; } Make sure you use the !important flag. You may have to add a min-height settings. See also: * chrome://global/skin/toolbar.css * chrome://browser/skin/browser.css <pre><nowiki>toolbar[type="menubar"] { -moz-appearance: menubar; color: -moz-menubartext; min-width: 1px; min-height: 20px; padding: 1px 0px; }</nowiki></pre>
Was this helpful to you? 1
Quote

Question owner

To: "'cor-el

I spent some time trying and have had some success in setting firefox to show ta page as i liked, but never managed to reduce height of the menu line below 20px. It seams to me that there are some parameters that are preset and not change-able. I couldn't find simple and straightforward instructions how that all works. My "CSS" file looks like this:


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

#TabsToolbar {

position: absolute  !important; bottom: 0 !important; width: 100vw !important; -moz-box-ordinal-group: 3 !important; border-bottom: 3px solid blue !important; background-color: #f6f6f6 !important; }

  1. main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {

padding-bottom: 35px !important; }

#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
display: none !important;

}

.tabbrowser-tab:not([pinned]) { min-width: 80px !important; }

  1. navigator-toolbox {
 border-bottom: 0px solid #000 !important;
}

/** "Light" Theme (Dark Text) **/

/* Border the background tabs (10% gray) for greater visibility */

  1. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) {
 border: 1px solid green !important;
 border-bottom: 2px solid blue !important;
 margin-right: 0px !important;
 background-color: white !important;

}

toolbar[type="menubar"] {

                             /*	-moz-appearance: menubar;   */

/* color: -moz-menubartext; */ min-width: 10px !important; min-height: 10px !important; padding: 0px 0px !important; }


/* Remove short vertical lines between background tabs */

  1. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before,
  2. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after {
 border: none !important;

}

/* Curve the background tabs at the upper left and right corners

  May not work on add-on themes. */

.tabbrowser-tab {

 border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px !important;
 background-color: #FFFF00 !important;
 margin-bottom: 0px !important;
 tabbrowser-tab height: 10px !important;

} /* Curve active tab and slightly overlap neighboring tabs */ .tabbrowser-tab .tab-background[selected="true"] {

 margin-left: 3px solid blue !important;
 margin-right: 3px solid blue !important;
 margin-bottom: 0px !important;
 border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px !important;
 border: 2px solid red !important;
 background-color: #FFFF00 !important;
 }

which is mix of couple of other files I found with some changes I did.

It needs some cleaning and some more work.....but to me is "good enough". I will spend now time on learning it all before i attempt to refine it further.

Thank you for your help !!! .

Your references to web sites with informations were specially worth. It was worth trying to learn it all. I will have to spend more time reading - there are no shortcuts.

To: "'cor-el''' I spent some time trying and have had some success in setting firefox to show ta page as i liked, but never managed to reduce height of the menu line below 20px. It seams to me that there are some parameters that are preset and not change-able. I couldn't find simple and straightforward instructions how that all works. My "CSS" file looks like this: ------------------------------------------------------------------------------- @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; -moz-box-ordinal-group: 3 !important; border-bottom: 3px solid blue !important; background-color: #f6f6f6 !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: 35px !important; } #TabsToolbar .private-browsing-indicator, #TabsToolbar #window-controls, #TabsToolbar *[type="caption-buttons"], #TabsToolbar *[type="pre-tabs"], #TabsToolbar *[type="post-tabs"] { display: none !important; } .tabbrowser-tab:not([pinned]) { min-width: 80px !important; } #navigator-toolbox { border-bottom: 0px solid #000 !important; } /** "Light" Theme (Dark Text) **/ /* Border the background tabs (10% gray) for greater visibility */ #main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) { border: 1px solid green !important; border-bottom: 2px solid blue !important; margin-right: 0px !important; background-color: white !important; } toolbar[type="menubar"] { /* -moz-appearance: menubar; */ /* color: -moz-menubartext; */ min-width: 10px !important; min-height: 10px !important; padding: 0px 0px !important; } /* Remove short vertical lines between background tabs */ #main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before, #main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after { border: none !important; } /* Curve the background tabs at the upper left and right corners May not work on add-on themes. */ .tabbrowser-tab { border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px !important; background-color: #FFFF00 !important; margin-bottom: 0px !important; tabbrowser-tab height: 10px !important; } /* Curve active tab and slightly overlap neighboring tabs */ .tabbrowser-tab .tab-background[selected="true"] { margin-left: 3px solid blue !important; margin-right: 3px solid blue !important; margin-bottom: 0px !important; border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px !important; border: 2px solid red !important; background-color: #FFFF00 !important; } ----------------------------------------------------------------------------------------- which is mix of couple of other files I found with some changes I did. It needs some cleaning and some more work.....but to me is "good enough". I will spend now time on learning it all before i attempt to refine it further. Thank you for your help !!! . Your references to web sites with informations were specially worth. It was worth trying to learn it all. I will have to spend more time reading - there are no shortcuts.
Was this helpful to you?
Quote
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.