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

Support Forum

I HATE the new v.57 tab bar; how do I go back to the old one?

Posted

The new v.57 user interface, and in particular the Tab Strip, are totally unusable. The ugly new white-on-black tab buttons are totally unusable by someone like me who keeps a lot of tabs open at all times. The tiny black rectangles only hold maybe one or two letters, and the icons are so small that most are unrecognizable. I tried increasing the text size as your referenced article suggested, but the text only got larger BELOW the Tab Strip. No help.

So I have returned to v.56.0.2. I don't care how much faster you claim v.57.0.3 may be; if I cannot easily use my Tab Strip, and if it remains the ugly white on black, tiny plain rectangle format reminiscent of the hated MS DOS, I will not be "upgrading."

The new v.57 user interface, and in particular the Tab Strip, are totally unusable. The ugly new white-on-black tab buttons are totally unusable by someone like me who keeps a lot of tabs open at all times. The tiny black rectangles only hold maybe one or two letters, and the icons are so small that most are unrecognizable. I tried increasing the text size as your referenced article suggested, but the text only got larger BELOW the Tab Strip. No help. So I have returned to v.56.0.2. I don't care how much faster you claim v.57.0.3 may be; if I cannot easily use my Tab Strip, and if it remains the ugly white on black, tiny plain rectangle format reminiscent of the hated MS DOS, I will not be "upgrading."

Chosen solution

Hi, you can change the tab colour etc: 3-bar menu > Customize > Themes (and Density) - at the bottom of the page (click Done to save). You can also drag buttons to different locations if you wish - Customize Firefox controls, buttons and toolbars.

Read this answer in context 2

Additional System Details

Installed Plug-ins

  • Shockwave Flash 28.0 r0

Application

  • Firefox 56.0.2
  • User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:56.0) Gecko/20100101 Firefox/56.0
  • Support URL: https://support.mozilla.org/1/firefox/56.0.2/Darwin/en-US/

