Web lists-archives.com

Re: Changing 'closebox' in FF57/Tree Style Tab

On 01/02/2018 07:27 PM, Sailfish wrote:
My bloviated meandering follows what The Real Bev graced us with on
12/30/2017 9:56 PM:
On 12/30/2017 09:33 PM, Sailfish wrote:
My bloviated meandering follows what The Real Bev graced us with on
12/30/2017 9:10 AM:
On 12/30/2017 09:00 AM, The Real Bev wrote:

<snip />

OK, guys, you asked for it!  This is what I have, and what I want to
change is the X on each tab at the far right of the picture.  I'd also
like to change the color of the tabs themselves.


'Tree Style Tab' is the best of the vertical tab extensions (and the
presents snippets to modify it) , but stuff that applies to the default
tab arrangement may or may not also affect the TST tabs.

And, for good measure, this is the way I'd like to see the vertical
bookmark function on the left side of the page (it used to have bold
fonts, but I can't have that any more for some reason);  the FF57
version is much wider and overlays part of the existing page.


Some people LIKE to solve problems.  I am intensely grateful to those
crazy people.

Okay, I see the problem. I hadn't known that you were discussing the
Tree Style Tab (TST) add-on. To make style changes to it, userChrome.css
probably isn't the right place for Fx57+ but the developer does allow
one to add them from within the TST add-on entry within the Add-on
Manager. Scroll down to the Advanced section and enter them into the
"Extra style rules for sidebar contents". On top of that, there were
other problems with the style he provided since the existing style hid
the change. So, here is an example of how I was able to change it below.
Note: I used \274E instead of \274C so you could more easily see the
changes. The nice thing about that is that you should see the style
change applied immediately.

Definitely a convenience.  As soon as you put something in the
'advanced' box it happens -- no restarting of anything.

/* Replace the close button icon with a Unicode character */
.closebox::before {
    top: 50% !important;
    left: 50% !important;
      content: "\274E" !important;
.closebox::after {
    visibility: collapse !important;

YESSSS!  That's a lot more than he included in his code snippets!

btw, since the replace "close" symbol is a character, you should be able
to easily change its size using the CSS font-size attribute. I mention
this since you wanted a larger close symbol but I'm not aware if the
replacement was lare enough.

The actual character is small, but the 'close' area is quite large so it worked out really nicely. Thanks again!

Cheers, Bev
  Giving advice likely to kill the stupid is called passive eugenics.
general mailing list