some-sidebery-tweaks

Tested on Firefox 111.0 (64-bit, Windows 11)

Originally Created: 03/13/2021 Edited: 3/18/2023

• Sidebery beta v5 (5.0.0b31)

Important

Hello to anyone who reads this, for the forseeable future this repo is no longer being maintained.

A more long winded explanation here:

I'm leaving everything just how it was (I don't really know the right etiquette for this) but I don't I have the capacity anymore to keep this up to date. I seem to be using Sidebery (v5.0.0rc4) at the time of writing this (9/7/23) and I have had no issues with dragging tabs around or my bookmarks bar clipping into the sidebar. Anyone is, of course, free to fork this repo and modify and answer and open issues as much as they'd like. Thank you for your time - redundakat

menuShow, sideberyMods, darkContextMenu, and sideberyTweaks were either created by me or heavily modified by me everything else is stolen from MrOtherGuy.

Huge thanks to my friend nearcatch for helping me debug and for giving me the original code for sideberyMods.

• Reddit Post

• Adaptive Tab Bar Color for matching sidebery's color with the tab's color

2022-11-30.01-22-57.mp4

Colored Tabs Setup

Instructions for coloring tabs on hover

Once you have your userChrome.css file set up following these instructions, (and you have sidebery installed) follow these steps:

1. Paste the code from sideberyTweaks.txt into the native custom css editor. (or use sideberyTweaksv5 if you've updated to the newer version of sidebery)
   • Configure panel → Styles editor → Sidebar
   • If you did this correctly you can now edit the colors of your tabs depending on if you're hovering over them.

Changing the links will allow you to customize what tabs you want colored.

.Tab[title*="https://github.com"], .PinnedTab[title*="https://github.com"] {
	--tabs-bg-hover: var(--white); /* default hover background */
	--tabs-bg-active: var(--white); /* default mouse-pressed background */
	--tabs-activated-bg: var(--white); /* default current background */
}

In the betav5 the variables have changed, use this template instead:

.Tab[title*="https://github.com"], 
.PinnedTab[title*="https://github.com"] {
	--tabs-activated-bg: var(--white); /* default current background */
	--frame-el-overlay-hover-bg: var(--white); /* hover bg */
}

I hope they revert this change as this seems so much more clunky :/ But it appears that --hover-bg and --clicked-bg no longer exist

2. Copy the userChrome.css from here into your userChrome.css you set up, and paste the hacks folder into your chrome folder.
3. If you're interested in the "Open in New Private Tab" option, check out this github for instructions.

Auto Hiding Sidebar

Instructions on the autohiding sidebar files

There are three sideberyMod files, I will try to explain why they're different and why you might want to use them. All three are interchangable, you only need one to maintain the auto-hiding functionality of the mod.

File	Side	Explanation	Video Link
sideberyMods.css	Right	• Covers window-content when hovered • Hides by changing width of panel
sideberyModsLEFT.css	Left	• By default covers window content when hovered • Hides by changing width of panel • If you uncomment .ScrollBox:not(:hover) {--tabs-indent: 0px;} in sideberyTweaksv5.txt you get this effect
sideberyModsLeftSlide.css	Left	• Covers window content on hover • Hides by sliding back and forth • Make sure to change pinned tabs to globally-right in sidebery settings

Code relating to autohiding the sidebar can be found in hacks/sideberyMods.css. The specific variables you should tinker with are these:

:root {
    --autohide-sidebar-extended: 230px; /* width of each tab when shown */
    --autohide-sidebar-collapsed: 34px; /* width of each tab when hidden */
    --sidebar-height: 100vh;
}

Changelog

9/7 No longer maintaining repo for the forseeable future :/ (I just don't have the free time I once had anymore)

• 4/27 Added ability show indented tabs on hover demo
• 4/1 Fixed colored tabs setup instructions
• 3/18 updated out of date parts of my readme (updated for b31), created some code to handle if the sidebar-header is shown (see issue #4)
• 2/1 - updated sidebery to b30
• 12/21 - removed tabsintitlebar selector because it's not necessary and was breaking the css for machines where tabsintitlebar=false.
• 12/2 - added sideberyModsLeftSlide.css
• 11/30 - added sideberyModsLEFT.css
• 11/28/2022
  • fixed autohide because it broke
  • removed weird purple top left square from menuShow.css
  • updated sidebery to beta v5 (highly recommend)
    • due to updating sidebery, had to change a bunch of sideberyTweaks.txt
    • made a new file for this called sideberyTweaksv5.txt
  • removed custom_menupopup_check_icons.css