X
Thinta lapha ukuze uye kuveshini yamakhalekhukhwini kusayithi.

Isithangami Sabeseki

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

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

Kuphostiwe

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.
cor-el
  • Top 10 Contributor
  • Moderator
17534 izisombululo 158548 izimpendulo
Kuphostiwe

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/

Okulungisiwe ngu cor-el

Umnikazi wombuzo

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!
cor-el
  • Top 10 Contributor
  • Moderator
17534 izisombululo 158548 izimpendulo
Kuphostiwe

Impendulo Ewusizo

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>

Umnikazi wombuzo

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.