Advanced Tab Groups

---

CSS for Zen Browser's experimental Tab Groups using userChrome.css.

⚠️

• If you are on windows and not on twilight (Firefox 135) then you will have to double click the folders due to a non css bug.

• IF you are not on twilight PLEASE do not try and add a pin tab to a folder! 🙏

• Any issues you encounter please create a ticket on the GitHub page and I will do what I can to help you quickly.

---

Setup

To use this CSS, you must configure Zen Browser's userChrome.css and enable the listed preferences in about:config.

If you're unfamiliar with userChrome.css, please refer to this guide. If you encounter any issues, feel free to create an issue on this repository.

---

How to Use

1. Enable browser.tabs.groups.enabled in about:config to activate Firefox's experimental Tab Groups feature (works in all versions of Zen Browser).
2. Follow this guide to set up userChrome.css.
3. Copy the CSS from this repository into your userChrome.css file.
4. Add the configuration booleans listed below in about:config and adjust them to your liking.
5. Enjoy your customized tab groups!

---

Configuration Options

Add these preferences to about:config to enable additional features (They have to be added and are not there by default.):

• tab.groups.add-arrow
• tab.groups.background
• tab.groups.borders
• tab.groups.theme-folders
• tab.groups.fill-folders
• tab.groups.display-tab-range
• -tab.groups.hide-save-info (_(This is for twilight or Firefox 135)

---

What Does This Do?

This CSS improves the functionality and appearance of Zen Browser's experimental Tab Groups.

---

Features

1. Custom Background for Tab Groups

Apply a background that matches the tab group color for a cleaner and more cohesive look.

---

2. Border Around Tab Groups

Add a subtle border to enhance the visual separation of tab groups (requires background to be enabled).

---

3. Expandable Tab Groups with Arrows

Add an arrow icon to indicate whether a tab group folder is open or closed.

---

4. Themed Folder Icons

Color folder icons based on the tab group color to visually differentiate groups.

---

5. Folder Icon Fill

Customize the folder icon fill with your tab group color—or leave it empty, depending on your preference.

---

5. Display Tab Range

Have a line sowing where the folder starts and stops

---

Suggestions

Have an idea for a feature? Start a discussion! I'm happy to explore any Zen CSS-related requests.

---

Credit

Special thanks to https://github.com/nieffka/bubble-clean-zen for the original CSS theme and inspiration!