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

Support Forum

[SOLVED] How can I increase the height of tabs?

Posted

I was using a theme which increased the height of tabs. Unfortunately, the theme conflicted with tab menu setting using the TabMixPlus extension. I am stuck with the default theme or others which do not increase the tab height. I have tried a variety of codes in userChrome.css to no avail. I am presently using the default theme with Firefox 20.0.1 (a Linux operating system).

I was using a theme which increased the height of tabs. Unfortunately, the theme conflicted with tab menu setting using the TabMixPlus extension. I am stuck with the default theme or others which do not increase the tab height. I have tried a variety of codes in userChrome.css to no avail. I am presently using the default theme with Firefox 20.0.1 (a Linux operating system).

Modified by ender21

Chosen solution

You should be able to do this via this code in userChrome.css

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

#TabsToolbar { height: 35px !important; }

The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

Read this answer in context 2

Additional System Details

Installed Plug-ins

  • The next generation Java plug-in for Mozilla browsers.
  • Shockwave Flash 11.2 r202
  • MozPlugger version 1.14.3, maintained by Louis Bavoil and Peter Leese, a fork of plugger written by Fredrik Hübinette.For documentation on how to configure mozplugger, check the man page. (type man mozplugger) Configuration file:/etc/mozpluggerrc Helper binary:mozplugger-helper Controller binary:mozplugger-controller Link launcher binary:mozplugger-linker
  • mplayerplug-in 3.55Video Player Plug-in for QuickTime, RealPlayer and Windows Media Player streams using MPlayer JavaScript Enabled and Using GTK2 Widgets

Application

  • Firefox 20.0.1
  • User Agent: Mozilla/5.0 (X11; Linux i686; rv:20.0) Gecko/20100101 Firefox/20.0
  • Support URL: http://support.mozilla.org/1/firefox/20.0.1/Linux/en-US/

Extensions

  • Adblock Plus 2.2.4 ({d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d})
  • British English Dictionary 1.19.1 (en-GB@dictionaries.addons.mozilla.org)
  • DoNotTrackMe 2.2.8.307 (donottrackplus@abine.com)
  • Element Hiding Helper for Adblock Plus 1.2.3 (elemhidehelper@adblockplus.org)
  • Find Toolbar Tweaks 3.0.0 ({E6463D12-450D-45eb-9D47-804AEB0A9561})
  • FoxClocks 3.1.26 ({d37dc5d0-431d-44e5-8c91-49419370caa1})
  • keyconfig 20110522 (keyconfig@dorando)
  • NoScript 2.6.6.1 ({73a6fe31-595d-460b-a920-fcc0f8843232})
  • NoSquint 2.1.9 (nosquint@urandom.ca)
  • Nuke Anything Enhanced 1.0.2 ({1ced4832-f06e-413f-aa14-9eb63ad40ace})
  • ReminderFox 2.0.2 ({ada4b710-8346-4b82-8199-5de2b400a6ae})
  • Show my Password 2.0 ({cd617372-6743-4ee4-bac4-fbf60f35719e})
  • Switch plugins.click_to_play 0.6 (jid1-tsc5Jhe6AjgKhg@jetpack)
  • Tab Mix Plus 0.4.1.1pre.130504b ({dc572301-7619-498c-a57d-39143191b318})
  • Theme Font & Size Changer 7.0 ({f69e22c7-bc50-414a-9269-0f5c344cd94c})
  • Tidy Facebook Chat 0.1.3 (jid0-qn6ncWExzBpMk6qxcFYBaj7ITn4@jetpack)
  • Tiny Menu 2.0.4 ({d33c2f7c-b1e6-4d46-ab0e-be1f6d05c904})
  • Toolbar Buttons 1.0 ({03B08592-E5B4-45ff-A0BE-C1D975458688})
  • Troubleshooter 1.1a (troubleshooter@mozilla.org)
  • WOT 20130402 ({a0d7ccb3-214d-498b-b4aa-0e8fda9a7bf7})

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: NVIDIA Corporation -- GeForce 6100/integrated/SSE2/3DNOW!
  • adapterDeviceID: GeForce 6100/integrated/SSE2/3DNOW!
  • adapterDrivers:
  • adapterRAM:
  • adapterVendorID: NVIDIA Corporation
  • driverDate:
  • driverVersion: 2.1.2 NVIDIA 304.64
  • info: {u'AzureContentBackend': u'none', u'AzureCanvasBackend': u'cairo', u'AzureFallbackCanvasBackend': u'none'}
  • numAcceleratedWindows: 0
  • numAcceleratedWindowsMessage: [u'']
  • numTotalWindows: 1
  • webglRenderer: NVIDIA Corporation -- GeForce 6100/integrated/SSE2/3DNOW!
  • windowLayerManagerType: Basic

Modified Preferences

  • accessibility.typeaheadfind.flashBar: 0
  • accessibility.typeaheadfind.timeout: 15000
  • browser.cache.disk.capacity: 1048576
  • browser.cache.disk.smart_size.first_run: False
  • browser.cache.disk.smart_size_cached_value: 655360
  • browser.display.background_color: #EFEFEF
  • browser.display.foreground_color: #000080
  • browser.link.open_newwindow.restriction: 0
  • browser.places.smartBookmarksVersion: 4
  • browser.search.openintab: True
  • browser.search.suggest.enabled: False
  • browser.search.useDBForOrder: True
  • browser.sessionstore.max_tabs_undo: 15
  • browser.sessionstore.resume_from_crash: False
  • browser.startup.homepage: about:blank
  • browser.startup.homepage_override.buildID: 20130409194949
  • browser.startup.homepage_override.mstone: 20.0.1
  • browser.tabs.closeWindowWithLastTab: False
  • browser.tabs.insertRelatedAfterCurrent: False
  • browser.tabs.loadBookmarksInBackground: True
  • browser.tabs.loadDivertedInBackground: True
  • browser.tabs.onTop: False
  • browser.tabs.selectOwnerOnClose: False
  • browser.tabs.tabMaxWidth: 135
  • browser.tabs.warnOnClose: False
  • browser.urlbar.autocomplete.enabled: False
  • browser.urlbar.default.behavior: 2
  • browser.urlbar.formatting.enabled: False
  • browser.urlbar.trimURLs: False
  • browser.zoom.siteSpecific: False
  • dom.max_script_run_time: 20
  • dom.mozApps.used: True
  • dom.w3c_touch_events.expose: False
  • extensions.lastAppVersion: 20.0.1
  • font.default.x-western: sans-serif
  • font.minimum-size.x-western: 14
  • font.name.serif.x-western: Verdana
  • keyword.URL: https://startpage.com/do/search?language=english&cat=web&query=
  • network.cookie.cookieBehavior: 2
  • network.cookie.prefsMigrated: True
  • places.database.lastMaintenance: 1368269787
  • places.history.expiration.transient_current_max_pages: 51407
  • plugins.click_to_play: True
  • privacy.clearOnShutdown.cookies: False
  • privacy.clearOnShutdown.sessions: False
  • privacy.cpd.cookies: False
  • privacy.cpd.downloads: False
  • privacy.cpd.extensions-nosquint: False
  • privacy.cpd.extensions-tabmix: True
  • privacy.cpd.history: False
  • privacy.cpd.offlineApps: True
  • privacy.cpd.sessions: False
  • privacy.donottrackheader.enabled: True
  • privacy.sanitize.migrateFx3Prefs: True
  • privacy.sanitize.sanitizeOnShutdown: True
  • privacy.sanitize.timeSpan: 4
  • security.password_lifetime: 900
  • security.warn_viewing_mixed: False

Misc

  • User JS: No
  • Accessibility: No
cor-el
  • Top 10 Contributor
  • Moderator
17571 solutions 158915 answers

Chosen Solution

You should be able to do this via this code in userChrome.css

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

#TabsToolbar { height: 35px !important; }

The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

You should be able to do this via this code in userChrome.css *http://kb.mozillazine.org/userChrome.css <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ #TabsToolbar { height: 35px !important; }</nowiki></pre> The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder. *http://kb.mozillazine.org/Editing_configuration