Extensions

  • Entrality 3.1.100 ({eb260b8d-f7d3-48d8-a29a-c2b07e1ed36e})
  • NOFS 0.1.1-signed.1-signed (nofs@zpao.com)
  • Packages 100.3 (web@Packages)
  • Video Converter 3.5.0 ({1C177B10-F72F-11E1-A21F-0800200C9A66}) (Inactive)
  • Wondershare Player 1.6.0 (Player@Wondershare.com) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription:
  • adapterDeviceID: 0x6720
  • adapterDrivers:
  • adapterRAM:
  • adapterVendorID: 0x1002
  • crashGuards: [{u'prefName': u'gfx.crash-guard.status.glcontext', u'type': u'glcontext'}]
  • driverDate:
  • driverVersion:
  • featureLog: {u'fallbacks': [], u'features': [{u'status': u'available', u'description': u'Compositing', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'HW_COMPOSITING'}, {u'status': u'available', u'description': u'OpenGL Compositing', u'log': [{u'status': u'available', u'type': u'default'}], u'name': u'OPENGL_COMPOSITING'}, {u'status': u'unavailable', u'description': u'WebRender', u'log': [{u'status': u'opt-in', u'message': u'WebRender is an opt-in feature', u'type': u'default'}, {u'status': u'unavailable', u'message': u"Build doesn't include WebRender", u'type': u'runtime'}], u'name': u'WEBRENDER'}]}
  • info: {u'TileHeight': 1024, u'TileWidth': 1024, u'AzureFallbackCanvasBackend': u'none', u'AzureCanvasAccelerated': 1, u'AzureCanvasBackend': u'skia', u'AzureContentBackend': u'skia'}
  • numAcceleratedWindows: 7
  • numTotalWindows: 7
  • webgl1DriverExtensions: GL_ARB_color_buffer_float GL_ARB_depth_buffer_float GL_ARB_depth_clamp GL_ARB_depth_texture GL_ARB_draw_buffers GL_ARB_draw_elements_base_vertex GL_ARB_draw_instanced GL_ARB_fragment_program GL_ARB_fragment_program_shadow GL_ARB_fragment_shader GL_ARB_framebuffer_object GL_ARB_framebuffer_sRGB GL_ARB_half_float_pixel GL_ARB_half_float_vertex GL_ARB_imaging GL_ARB_instanced_arrays GL_ARB_multisample GL_ARB_multitexture GL_ARB_occlusion_query GL_ARB_pixel_buffer_object GL_ARB_point_parameters GL_ARB_point_sprite GL_ARB_provoking_vertex GL_ARB_seamless_cube_map GL_ARB_shader_objects GL_ARB_shader_texture_lod GL_ARB_shading_language_100 GL_ARB_shadow GL_ARB_shadow_ambient GL_ARB_sync GL_ARB_texture_border_clamp GL_ARB_texture_compression GL_ARB_texture_compression_rgtc GL_ARB_texture_cube_map GL_ARB_texture_env_add GL_ARB_texture_env_combine GL_ARB_texture_env_crossbar GL_ARB_texture_env_dot3 GL_ARB_texture_float GL_ARB_texture_mirrored_repeat GL_ARB_texture_non_power_of_two GL_ARB_texture_rectangle GL_ARB_texture_rg GL_ARB_transpose_matrix GL_ARB_vertex_array_bgra GL_ARB_vertex_blend GL_ARB_vertex_buffer_object GL_ARB_vertex_program GL_ARB_vertex_shader GL_ARB_window_pos GL_EXT_abgr GL_EXT_bgra GL_EXT_bindable_uniform GL_EXT_blend_color GL_EXT_blend_equation_separate GL_EXT_blend_func_separate GL_EXT_blend_minmax GL_EXT_blend_subtract GL_EXT_clip_volume_hint GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_draw_buffers2 GL_EXT_draw_range_elements GL_EXT_fog_coord GL_EXT_framebuffer_blit GL_EXT_framebuffer_multisample GL_EXT_framebuffer_object GL_EXT_framebuffer_sRGB GL_EXT_geometry_shader4 GL_EXT_gpu_program_parameters GL_EXT_gpu_shader4 GL_EXT_multi_draw_arrays GL_EXT_packed_depth_stencil GL_EXT_packed_float GL_EXT_provoking_vertex GL_EXT_rescale_normal GL_EXT_secondary_color GL_EXT_separate_specular_color GL_EXT_shadow_funcs GL_EXT_stencil_two_side GL_EXT_stencil_wrap GL_EXT_texture_array GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_s3tc GL_EXT_texture_env_add GL_EXT_texture_filter_anisotropic GL_EXT_texture_integer GL_EXT_texture_lod_bias GL_EXT_texture_mirror_clamp GL_EXT_texture_rectangle GL_EXT_texture_shared_exponent GL_EXT_texture_sRGB GL_EXT_texture_sRGB_decode GL_EXT_timer_query GL_EXT_transform_feedback GL_EXT_vertex_array_bgra GL_APPLE_aux_depth_stencil GL_APPLE_client_storage GL_APPLE_element_array GL_APPLE_fence GL_APPLE_float_pixels GL_APPLE_flush_buffer_range GL_APPLE_flush_render GL_APPLE_object_purgeable GL_APPLE_packed_pixels GL_APPLE_pixel_buffer GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_specular_vector GL_APPLE_texture_range GL_APPLE_transform_hint GL_APPLE_vertex_array_object GL_APPLE_vertex_array_range GL_APPLE_vertex_point_size GL_APPLE_vertex_program_evaluators GL_APPLE_ycbcr_422 GL_ATI_blend_equation_separate GL_ATI_blend_weighted_minmax GL_ATI_separate_stencil GL_ATI_texture_compression_3dc GL_ATI_texture_env_combine3 GL_ATI_texture_float GL_ATI_texture_mirror_once GL_IBM_rasterpos_clip GL_NV_blend_square GL_NV_conditional_render GL_NV_depth_clamp GL_NV_fog_distance GL_NV_light_max_exponent GL_NV_texgen_reflection GL_NV_texture_barrier GL_SGI_color_matrix GL_SGIS_generate_mipmap GL_SGIS_texture_edge_clamp GL_SGIS_texture_lod
  • webgl1Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_frag_depth EXT_sRGB EXT_shader_texture_lod EXT_texture_filter_anisotropic MOZ_debug OES_element_index_uint OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context MOZ_WEBGL_lose_context MOZ_WEBGL_compressed_texture_s3tc MOZ_WEBGL_depth_texture
  • webgl1Renderer: ATI Technologies Inc. -- AMD Radeon HD 6970M OpenGL Engine
  • webgl1Version: 2.1 ATI-1.51.8
  • webgl1WSIInfo: CGL
  • webgl2DriverExtensions: GL_ARB_blend_func_extended GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_ES2_compatibility GL_ARB_explicit_attrib_location GL_ARB_gpu_shader5 GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_occlusion_query2 GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_separate_shader_objects GL_ARB_shader_bit_encoding GL_ARB_shader_subroutine GL_ARB_shading_language_include GL_ARB_tessellation_shader GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_cube_map_array GL_ARB_texture_gather GL_ARB_texture_query_lod GL_ARB_texture_rgb10_a2ui GL_ARB_texture_storage GL_ARB_texture_swizzle GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_texture_compression_s3tc GL_EXT_texture_filter_anisotropic GL_EXT_texture_mirror_clamp GL_EXT_texture_sRGB_decode GL_APPLE_client_storage GL_APPLE_container_object_shareable GL_APPLE_flush_render GL_APPLE_object_purgeable GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_texture_range GL_ATI_texture_mirror_once GL_NV_texture_barrier
  • webgl2Extensions: EXT_color_buffer_float EXT_texture_filter_anisotropic EXT_disjoint_timer_query MOZ_debug OES_texture_float_linear WEBGL_compressed_texture_s3tc WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context MOZ_WEBGL_lose_context MOZ_WEBGL_compressed_texture_s3tc
  • webgl2Renderer: ATI Technologies Inc. -- AMD Radeon HD 6970M OpenGL Engine
  • webgl2Version: 4.1 ATI-1.51.8
  • webgl2WSIInfo: CGL
  • windowLayerManagerRemote: True
  • windowLayerManagerType: OpenGL
  • windowUsingAdvancedLayers: False

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No
philipp
  • Top 25 Contributor
  • Moderator
