How to use `vertical_tabs.css`?

[Marin-Kitagawa]

I have used the vertical_tabs.css along with window_control_placeholder_support.css and hide_tabs_toolbar.css. No tabs appear on the left sidebar. It just appears blank. I even tried setting sidebar.revamp to true in about:config. Now, there is Firefox's sidebar after the blank tab column with no tabs even when I have several tabs open. Could you please suggest how to use it?

THe following is the content of my userChrome.css

@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/minimal_popup_scrollbars.css);
@import url(chrome/button_effect_icon_glow.css);
@import url(chrome/urlbar_centered_text.css);
@import url(chrome/window_control_placeholder_support.css);
@import url(chrome/hide_tabs_toolbar.css);
@import url(chrome/round_ui_items.css);
@import url(chrome/tabs_animated_gradient_border.css);
@import url(chrome/autohide_tabs_toolbar.css);
@import url(chrome/curved_tabs.css);

(I removed the aforementioned 3 css files because the combination didn't work. I included the rest of the css files above)

Below is my userContent.css

@import url(content/css_scrollbar_width_color.css);
@import url(content/transparent_reader_toolbar.css);

[MrOtherGuy]

hide_tabs_toolbar.css will hide the tabs, so remove that if you intend to show them vertically.

I'm not sure about all of these, but I can tell you that tabs_animated_gradient_border.css nor autohide_tabs_toolbar.css are not going to work at all with vertical_tabs.css, curved_tabs.css probably won't either.

[Marin-Kitagawa]

Oh ok thanks. I will try it. I thought that the implementation of vertical tabs was similar to Floorp's i.e., using sidebar. But I understand that the whole tab bar is moved to the left in a vertical fashion.

[MrOtherGuy]

Yes indeed, that style makes the normal tabs toolbar appear vertically. Which is also why certain features will not work such as ability to reorder tabs because that function depends on tabs being laid out horizontally.