Question owner

Thank you. I have had a userChrome.css file for several years. The name-space line is correct. 35px seemed to make no difference so I kept increasing it and now it reads:

/* height of tab bar */

  1. TabsToolbar { height: 100px; }

There is no difference in height. Could something be interfering with the code?

Thank you. I have had a userChrome.css file for several years. The name-space line is correct. 35px seemed to make no difference so I kept increasing it and now it reads: /* height of tab bar */ #TabsToolbar { height: 100px; } There is no difference in height. Could something be interfering with the code?

Modified by ender21

cor-el
  • Top 10 Contributor
  • Moderator
17571 solutions 158915 answers

Did you try to use the !important; flag?

#TabsToolbar { height: 100px !important; }

That flag is necessary to override a current height setting for the tab bar.


Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).

  • Do NOT click the Reset button on the Safe Mode start window or otherwise make changes.
Did you try to use the !important; flag? <pre><nowiki>#TabsToolbar { height: 100px !important; } </nowiki></pre> That flag is necessary to override a current height setting for the tab bar. ---- Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance). *Do NOT click the Reset button on the Safe Mode start window or otherwise make changes. *https://support.mozilla.org/kb/Safe+Mode *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
Varun Kaushik 4 solutions 33 answers

Helpful Reply

It took me an hour but I found a way to increase the height of the tabs without the need to increase the font size. You can also increase the font size of the tabs without increasing other font sizes.

Open "C:\Users\[USERNAME]\AppData\Roaming\Mozilla\Firefox\Profiles\[RANDOM STRING].default" and create a new folder called "Chrome", next open Notepad and paste the following code into it.

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

.tabbrowser-tabs *|tab {

   font-size: 12px !important;
   height:    50px !important;
   min-width: 8px !important  }

Save this in the new folder "Chrome" as "userChrome.css".

You can see the height is set to 50px which is probably bigger than you want so you can change the values to what you like but you'll need to restart Firefox each time you make a change.
It took me an hour but I found a way to increase the height of the tabs without the need to increase the font size. You can also increase the font size of the tabs without increasing other font sizes. Open "C:\Users\[USERNAME]\AppData\Roaming\Mozilla\Firefox\Profiles\[RANDOM STRING].default" and create a new folder called "Chrome", next open Notepad and paste the following code into it. Code: @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .tabbrowser-tabs *|tab { font-size: 12px !important; height: 50px !important; min-width: 8px !important } Save this in the new folder "Chrome" as "userChrome.css". You can see the height is set to 50px which is probably bigger than you want so you can change the values to what you like but you'll need to restart Firefox each time you make a change.

Question owner

Thanks. cor-el, I forgot to use '!important'.

GeekInside, thanks also, I have tried code like that.

I will try starting in safe mode with various codes. Tomorrow though.

Thanks. cor-el, I forgot to use '!important'. GeekInside, thanks also, I have tried code like that. I will try starting in safe mode with various codes. Tomorrow though.

Modified by ender21

cor-el
  • Top 10 Contributor
  • Moderator
17571 solutions 158915 answers

Note that the name of the folder is chrome (case sensitive).

Did you check if the code works with all extensions disabled?

(Safe Mode disable userChrome.css)

Note that the name of the folder is chrome (case sensitive). Did you check if the code works with all extensions disabled? ''(Safe Mode disable userChrome.css)''

Question owner

Thank you both very much for your help. Disabling all add-ons made no difference. However, removing certain code in userChrome.css relating to the add-on bar fixed the problem.

Both answers worked. I am unable for some reason to mark GeekInside's answer as helpful.

Thank you both very much for your help. Disabling all add-ons made no difference. However, removing certain code in userChrome.css relating to the add-on bar fixed the problem. Both answers worked. '''I am unable for some reason to mark GeekInside's answer as helpful.'''

Modified by ender21

Question owner

After several more experiments I have established that the tab bar code is compatible with the code for the add-on bar.

After several more experiments I have established that the tab bar code is compatible with the code for the add-on bar.

Modified by ender21