Adding an outline to a currently selected tab

[tyukok]

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.

[morat]

Try this:

Code: Select all

tab[selected="true"] hbox {
  outline: 1px solid orange !important;
}

I prefer this:

Code: Select all

tab[selected="true"] hbox {
  border-bottom: 3px solid orange !important;
}

view-source:chrome://global/skin/tabbox.css

Reference
http://searchfox.org/comm-esr60/search?q=tabbox.css

[therube]

Thank you for that, as it made me look at "my" code.
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; }

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:

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.)

[tyukok]

Try this:

Code: Select all

tab[selected="true"] hbox {
  outline: 1px solid orange !important;
}

I prefer this:

Code: Select all

tab[selected="true"] hbox {
  border-bottom: 3px solid orange !important;
}

view-source:chrome://global/skin/tabbox.css

Reference
http://searchfox.org/comm-esr60/search?q=tabbox.css

Neat, thanks!

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.

[morat]

I think you are talking about the tab strip.

Code: Select all

.tabbrowser-strip {
  -moz-appearance: none !important;
  background-color: orange !important;
}

I don't know how to color just below the selected tab.

[tyukok]

I think you are talking about the tab strip.

Code: Select all

.tabbrowser-strip {
  -moz-appearance: none !important;
  background-color: orange !important;
}

I don't know how to color just below the selected tab.

That was it, thank you! Now it looks like this, and that's how I wanted it to look:

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;
}

Also, a bit unrelated, but when I ran SeaMonkey for the first time with this theme it looked strange, with thick black lines being where they shouldn't be, especially around the window and the throbber:

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.

[trevoz]

I didn't know about userChrome.css, but now I do my tabs are happier: