How TwitchTv Info Sections Work.

itruthful

Hello there fellow human,

So I'm assuming you didn't pop by for a cup of tea or what not so lets get straight to the point! TwitchTv Info Sections are dreaded by a lot of streamers due to the fact you have to use quite a bit of HTML and CSS in order for them to have a nice feel and not a 90's look. Well, I have decided after a few months of creating info sections for other people to share my knowledge with you all. 

So to begin a lot of you will assume you'll need a vast amount of knowledge on HTML / CSS in order for you to succeed, false. You don't need to know everything off by heart or letter for letter. Some of you will also think this is a tutorial for HTML and CSS, false - I'm here to give you some tips and tricks that will help you along the way of learning.

Some of you might know, others obviously won't - but TwitchTv will strip a lot of HTML out of your Info sections, the reason it does this is because (I assume) for the safety of its users. For example anything like iFrames, Javascript etc - say goodbye to for your Info section. Another fun fact is you can not use external stylesheet's (.css files [Cascading Stylesheets]). This is also for the safety of its users I assume, I wouldn't know the exact reasons to be quite honest. 

So now you're going to ask: "How do we use CSS if we can't link them from an external source". Well, that's why we use in-line CSS. It's not as bad as it seems, honestly. 

Before we carry on, if you have no previous knowledge of HTML / CSS I suggest you have a look around, see what you can learn. The site I suggest you start with is www.w3schools.com (yes, I know of w3fools and their mistakes, however I feel it's the best place to just grab the basics). Of course there are other sites, feel free to have a wander around Google.

Also, don't worry about HTML5 and CSS3 for now - just stick to the basics, it's easier - not to mention a specific browsers being awkward with modern technology (yes, I'm talking about Internet Explorer ..)

So, hopefully now you have some of the basics down - now we get into the fun bit.

As I said before, with TwitchTv Info sections we have to use in-line CSS, so lets say I wanted to make a black box with a height of 30 pixels and the full width of the info section, this is how it would look:

<div style="height: 30px; background: #000000;"> </div>

Now, lets break this down - the (style="") indicated we want to give this divider a style (CSS) so that's where we put it, and like I said this is in-line CSS, see where the in-line bit comes from now? You may also notice I didn't specify any width, like I said this isn't a CSS tutorial but if you don't specify any width it will go the full width by default (usually this doesn't work with normal web-pages because you'd have to also define the margin).

I should also the mention that the width of the TwitchTv info section is 640 pixels. So bare that in mind if you decide to whip up a design in Photoshop. Most CSS will work however keep in mind the Info section has a funny way of telling you what it doesn't like by removing it without warning. So I warn you now, if you're going to be doing this for the first time, write it up in an IDE or notepad to keep a backup as generally it won't only take the stuff it doesn't like, it may or may not take a bit more with it, really depends on what you tried to do.

So this clunk of text was just to give you all a general idea of the Twitch Info section, I didn't really want to just splash out something nobody would understand, so for now this will be it - however, when I get my portfolio up for web-development I'll be creating and uploading free templates for you all to use (I just don't have the resources or money at the moment to spend on web-hosting and I don't want to use Imgur or Tinypic as I have a feeling they'll take them down for high bandwidth usage).

(Forum Moderators, I understand this isn't really a Tutorial however I feel it gives some useful information people could use. Please do remove it if you have to, I don't mind - this is just my way of giving back to the community for endless entertainment)

Ciao for now.

Fire

You should post the code for your examples if you're going to post the images :p

"This is what you can do!"

>"o...k how do I do it"

itruthful

You should post the code for your examples if you're going to post the images :p

"This is what you can do!"

>"o...k how do I do it"

Oops, that was careless of me. Thanks for the heads up - I'll add Pastebin links under the images soon as I can edit the thread again.

Thank you. ^_^

Fire

You should be able to edit it now, let me know if it's not working :)

itruthful

You should be able to edit it now, let me know if it's not working :)

Just added the links below the images and a little extra note below the second source link. Thank you, saves waiting an hour to edit the post.

:)

kamano77

Thank you so much for these! I'm using your first example as a basis to make my own right now. Having something like this to start from and tweak helps a lot in terms of figuring out how to do this type of work, in my opinion. Gives you both a starting point and a goal, and now I just need to work on the in-between part of changing it around a bit and adding my own content and all that.

itruthful

Thank you so much for these! I'm using your first example as a basis to make my own right now. Having something like this to start from and tweak helps a lot in terms of figuring out how to do this type of work, in my opinion. Gives you both a starting point and a goal, and now I just need to work on the in-between part of changing it around a bit and adding my own content and all that.

No problem at all, glad to see it helps. I urge anyone who doesn't feel too confident to start off with to use one of my examples to help themselves learn or simply make their own Info section without too much hassle. 

Let me know if you have any problems :)

cndnoxer

How do you get a background image to repeat all the way down the bio section? I can make it stretch just by increasing the height parameter, but is there a way to make it repeat if I wanted to make a pattern?

Fire

@cndnoxer you'd set a background-repeat:repeat inline style on the element you have your background attached to.

background-url(urltoimage);background-repeat:repeat;

You can do this with shorthand via the standard background css style, but the longbio works better with separate stylings

biotest

if you are using a background image you can set it to repeat-y

repeat-y is top to bottom

repeat-x is left to right

if you are using a background colour ie:#ffffff to make your whole background black, set the height to 100% then it will automatically adjust when you add more content to your page.

biotest

damn my english, in my above post i worte "colour" how the english spell it but in html/css you have to use "color" how the americans spell it   "background-color:#ffffff;"  sorry for any confusion :)

