Channel individual design


#1

Hi,
some Streamers have an individual design/theme on their channel page. They upload spezial images which represent their theme of the channel.
We got a request from a streamer if it is possible to change the layout/design of our panel extension, so that it fits to all the other content on his channel page.

Since we upload a static html file with static css files to twitch, I would say it is not possible.
Just one thing could work: We change all layout elements after loading by JavaScript, but this is not a practicable way I think.

Is there any “best practice” provided by twitch for this problem? Or has any extension developer realized something like this yet?


#2

Depending on how drastic the changes are you want to vary you do have several options.

The simplest would be would be to have multiple pre-set css themes, out of which the broadcaster can choose which one most suits their channel. This would still be somewhat restrictive in that channels can still only choose what has been already defined in the CSS, so might not have a theme that fits their channels brand.

Another option would be to have certain things, such as primary/secondary colours and font colour/style, configurable within the extensions config and and have your app use them as inline styles, which can be accomplished very easily with a framework such as React. This is the option I use for my component extension, where I let the broadcaster choose a main colour (from which lighter/darker shades are then calculated for things like borders, or to shade different sections differently), opacity, font colour and a couple other things, but there’s nothing stopping you adding even more customisation options if you like.

One option might be to have a text box in your config page where the broadcaster can simply write their own CSS to be that will be applied to specific elements. This approach I don’t recommend though as it would be easy for a broadcaster to break the functionality/usability of your extension through bad CSS, this may reflect badly on you/your extension as well as the channel itself.

And finally, depending on your use case it may even be an option to create a bespoke extension for the broadcaster who wants a custom design. If the functionality is unchanged it could use the same functions/backend, with just the frontend reskined. This will of course add extra work when it comes to releasing new versions of your extension as each custom version will have to go through the review process for a new release as well as the main version.


#3

My extensions actually do this.

The streamer has the option to upload an own image (hosted on my EBS) for the background and on one extension the config page also has a color picker to customize the color of the texts.

Upon initialisation of the panel I fetch the config from my EBS and just set the according CSS attributes (background URL, text color, etc.) via JavaScript to the values from the config - pretty much like you suggested yourself.

If you don’t have an own EBS you can use the configuration storage service the Twitch API offers.


#4

Thanks for the answers.
For the individual designs for streamers wo need an upload of individual background grafics.

@Hellcat: Thanks for that input. Yes, we have an EBS. Maybe we will also solve it like this way.