I haven't been around here much lately so I'm not up on the latest ...
Has anyone come up with a way to better differentiate the appearance of the active tab - via background or text color, making the thin outline more prominent, or other means?
FF 93 Active Tab
- makaiguy
- Posts: 16878
- Joined: November 18th, 2002, 6:44 pm
- Location: Somewhere in SE USA
- Contact:
FF 93 Active Tab
Doug Wilson
Win10 64bit: FF 124.0.2 64bit, TB 102.12.0 32-bit ║ Android 13/10: FF 124.2.0/115.9.0 ║ No TB for Android available, dammit!
What a fool believes he sees, no wise man has the power to reason away - Doobie Brothers
Win10 64bit: FF 124.0.2 64bit, TB 102.12.0 32-bit ║ Android 13/10: FF 124.2.0/115.9.0 ║ No TB for Android available, dammit!
What a fool believes he sees, no wise man has the power to reason away - Doobie Brothers
- dickvl
- Posts: 54163
- Joined: July 18th, 2005, 3:25 am
Re: FF 93 Active Tab
You can use userChrome.css, see:
https://www.userchrome.org/firefox-89-s ... #tabstyler
https://www.userchrome.org/firefox-89-s ... #tabstyler
- makaiguy
- Posts: 16878
- Joined: November 18th, 2002, 6:44 pm
- Location: Somewhere in SE USA
- Contact:
Re: FF 93 Active Tab
Nothing Ive tried adding to /chrome/userChrome.css has made any difference to active tab appearance.
This is on FF 93.0, 64-bit, on Win10 prof.
Latest attempt, added after my FF 89 tweaks for tabs on bottom:
/* Set color for active tab */
.tabbrowser-tab[selected] .tab-background::before {
background-color: #ffff00; !important;
}
This is on FF 93.0, 64-bit, on Win10 prof.
Latest attempt, added after my FF 89 tweaks for tabs on bottom:
/* Set color for active tab */
.tabbrowser-tab[selected] .tab-background::before {
background-color: #ffff00; !important;
}
Doug Wilson
Win10 64bit: FF 124.0.2 64bit, TB 102.12.0 32-bit ║ Android 13/10: FF 124.2.0/115.9.0 ║ No TB for Android available, dammit!
What a fool believes he sees, no wise man has the power to reason away - Doobie Brothers
Win10 64bit: FF 124.0.2 64bit, TB 102.12.0 32-bit ║ Android 13/10: FF 124.2.0/115.9.0 ║ No TB for Android available, dammit!
What a fool believes he sees, no wise man has the power to reason away - Doobie Brothers
- dickvl
- Posts: 54163
- Joined: July 18th, 2005, 3:25 am
Re: FF 93 Active Tab
Code: Select all
.tab-background[multiselected="true"], .tab-background[selected="true"] {
background-color: #ffff00; !important;
}
- makaiguy
- Posts: 16878
- Joined: November 18th, 2002, 6:44 pm
- Location: Somewhere in SE USA
- Contact:
Re: FF 93 Active Tab
Thanks, dickvl, but still a no-go.dickvl wrote:Code: Select all
.tab-background[multiselected="true"], .tab-background[selected="true"] { background-color: #ffff00; !important; }
I'm the first to admit I know zip about CSS coding so rely on cutting/pasting code bits from others.
Tried removing the comma after .tab-background[multiselected="true"] but didn't help.
Here's my full current userChrome.css file:
Code: Select all
/*** userChrome.css file for Firefox 89 ***/
/*** Tighten up drop-down/context/popup menu spacing ***/
/*** Source: https://www.userchrome.org/firefox-89-styling-proton-ui.html#menuspacing ***/
menupopup > menuitem, menupopup > menu {
padding-block: 4px !important;
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}
/* ####### Hide individual Tab Close buttons ####### */
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {
display: none !important;
}
#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
display: none !important;
}
/*** 4. TABS: on bottom ***/
*|*:root {
--menubar-height: 36px;
--bookmarkbar-height: 18.3px;
--tabbar-top: calc(var(--menubar-height) + var(--bookmarkbar-height) + var(--tab-min-height) + 8px); /*89+*/
}
#TabsToolbar {
display: block !important;
position: absolute !important;
top: var(--tabbar-top) !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
}
/* **** Addition for Firefox 93 2021/11/02 **** */
/* Set color for active tab - doesn't work */
.tab-background[multiselected="true"] .tab-background[selected="true"] {
background-color: #ffff00; !important;
}
Doug Wilson
Win10 64bit: FF 124.0.2 64bit, TB 102.12.0 32-bit ║ Android 13/10: FF 124.2.0/115.9.0 ║ No TB for Android available, dammit!
What a fool believes he sees, no wise man has the power to reason away - Doobie Brothers
Win10 64bit: FF 124.0.2 64bit, TB 102.12.0 32-bit ║ Android 13/10: FF 124.2.0/115.9.0 ║ No TB for Android available, dammit!
What a fool believes he sees, no wise man has the power to reason away - Doobie Brothers
- dickvl
- Posts: 54163
- Joined: July 18th, 2005, 3:25 am
Re: FF 93 Active Tab
You have a semi-colon before !important: background-color: #ffff00; !important;
Should be: background-color: #ffff00 !important;
You also need a comma between the two selectors:
Try this code:
Should be: background-color: #ffff00 !important;
You also need a comma between the two selectors:
Code: Select all
.tab-background[multiselected="true"], .tab-background[selected="true"] {
background-color: #ffff00 !important;
}
Code: Select all
/*** userChrome.css file for Firefox 89 ***/
/*** Tighten up drop-down/context/popup menu spacing ***/
/*** Source: https://www.userchrome.org/firefox-89-styling-proton-ui.html#menuspacing ***/
menupopup > menuitem, menupopup > menu {
padding-block: 2px !important;
min-height: unset !important;
}
:root {
--arrowpanel-menuitem-padding: 2px 8px !important;
}
/* ####### Hide individual Tab Close buttons ####### */
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {
display: none !important;
}
#tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
display: none !important;
}
/*** 4. TABS: on bottom ***/
/* see also http://forums.mozillazine.org/viewtopic.php?f=38&t=3075330&p=14894237#p14894237 */
#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;
position: relative !important;
background-color: var(--toolbar-bgcolor) !important;
}
/* TABS: APPEARANCE */
#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
}
/* TABS: HEIGHT */
#tabbrowser-tabs,
#tabbrowser-arrowscrollbox,
#tabbrowser-tabs .tabbrowser-tab {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
/* **** Addition for Firefox 93 2021/11/02 **** */
/* Set color for active tab - should work */
.tab-background[multiselected="true"], .tab-background[selected="true"] {
background-color: #ffff00 !important;
}
- makaiguy
- Posts: 16878
- Joined: November 18th, 2002, 6:44 pm
- Location: Somewhere in SE USA
- Contact:
Re: FF 93 Active Tab
Code: Select all
/* Set color for active tab - should work */
.tab-background[multiselected="true"], .tab-background[selected="true"] {
background-color: #ffff00 !important;
}
Doug Wilson
Win10 64bit: FF 124.0.2 64bit, TB 102.12.0 32-bit ║ Android 13/10: FF 124.2.0/115.9.0 ║ No TB for Android available, dammit!
What a fool believes he sees, no wise man has the power to reason away - Doobie Brothers
Win10 64bit: FF 124.0.2 64bit, TB 102.12.0 32-bit ║ Android 13/10: FF 124.2.0/115.9.0 ║ No TB for Android available, dammit!
What a fool believes he sees, no wise man has the power to reason away - Doobie Brothers
-
- Posts: 155
- Joined: September 30th, 2012, 1:52 pm
Re: FF 93 Active Tab
Carrying on from the superb suggestion by @dickvl, I have settled on the following highlighting for the active tab, defining both background color (SlateGrey) as well as the foreground text color (white). Code snippet goes into userChrome.css
Also implemented is the newly discovered option to RESTORE WINDOW TITLE BAR (which I thought had simply been removed):
Open Application Menu (i.e. hamburger menu) -> More Tools -> Customize Toolbar -> lower-left corner "Title bar" box -> CHECK IT
Also implemented is the newly discovered option to RESTORE WINDOW TITLE BAR (which I thought had simply been removed):
Open Application Menu (i.e. hamburger menu) -> More Tools -> Customize Toolbar -> lower-left corner "Title bar" box -> CHECK IT
Code: Select all
/* Set color for active tab */
.tab-background[multiselected="true"], .tab-background[selected="true"] {
background-color: SlateGrey !important;
}
/* text color */
.tabbrowser-tab[selected] .tab-label {
color: white !important;
}