5037 solutions 22341 answers

hi, firefox quantum also comes with a light theme that you can switch to when go to the firefox menu ≡ > addons > themes panel ;-)

if you want to increase the minimal size of tabs in firefox quantum, proceed like this: enter about:config into the firefox address bar (confirm the info message in case it shows up) & search for the preference named browser.tabs.tabMinWidth. double-click it and change its value to a higher value that fits your needs (perhaps 110).

hi, firefox quantum also comes with a light theme that you can switch to when go to the firefox ''menu ≡ > addons > themes'' panel ;-) if you want to increase the minimal size of tabs in firefox quantum, proceed like this: enter '''about:config''' into the firefox address bar (confirm the info message in case it shows up) & search for the preference named '''browser.tabs.tabMinWidth'''. double-click it and change its value to a higher value that fits your needs (perhaps 110).

Question owner

I found Firefox v.57 unusable because of what I consider as the Tab Strip problem. So I found and followed the instructions on how to return to an older version of Firefox. Therefore I am now running Firefox v.56. I assume that the Firefox Quantum you refer to is the developer's version of v.57 where new features are tried out. If I am right, how do I get there from here? And is there also a way to restore the 3-D appearance of the tab buttons, and perhaps the height as well as the width (so the icons won't be so small)? Thanks for your help.

I found Firefox v.57 unusable because of what I consider as the Tab Strip problem. So I found and followed the instructions on how to return to an older version of Firefox. Therefore I am now running Firefox v.56. I assume that the Firefox Quantum you refer to is the developer's version of v.57 where new features are tried out. If I am right, how do I get there from here? And is there also a way to restore the 3-D appearance of the tab buttons, and perhaps the height as well as the width (so the icons won't be so small)? Thanks for your help.
philipp
  • Top 25 Contributor
  • Moderator
