Skip to content

Code snippets for custom style rules

Jump to bottom Edit New page
Alex edited this page Feb 17, 2019 · 262 revisions

(generated by Table of Contents Generator for GitHub Wiki)

For version 2.x

TST 2.x's configuration panel has a text field to put custom CSS codes. Go to TST's configuration and scroll down, then you'll see the field "Extra style rules for sidebar contents".

Change tab border

Make the dividing line less (or more) prominent.

/* Less visible tab dividers. 
   A black border with a very low alpha slightly darkens any color. */
.tab {
  border: solid 1px #00000012; 
}

Leave as little space before the tab name as possible

/* As little space before the tab name as possible.
   The fold/unfold icon is not affected. */
.tab:not(.pinned) {
  padding-left: 0px !important; /* !important is required when there are enough tabs to cause a scrollbar */
}

Change styling of pending (unloaded) tabs #1363 

/* Change styling of pending (unloaded) tabs */
.tab.discarded {
  opacity: 0.75;
}

.tab.discarded .label-content {
  color: red;
}

Only favicon:

/* Change styling of the favicon of pending (unloaded) tabs */
.tab.discarded .favicon {
  opacity: 0.5 !important;
}

Show title of unread tabs in italic #1363 

.tab.unread .label-content {
  font-style: italic;
}

Change tab height #236 

.tab {
  height: 25px;
}

Highlight active tab

This makes the active tab very noticeable increasing its height and modifying the color and font

.tab.active {
  height: 39px !important;
  background-color: #193B99;
}
.tab.active .label {
  font-weight: bold;
  font-size: 14px;
}
.tab.active .twisty,
.tab.active .label,
.tab.active .counter {
  color: #fff;
}

Hovered tab

This makes the hovered tab noticeable by modifying the color and font

.tab:hover {
  background: #193B99 !important;
  opacity: 1;
}

Container colored background for tab #1879

This colors a tab based on its container's color.

.contextual-identity-marker {
  position: absolute !important;
  pointer-events: none;Full Auto-show/hide Theme
  z-index: 0;
  
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  
  width: unset !important;
  height: unset !important;  
    
  opacity: 0.5;
}

Tab numbering and counting

All of the options in this section need the raw count of tabs available. This is done using CSS counters:

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

Numbering of tabs #1601

Note: this requires the counting CSS block listed here.

This displays the number of each visible tab along side each tab.

.tab .burster::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 0.2em;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;
}

Tab numbering on hovered tabs

Note: this requires the counting CSS block listed here and the label CSS block listed here.

To show tab numbering only on hovered tabs, use this CSS:

.tab .burster::after {
  opacity: 0;
  transition: 0.2s;
}
.tab:hover .burster::after {
  opacity: 1;
}

Tab counts in new tab button #1661

Both of the options in this section use the following block of CSS to position some text in the New Tab button. The text that is displayed is specified in each option below.

.newtab-button::after {
  content: var(--tab-count-text);
  pointer-events: none;
    
  position: absolute;
  left: 0.5em;

  /* TST 2.4.0 - Fix for Issue #1664 */
  background: transparent !important;
  mask: none !important;
}

Total tab count

Note: this requires the counting CSS block listed here and the label CSS block listed here.

To show only the total tab count, use this CSS:

.newtab-button {
  --tab-count-text: counter(tabs) " tabs";
}

Combined active and total tab count

Note: this requires the counting CSS block listed here and the label CSS block listed here.

To show both the active tab and total count, use this CSS:

.newtab-button {
  --tab-count-text: counter(atabs) "/" counter(tabs) " tabs";
}

Hide active and total tab count

Hide but still take up space:

.tab .counter {
  opacity: 0;
}

Hide and don't take up any space:

.tab .counter {
  display: none;
}

Hide twisty and collapse/expand tree by clicking on tab's icon #1743 

.tab .twisty {
  margin-right: -1.5em;
  opacity: 0;
  position: relative;
  z-index: 10000;
}

Pre-Photon "no favicon" tab icon #1822 

