I've been using SeaMonkey with XPFE-Classic theme on my Linux machine. It works OK, but there is a problem - the theme I'm using shows very little indication for which tab is currently selected.
Is there a way to add an outline to a currently selected tab with userChrome.css? Just a simple 1px outline would do.
Adding an outline to a currently selected tab
-
- Posts: 18
- Joined: November 8th, 2021, 4:49 pm
-
- Posts: 6432
- Joined: February 3rd, 2009, 6:29 pm
Re: Adding an outline to a currently selected tab
Try this:
I prefer this:
view-source:chrome://global/skin/tabbox.css
Reference
http://searchfox.org/comm-esr60/search?q=tabbox.css
Code: Select all
tab[selected="true"] hbox {
outline: 1px solid orange !important;
}
Code: Select all
tab[selected="true"] hbox {
border-bottom: 3px solid orange !important;
}
Reference
http://searchfox.org/comm-esr60/search?q=tabbox.css
- therube
- Posts: 21714
- Joined: March 10th, 2004, 9:59 pm
- Location: Maryland USA
Re: Adding an outline to a currently selected tab
Thank you for that, as it made me look at "my" code.
What I have long done, is to highlight the entire (current) tab.
Somewhere along the line, again a long time back, I stopped getting any demarcation between tabs.
So looking today, it seems it's the !important in the -moz-appearance line.
So I removed that part, & now, again, there is demarcation between tabs .
(That said, I'm a hacker & got it to "work", & not that I know what !important or -moz-appearance none: accomplish in general.)
Revised:
(Alternate link, https://i.postimg.cc/332MjTQQ/Sea-Monke ... arance.png.)
What I have long done, is to highlight the entire (current) tab.
Code: Select all
tab{
-moz-appearance: none !important;
}
tab[selected="true"] {
background-color: rgb(0,153,255) !important;
color: black !important; }
So looking today, it seems it's the !important in the -moz-appearance line.
So I removed that part, & now, again, there is demarcation between tabs .
(That said, I'm a hacker & got it to "work", & not that I know what !important or -moz-appearance none: accomplish in general.)
Revised:
Code: Select all
tab{
-moz-appearance: none ;
}
tab[selected="true"] {
background-color: rgb(0,153,255) !important;
color: black !important; }
(Alternate link, https://i.postimg.cc/332MjTQQ/Sea-Monke ... arance.png.)
Fire 750, bring back 250.
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript
-
- Posts: 18
- Joined: November 8th, 2021, 4:49 pm
Re: Adding an outline to a currently selected tab
Neat, thanks!morat wrote:Try this:
I prefer this:Code: Select all
tab[selected="true"] hbox { outline: 1px solid orange !important; }
view-source:chrome://global/skin/tabbox.cssCode: Select all
tab[selected="true"] hbox { border-bottom: 3px solid orange !important; }
Reference
http://searchfox.org/comm-esr60/search?q=tabbox.css
I've been looking into what else I can do with it.
So far good, but there is a strange bit of padding under the tabs. Is there a way to change its color? Changing the color of #TabsToolbar doesn't affect it.
-
- Posts: 6432
- Joined: February 3rd, 2009, 6:29 pm
Re: Adding an outline to a currently selected tab
I think you are talking about the tab strip.
I don't know how to color just below the selected tab.
Code: Select all
.tabbrowser-strip {
-moz-appearance: none !important;
background-color: orange !important;
}
-
- Posts: 18
- Joined: November 8th, 2021, 4:49 pm
Re: Adding an outline to a currently selected tab
That was it, thank you! Now it looks like this, and that's how I wanted it to look:morat wrote:I think you are talking about the tab strip.
I don't know how to color just below the selected tab.Code: Select all
.tabbrowser-strip { -moz-appearance: none !important; background-color: orange !important; }
Here is my userChrome.css:
Code: Select all
tab[selected="true"]{
background-image: none !important;
background-color: #E0EAF5 !important;
padding-top: 0px !important;
}
tab:hover {
background-image: none !important;
background-image: linear-gradient(#E0EAF5, #d0d0d0)!important;
}
tab{
background-image: linear-gradient(#E0EAF5, #c0c0c0)!important;
-moz-appearance: none !important;
border-left: 1px solid gray !important;
border-right: 1px solid gray !important;
border-top: 1px solid gray !important;
border-bottom-width: 0px !important;
}
.tabbrowser-strip{
background-color: #E0EAF5 !important;
}
So I did a little digging, and it turns out SeaMonkey (and seemingly other Gecko/Goanna-based browsers) uses the same color for the 3D highlighted outer edge and 3D shadow inner edge for GTK3, causing UI elements that rely on these to have the wrong color in several classic XFCE/GTK themes, such as Chicago95, which I'm using.
I found a workaround for this issue:
1. Go to about:config
2. Create the following string values:
ui.threedhighlight -> #f0f0f0
ui.threedshadow -> #696969
3. Restart SeaMonkey
Hope that helps whoever is having the same issue.
-
- Posts: 72
- Joined: December 12th, 2005, 9:40 pm
Re: Adding an outline to a currently selected tab
I didn't know about userChrome.css, but now I do my tabs are happier: