New
#41
jfi: Also note, in case it is needed, besides setting both min & max tab width in Aris's userChrome, it is also possible to set a minimum width for the tabs using about:config > browser.tabs.tabMinWidth (default is 76px).
jfi: Also note, in case it is needed, besides setting both min & max tab width in Aris's userChrome, it is also possible to set a minimum width for the tabs using about:config > browser.tabs.tabMinWidth (default is 76px).
Thanks, that's very useful. I'm going to look at some very fine-tuning tomorrow but for now I'm just grateful to have got as far as I have towards what I wanted.
- - - Updated - - -
@Ghot may I impose on your patience one more time?
I've been thinking about some small final cosmetic tweaks, but I'm slightly daunted by the different folders in the main Chrome folder. When I wrote my userchrome.css file for the earlier Firefox I deliberately kept it simple, with all the coding in the one file. Checking the new Chrome folder I found two extra css files (my_userChrome.css and userContent.css) as well as three folders (config, css, and image).
Two of the tweaks I'd be interested in making are to change the colour of background of the tab bar and the colour of the tabs. This is what I had on my earlier Firefox:
I know how I did this myself but I'm not clear on where I should make these, and maybe any other, changes now. I'd be grateful for a pointer in the right direction.
Many thanks.
Last edited by Bert Coules; 20 Feb 2024 at 14:51.
Within Chrome\config\color_variables_classic-grey.css (as per Ghot's zip file),
you can set the colors of the navbar, menubar, active/other tabs etc. as shown by the indentations in the below example.
(You can keep the CSS indentations to easily identify your own changes).
Inside Chrome\config\custom_tab_text_settings.css,Code:/* Classic grey colors */ :root { --general_toolbar_color_toolbars: linear-gradient(#d4d0c8,#d4d0c8) !important; --general_toolbar_color_navbar: linear-gradient(#ffffff,#ffffff) !important; --general_toolbar_text_color: black !important; --general_toolbar_text_shadow: transparent !important; --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#708090,#708090) !important; --tabs_toolbar_border-tnot_normal_mode_size: 0px !important; --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color) !important; --colored_menubar_background_image: linear-gradient(#0078D6,#0078D6) !important; --colored_menubar_text_color: white !important; --statusbar_background_color: linear-gradient(#d4d0c8,#d4d0c8) !important; --statusbar_font_color: black !important; --classic_squared_tabs_active_tab: linear-gradient(to top,azure,azure,lightblue) !important; --classic_squared_tabs_hovered_tabs: linear-gradient(to top,#cac7c1,#d5d2cc,#e1ded8) !important; --classic_squared_tabs_other_tabs: linear-gradient(to top,#00FEFE,#00FEFE,aquamarine) !important; --classic_squared_tabs_unloaded_tabs: linear-gradient(to top, #00FEFE,#00FEFE,#00FEFE) !important; --classic_squared_tabs-border_size: 1px; --classic_squared_tabs-border1: #5f7181 !important; --classic_squared_tabs-border2: rgba(0,0,0,.2) !important; --classic_squared_tabs-border3: rgba(0,0,0,.5) !important; --classic_squared_tabs_new_tab_icon_color: black !important; --classic_squared_tabs_tab_text_color: black !important; --classic_squared_tabs_tab_text_shadow: transparent !important; --classic_squared_tabs_lwt-dark_active_tab: inherit !important; /* linear-gradient(blue, hsla(0,0%,60%,.5) 80%) */ --classic_squared_tabs_lwt-dark_hovered_tabs: linear-gradient(hsla(0,0%,80%,.5), hsla(0,0%,60%,.5) 80%) !important; --classic_squared_tabs_lwt-dark_other_tabs: linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 80%) !important; --classic_squared_tabs_lwt-bright_hovered_tabs: linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,45%,.6) 80%) !important; --classic_squared_tabs_lwt-bright_other_tabs: linear-gradient(aquamarine,aquamarine,aquamarine) !important; --classic_squared_tabs_lwt-bright_active_tab: inherit !important; /* linear-gradient(blue, hsla(0,0%,60%,.5) 80%) */ }
you can set the tab text color (and also disable the italic/shadow style if you don't need them) as shown in these extracts from custom_tab_text_settings.css.
Which should give you something like:Code:/*******************************************/ /* selected tab ****************************/ /* text color */ .tabbrowser-tab[selected] .tab-label { color: black !important; } /* text shadow */ /*.tabbrowser-tab[selected] .tab-label { text-shadow: 0px 1px 0px white, 0px 1px 4px white !important; }*/ /*bold*/ .tabbrowser-tab[selected] .tab-label { font-weight: bold !important; } /* italic *//* /*.tabbrowser-tab[selected] .tab-label { font-style: italic !important; }*/ /*******************************************/ /* unloaded/pending tab ********************/ /* text color */ .tabbrowser-tab[pending] .tab-label { color: black !important; } /* text shadow */ /*.tabbrowser-tab[pending] .tab-label { text-shadow: 0px 1px 0px white, 0px 1px 4px white !important; }*/ /*bold*/ .tabbrowser-tab[pending] .tab-label { font-weight: normal !important; } /* italic */ /*.tabbrowser-tab[pending] .tab-label { font-style: italic !important; }*/
You're welcome.
nb: To set the custom tab text settings, you may need to uncomment the following line in the main userChrome.css (if you want to make those tab text seetings).
uncomment this line if you want to alter the tab text settings (which I have implied in part 2 of my reply above).
As you may have gathered, uncommenting any such @import lines can allow you to further customize the related settings in more detail within that imported file. (The imported file path is relative to the Chrome folder).Code:@import "./config/custom_tab_text_settings.css"; /**/
Last edited by das10; 20 Feb 2024 at 15:36.
Any new custom code you want to add, should be put in the my_userChrome.css file.
When you start Firefox, it "reads" the userChrome.css file.
At the bottom of that file is a line which tells Firefox to ALSO read the my_userChrome.css file.
So any time you want to "add" any custom code... just add it to the my_userChrome.css file.
Thanks for clarifying that.
- - - Updated - - -
And so it has, and I've been able to add a few minor tweaks of my own. Great.
There are two remaining adjustments I'd like to make but after a lot of experimentation I've still not found the right method: I'd like to have a little more space between the tabs, and I'd like to increase the height of the tabs toolbar to give some headroom above the tabs. For the former, I added what I thought was the correct margin-right code to my_userChrome.css but it had no effect; and I simply don't know how to do the second. I'd appreciate any pointers in the right direction.
Many thanks.
Last edited by Bert Coules; 21 Feb 2024 at 05:11.
I couldn't find any setting in Aris's code to change the spaces you want (unless anybody else is able to), so...
For the spaces between the tabs, try appending "either one" of the following codes in "my_userChrome.css" file.
For the space between the tops of the tabs and the tab-bar itself, try experienting with the following code appended to "my_userChrome.css" file (change the px value as required-but note that you may need to use the same px values in all 3 sections -I have use 5px to test).Code:/* Alter gaps between all the tabs (Excluding pinned tabs) */ .tabbrowser-tab:not([pinned]) { padding-inline: 0.5px !important; /* adjust px size as needed here*/ } /* OR alternatively use this to show space between pinned tabs as well */ /* Alter gaps between all the tabs (Including pinned tabs) */ .tabbrowser-tab { padding-inline: 0.5px !important; /* adjust px size as needed here */ }
[If anyone else has any other ideas, please put them forward.]Code:/* Alter space between tabs and top of tab-bar - may also require changes to padding/margin to nav-bar and Bookmarks bar when it is shown (ie PersonalToolbar) The same "px" value all round seems to balance everything out. */ #TabsToolbar { padding-top: 5px !important; } #nav-bar { padding-bottom: 5px !important; } #PersonalToolbar { margin-block: -5px 5px !important; }