/* TST 2.4.17 - Fix for #1822 - Fix for Photon themed new tab favicon */
#tabbar .tab:not(.loading) .favicon .favicon-image[src^="moz-extension://"][src$="/resources/icons/globe-16.svg"] {
  display: none;
}
#tabbar .tab:not(.loading) .favicon .favicon-image[src^="moz-extension://"][src$="/resources/icons/globe-16.svg"] ~ .favicon-default::before {
  display: inline-block !important;

  background: url("chrome://branding/content/icon32.png") no-repeat center / 100% !important;
  mask: none !important;
}
#tabbar .tab:not(.loading)[data-current-uri="about:privatebrowsing"] .favicon .favicon-image[src^="moz-extension://"][src$="/resources/icons/globe-16.svg"] ~ .favicon-default::before {
  background: url("chrome://browser/skin/privatebrowsing/favicon.svg") no-repeat center / 100% !important;
}



/* TST 2.4.17 - Fix for #1822 - Fix for Photon themed default favicon */
.tab:not(.group-tab):not([data-current-uri^="chrome:"]):not([data-current-uri^="about:addons"]):not([data-current-uri^="about:preferences"]) 
.favicon .favicon-default::before {
  background: url("/sidebar/styles/icons/moon.svg") no-repeat center / 100% !important;
  mask: none !important;
}

Hide the favicon on new tabs #1890 

/* Hide the favicon on new tabs. */
.tab:not(.loading):-moz-any([data-current-uri="about:newtab"], [data-current-uri="about:home"], [data-current-uri="about:blank"]) .favicon {
  visibility: hidden;
}

New tab button

Put "new tab" button at the top of the tab bar #1376 

.newtab-button-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
}
#tabbar {
  top: 20px !important;
  bottom: 0 !important;
}
.tab.pinned {
  margin-top: 20px;
}

Always show the "new tab" button at the bottom edge of the tab bar #1376 

#tabbar:not(.overflow) .after-tabs {
  display: none;
}
#tabbar:not(.overflow) ~ .after-tabs {
  display: block;
}

Always show the "new tab" button at next to the last tab #1376 

#tabbar.overflow .after-tabs {
  display: block;
}
#tabbar.overflow ~ .after-tabs {
  display: none;
}

Hide the "new tab" button at the bottom edge of the tab bar #1591 

.newtab-button-box {
  display: none;
}
#tabbar {
  bottom: 0 !important; /* Eliminate dead space on bottom */
}

Closebox

Put closebox left side, even if I choose "Left side" style

:root.left .tab .twisty {
  order: 10000;
}
:root.left .tab .closebox {
  order: -1;
}

Put closebox right side, even if I choose "Right side" style #1387 

:root.right .tab .twisty {
  order: -1;
}
:root.right .tab .closebox {
  order: 10000;
}

Hide tab close button always #1524 

.tab .closebox {
  display: none;
}

Change close button style #1564 

.closebox::after {
  /*
    There are some possible characters for this purpose:
    https://en.wikipedia.org/wiki/X_mark
    - X: upper case X
      * Too narrow
    - ×: U+00D7 MULTIPLICATION SIGN (z notation Cartesian product)
      * Too small on macOSX
    - ╳: U+2573 BOX DRAWINGS LIGHT DIAGONAL CROSS
      * Too large on Ubuntu
    - ☓ : U+2613 SALTIRE (St Andrew's Cross)
      * Narrow a little on Windows and macOS
    - ✕: U+2715 MULTIPLICATION X
      * Too small on macOSX
    - ✖: U+2716 HEAVY MULTIPLICATION X
      * Too small on macOSX
    - ❌ : U+274C CROSS MARK
      * Colored on macOS
    - ❎ : U+274E NEGATIVE SQUARED CROSS MARK
      * Colored on macOS
      * Box around the mark is unnecessary
    - ⨉ : U+2A09 N-ARY TIMES OPERATOR
    - ⨯: U+2A2F VECTOR OR CROSS PRODUCT
      * Too small on macOSX
    - 🗙: U+1F5D9 CANCELLATION X
      * Unavailable on macOSX
    - 🗴 : U+1F5F4 BALLOT SCRIPT X
      * Unavailable on macOSX
    - 🞩: U+1F7A9 LIGHT SALTIRE
      * Unavailable on macOSX
    So ⨉ (U+2A09) looks good for me on Windows, macOS, and Linux (tested on Ubuntu).
  */
  content: "⨉";

  background: none;
  line-height: 1;
  mask: none;
  text-align: center;
  width: 1.25em;
}

