With this generic structure in mind we can do all the customizations. But the first thing that we can do to make things easier to customize our widget is to set its background to transparent when you call it’s js, with this:

//this is how we call our widget
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 300, //we've changed our default width, to make it prettier
height: 300,
theme: {
shell: {
background: 'transparent', //this is important
color: '#333'
},
tweets: {
background: 'transparent', //this is important
color: '#333',
links: '#c10000'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('1stwebdesigner').start();

Let’s start our CSS with the widget’s main box:

.twtr-widget {
float: left;
width: 300px; /* this is important if you want to make any positioning */
margin: 50px 0 0 80px;
padding: 0 0 15px;
background: #fafafa url(wavecut.png); /* our cute background */

/*** cross browser box shadow ***/
-moz-box-shadow: 0 0 2px #fff;
-webkit-box-shadow: 0 0 2px #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3)";
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=0,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=90,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=180,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=270,strength=3);
box-shadow: 0 0 2px #fff;

/*** kind of cross browser rounded corner ***/
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

The result after this will be a basic widget with a new background, shadow and rounded corners. Well, after that we need to change our widget’s header, so:

.twtr-hd {
/*** cross browser rgba ***/
background-color: transparent;
background-color: rgba(255,255,255,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30ffffff,endColorstr=#30ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#30ffffff,endColorstr=#30ffffff)";
}

Now you may notice that the area where your avatar is, username and @userid has a different background. The funny part is that it works even in IE (oh, yeah, rga on IE). You could make your avatar bigger, change your name’s style, or even hide this stuff if you want. You know, from now on it is all up to your imagination!

If you are one of our loyal readers you may notice that [update link with clean url after approved]we’ve talked about curly quotes with :before[/link]. Long story short, you can create this effect with a few lines of CSS and get a really good result in all major browsers. We’ve customized our tweets list also, with a border, but with this element you will have to force priority with CSS because it has two classes in Twitter’s default CSS:

.twtr-widget .twtr-bd .twtr-tweet { /* they have 2 classes in default, do we have to use 3 */
margin: 5px 0 0;
padding: 0 0 5px;
border-bottom: 1px solid #cecece;
}
.twtr-tweet:before {
display: block;
float: left;
margin: -5px 0 0 5px;
font-size: 50px; /* let's make it a big quote! */
content: "“";
color: #bababa;
text-shadow: 0 1px 1px #909090;
font-family: "times new roman", serif;
}

And last but not least, we just hide all that Twitter link stuff. As an alternative, you can hide default content and replace it with CSS (as we’ve done with our curly quote) or jQuery (with text()). So our footer will be:

.twtr-ft { display: none; }

Searches and advanced querys

You can create an advanced widget with search widget. You could, for example, get tweets from all your blog’s writers, and what people are saying about them. This kind of thing is possible because we have advanced search operators.

You can set this in your widget’s “search” attribute. Our example’s js would be something like this:

new TWTR.Widget({
version: 2,
type: 'search',
search: 'from:dsgn_pro OR from:1stwebdesigner OR 1stwebdesigner OR 1wd', // here is our query!
interval: 6000,
title: 'What do they say about 1stWebdesigner',
subject: '1WD related tweets',
width: 300,
height: 300,
theme: {
shell: {
background: 'transparent',
color: '#333'
},
tweets: {
background: 'transparent',
color: '#333',
links: '#c10000'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();

Now what you have to do is try out some variations until you get something that you find really interesting. Some good operators that can help you in this task are:

• #item - hastag search operator
• from:USERID - search for anything tweeted by @USERID
• filter:links - When you add this to your query, it will return only results with links. Pretty useful to search for resources :D
• :) and :( and ?- They search for positive / negative / question attitude in the results. Pretty awesome, it should be an international operator in all search engines
• -item (minus) – This is the “not” operator. It excludes all “item” from search.

Are you hungry yet?

There are some alternatives to this widgets that are really worth trying:

TwitStamp

This service generates an image with your last tweet so you can put it anywhere without worrying about js loading cache or anything else. Really useful for mail or forum signatures.

TwitterFans

With this WordPress plugin you can show your followers. It is really close to what you get with Facebook’s likebox.

Twitter feed for WordPress

It does almost the same thing as the Twitter widget, with better WordPress’s integration.