Customizing with CSS

Tree Style Tabs does not expose many appearance-related configuration settings by default, instead leaving it up to users to load custom CSS. This section will work through an example doing so.

Custom CSS is split into two locations:

• userChrome.css, for styling the sidebar and other parts of the browser
• Preferences/Advanced, for styling within the sidebar

userChrome.css

CSS in userChrome.css may affect the sidebar surrounding the tree view, as well as any other part of the browser UI (for example: the regular tab bar). It must be enabled manually. Follow the instructions here to do so.

CSS rules in userChrome.css refer to the background process of the page. Inspecting this is not possible in the normal Web Inspector. Instead, follow these instructions to do so.

Example configuration

/* Hide horizontal tabbar */
#main-window #TabsToolbar {
  visibility: collapse;
}

/* Collapse in default state and add transition */
#sidebar-box {
  overflow: hidden;
  min-width: 40px !important;
  max-width: 40px !important;
  transition: all 0.3s ease;
  border-right: 1px solid #0c0c0d;
  z-index: 2;
}

/* Expand to 260px on hover */
#sidebar-box:hover, #sidebar-box #sidebar {
  min-width: 260px !important;
  max-width: 260px !important;
  z-index: 1;
}

/* Don't display the sidebar splitter */
#sidebar-box + #sidebar-splitter {
  display: none !important;
}

/* Slight padding to not show text when collapsed */
#sidebar-box #sidebar-header #sidebar-switcher-target #sidebar-icon {
  margin-right: 2px;
}

CSS via Preferences

CSS via the extension preferences may only affect the content inside the sidebar, and rules must refer to the internals of the sidebar. Inspecting this is not possible in the normal Web Inspector. Instead, follow these instructions to do so.

Instructions for loading CSS for the sidebar internals may be found here.

Example configuration

/* Show title of unread tabs with bold and italic font */
:root.sidebar tab-item.unread .label-content {
  font-weight: bold !important;
  font-style: italic !important;
}

/* Hide the collapsed tab markers and center favicons */
:root.sidebar .tab .twisty {
  visibility: hidden;
  margin: 0px -4px;
}

/* Space favicons so text is not shown when collapsed */
:root.sidebar .tab .favicon {
  margin-right: 9px;
}

/* Move the new tab button to center when collapsed */
:root.sidebar .newtab-button {
  max-width: 40px; 
  margin-left: 4px;
}

---

This wiki has a large amount of user-contributed CSS snippets. They may be found here.