Only show tab close button on hover #1448 

.tab:not(:hover) .closebox {
  display: none;
}

Colored background for closebox on hover

before version 2.4.0

.closebox {
  border-radius: 10px; /* vary between 0 and 10 to make the background rounder */
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.closebox::before {
  height: 1.1em;
  font-size: 1.2em; /* personal preference, feel free to omit or change */
}
/* I find these work well on my monitor (slightly darker than the normal tab color) but YMMV */
.closebox:hover {
  background: #c8c8c8;
}
.active .closebox:hover {
  background: #96afc8;
}

version 2.4.0+

A background was added by default and the X was switched to an SVG.

.tab .closebox::before {
  border-radius: 10px; /* vary between 0 and 10 to make the background rounder */
}
/* I find these work well on my monitor (slightly darker than the normal tab color) but YMMV */
.tab .closebox:hover::before {
  background: #c8c8c8;
  opacity: 1; /* defaults to 0.1 */
}
.tab.active .closebox:hover::before {
  background: #96afc8;
}

Scrollbar

Show scrollbar in the tab bar rightside #1362 

:root.left #tabbar {
  direction: ltr;
  overflow-x: hidden;
}

Hide scrollbar #1507

There is now a setting in the Preferences of Tree Style Tab to hide or narrow the scrollbar.

To use it on macOS, you must set "Show scroll bars: Always" in System Preferences / General, or use this command in Terminal to set it only for Firefox: defaults write org.mozilla.firefox AppleShowScrollBars -string Always To remove the setting from Firefox, use: defaults delete org.mozilla.firefox AppleShowScrollBars

Auto hide scrollbar #1923 

:root.left-scrollbar #tabbar.overflow {
  margin-left: calc(0px - var(--scrollbar-size));
  transition: margin-left ease 0.25s 0.4s;
}
:root.right-scrollbar #tabbar.overflow {
  margin-right: calc(0px - var(--scrollbar-size));
  transition: margin-right ease 0.25s 0.4s;
}

:root.left-scrollbar #tabbar.overflow:hover {
  margin-left: 0;
}
:root.right-scrollbar #tabbar.overflow:hover {
  margin-right: 0;
}

:root.left-scrollbar.narrow-scrollbar #tabbar.overflow:hover {
  margin-left: calc(var(--narrow-scrollbar-size) - var(--scrollbar-size));
}
:root.right-scrollbar.narrow-scrollbar #tabbar.overflow:hover {
  margin-right: calc(var(--narrow-scrollbar-size) - var(--scrollbar-size));
}

For userChrome.css

For Japanese people: userChrome.cssの説明の日本語訳

Note: According to: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin

This documentation has not been updated for Firefox Quantum. Support for the userChrome.css file and any of its elements described below are not guaranteed in future versions of Firefox. Using it may lead to hard-to-diagnose bugs or crashes. Use at your own risk!

Firefox's regular (horizontal) tab bar and sidebar's header are out of TST 2.x's control, because TST is now just a sidebar panel and there is no WebExtensions API to control them. However there are some workarounds based on custom stylesheet. Please note that there is no guarantee in future versions of Firefox.

(And please remember that @piroor the original author of TST does not using any customization described in this section, to avoid such risk.)

Hide horizontal tabs at the top of the window #1349, #1672, #2147 

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

You can view your tabs again without changing userChrome.css by enabling the "Drag Space" option in the Customize settings.

If you don't have title bar on mac OS you will also need to choose Customize from hamburger menu and insert Flexible Space in the top left corner so that close, minimize, etc. dot controls do not overlap other Firefox controls.

Show title of current tab at the top of the window instead

In about:config, set browser.tabs.drawInTitlebar to false.

or: hamburger menu -> Customize, check "Title Bar" at the bottom.

Hide the "Tree Style Tab" header at the top of the sidebar

For only Tree Style Tab sidebar #1397 

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

For all sidebars #1373 

#sidebar-header {
  display: none;
}

Reduce minimum width of the sidebar #1373 

