Firefox... taming the beast part 2 !!

Page 30 of 31 FirstFirst ... 2028293031 LastLast

  1. Posts : 19,863
    Win 10 Home ♦♦♦19045.2546 (x64) [22H2]
    Thread Starter
       #291

    Anak said:
    It took a bit of doin' but I have TOB or tob (tabs on bottom) and no horzon-bar. . .

    Though one 'thing', Could you point me to the code to increase the spacing between the bookmarks toolbar and the tabs? I have problems with translating what the code says to behavior of the browser.

    Attachment 379649



    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?

    Firefox... taming the beast part 2 !!-image1.png



    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


    Firefox... taming the beast part 2 !!-image1.png



    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.
      My Computer


  2. Posts : 1,605
    10 Home 64-bit | v22H2 | Build - 19045.2486
       #292

    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.
    I have.

    Here's mine, sorry about it being trimmed:
    Firefox... taming the beast part 2 !!-image-1-01.jpg

    Thx for the code area, I see you don't run the bkmrks toolbar, removed mine and the spacing was more intrusive into the url bar.

    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.
    I have a hybrid of #2 - 2.1 Tabs under URL and Bookmarks bars.

    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
    What I have.

    Looks like I have my work cut out but I have to roll an get things done, not sure when I'll get back.
      My Computers


  3. Posts : 19,863
    Win 10 Home ♦♦♦19045.2546 (x64) [22H2]
    Thread Starter
       #293

    Anak said:
    I have.

    Here's mine, sorry about it being trimmed:
    Firefox... taming the beast part 2 !!-image-1-01.jpg

    Thx for the code area, I see you don't run the bkmrks toolbar, removed mine and the spacing was more intrusive into the url bar.

    I have a hybrid of #2 - 2.1 Tabs under URL and Bookmarks bars.

    What I have.

    Looks like I have my work cut out but I have to roll an get things done, not sure when I'll get back.



    I can't tell what that stuff is between your URL bar and the Tabs.
    I don't have that, so I can't really test to see what affects it.


    Also... these are the rest of my Customize settings...

    Firefox... taming the beast part 2 !!-image1.png






    NOTE: I also notified Aris-t2 on Github about this.

    General questions and feedback belong here! . Discussion #454 . Aris-t2/CustomCSSforFx . GitHub
    Last edited by Ghot; 21 Nov 2022 at 12:03.
      My Computer


  4. Posts : 3,207
    Win10
       #294

    Since I don't use Aris's Chrome settings, I tried to replicate as near as possible, what Anak could be using, apart from some details by setting up Aris's UserChrome settings, to test one method of getting extra margin between the Bookmarks Toolbar (or the Nav Bar when not using the Bookmarks Toolbar) and the Tab bar.

    I don't know if it will work for Anak, but this is what happens if I introduce the relevant code into UserChrome.css (I inserted the code right at the bottom of UserChrome.css for testing).

    Code:
    /* change the TABS TOOLBAR position etc. -using exaggerated -10px value to see effect */
    toolbar#TabsToolbar
    {margin-bottom: -10px !important;}
    If the particular .css file that you are using for Tabs (in the UserChrome sub-folders) contains the margin code, you could see if adjusting the value there ever so slightly has the desired effect.

    Firefox... taming the beast part 2 !!-ff1.pngFirefox... taming the beast part 2 !!-ff2.png
      My Computers


  5. Posts : 1,605
    10 Home 64-bit | v22H2 | Build - 19045.2486
       #295

    @Ghot,
    I spent some time comparing the code list, I made some changes but had to go back. Checked, double-checked the about:config settings, nothin' .

    Then I remembered those density settings you mentioned on the customize tab. I was on Compact (not supported) and changed them to test.

    This 1st pix left, is set to compact (not supported)
    2nd right, is set to normal it got a smidge better
    Firefox... taming the beast part 2 !!-2022-11-21_134826.jpg
    Firefox... taming the beast part 2 !!-2022-11-21_135154-3_4.jpg
    3rd left, is set to touch and it's too high but the view icon looks better
    4th right, is after I dragged the FF view icon/button back into the customize list
    Apologies for the different scale.

    So I believe the padding of the view icon was the problem look at how puffed up it is there to the left of the tabs.
    I looked for any code or setting but didn't find one but once I placed it back in the customize list the spacing sorted itself out.
    This is the new look:
    Firefox... taming the beast part 2 !!-ff107.png

    I'm gonna look into changing the padding on those buttons on the url bar, they're too big for my taste. Went back to compact on the density they're still big but they don't look like marshmallows anymore.

    @das10
    I saw that code else where but wasn't sure how to apply it in the userchrome file so I didn't try it, now I know it's okay to put it at the bottom.
    Do you think that's okay or should it be in with it's cousins?

    Thx for your help guys!
    Last edited by Anak; 23 Nov 2022 at 10:19. Reason: grammar | spelling
      My Computers


  6. Posts : 19,863
    Win 10 Home ♦♦♦19045.2546 (x64) [22H2]
    Thread Starter
       #296

    @Anak

    You put @das10's code in: my_userChrome.css file

    And in the bottom of userChrome.css file you "tell" it to look in the my_userChrome.css file



    Firefox... taming the beast part 2 !!-image3.png






    Just copy/paste this code into the: my_userChrome.css file

    Code:
    /* change the TABS TOOLBAR position etc. -using exaggerated -10px value to see effect */
    toolbar#TabsToolbar
    {margin-bottom: -10px !important;}


    You can change the -10px to whatever size you like the best.
    Probably -4px or -6px
      My Computer


  7. Posts : 1,605
    10 Home 64-bit | v22H2 | Build - 19045.2486
       #297

    Ghot said:
    You can change the -10px to whatever size you like the best.
    Probably -4px or -6px
    I left it at -4, it gives the bar a cleaner/more crispy look.
      My Computers


  8. Posts : 19,863
    Win 10 Home ♦♦♦19045.2546 (x64) [22H2]
    Thread Starter
       #298

    Anak said:
    I left it at -4, it gives the bar a cleaner/more crispy look.


      My Computer


  9. Posts : 1,029
    Windows 10 Pro x 2
       #299

    @Ghot

    I dont know if you already knew this but I discovered a new "about:config" setting to control the DPI setting of Firefox independent of Windows DPI settings. My Windows setting is 1920 x 1080 @ 150% DPI which makes the Address Bar and Icons Huge so I set Firefox at 125% DPI. to make them look smaller like Classic Firefox. Also you may have to click on both the default and changed images to notice the difference.

    Type about:config in the address bar > layout.css.devPixelsPerPx > Edit (pencil) > change value from default - 1.0 to 1.0 for 100% DPI or 1.25 for 125% DPI

    Firefox... taming the beast part 2 !!-2022-11-30_03-41-35-1.0.jpgFirefox... taming the beast part 2 !!-2022-11-30_03-34-31-1.0.jpg
    Default Setting

    Firefox... taming the beast part 2 !!-2022-11-30_03-41-35-1.25.jpgFirefox... taming the beast part 2 !!-2022-11-30_03-47-54-1.25.jpg
    Changed setting to 1.25 or 125% DPI which made the icons and webpage text smaller.

    Note I also use the addon "ZoomPage WE" so I could get the smaller icons I want with the about:config setting but control the zoom level of the page and text seperately with the addon.

    Firefox... taming the beast part 2 !!-zp-gen.jpgFirefox... taming the beast part 2 !!-zp-levels.jpg
      My Computers


  10. Posts : 19,863
    Win 10 Home ♦♦♦19045.2546 (x64) [22H2]
    Thread Starter
       #300

    @IownAmoneyPit


    There's also a zoom function already available in the Firefox "Customise" window.
    If you click on the percent value in the middle, the magnification will return to 100%
    Firefox... taming the beast part 2 !!-image1.png

    By right-clicking almost anywhere at top of browser...
    Firefox... taming the beast part 2 !!-image1.png


    Firefox... taming the beast part 2 !!-image1.png





    It has a whole bunch of preset zoom sizes.
    And if you need values that aren't in there, you can add them in about:config, here...

    toolkit.zoomManager.zoomValues .3,.5,.67,.8,.9,1,1.1,1.2,1.33,1.5,1.7,2,2.4,3,4,5

    For example, the values above, correspond to these magnifications...
    30%, 50%, 67%, 80%, 90%, 100%, 110%, 120%, 133%, 150%, 170%, 200%, 240%, 300%, 400%, 500%

    And you can add or remove whatever values you want to/from that list.

    You "can't" choose a value... below 30% or above 500%.
    But, any value in between can be added or removed.
    Last edited by Ghot; 30 Nov 2022 at 10:17.
      My Computer


 

  Related Discussions
Our Sites
Site Links
About Us
Windows 10 Forums is an independent web site and has not been authorized, sponsored, or otherwise approved by Microsoft Corporation. "Windows 10" and related materials are trademarks of Microsoft Corp.

© Designer Media Ltd
All times are GMT -5. The time now is 06:30.
Find Us




Windows 10 Forums