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

Support Forum

FF 7x. Decrease font size in search bar.

Posted

I recently started using the new version of FF and gradually trying to customize it for myself. Now I am faced with such a problem. The font size in this field is too large.

My userChrome.css file already has some changes that I made to change the view. What do I need to add? I can only partially imagine what each entry in this file is responsible for.


/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */
 --tab-min-height: 25px !important;
}
:root #tabbrowser-tabs {
 --tab-min-height: 25px !important;
}
#TabsToolbar {height: var(--tab-min-height) !important;}



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

#titlebar {
  order: 2;
}

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



:root[uidensity=compact] #urlbar,
:root[uidensity=compact] .searchbar-textbox {
  font-size: unset !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 recently started using the new version of FF and gradually trying to customize it for myself. Now I am faced with such a problem. The font size in this field is too large. My userChrome.css file already has some changes that I made to change the view. What do I need to add? I can only partially imagine what each entry in this file is responsible for. ------------------------------------------------------------------------- <pre><nowiki>/* TABS: height */ :root { --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */ --tab-min-height: 25px !important; } :root #tabbrowser-tabs { --tab-min-height: 25px !important; } #TabsToolbar {height: var(--tab-min-height) !important;} #navigator-toolbox { display: flex; flex-direction: column; } #titlebar { order: 2; } #tabbrowser-tabs { --tab-min-height: 18px !important; margin-left: 0px !important; height: 15px !important; } :root[uidensity=compact] #urlbar, :root[uidensity=compact] .searchbar-textbox { font-size: unset !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; } </nowiki></pre> -------------------------------------------------------------------------
Attached screenshots

Modified by cor-el

Chosen solution

You need to add a unit (px).

#urlbar, .searchbar-textbox {
  font-size: 14px !important;
  min-height: 20px !important;
}
Read this answer in context 1
Quote

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0

More Information

cor-el
  • Top 10 Contributor
  • Moderator
17757 solutions 160590 answers

You unset the font-size with this CSS code for Density:Compact.

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

You need to set a specific font-size, maybe best is not to specify the uidensity.

#urlbar, .searchbar-textbox {
  font-size: 14px !important;
  min-height: 20px !important;
}
You unset the font-size with this CSS code for Density:Compact. <pre><nowiki>:root[uidensity=compact] #urlbar, :root[uidensity=compact] .searchbar-textbox { font-size: unset !important; min-height: 20px !important; }</nowiki></pre> You need to set a specific font-size, maybe best is not to specify the uidensity. <pre><nowiki>#urlbar, .searchbar-textbox { font-size: 14px !important; min-height: 20px !important; }</nowiki></pre>

Modified by cor-el

Was this helpful to you?
Quote

Question owner

Thanks for the answer! Does not work :( Even if I enter this:

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

}

Thanks for the answer! Does not work :( Even if I enter this: :root[uidensity=compact] #urlbar, :root[uidensity=compact] .searchbar-textbox { font-size: 8 !important; min-height: 20px !important; }
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17757 solutions 160590 answers

Chosen Solution

You need to add a unit (px).

#urlbar, .searchbar-textbox {
  font-size: 14px !important;
  min-height: 20px !important;
}
You need to add a unit (px). <pre><nowiki>#urlbar, .searchbar-textbox { font-size: 14px !important; min-height: 20px !important; }</nowiki></pre>
Was this helpful to you? 1
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.