Custom background of the sidebar

[opqriu]

After installing the tree style tabs I removed the default tab bar in Firefox. Since then I always use Firefox with a tree style tab on the right. By the way, it is not visually beautiful. It would be nice if the tree style tab had a background theme function.
Thanks.

[piroor]

TST is designed to apply Firefox's theme. If you install any theme including background image, it will be applied to the sidebar also.

And you can set your custom background image with a user style, like:

#background {
  background: url("https://example.com/something-image.jpg");
}

For more details please read documents about CSS background images.

Direct reference of remote images will grow traffics needlessly, so I recommend you to embed the image as a data: URI. You'll get data: URI of an image by something converter like: https://ezgif.com/image-to-datauri (Please remind that you can use only small images due to restrictions of the quota for a Firefox addon.)

[piroor]

I have no plan to add a special option to customize background image because there are two main reasons:

• It can be done with simple user style.
• Even if I add such an option to TST, you'll still cannot use large images due to the quota restriction. So, I think that making the feature built-in won't help you.

Ah, but I've realized that embedding data URI of a dropped image will convenient. I'll try it later.

[opqriu]

Thank you for your reply.
But
I applied it to "chrome/userChrome.css" and the background does not come out.

#background {
background: url("https://example.com/something-image.jpg");
}

Thank you. Happy Today :)

[irvinm]

You want to apply the CSS code in the TST options under: Advanced -> Extra Style Rules. (Not in your chrome/userChrome.css file)

[piroor]

After the commit ccae58d TST allows you to embed the data: URI of a dropped image on the style editor field. However, due to a bug of Firefox itself the feature does not work at the about:addons page, instead you need to open TST's options page in a separate tab.

[piroor]

I've done more changes. Now the button "Load from File" allows you to embed data: URI of images.

[opqriu]

Thank You.
I was successful.

#background {
background: url(https://cdn.clien.net/web/api/file/F03/10645410/59c65e28f09a24.jpg?w=1200);
}

[irvinm]

@opqriu can you close this item?

@piroor did you want to add a wiki entry for this feature?

[piroor]

OK, I've added a section in the code snippets: https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#custom-background-of-the-tab-bar-2731