FreshersTV 2012 Promo Banner – code for stations to adopt

Following on from a request by Calum, the NaSTA technical officer:

Hi Stations, I need you all to do NaSTA a favour – from wednesday morning, can you have the front page of your website link to freshers.tv – the new website will go live before then – to allow us to maximise traffic to freshers.tv?

…I was inspired. Here I’ve created a very simple web banner that all stations are more than welcome to adopt on Wednesday to help promote FreshersTV. You are also welcome to edit the code (i.e. change text, edit images, change colours) to suit.

Here’s a preview of how it will look on SUSUtv:

 

First off, here is the CSS you’ll need. Either copy this into your website’s stylesheet, or refer to the stylesheet we’ve hosted in Southampton. Completely up to you.

EITHER (paste into stylesheet):

#ftv2012{
 width:100%;
 background-color: rgb(230,230,230);
 font-family: Helvetica, Arial, sans-serif;
 font-size: 15px; color: rgb(0,64,128);
 height: 90px;
 overflow: auto;
 background: #d9dce2; /* Old browsers */
 background: -moz-linear-gradient(top, #d9dce2 0%, #fcfcfc 96%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d9dce2), color-stop(96%,#fcfcfc)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #d9dce2 0%,#fcfcfc 96%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #d9dce2 0%,#fcfcfc 96%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #d9dce2 0%,#fcfcfc 96%); /* IE10+ */
 background: linear-gradient(to bottom, #d9dce2 0%,#fcfcfc 96%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9dce2', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
}
#ftv2012:hover{
 background: #ceebff; /* Old browsers */
 background: -moz-linear-gradient(top, #ceebff 0%, #eff8ff 96%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ceebff), color-stop(96%,#eff8ff)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ceebff 0%,#eff8ff 96%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ceebff 0%,#eff8ff 96%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ceebff 0%,#eff8ff 96%); /* IE10+ */
 background: linear-gradient(to bottom, #ceebff 0%,#eff8ff 96%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ceebff', endColorstr='#eff8ff',GradientType=0 ); /* IE6-9 */
}
#ftv2012wrapper{
 width:960px;
 margin: 0 auto; padding: 15px 0;
}
#ftv2012message{
 float: right;
 width: 450px; height: 60px;
 text-align: right;
 padding-left: 15px;
 border-left: 2px solid rgb(179,179,179);
 vertical-align: middle;
}

OR (paste into the HTML file, between <head> tags):

<link rel="stylesheet" href="http://www.susu.tv/wp-content/themes/susutv/ftv2012style.css" type="text/css" />

 

Then, add in the appropriate HTML code. This wants to go in the main body of the page, right after the opening <body> tag (literally straight after, before any text or any CSS classes. If you run a WordPress site, an ideal location for this is your header.php file).

<!-- FreshersTV Message -->
<a href="http://www.freshers.tv/" target="_blank" title="Watch FreshersTV now...">
<div id="ftv2012">
<div id="ftv2012wrapper">
<img src="http://www.susu.tv/wp-content/uploads/2012/10/FTV2012.png" alt="FreshersTV 2012 - Live From YSTV" border="0" />
<div id="ftv2012message">
Watch out for us as we take part in FreshersTV, the biggest live broadcast in the student TV calendar. The 3 hour megashow kicks off today at 4pm, catch all the action on www.freshers.tv <img src="http://www.susu.tv/wp-content/uploads/2012/10/arrow.png" border="0" style="display:inline;vertical-align:text-top;" />
</div>
</div></div></a>

And that’s pretty much it. Put this live on your site on Wednesday!

Leave a Reply

Your email address will not be published. Required fields are marked *