Add HTML to your webtv

If you wish to add html to your webtv, this is now possible. You can use it in the description field of your channels. If you want to add hyperlinks, this can be inconvenient though because when your visitors will click on the link, it will also launch the channel you added the html description for.

Therefore I have added what I call HTML channels. These channels are particular in the fact no player will be launched when the user clicks on its row in the webtv channel list. If you want to add a html channel, just leave the channel link blank and insert the html you want to add in the description field. Optionally add a channel name. If you don't, the logo, the channel number and the channel name columns will not be displayed. Just the HTML code you have added in the description. This way you could add a chat for instance, a chipin widget or any other piece of html directly in your webtv. You may also want to use this to add text in a seperate row in the webtv, with instructions for your viewers for example. An example of an html channel is displayed in the webtv demo on the homepage.

To create this HTML channel I have simply added this piece of code in the description field of the "Add Channel" form:

<a href="http://blog.mywebtv.cc/2010/05/add-html-to-your-webtv.html" target="_blank" class="customlink">HTML Popup Demo</a>

I have also added this piece of css in my WebTV Style page:

a.customlink:link,
a.customlink:hover,
a.customlink:visited,
a.customlink:active,
a.customlink:focus {
display:block;
text-decoration:none;
text-align:center;
color:white;
}

a.customlink:hover {
background:#cc4400;
}

This css code transforms the simple hyperlink into a large button that changes color when hovered upon. This is optional though.

Another thing you may want to consider when making html channels is the style to give to the html channel rows. You can do this with the htmlrow class added to html channel rows. You can find the demo webtv css file here. I have used this css rule to turn off row highlighting on html channels:

.tv tr.highlightrow.htmlrow {
background:transparent;
}

So there you go. A simple example of how to add html to your webtv by making a html channel. Giving it style with your css file is more challenging but it gives great results.

Thanks for using mywebtv,
Elvis