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.
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.