eoger / tabcenter-redux

Vertical Tabs extension for Firefox
Mozilla Public License 2.0
381 stars 67 forks source link

How to change the tab sidebar color? #267

Closed jrw closed 6 years ago

jrw commented 6 years ago

Besides "normal" and "dark" themes, I mean. Can you add one more tip? Thank you!!

eoger commented 6 years ago

If you're fluent in CSS, you can create your own theme since Tab Center Redux has a "Custom Stylesheet" feature :)

jrw commented 6 years ago

Unfortunately, I'm not fluent in CSS. I was hoping that a short tip like #sidebar-box { background-color: something; } would work. I'd tried a few things, but couldn't find the right tags to use. Neither of the normal and dark themes allows me to easily distinguish the sidebar from my surrounding desktop (dark) and the main browser window (light/white), so I was going to try playing a bit with different colors. I like your tips - they're very helpful and they allow you to avoid a complicated bunch of menu choices which may be overkill. But I was hoping to avoid adding the complication of adding an entire theme. If that's not possible, maybe I'll end up going the theme route

allixx commented 6 years ago

https://github.com/eoger/tabcenter-redux/blob/master/src/tabcenter.css#L782

you can try copypasting everything below that line to "Cystom Stylesheet" editbox, and modifying it to your taste. and yeah, enable Dark theme since you'll be overriding it.

jrw commented 6 years ago

Thank Edouard, I'll try that!
I have to restart Firefox each time I change something, right? (I wonder if there is there an easy way to do that?)

allixx commented 6 years ago

css overrides in "Custom Stylesheet" are immediate (after pressing "Save CSS" button).

jrw commented 6 years ago

Enabling Dark theme and then adding this to the Custom Stylesheet worked! Thanks for your help (maybe make this a "Tip"): body.dark-theme { --tab-background-normal: 222, 20%, 40%; }

eoger commented 6 years ago

Anytime!

jrw commented 6 years ago

I'm still using tabcenter-redux on all my machines (Linux, Windows) and enjoying it.  Thanks!

  From: Edouard Oger <notifications@github.com>

To: eoger/tabcenter-redux tabcenter-redux@noreply.github.com Cc: jrw jrw32982@yahoo.com; Author author@noreply.github.com Sent: Thursday, February 1, 2018 2:27 AM Subject: Re: [eoger/tabcenter-redux] How to change the tab sidebar color? (#267)

Anytime!— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

jrw commented 6 years ago

Broken now in Tab Center Redux 0.6.3. See attachment tcr

jrw commented 6 years ago

Fixed by: body.dark-theme { --tab-background-normal: hsl(222, 20%, 40%); --tab-background-active: hsl(221, 50%, 50%); --close-button-color: hsl(rgba(238, 238, 241, .25)); --close-button-hover: hsl(rgba(238, 238, 241, .55)); }