New
#291
I'm not exactly sure what you're talking about.
But the easiest way to get that spacing, is just use my Chrome folder (4.20) updated in first post.
And use my about:config settings. Then do your own tweaks from there.
Here's what my whole browser looks like. What does your whole browser look like?
Or... here is the code for the buttons and tabs in my userChrome.css
You can compare it to yours?
Code:/* ========================================== TOOLBAR BUTTONS (shape, appearance, icons) ========================================== */ /* --------------- ICON APPEARANCE --------------- [!] only use one option at a time [!] custom icon quality does not increase in HiDPI modes */ @import "./css/buttons/icons_colorized.css"; /**/ /* @import "./css/buttons/icons_white_icons.css"; /**/ /* @import "./css/buttons/icons_custom_icons.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx1.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx2.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx3.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx3strata.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx12_colorized.css"; /**/ /* @import "./css/buttons/icons_custom_icons_crystal.css"; /**/ /* @import "./css/buttons/icons_custom_icons_firebird.css"; /**/ /* @import "./css/buttons/icons_custom_icons_kempelton.css"; /**/ /* @import "./css/buttons/icons_custom_icons_noia.css"; /**/ /* @import "./css/buttons/icons_custom_icons_ie6.css"; /**/ /* @import "./css/buttons/icons_custom_icons_seamonkey.css"; /**/ /* @import "./css/buttons/icons_custom_icons_old_chrome.css"; /**/ /* @import "./css/buttons/icons_custom_icons_old_osx.css"; /**/ /* @import "./css/buttons/icons_custom_icons_tango.css"; /**/ @import "./css/buttons/icons_custom_icons_fx45.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx45_inverted.css"; /**/ /* ----------------- BUTTON APPEARANCE ----------------- */ /* 'Classic' pre-Proton button padding */ /* @import "./css/buttons/classic_button_padding.css"; /**/ /* ------------------------------------- Navigation toolbar buttons appearance ------------------------------------- [!] only use one option at a time [!] good for Dark themes: buttons_on_navbar_classic_appearance_dark.css [!] good for Dark themes: buttons_on_navbar_glass_appearance.css */ /* @import "./css/buttons/buttons_on_navbar_classic_appearance.css"; /**/ @import "./css/buttons/buttons_on_navbar_classic_appearance_v2.css"; /**/ /* @import "./css/buttons/buttons_on_navbar_classic_appearance_dark.css"; /**/ /* @import "./css/buttons/buttons_on_navbar_aero_appearance.css"; /**/ /* @import "./css/buttons/buttons_on_navbar_windows_classic_theme_appearance.css"; /**/ /* @import "./css/buttons/buttons_on_navbar_glass_appearance.css"; /**/ /* @import "./css/buttons/buttons_on_navbar_osx_appearance.css"; /**/ /* ------------------------------------- Navigation toolbar buttons: roundness ------------------------------------- [!] edit file to set roundness */ /* @import "./css/buttons/buttons_on_navbar_button_roundness.css"; /**/ /* ----------------------------- Squared buttons / button size ----------------------------- [!] edit file to set roundness */ /* 'rectangular shape' - normal size */ /* @import "./css/buttons/buttons_on_navbar_squared_buttons.css"; /**/ /* 'normal shape' - large size (huge 48x48px buttons with 36x36px icons) [!] EXPERIMENTAL [!] not compatible with 'custom icon' options [!] not compatible with 'custom back & forward buttons' appearance options [!] not compatible with 'text mode' option [!] partly compatible with 'icons+text' option, if in 'compact mode' */ /* @import "./css/buttons/buttons_on_navbar_huge_48px_size.css"; /**/ /* smaller button spaces in 'compact' mode - 'Classic Toolbar Buttons' add-ons 'small' mode [!] 'compact mode' got hidden behind the about:config preference browser.compactmode.show */ /* @import "./css/buttons/buttons_on_navbar_more_compact_mode.css"; /**/ /* ------------------------------------ Bookmarks toolbar: button appearance ------------------------------------ [!] only use one option at a time [!] Windows 7-10 only: buttons_on_bookmarks_toolbar_old_size_and_appearance.css */ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_classic_appearance.css"; /**/ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_classic_appearance_dark.css"; /**/ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_aero_appearance.css"; /**/ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_old_size_and_appearance.css"; /**/ /* --------------------------------------------- Bookmarks toolbar: bookmarks items appearance --------------------------------------------- [!] only use one option at a time */ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_classic_appearance_items.css"; /**/ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_classic_appearance_items_dark.css"; /**/ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_aero_appearance_items.css"; /**/ /* ------------------------------- Menu toolbar: button appearance ------------------------------- */ /* @import "./css/buttons/buttons_on_menubar_toolbar_classic_appearance.css"; /**/ /* ------------------------------- Tabs toolbar: button appearance ------------------------------- [!] EXPERIMENTAL */ /* @import "./css/buttons/buttons_on_tabs_toolbar_classic_appearance.css"; /**/ /* --------------------------------------------------- Bookmarks menu button - 'button & popup' appearance --------------------------------------------------- */ @import "./css/buttons/bookmarks_menu_button_localized_label_on_bookmarks_toolbar.css"; /**/ /* @import "./css/buttons/bookmarks_menu_button_popup_showall_top_hidden.css"; /**/ /* @import "./css/buttons/bookmarks_menu_button_popup_showall_bottom_hidden.css"; /**/ /* @import "./css/buttons/bookmarks_menu_button_popup_sidebar_item_hidden.css"; /**/ /* @import "./css/buttons/bookmarks_menu_button_popup_toolbar_item_hidden.css"; /**/ /* @import "./css/buttons/bookmarks_menu_button_popup_other_item_hidden.css"; /**/ /* ---------------------- Other buttons settings ---------------------- */ @import "./css/buttons/whatnew_button_always_hidden.css"; /**/ /* @import "./css/buttons/forward_button_hide_when_disabled.css"; /**/ /* @import "./css/buttons/back_and_forward_separated_history_popups.css"; /**/ /* @import "./css/buttons/back_and_forward_leftclick_history_popup_hidden.css"; /**/ /* @import "./css/buttons/zoom_buttons_hide_reset.css"; /**/ /* @import "./css/buttons/overflow_button_rotate_on_open.css"; /**/ /* ---------------------------------------- CUSTOM BACK & FORWARD BUTTONS appearance ---------------------------------------- [!] only use one option at a time */ /* @import "./css/buttons/custom_backforward_large_ff2.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ff3.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ff3_strata.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ff3_strata_v2.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ff3_strata_orange.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ff3_strata_red.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ie8.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ie9.css"; /**/ /* @import "./css/buttons/custom_backforward_large_kempelton.css"; /**/ /* @import "./css/buttons/custom_backforward_large_noia.css"; /**/ /* @import "./css/buttons/custom_backforward_small_ff3.css"; /**/ /* @import "./css/buttons/custom_backforward_small_ff3_strata.css"; /**/ /* @import "./css/buttons/custom_backforward_small_ff3_strata_orange.css"; /**/ /* @import "./css/buttons/custom_backforward_small_ff3_strata_red.css"; /**/ /* @import "./css/buttons/custom_backforward_small_ie8.css"; /**/ /* @import "./css/buttons/custom_backforward_small_ie9.css"; /**/ /* @import "./css/buttons/custom_backforward_small_kempelton.css"; /**/ /* @import "./css/buttons/custom_backforward_connected.css"; /**/ /* round */ /* @import "./css/buttons/custom_backforward_connected_to_location_bar.css"; /**/ /* round */ /* @import "./css/buttons/custom_backforward_connected_alt.css"; /**/ /* squared*/ /* @import "./css/buttons/custom_backforward_connected_to_location_bar_alt.css"; /**/ /* squared*/ /* ========================================== APPLICATION / HAMBURGER / MAIN MENU BUTTON ========================================== */ /* ----------------------------------- Application/hamburger button hidden ----------------------------------- [!] disable all other appbutton options when using this option */ @import "./css/appbutton/appbutton_hidden.css"; /**/ /* ---------------------------------- Application/hamburger button popup ---------------------------------- */ @import "./css/appbutton/appbutton_popup_icons.css"; /**/ @import "./css/appbutton/appbutton_popup_icons_colorized.css"; /**/ /* @import "./css/appbutton/appbutton_popup_sync_hidden.css"; /**/ /* @import "./css/appbutton/appbutton_popup_logins_and_passwords_hidden.css"; /**/ /* ---------------------------------------------------------------- Application / hamburger / main menu button on navigation toolbar ---------------------------------------------------------------- [!] disable all 'button in Firefox titlebar' options for 'button on navigation toolbar' options to work properly */ /* ----------------------------------- Button on navigation toolbars start ----------------------------------- */ /* @import "./css/appbutton/appbutton_on_navbar_start_position.css"; /**/ /* ----------------------------------- Button on navigation toolbar: color ----------------------------------- [!] only use one option at a time */ /* @import "./css/appbutton/appbutton_on_navbar_color_autocolor.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_autocolor57p.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_orange.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_aurora.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_nightly.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_deved57p.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_nightly57p.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_palemoon.css"; /**/ /* ----------- Button icon ----------- [!] only use one option at a time */ /* @import "./css/appbutton/appbutton_on_navbar_icon_white.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_icon_dark.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_icon_grey.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_icon_browser_logo.css"; /**/ /* ------------ Button label ------------ [!] show label and icon */ /* @import "./css/appbutton/appbutton_on_navbar_icon_and_label.css"; /**/ /* -------------------------------------------------------------- Application / hamburger / main menu button in Firefox titlebar -------------------------------------------------------------- [!] disable all 'button on navigation toolbar' options for 'button in Firefox titlebar' options to work properly */ /* ----------------------------------------------- Button in titlebar: label / icon / label + icon ----------------------------------------------- [!] only use one option at a time */ /* label only */ @import "./css/appbutton/appbutton_in_titlebar.css"; /**/ /* icon only */ /* @import "./css/appbutton/appbutton_in_titlebar_icon_only.css"; /**/ /* label + icon */ /* @import "./css/appbutton/appbutton_in_titlebar_label_and_icon.css"; /**/ /* ----------------------------------- Button in titlebar: icon appearance ----------------------------------- [!] only use one option at a time [!] requires 'appbutton_in_titlebar_icon_only.css' to be active */ /* @import "./css/appbutton/appbutton_in_titlebar_icon_only_dark.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_icon_only_grey.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_icon_only_browser_logo.css"; /**/ /* ------------------------------------------------------------------------- Button in titlebar: MacOS fix - move 'appbutton in titlebar' to the right ------------------------------------------------------------------------- */ /* @import "./css/appbutton/appbutton_in_titlebar_macOS_fix.css"; /**/ /* ------------------------- Button in titlebar: color ------------------------- [!] only use one option at a time */ @import "./css/appbutton/appbutton_in_titlebar_autocolor.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_autocolor57p.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_transparent.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_semi_transparent.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_aurora.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_nightly.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_deved57p.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_nightly57p.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_palemoon.css"; /**/ /* ============== TAB appearance ============== [!] only use one option at a time [!] custom tab colors are set inside color_variablesXXX.css file(s) */ /* Classic tabs appearance known from Firefox 4-28 */ @import "./css/tabs/classic_squared_tabs.css"; /**/ /* Classic tabs appearance known from Firefox 4-28 for active tab only */ /* @import "./css/tabs/classic_squared_tabs_australized.css"; /**/ /* Default tabs with increased contrast for non-active tabs */ /* @import "./css/tabs/default_tabs_enhanced.css"; /**/ /* Tab appearance known from Firefox 57 - 88 */ /* @import "./css/tabs/default_tabs_photon.css"; /**/ /* ====================================================================================== TABS TOOLBAR POSITION (below titlebar / below navigation toolbar / below main content) ====================================================================================== [!] only use one option at a time [!] only use BELOW TITLEBAR or BELOW NAVIGATION BAR or BELOW MAIN CONTENT */ /* --------------------------------------------- TABS BELOW TITLEBAR (Fx56-like tabs position) --------------------------------------------- */ /* @import "./css/tabs/tabs_below_titlebar_above_navigation_toolbar.css"; /**/ /* -------------------------------------------------------------- TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS / TABS NOT ON TOP -------------------------------------------------------------- [!] Note: only 'alt' works with multi-tab lines option. [!] Note: might require overriding url bars 'selection color' --> see corresponding area */ /* Windows/Linux */ @import "./css/tabs/tabs_below_navigation_toolbar.css"; /**/ /* MacOS */ /* @import "./css/tabs/tabs_below_navigation_toolbar_macOS.css"; /**/ /* Alternative for multi-lined tabs (Glitches might occur with inactive menubar!) [!] use option below for multiple tab lines support */ /* @import "./css/tabs/tabs_below_navigation_toolbar_alt.css"; /**/ /* [!] no menubar when OS titlebar is active */ /* @import "./css/tabs/tabs_below_navigation_toolbar_alt_force_hidden_menubar.css"; /**/ /* @import "./css/tabs/tabs_below_navigation_toolbar_alt_macOS.css"; /**/ /* Move tabs to a higher position [!] not compatible to 'tabs toolbar - multiple tab lines' option [!] only use one option at a time [!] EXPERIMENTAL */ /* @import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon.css"; /**/ /* @import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon_with_appbutton.css"; /**/ /* @import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon_with_appbutton_icon_only.css"; /**/ /* ---------------------------------------- TABS BELOW MAIN CONTENT (TABS ON BOTTOM) ---------------------------------------- [!] not compatible to 'tabs toolbar - multiple tab lines' option */ /* Use this when on Windows/Linux */ /* @import "./css/tabs/tabs_below_main_content.css"; /**/ /* Use this when on MacOS */ /* @import "./css/tabs/tabs_below_main_content_macOS.css"; /**/ /* -------------------------------------------------------------------------------- TAB BACKGROUND COLORS for default/active/hovered/unloaded tabs and 'new tab' tab -------------------------------------------------------------------------------- */ /* Edit target file to set own custom colors */ /* @import "./config/custom_tab_color_settings.css"; /**/ /* TAB TEXT colors/shadow/weight/style for default/active/hovered/unloaded tabs [!] Edit target file to set own custom colors */ /* @import "./config/custom_tab_text_settings.css"; /**/ /* ------------------------------------------ MULTIROW / multi lined tabs - EXPERIMENTAL ------------------------------------------ [!] only use one option at a time [!] BUG: dragging tabs does not work with multi lined tabs [!] not compatible with 'tabs toolbar - below main content' option [!] only compatible with 'tabs below navigation toolbar alt version' */ /* @import "./css/tabs/tabs_multiple_lines.css"; /**/ /* @import "./css/tabs/tabs_multiple_lines_force_newtab_button_visibility.css"; /**/ /* --------------------------------- Restore empty/missing tab favicon --------------------------------- [!] only use one option at a time */ @import "./css/tabs/missing_tab_favicon_restored_default.css"; /**/ /* @import "./css/tabs/missing_tab_favicon_restored_globe_v2.css"; /**/ /* @import "./css/tabs/missing_tab_favicon_restored_sheet.css"; /**/ /* @import "./css/tabs/missing_tab_favicon_restored_dotted.css"; /**/ /* @import "./css/tabs/missing_tab_favicon_restored_dotted_white.css"; /**/ /* @import "./css/tabs/missing_tab_favicon_restored_brand_logo.css"; /**/ /* ---------------------------- Custom tab loading animation ---------------------------- [!] only use one option at a time */ /* @import "./css/tabs/tab_throbber_blue_fx56.css"; /**/ /* @import "./css/tabs/tab_throbber_blue.css"; /**/ /* @import "./css/tabs/tab_throbber_grey_classic.css"; /**/ /* @import "./css/tabs/tab_throbber_green.css"; /**/ /* @import "./css/tabs/tab_throbber_orange_ubuntu.css"; /**/ /* ----------------------- Tab close icon settings ----------------------- [!] only use one option at a time */ @import "./css/tabs/tab_close_always_visible.css"; /**/ /* @import "./css/tabs/tab_close_on_active_tab_only.css"; /**/ /* @import "./css/tabs/tab_close_show_on_hover_only.css"; /**/ /* @import "./css/tabs/tab_close_hidden.css"; /**/ /* @import "./css/tabs/tab_close_hidden_for_only_one_visible_tab.css"; /**/ /* @import "./css/tabs/tab_close_at_tabs_start.css"; /**/ /* @import "./css/tabs/tab_close_icon_size.css"; /**/ /* ------------------ Tab title settings ------------------ [!] only use one option at a time */ /* @import "./css/tabs/tab_title_left.css"; /**/ /* @import "./css/tabs/tab_title_centered.css"; /**/ /* @import "./css/tabs/tab_title_right.css"; /**/ /* ------------------------------------------------ DEFAULT TABS - settings for default browser tabs ------------------------------------------------ [!] only use one option at a time [!] use only, if 'classic squared tabs' are disabled */ /* @import "./css/tabs/default_tabs_no_tab_line.css"; /**/ /* @import "./css/tabs/default_tabs_tab_line_red_for_unloaded_tabs.css"; /**/ /* @import "./css/tabs/default_tabs_tab_line_purple_in_private_mode.css"; /**/ /* ------------------ OTHER TAB SETTINGS ------------------ */ @import "./css/tabs/tab_icon_colors.css"; /**/ /* @import "./css/tabs/default_tabs_reduce_spaces.css"; /**/ /* @import "./css/tabs/tabs_fully_squared.css"; /**/ /* @import "./css/tabs/tab_audio_icon.css"; /**/ /* @import "./css/tabs/tab_audio_icon_colorized.css"; /**/ /* @import "./css/tabs/tabs_container_indicator_for_classic_squared_tabs.css"; /**/ /* @import "./css/tabs/tabs_active_tab_indicator_for_classic_squared_tabs.css"; /**/ /* @import "./css/tabs/newtab_tab_size_equals_tab_size.css"; /**/ /* @import "./css/tabs/newtab_button_always_visible.css"; /**/ /* @import "./css/tabs/tab_icon_inactive_tabs_lower_opacity.css"; /**/ /* @import "./css/tabs/tab_icon_unloaded_tabs_lower_opacity.css"; /**/ /* @import "./css/tabs/tab_maxwidth.css"; /**/ /* @import "./css/tabs/tab_titles_remove_blur.css"; /**/ /* @import "./css/tabs/alltabs_button_always_visible.css"; /**/ /* hidden, if multiple tab rows are used */ /* @import "./css/tabs/pinnedtab_empty_favicon_hidden.css"; /**/ /* [!] edit target file to select which items to hide */ /* @import "./css/tabs/tab_context_menuitems_visibility.css"; /**/
There's a few different kinds of "Tabs on Bottom"
There's...
1. Tabs under Title Bar
2. Tabs under URL bar <------ the one I use.
3. Tabs all the way at the bottom of the browser window.
I don't know which you are referring to.
Also... on the Customize page, I use Compact Density, which requires an about:config setting to even show up or work. Namely: browser.compactmode.show = True
For some of these various settings, I can't really say... this setting by itself, does so and so.
Some I only know because I've added them on top of others.
So for most things I can only help if you start from where I am with my tweaks.
Or to put it another way... do my tweaks then add your own on top of mine.
That's why I try to keep updating the first post, so I have a record of the things I've done.
This topic is like... cloud storage for my Firefox tweaks.
Now @das10 actually understands CSS code better than probably anyone else.
Last edited by Ghot; 21 Nov 2022 at 08:35.