5037 solutions 22341 answers

oh, sorry for the lingo - quantum is just the codename for firefox 57. as far as i'm aware, the size of favicons on the tabs hasn't changed between the browser versions...

oh, sorry for the lingo - quantum is just the codename for firefox 57. as far as i'm aware, the size of favicons on the tabs hasn't changed between the browser versions...

Question owner

There's some more "lingo." I am not familiar with the term "favicon," but I believe I can figure out what it means. I remember several years ago using a development version of Firefox such as I described, which had a different name (which I have forgotten). The icon was also different. I remember I had both the standard Firefox and this development version installed and could switch between them.

As for the size of the favicons, I am attaching a screen shot of the Tab Strip in my v.56. As I remember the Tab Strip in v.57, which I no longer have installed, the favicons were approximately one third the width, and somewhat smaller in height, than the dimensions of the ones in the screen shot. Only a fraction of the total open tabs are visible; more would be shown in v.57 because they would be smaller.

There's some more "lingo." I am not familiar with the term "favicon," but I believe I can figure out what it means. I remember several years ago using a development version of Firefox such as I described, which had a different name (which I have forgotten). The icon was also different. I remember I had both the standard Firefox and this development version installed and could switch between them. As for the size of the favicons, I am attaching a screen shot of the Tab Strip in my v.56. As I remember the Tab Strip in v.57, which I no longer have installed, the favicons were approximately one third the width, and somewhat smaller in height, than the dimensions of the ones in the screen shot. Only a fraction of the total open tabs are visible; more would be shown in v.57 because they would be smaller.

Modified by Perdicus

Pkshadow
  • Top 10 Contributor
837 solutions 10552 answers
56 is unsupported and will be force updated to 57. You could have asked for help with 57 instead of embarking on a quest that 56 is not designed to do and 57 is : USSER CHROME URL'S https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/ http://techdows.com/2017/09/classic-theme-restorer-userchrome-css-modify-firefox-57-photon-ui.html https://github.com/Aris-t2/CustomCSSforFx/issues/1 https://www.accessfirefox.org/Theme-Font-Size-Changer.php https://www.userchrome.org/ https://www.accessfirefox.org/Firefox_Accessibility_Themes.php https://www.userchrome.org/what-is-userchrome-css.html http://kb.mozillazine.org/UserChrome.css https://github.com/axydavid/FirefoxUI/blob/master/README.md https://github.com/wilfredwee/photon-australis https://www.reddit.com/r/FirefoxCSS/ Note not all code in one place. The other Browser is : https://www.mozilla.org/en-US/firefox/developer/ Please let us know if this solved your issue or if need further assistance.

Helpful Reply

You misunderstand. I went back to v.56 because the Tab Strip in that version is already like I want it. The v.57 upgrade totally screwed the Tab Strip up by changing the appearance from black on grey to white on black, making the text and icons both smaller, and changing the art of the tabs to simple rectangles. Most tabs do not contain enough letters to identify the contents, and those that do are illegible without using a magnifying glass. I tried one of the links you provided, Theme Font & Size Changer, and it did not work. The problem is explained in the Extension: "Because of the new extension system on Firefox, most of the functionality of the Theme Font & Size Changer is not available any more. You can read more about this new system here." I have never used Chrome, so I have no way to choose from among the many links you have listed, plus it appears that many of them are links to the Chrome application which I do not have. And I doubt that the Developer Browser would help unless it already has a pre-white-on-black Tab Strip. The closest I ever came to coding was a one-week HTML course I took about 15 years ago, so I need more help than you may have thought. I will put up with v.57 (magnifying glass in hand) until I hear from someone with a useful solution. If that does not happen within a reasonable time, I will be forced to return to the only solution that has worked for me, and return to v.56. Despite Pkshadow's condemnation of my ignorance. At least I am smart enough to know that I won't be "force updated to 57." Since I normally keep a lot of tabs open, and am guessing that most people don't, I am attaching screenshots showing the Tab Strips I see in both versions.

After looking at both screenshots on the same screen at the same scale, it seems that I was wrong about the text and icons being smaller in v.57. They just look smaller because of the black background. But the black tabs themselves are clearly much smaller and less legible, besides truncating most of the text.

You misunderstand. I went back to v.56 because the Tab Strip in that version is already like I want it. The v.57 upgrade totally screwed the Tab Strip up by changing the appearance from black on grey to white on black, making the text and icons both smaller, and changing the art of the tabs to simple rectangles. Most tabs do not contain enough letters to identify the contents, and those that do are illegible without using a magnifying glass. I tried one of the links you provided, Theme Font & Size Changer, and it did not work. The problem is explained in the Extension: "Because of the new extension system on Firefox, most of the functionality of the Theme Font & Size Changer is not available any more. You can read more about this new system here." I have never used Chrome, so I have no way to choose from among the many links you have listed, plus it appears that many of them are links to the Chrome application which I do not have. And I doubt that the Developer Browser would help unless it already has a pre-white-on-black Tab Strip. The closest I ever came to coding was a one-week HTML course I took about 15 years ago, so I need more help than you may have thought. I will put up with v.57 (magnifying glass in hand) until I hear from someone with a useful solution. If that does not happen within a reasonable time, I will be forced to return to the only solution that has worked for me, and return to v.56. Despite Pkshadow's condemnation of my ignorance. At least I am smart enough to know that I won't be "force updated to 57." Since I normally keep a lot of tabs open, and am guessing that most people don't, I am attaching screenshots showing the Tab Strips I see in both versions. After looking at both screenshots on the same screen at the same scale, it seems that I was wrong about the text and icons being smaller in v.57. They just look smaller because of the black background. But the black tabs themselves are clearly much smaller and less legible, besides truncating most of the text.

Modified by Perdicus

Scribe 680 solutions 3274 answers

Chosen Solution

Hi, you can change the tab colour etc: 3-bar menu > Customize > Themes (and Density) - at the bottom of the page (click Done to save). You can also drag buttons to different locations if you wish - Customize Firefox controls, buttons and toolbars.

Hi, you can change the tab colour etc: 3-bar menu > Customize > Themes (and Density) - at the bottom of the page (click Done to save). You can also drag buttons to different locations if you wish - [[Customize Firefox controls, buttons and toolbars]].

Question owner

Thank you Scribe; you have solved my problem. And the solution was simple. It just required the proper knowledge.

Thank you Scribe; you have solved my problem. And the solution was simple. It just required the proper knowledge.
jscher2000
  • Top 10 Contributor
7373 solutions 60035 answers

Helpful Reply

Hi Perdicus, to address one other thing you mentioned:

You can prevent Firefox from making the tabs so narrow by changing a setting here:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.

(2) In the search box above the list, type or paste tabm and pause while the list is filtered

(3) Double-click the browser.tabs.tabMinWidth preference and enter the desired value. Firefox 57 has a default of 76. The minimum in Firefox 56 was 100. You can try different values and see how you like them. (Firefox will ignore values lower than 50, however.)

Hi Perdicus, to address one other thing you mentioned: You can prevent Firefox from making the tabs so narrow by changing a setting here: (1) In a new tab, type or paste '''about:config''' in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk. (2) In the search box above the list, type or paste '''tabm''' and pause while the list is filtered (3) Double-click the '''browser.tabs.tabMinWidth''' preference and enter the desired value. Firefox 57 has a default of 76. The minimum in Firefox 56 was 100. You can try different values and see how you like them. (Firefox will ignore values lower than 50, however.)

Question owner

Thanks jscher2000. I was prepared to put up with the narrow tabs, but your solution worked perfectly. I don't mind exploring "dangerous" places; I was a guy who used to play with resedit if you're a mac user old enough to remember what that means.

Thanks jscher2000. I was prepared to put up with the narrow tabs, but your solution worked perfectly. I don't mind exploring "dangerous" places; I was a guy who used to play with resedit if you're a mac user old enough to remember what that means.
boxfreindFF 0 solutions 10 answers

