Modifying the Twitter Feed Widget

For anyone looking to remove the header and footer of the Twitter Feed Widget, CSS is the way to go about it. After getting the code from Twitter to display the content, add the CSS to it.

For example, here is my Twitter Widget:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 1,
  interval: 6000,
  width: 610,
  height: 35,
  theme: {
    shell: {
      background: '#000000',
      color: '#999999'
    },
    tweets: {
      background: '#000000',
      color: '#999999',
      links: '#09dbf1'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('twitter-username').start();
</script>

Use the following CSS code to remove the header and footer area:

.twtr-hd, .twtr-ft
{
display: none;
}


Also, you can force it to remove the dotted border and fix or modify the font size, font-family, and alignment.

.twtr-widget .twtr-tweet {
border:none!important;
text-align:right;
font-family: Tahoma, Geneva, sans-serif;
font-size:11px;
}

Hope this helps you! I used it to display a single Twitter line feed and until Twitter re-works the widget, this trick does what I need it to.