itruthful

Sorry guys, had to remove the examples / freebies. I've had news (and seen for myself) people using them, claiming full credit and possibly trying to sell them off as their own.

Again, sorry - some people just have to ruin it for others, I'll be adding on / modifying this soon to fit the new Twitch site.

farfurry

An alternative is to just use background:

background:url('') no-repeat top center #000;

- URL('image/path')

- no-repeat / repeat-x / repeat-y

- top / bottom / left / center / right

- #hexcolor

Fire

Sorry guys, had to remove the examples / freebies. I've had news (and seen for myself) people using them, claiming full credit and possibly trying to sell them off as their own.

Again, sorry - some people just have to ruin it for others, I'll be adding on / modifying this soon to fit the new Twitch site.

License your new ones under CC BY-NC-SA ( Creative Commons Attribution-NonCommercial-ShareAlike ).

Then you'll have legal ability to go after them or otherwise shut them down :)

http://creativecommons.org/licenses/

itruthful

Sorry guys, had to remove the examples / freebies. I've had news (and seen for myself) people using them, claiming full credit and possibly trying to sell them off as their own.

Again, sorry - some people just have to ruin it for others, I'll be adding on / modifying this soon to fit the new Twitch site.

License your new ones under CC BY-NC-SA ( Creative Commons Attribution-NonCommercial-ShareAlike ).

Then you'll have legal ability to go after them or otherwise shut them down :)

http://creativecommons.org/licenses/

A very good point, thank you. Highly considering this option. 

kamano77

That's too bad about people claiming credit and trying to sell off those designs as their own. By all means if you say the word I can do something different with mine, since I mostly copy/pasted one of your examples and swapped parts around as needed til I had something that worked for me. I think mine is personalized enough, and I've never claimed credit for making them or anything like that, but I did definitely keep the skeleton of the layout you provided. Let me know if you want me to take it down or anything and I'll gladly do so.

http://www.twitch.tv/kamano77

biotest

@kamano77

i like what you have done with your page, but can i make one suggestion.

Before all of your code try adding this line: <div style="background:#0c0c0c;"> then at the very end of your code add </div> to close it.

I think its makes the page look nicer/smoother as it connects all the different sections you have now. try it and see what you think :)

<div style="background:#0c0c0c;">

ALL THE CODE YOU ALREADY HAVE

</div>