jscher2000 said

Hi Perdicus, to address one other thing you mentioned: You can prevent Firefox from making the tabs so narrow by changing a setting here: (1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk. Thank you jscher2000, I was unaware Mozilla had reintroduced this option. Wonderful! (2) In the search box above the list, type or paste tabm and pause while the list is filtered (3) Double-click the browser.tabs.tabMinWidth preference and enter the desired value. Firefox 57 has a default of 76. The minimum in Firefox 56 was 100. You can try different values and see how you like them. (Firefox will ignore values lower than 50, however.)

Thank you jscher2000, I was not aware that Mozilla had brought this option back. Wonderful!

''jscher2000 [[#answer-1061884|said]]'' <blockquote> Hi Perdicus, to address one other thing you mentioned: You can prevent Firefox from making the tabs so narrow by changing a setting here: (1) In a new tab, type or paste '''about:config''' in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk. Thank you jscher2000, I was unaware Mozilla had reintroduced this option. Wonderful! (2) In the search box above the list, type or paste '''tabm''' and pause while the list is filtered (3) Double-click the '''browser.tabs.tabMinWidth''' preference and enter the desired value. Firefox 57 has a default of 76. The minimum in Firefox 56 was 100. You can try different values and see how you like them. (Firefox will ignore values lower than 50, however.) </blockquote> Thank you jscher2000, I was not aware that Mozilla had brought this option back. Wonderful!

Modified by boxfreindFF

pijo123456 0 solutions 1 answers

Perdicus said

The new v.57 user interface, and in particular the Tab Strip, are totally unusable. The ugly new white-on-black tab buttons are totally unusable by someone like me who keeps a lot of tabs open at all times. The tiny black rectangles only hold maybe one or two letters, and the icons are so small that most are unrecognizable. I tried increasing the text size as your referenced article suggested, but the text only got larger BELOW the Tab Strip. No help. So I have returned to v.56.0.2. I don't care how much faster you claim v.57.0.3 may be; if I cannot easily use my Tab Strip, and if it remains the ugly white on black, tiny plain rectangle format reminiscent of the hated MS DOS, I will not be "upgrading."


My 2 cents I use Firefox Quantum 60.0 64bits (May, 9, 2018). I was able to modify the look of my tabs (tab color, rounded corners, yellow or red font, larger space between tabs, ...) by a very simple process. If you want your tabs look like mine (see picture in attachment at the bottom of my post), create a new ".txt" file using Notepad. Name this file userChrome.css . Copy/paste the text below (without "citation") in your new "userChrome.css" file you just created . Be sure this file is named userChrome.css, NOT userChrome.txt

>>> No "userChrome.css" file yet ? See at the bottom of my post the paragraph How to create "chrome" folder and "userChrome.css" file.<<<

OR

Download directly my userChrome.css file >>>HERE<<<

"citation"

.tabbrowser-tab {
    box-sizing: border-box;
    margin: 0 2px 0 2px !important;
    border-radius: 15px 15px 0 0 !important;
}


.tabbrowser-tab .tab-text.tab-label {
    color: yellow !important;            /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-text.tab-label {
    color: red !important;            /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-background {
    border: 6px solid blue !important;  /* color is customizable */
    border-bottom: none !important;
    opacity: .1;
}


.tab-background {
    border: none !important;
    border-radius: 15px 15px 0 0 !important;
    background: red;
    opacity: .1;
}


.tab-line {                             /* = light top line in selected tab in Quantum default */
    display: none !important;
    border: 2px solid red !important;
}


.tabbrowser-tab:hover,
.tabbrowser-tab .tab-text.tab-label:hover {
    cursor: pointer !important;
}


.tabbrowser-tab:hover {
    border: 2px solid blue !important;
}


.tabbrowser-tab[selected="true"]:hover {
    border: 2px solid red !important;
}


[tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after {
    border: none !important;                /* leave as is; affects the New Tab icon (the plus) */
}


/* BOOKMARK ICON COLORIZATION */

#bookmarks-view treechildren::-moz-tree-image(container),
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon,
#bookmarksMenu menu[container="true"] .menu-iconic-icon {
    fill: #e2b80d !important;               /* #e2b80d; customizable */
    margin-right: 8px;                      /* correction for the Firefox default imperfection */
}

/* ADDRESS BAR ICONS CLEAN-UP */

#pageActionSeparator, #pocket-button, #pageActionButton {
    display: none !important;               /* customizable: delete if you want the objects back */
}

"citation"


CANNOT COPY TEXT ABOVE ? Download this userChrome.css file HERE and move it to your chrome folder inside your Profile Folder window. You can keep this window open.

Now restart Firefox to see the results.


How to create "chrome" folder and "userChrome.css" file :

Type or paste about:support in the address bar and press Enter/Return to load it.

In the first table on the page, find the Profile Folder row and click the button to the right, which will say "Open Folder". This should launch a new window with your system's file browser (e.g., Windows Explorer). You should see numerous files and folders.

Create a new folder named chrome

Normally, your profile does not contain a chrome folder unless you've been running Firefox for a very, very, very long time. To create a chrome folder, you can use the standard method provided by your file browser. For example, on Windows: - Right-click a blank area of the list, click New, then Folder. Type chrome (all lower case) as the name of this new folder, then press Enter or click away to complete the edit.

Move the "userChrome.css" file you just created inside this new "chrome" folder.

Restart Firefox to see the result.

DONE !!

Of course you can edit this userChrome.css file and modify the parameters (font color, tab color, space between tabs, rounded corners "border-radius" value, etc...) as you like. Don't forget to save everytime you modify parameters. Restart Firefox to see the results.

My advices : - Make first a backup of the original userChrome.css file in case of problem or messing-up. - Want to revert to Firefox default ? Delete this file and restart firefox. Simple !!


If you want larger tabs looking like mines (100 pixels large), go to : https://www.maketecheasier.com/28-coolest-firefox-aboutconfig-tricks/ Check for paragraph 2. Change Minimum Tab Width


Download directly my userChrome.css file >>>HERE<<<

Do you like my purple background (Firefox and desktop) ?? Download this theme >>>HERE<<<

Hope this may help.

''Perdicus [[#question-1198099|said]]'' <blockquote> The new v.57 user interface, and in particular the Tab Strip, are totally unusable. The ugly new white-on-black tab buttons are totally unusable by someone like me who keeps a lot of tabs open at all times. The tiny black rectangles only hold maybe one or two letters, and the icons are so small that most are unrecognizable. I tried increasing the text size as your referenced article suggested, but the text only got larger BELOW the Tab Strip. No help. So I have returned to v.56.0.2. I don't care how much faster you claim v.57.0.3 may be; if I cannot easily use my Tab Strip, and if it remains the ugly white on black, tiny plain rectangle format reminiscent of the hated MS DOS, I will not be "upgrading." </blockquote> '''My 2 cents''' I use Firefox Quantum 60.0 64bits (May, 9, 2018). I was able to modify the look of my tabs (tab color, rounded corners, yellow or red font, larger space between tabs, ...) by a very simple process. '''If you want your tabs look like mine''' (see picture in attachment at the bottom of my post), create a new ".txt" file using Notepad. Name this file '''userChrome.css''' . Copy/paste the text below (without "citation") in your new "userChrome.css" file you just created . Be sure this file is named '''userChrome.css''', NOT '''userChrome.txt''' >>> No "userChrome.css" file yet ? See at the bottom of my post the paragraph '''How to create "chrome" folder and "userChrome.css" file'''.<<< OR Download directly my '''userChrome.css''' file [https://drive.google.com/drive/folders/1Xc2bQL1w9QDHnAiyAOY6zUtjMvYbb01d?usp=sharing >>>HERE<<<] "citation" <pre><nowiki>.tabbrowser-tab { box-sizing: border-box; margin: 0 2px 0 2px !important; border-radius: 15px 15px 0 0 !important; } .tabbrowser-tab .tab-text.tab-label { color: yellow !important; /* tab text color - customizable */ } .tabbrowser-tab[selected="true"] .tab-text.tab-label { color: red !important; /* tab text color - customizable */ } .tabbrowser-tab[selected="true"] .tab-background { border: 6px solid blue !important; /* color is customizable */ border-bottom: none !important; opacity: .1; } .tab-background { border: none !important; border-radius: 15px 15px 0 0 !important; background: red; opacity: .1; } .tab-line { /* = light top line in selected tab in Quantum default */ display: none !important; border: 2px solid red !important; } .tabbrowser-tab:hover, .tabbrowser-tab .tab-text.tab-label:hover { cursor: pointer !important; } .tabbrowser-tab:hover { border: 2px solid blue !important; } .tabbrowser-tab[selected="true"]:hover { border: 2px solid red !important; } [tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after, .tabbrowser-tab:hover::after, #tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after { border: none !important; /* leave as is; affects the New Tab icon (the plus) */ } /* BOOKMARK ICON COLORIZATION */ #bookmarks-view treechildren::-moz-tree-image(container), #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon, #PlacesToolbarItems menu[container="true"] .menu-iconic-left, #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon, #bookmarksMenu menu[container="true"] .menu-iconic-icon { fill: #e2b80d !important; /* #e2b80d; customizable */ margin-right: 8px; /* correction for the Firefox default imperfection */ } /* ADDRESS BAR ICONS CLEAN-UP */ #pageActionSeparator, #pocket-button, #pageActionButton { display: none !important; /* customizable: delete if you want the objects back */ }</nowiki></pre> "citation" ------------------------------------------------------------------------------------------------- CANNOT COPY TEXT ABOVE ? Download this '''userChrome.css''' file [https://drive.google.com/drive/folders/1Xc2bQL1w9QDHnAiyAOY6zUtjMvYbb01d?usp=sharing HERE] and move it to your '''chrome ''' folder inside your '''Profile Folder''' window. You can keep this window open. Now restart Firefox to see the results. ------------------------------------------------------------------------------------------------- '''How to create "chrome" folder and "userChrome.css" file''' : Type or paste '''about:support''' in the address bar and press Enter/Return to load it. In the first table on the page, find the '''Profile Folder''' row and click the button to the right, which will say "'''Open Folder'''". This should launch a new window with your system's file browser (e.g., Windows Explorer). You should see numerous files and folders. Create a new folder named '''chrome''' Normally, your profile does not contain a chrome folder unless you've been running Firefox for a very, very, very long time. To create a chrome folder, you can use the standard method provided by your file browser. For example, on Windows: - Right-click a blank area of the list, click '''New''', then '''Folder'''. Type '''chrome''' (all lower case) as the name of this new folder, then press Enter or click away to complete the edit. Move the "userChrome.css" file you just created inside this new "chrome" folder. Restart Firefox to see the result. DONE !! Of course you can edit this '''userChrome.css''' file and modify the parameters (font color, tab color, space between tabs, rounded corners "border-radius" value, etc...) as you like. Don't forget to '''save''' everytime you modify parameters. '''Restart Firefox''' to see the results. My advices : - Make first a backup of the original '''userChrome.css''' file in case of problem or messing-up. - Want to revert to Firefox default ? Delete this file and restart firefox. Simple !! ----------------------------------------------------------------------------------------------------------------------------------- If you want larger tabs looking like mines (100 pixels large), go to : https://www.maketecheasier.com/28-coolest-firefox-aboutconfig-tricks/ Check for paragraph '''2. Change Minimum Tab Width''' ------------------------------------------------------------------------------------------------------------------------------------ Download directly my '''userChrome.css''' file [https://drive.google.com/drive/folders/1Xc2bQL1w9QDHnAiyAOY6zUtjMvYbb01d?usp=sharing >>>HERE<<<] Do you like my purple background (Firefox and desktop) ?? Download this theme [https://drive.google.com/file/d/15ZvxQR2qyApczO5N36jylroicpMJiy0Y/view?usp=sharing >>>HERE<<<] Hope this may help.

Modified by pijo123456