Where did you install Firefox from? Help Mozilla uncover 3rd party websites that offer problematic Firefox installation by taking part in our campaign. There will be swag, and you'll be featured in our blog if you manage to report at least 10 valid reports!

Pomoc pśepytaś

Glědajśo se wobšudy pomocy. Njenapominajomy was nigda, telefonowy numer zawołaś, SMS pósłaś abo wósobinske informacije pśeraźiś. Pšosym dajśo suspektnu aktiwitu z pomocu nastajenja „Znjewužywanje k wěsći daś“ k wěsći.

Learn More

Unable to reduce address bar height for 113.

  • 3 wótegrona
  • 0 ma toś ten problem
  • 1 naglěd
  • Slědne wótegrono wót cor-el

more options

I am trying to make the address bar thinner (reduce the height), but after trying all the recommendations on the Internet, I did not succeed. I did this through the userChrome.css file and by minimizing the icons. Please help.

I am trying to make the address bar thinner (reduce the height), but after trying all the recommendations on the Internet, I did not succeed. I did this through the userChrome.css file and by minimizing the icons. Please help.
Pśipowjesone fota wobrazowki

Wubrane rozwězanje

The first part of your CSS code is about hiding items in the context menus. The second part is about moving the Tab bar to the lower position and make some style/height adjustments.

I've cleaned up that second part as some of the rules are already default in the current release. Note that you need to enable compact mode for some of the rules to work.

More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.


/* TABS: height */
*|*:root[uidensity] {
 --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */
 --tab-min-height: 20px !important;
}

#titlebar {
  order: 2;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 2px !important;
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

#tabbrowser-tabs,
.tab-stack,
.tab-content {
  height: var(--tab-min-height) !important;
}

#tabbrowser-tabs {
  margin-left: 0px !important;
}

:root[uidensity=compact] #urlbar,
:root[uidensity=compact] .searchbar-textbox {
  font-size: 11px !important;
  min-height: 20px !important;
}

:root[uidensity=compact] #identity-box {
  max-height: 20px;
}

:root[uidensity=compact] #nav-bar .toolbarbutton-1 {
  padding: 0px !important;
}

/* Compatibility with auto-hide.css */
:root[uidensity=compact] #navigator-toolbox {
  --nav-bar-height: 20px !important;
}

#nav-bar {
  border-top: 0 !important;
}

Toś to wótegrono w konteksće cytaś 👍 0

Wšykne wótegrona (3)

more options

What CSS code do you currently have in your userChrome.css ?

Best is usually to modify the relevant CSS variables, in this case --urlbar

more options

Thanks for the answer!

As I understand it, in recent versions, the way Firefox works with the userChrome.css file has been changed. I have now installed version 114 on Windows 7 and I have the impression that userChrome.css is not being read at all. Usage of userChrome.css включено (toolkit.legacyUserProfileCustomizations.stylesheets=true).

I don't remember what and when I entered it, and I don't even remember why. I got all the advice here or on other forums. My file contains the following:


#menu_pocket, #menu_pocketSeparator, #panelMenu_pocket, #BMB_pocket, #BMB_pocketSeparator { display:none !important; }
#context-savelinktopocket, #context-pocket { display:none!important; }

#context-back image,
#context-forward image,
#context-reload image,
#context-stop image,
#context-bookmarkpage image,
#context-bookmarklink,
#context-navigation,
#context-sendlinktodevice,
#context-searchselect,
#context-openlinkprivate,
#context-openlink,
#context-inspect,
#context-inspectseparator,
#context-sendimage,
#context-sep-navigation {
    display:none !important;
}

/* TABS: height */
*|*:root {
 --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */
 --tab-min-height: 20px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 2px !important;
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

#navigator-toolbox {
  display: flex;
  flex-direction: column;
}

#titlebar {
  order: 2;
}

#tabbrowser-tabs {
  --tab-min-height: 20px !important;
  margin-left: 0px !important;
  height: 20px !important;
}

:root[uidensity=compact] #urlbar,
:root[uidensity=compact] .searchbar-textbox {
  font-size: 11px !important;
  min-height: 20px !important;
}

:root[uidensity=compact] #identity-box {
  max-height: 20px;
}

:root[uidensity=compact] #nav-bar .toolbarbutton-1 {
  padding: 0px !important;
}

/* Compatibility with auto-hide.css */
:root[uidensity=compact] #navigator-toolbox {
  --nav-bar-height: 20px !important;
}

#nav-bar {
  border-top: 0 !important;
}

toolbar#TabsToolbar
{
    -moz-appearance: none !important;
    background-color: #535556 !important;
}


I'm afraid I'll have to start filling out this file again. How do I find out what each entry does? But right now, I need to move the tabs below the address bar and decrease the height of both the tabs and the address bar.

Thank you!

Wót cor-el změnjony

more options

Wubrane rozwězanje

The first part of your CSS code is about hiding items in the context menus. The second part is about moving the Tab bar to the lower position and make some style/height adjustments.

I've cleaned up that second part as some of the rules are already default in the current release. Note that you need to enable compact mode for some of the rules to work.

More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.


/* TABS: height */
*|*:root[uidensity] {
 --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */
 --tab-min-height: 20px !important;
}

#titlebar {
  order: 2;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 2px !important;
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

#tabbrowser-tabs,
.tab-stack,
.tab-content {
  height: var(--tab-min-height) !important;
}

#tabbrowser-tabs {
  margin-left: 0px !important;
}

:root[uidensity=compact] #urlbar,
:root[uidensity=compact] .searchbar-textbox {
  font-size: 11px !important;
  min-height: 20px !important;
}

:root[uidensity=compact] #identity-box {
  max-height: 20px;
}

:root[uidensity=compact] #nav-bar .toolbarbutton-1 {
  padding: 0px !important;
}

/* Compatibility with auto-hide.css */
:root[uidensity=compact] #navigator-toolbox {
  --nav-bar-height: 20px !important;
}

#nav-bar {
  border-top: 0 !important;
}

Wót cor-el změnjony