I'm currently training as a web developer.
One of the first tasks the trainees were given is to customize the twitter widget.We were told to replicate the twitter widget that is already present in a particular webpage.
Because this is the first time I am able to do something like this, I'm going to post a sample of my work here.
<html>
<head>
<title>Twitter Widget BY jBOY</title>
<style type="text/css">
.twitter-widget-container
{
position: relative;
margin: 40px;
}
#twtr-widget-1 .twtr-doc .twtr-hd h4
{
color: White !important;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 20px !important;
text-transform: uppercase;
}
#twtr-widget-1 .twtr-doc .twtr-hd h3
{
color: White !important;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 20px !important;
margin: 0 10px !important;
text-transform: uppercase;
}
.twtr-widget .twtr-tweet
{
border-bottom: 1px solid #808080;
margin: 9px 15px 0;
padding-bottom: 10px;
}
.twtr-doc
{
background: none repeat scroll 0 0 #E5E5E5;
}
.twtr-doc .twtr-hd
{
background: none repeat scroll 0 0 #666666;
}
.twtr-doc .twtr-hd h3
{
float: left;
}
.twtr-doc .twtr-bd
{
padding: 20px 20px 80px;
}
.twtr-doc .twtr-ft
{
display: none;
}
.twtr-follow-wrapper a.twtr-follow-btn:link, .twtr-follow-wrapper a.twtr-follow-btn:visited
{
background: url("http://www.thenewjournalist.co.uk/wp-content/uploads/2012/01/Follow-us-Twitter-icon.jpg") no-repeat scroll 0 top transparent;
top: 425px;
display: block;
height: 60px;
left: 20px;
position: absolute;
width: 205px;
z-index: 2;
}
</style>
</head>
<body>
<div id="twitter-widget-container" class="twitter-widget-container">
<div class="twitter-wrap">
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'search',
rpp: 10, //This is how many tweets to show.
search: 'jeremiahflaga',
interval: 30000,
title: 'TAG YOUR TWEETS WITH',
subject: '#jeremiahflaga',
height: 356,
width: 560,
theme: {
shell: {
background: 'none',
color: '#000'
},
tweets: {
background: '#fff',
color: '#5b5b5b',
links: '#ca181f'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'all',
toptweets: true,
following: false
}
}).render().start();
</script>
</div>
<div class="twtr-follow-wrapper">
<a class="twtr-follow-btn" target="_blank" href="http://www.twitter.com/jeremiahflaga"></a>
</div>
</div>
</body>
</html>
The CSS that I used here are not all mine. Most of them were taken from the webpage of which we were told to replicate the twitter widget. I just added some and modified some.
Free Lessons for Chruch Pianists:
Free lessons, tips and downloads for church pianists
DVD Courses (Reharmonization, Play by Ear!, Arranging, Accompanying, Theory for Church Pianists, etc.):
Over 30 hours of DVD instruction for church pianists
Visit Vitabase for Quality Health Supplements
No comments:
Post a Comment