#sidebar {
  min-width: 100px !important;
}

Move sidebar to right side of browser

You don't need any custom style rules. Click the header's dropdown menu and choose "Move Sidebar to Right".

Don't display tab title pop-up tooltips when hovering over tab

(Note: this will also hide link title tooltips in web pages on older versions of Firefox, and/or if e10s multiprocess is disabled.)

#aHTMLTooltip {
  display: none !important
}

Auto-show/hide sidebar by mouseover (hover)

/*Collapse in default state and add transition*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden;
  min-width: 40px;
  max-width: 40px;
  transition: all 0.2s ease;
  border-right: 1px solid #0c0c0d;
  z-index: 2;
}

/*Expand to 260px on hover*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  min-width: 260px !important;
  max-width: 260px !important;
}

Full Auto-show/hide Theme

/* Hide main tabs toolbar */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
  visibility: collapse !important;
}

/* Sidebar min and max width removal */
#sidebar {
    max-width: none !important;
    min-width: 0px !important;
}
/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
    display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    visibility: collapse;
}

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
    --thin-tab-width: 30px;
    --wide-tab-width: 200px;
}
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
    min-width: var(--wide-tab-width) !important;
    max-width: none !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    position: relative !important;
    transition: all 100ms !important;
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
    transition: all 200ms !important;
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}

And the associated tab theme to put into TST Addon preferences "Extra style rules for sidebar contents":

/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */ 
#tabbar { border: 0; overflow-y: scroll !important; margin-left: -18px !important; }

/* Hide .twisty and adjust margins so favicons have 7px on left. */
.tab .twisty {
    visibility: hidden;
    margin-left: -12px;
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
.tab .label {
    margin-left: 7px;
}

/* Hide close buttons on tabs. */
.tab .closebox {
    visibility: collapse;
}

.tab:hover .closebox {
    visibility: initial;
}

/* Hide sound playing/muted button. */
.sound-button::before {
    display: none !important;
}

/* ################################################ */
/* ##### COLOR THEME ############################## */
/* ################################################ */

:root {
    background-color: #383838;
}
#tabbar {
    border-right: 1px solid #1d1d1d;
    box-shadow: none !important;
}
.tab {
    box-shadow: none !important;
}
.tab:hover {
   filter: opacity(80%) drop-shadow(0px 0px 0px #3498DB);
}

/* Adjust style for tab that has sound playing. */
.tab.sound-playing .favicon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: #FFFFFF;
    animation: pulse 2s ease-out 0s infinite;
    z-index: -1;
    opacity: 0;
}

/* Adjust style for tab that is muted. */
.tab.muted {
    opacity: 0.5;
}

/* Better alignment of Favicons when collapsed */
.tab[data-level][data-level="0"] {
  margin-left: 2% !important;
}
.tab[data-level][data-level="1"] {
  margin-left: 4% !important;
}
.tab[data-level][data-level="2"] {
  margin-left: 6% !important;
}
.tab[data-level][data-level="3"] {
  margin-left: 8% !important;
}
.tab[data-level][data-level="4"] {
  margin-left: 10% !important;
}
.tab[data-level][data-level="5"] {
  margin-left: 12% !important;
}
.tab[data-level][data-level="6"] {
  margin-left: 14% !important;
}
.tab[data-level][data-level="6"] {
  margin-left: 16% !important;
}

Taken from reddit and tweaked

Auto-hide sidebar when fullscreen #1548 

#main-window[inFullscreen] #sidebar-box,
#main-window[inFullscreen] #sidebar-splitter {
  display: none !important;
  width: 0px !important;
}

Auto-hide sidebar in windows with only one tab (requires another extension) #1768

It is possible to only apply some code when a certain title preface is set by a WebExtension. The title preface can be set to a windows' tab count with an extension like Tab Count in Window Title and when that extension is installed the following code will hide the sidebar for windows with one tab:

#main-window[titlepreface="[1] "] #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  visibility: collapse !important;
}

For userContent.css

Change background color of dummy (group) tabs #1494 

@-moz-document regexp("moz-extension://.+/resources/group-tab.html.*") {
  :root {
    background: red !important;
  }
}

This content is made by contributors.

Add a custom sidebar
Clone this wiki locally