How to Customize Twitter Search and Profile Widgets

Posted in Coding, HTML & CSS • 699 days ago • Written by Rochester Oliveira • 32 Comments

So you want to say something and get heard from anywhere. The best way to do this is with Twitter and its widgets. We will be talking about a profile widget, that shows your latest tweets, and a search widget, that runs a custom query search and shows all the results.

They have a pretty simple customization when you generate them, but what many people haven’t noticed is that you can make advanced customization to them with CSS. This is possible because the Twitter team has made it without using any inline CSS rules, and they are such nice people that almost all their CSS is quite simple to overwrite (just with the class of the item itself in most cases).

Then, what you have to do is to turn on your CSS Zen Garden side and let your imagination create awesome widgets in a really simple way.

So, let’s rock!

Our result

Here you can see a preview of our widgets. The first one is our profile widget, and the second is our search widget (searching about tweets related to 1stwebdesigner, of course). You can see our DEMO or DOWNLOAD SOURCE to try your own combinations.

The widget customization

Let’s start with the profile widget, so we can try out some customization.

You can generate your basic profile widget on Twitter’s page.

If you run this code you will see a structure like this:

&lt;div #twtr-widget-N .twtr-widget&gt; &lt;em&gt;- Where N is our widget's ID on page (if you have more than one) and class is the same for all widgets&lt;/em&gt;
	&lt;div .twtr-hd&gt; &lt;em&gt;- Widget header, with avatar, screen name and @user&lt;/em&gt;
	&lt;div .twtr-bd&gt; &lt;em&gt;- Widget body, with all tweets&lt;/em&gt;
		&lt;div .twtr-tweets&gt; &lt;em&gt;- All  tweet's container&lt;/em&gt;
			&lt;div #tweet-id-N .twtr-tweet&gt; &lt;em&gt;- Each tweet has his own div with a unique ID&lt;/em&gt;
	&lt;div .twtr-ft&gt; &lt;em&gt;- Widget footer, with twitter's link&lt;/em&gt;
&lt;em&gt;

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: &quot;progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3)&quot;;
	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: &quot;progid:DXImageTransform.Microsoft.gradient(startColorstr=#30ffffff,endColorstr=#30ffffff)&quot;;
}

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: &quot;“&quot;;
	color: #bababa;
	text-shadow: 0 1px 1px #909090;
	font-family: &quot;times new roman&quot;, 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.

Join over 55,891 Subscribers Today! FREE UPDATES!

Get The Only Freelancer crash course you will ever need to read!

Rochester Oliveira

43 Written Articles • Twitter • Website • Google+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

32 Comments Best Comments First

Minimal

Wednesday, June 22nd, 2011 18:35

1

Very useful for me. Thanks for your tips, R. Oliveira.

0
- Rochester Oliveira
  
  Thursday, June 23rd, 2011 04:38
  
  2
  
  Hey Minimal, I really hope it helps you guys :D
  
  []‘s
  
  0
henry

Saturday, October 1st, 2011 10:38

12

how to edit the the footer of the widget to put a follow button
i supose the code is .twtr-ft { display: true; } what is this part where is in html?

0
- Rochester Oliveira
  
  Monday, October 3rd, 2011 05:27
  
  13
  
  Hi henry,
  It’s way easier to just hide the default footer ( as we’ve done with .twtr-ft { display: none; } ) and then just put your own HTML above it.
  
  []‘s
  
  0
Steve

Wednesday, October 12th, 2011 19:07

15

How do you target the “Name” and “Username” or the “Avitar” in the .twtr-hd class? I am trying to change the font properties. Thanks!

0
- Rochester Oliveira
  
  Friday, October 14th, 2011 04:20
  
  17
  
  Hey Steve!
  
  Sorry for delay, haven’t seen your coments before.
  
  So, it’s better target via widget ID, so you’ll overwrite anything. If it’s still doesn’t working try to add !important everywhere :D
  
  0
- Steve-O
  
  Thursday, October 13th, 2011 19:03
  
  16
  
  I figured it out. You must target more specifically the .twtr-hd class with it’s parent ex; “parent .twtr-hd h4″. You must also include the “!important” to the end of the styles you are applying to override the hierarchy. You can select either the h3 (name) or h4 (username) respectively. I would like to know how to change the color though, as adding the “color:#******” doesn’t effect anything. I’ve tried targeting the “a” tag as well with no joy. Any help is appreciated.
  
  0
  - Rodolfo Alvarez
    
    Monday, October 17th, 2011 06:12
    
    18
    
    Hey Steve
    
    I`ve change the color directly in script inside the HTML…
    
    theme: {
    shell: {
    background: ‘transparent’, //this is important
    color: ‘#fff’ //HERE´S WHERE YOU CAN CHANGE THE COLOR
    }
    
    It works for me, I hope it helps.
    
    0
Steve-O

Wednesday, October 12th, 2011 18:34

14

Great guide! How do you target the name and the username within the .twtr-hd class? Trying to change font and font-size. You also mentioned you could change the avatar size as well. How?

0
steve

Monday, July 18th, 2011 20:46

8

how can i customize the h3 and h4 tags used in the widget? I don’t want it to follow the rest of my sites styles for h3/h4. I tried .twtr-hd h3 but that doesn’t seem to do the trick. hm…..

0
- Rochester Oliveira
  
  Tuesday, July 19th, 2011 05:34
  
  9
  
  Hey steve, how are you?
  
  Probably you’ll need to use the id of the widget, as “twtr-widget-1″ if it is your first widget on page, 2 if second and so on.
  
  This is because you have some embed styles.. You could also use !important rule to overwrite previously declared rules.
  
  []‘s
  
  0
  - steve
    
    Tuesday, July 19th, 2011 15:42
    
    10
    
    I am well thanks. I wound up just setting twtr-hd’s display to none, similar to what was done for the footer. Worked better for me because I didn’t really need either.
    
    Do you know if the twitter search widget only displays tweets that are only a certain amount of days old? Seems like anything older than 3 days it will not post? I thought maybe changing “live” to false would change that, but I guess not.
    
    Thanks anyway, this tutorial was a huge help!
    
    0
    - Rochester Oliveira
      
      Tuesday, July 26th, 2011 05:52
      
      11
      
      Hey steve, yes I’ve seen this limit too. Just that queries with higher amount of results we have a better number of days I think..
      
      []‘s
      
      0
Nanang Gunawan

Friday, June 24th, 2011 02:18

3

its good Oliveira…

thanks for your post..

0
- Rochester Oliveira
  
  Friday, June 24th, 2011 18:04
  
  4
  
  Hey Nanang,
  
  You are welcome! :D
  
  []‘s
  
  0
Dave

Friday, June 24th, 2011 22:53

5

Nice. Question though – is there an option for tweets to start at the bottom of the widget, then scroll up, blog-style, so that newest tweet is always on top, pushed up from below by older content?

In other words, is there a features variable that enables you to reverse the tweets direction?

Or can this be done magically with css?

Thanks!

0
- Rochester Oliveira
  
  Sunday, June 26th, 2011 16:24
  
  6
  
  Hey dave, actualy this is the way it works, the newest tweets on top!
  
  And if you want it updated from time to time just activate the “live” function (just like our search widget).
  
  Thank you!
  []‘s
  
  0
Rochester Oliveira

Sunday, June 26th, 2011 16:25

7

Hi dfunno,

Thank you, we have much more posts like this to go ;)

[]‘s

0
Anthony

Friday, March 9th, 2012 05:06

28

Thank you so much,the tutorial just completed a project I was handling.

0
Ben

Sunday, February 26th, 2012 21:44

27

Wow, this is great! I’m definitely bookmarking your website. I’m trying to customize everything to be transparent and have tweets show up in quotes in large font. I’m having plenty of problems since I”m new to CSS, but I’m having one BIG problem.

I need to limit the number of tweets that are visible to just 1. Is this possible? I tried adding the rpp: 1, attribute into the jscript, but it didn’t work.

0
Ben Haines

Sunday, April 8th, 2012 20:08

29

Great post! Is there anyway to exclude replies? I’ve tried a couple of methods but can’t do it.

0
Paul

Thursday, April 19th, 2012 04:12

30

Excellent post.

Do you have some examples of how you would code:
#item – hastag search operator
:) and :( and ?
-item (minus) – This is the “not” operator. It excludes all “item” from search.

Thanks,

Paul

0
jamie

Wednesday, May 16th, 2012 17:27

32

overall great tutorial. was hoping for how to get rid of the thumbnail and name of the twitter account and just feed in the tweet, plus have it loop the other tweets. any guidance/suggestions on this?

0
Leigh Williamson

Friday, April 20th, 2012 10:47

31

Wow! Impressed. I’ve used your example on my website.
http://www.leighwilliamson.com (bottom right hand corner)
Im a real novice with web building.
The problem I’m having is that I’d like to filter my tweets to only show “my” tweets on my website that I hashtagged with #digifood and #digitips. to show only my relevant tweets I make specific to my website.

0
Rochester Oliveira

Thursday, February 23rd, 2012 03:35

26

Hi Herbert,

Nice addition! Just bookmarked! :)

[]‘s

0
Rochester Oliveira

Thursday, February 23rd, 2012 03:33

25

Hi Eduardo,

You are welcome :)

And if you need more help, just come back ;)

[]‘s

0
ric

Tuesday, November 8th, 2011 21:03

19

i dont get it, where do i add/edit the css classes?

0
- Rochester Oliveira
  
  Monday, January 2nd, 2012 19:18
  
  20
  
  Hi ric, it is in your stylesheet, of course. In this example they are all inside one page but your website probably has its own stylesheet.css!
  
  []‘s
  
  0
Malin

Tuesday, January 3rd, 2012 19:02

21

Hey,
In the Search Timeline the newest tweets are at the bottom. Is there any way of fixing this ?

example :
http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/06/twitter-search/twitter-search/index.html

0
- Rochester Oliveira
  
  Thursday, February 23rd, 2012 03:28
  
  23
  
  Hi Malin,
  
  Here it’s working as expected, newers on the top. That’s because twitter itself selve us the code this way.
  
  []‘s
  
  0
Ben Clarke

Wednesday, January 25th, 2012 11:37

22

Thanks for this great post! Its helped me a great deal when it came down to customising customer profiles and mine! Thanks!

0
- Rochester Oliveira
  
  Thursday, February 23rd, 2012 03:31
  
  24
  
  Hi Ben!
  
  I’m glad I helped you. And keep coming, we have much more like this for you :)
  
  []‘s
  
  0

jamie

Wednesday, May 16th, 2012 17:27

32

overall great tutorial. was hoping for how to get rid of the thumbnail and name of the twitter account and just feed in the tweet, plus have it loop the other tweets. any guidance/suggestions on this?

0
Leigh Williamson

Friday, April 20th, 2012 10:47

31

Wow! Impressed. I’ve used your example on my website.
http://www.leighwilliamson.com (bottom right hand corner)
Im a real novice with web building.
The problem I’m having is that I’d like to filter my tweets to only show “my” tweets on my website that I hashtagged with #digifood and #digitips. to show only my relevant tweets I make specific to my website.

0
Paul

Thursday, April 19th, 2012 04:12

30

Excellent post.

Do you have some examples of how you would code:
#item – hastag search operator
:) and :( and ?
-item (minus) – This is the “not” operator. It excludes all “item” from search.

Thanks,

Paul

0
Ben Haines

Sunday, April 8th, 2012 20:08

29

Great post! Is there anyway to exclude replies? I’ve tried a couple of methods but can’t do it.

0
Anthony

Friday, March 9th, 2012 05:06

28

Thank you so much,the tutorial just completed a project I was handling.

0
Ben

Sunday, February 26th, 2012 21:44

27

Wow, this is great! I’m definitely bookmarking your website. I’m trying to customize everything to be transparent and have tweets show up in quotes in large font. I’m having plenty of problems since I”m new to CSS, but I’m having one BIG problem.

I need to limit the number of tweets that are visible to just 1. Is this possible? I tried adding the rpp: 1, attribute into the jscript, but it didn’t work.

0
Rochester Oliveira

Thursday, February 23rd, 2012 03:35

26

Hi Herbert,

Nice addition! Just bookmarked! :)

[]‘s

0
Rochester Oliveira

Thursday, February 23rd, 2012 03:33

25

Hi Eduardo,

You are welcome :)

And if you need more help, just come back ;)

[]‘s

0
Ben Clarke

Wednesday, January 25th, 2012 11:37

22

Thanks for this great post! Its helped me a great deal when it came down to customising customer profiles and mine! Thanks!

0
- Rochester Oliveira
  
  Thursday, February 23rd, 2012 03:31
  
  24
  
  Hi Ben!
  
  I’m glad I helped you. And keep coming, we have much more like this for you :)
  
  []‘s
  
  0
Malin

Tuesday, January 3rd, 2012 19:02

21

Hey,
In the Search Timeline the newest tweets are at the bottom. Is there any way of fixing this ?

example :
http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/06/twitter-search/twitter-search/index.html

0
- Rochester Oliveira
  
  Thursday, February 23rd, 2012 03:28
  
  23
  
  Hi Malin,
  
  Here it’s working as expected, newers on the top. That’s because twitter itself selve us the code this way.
  
  []‘s
  
  0
ric

Tuesday, November 8th, 2011 21:03

19

i dont get it, where do i add/edit the css classes?

0
- Rochester Oliveira
  
  Monday, January 2nd, 2012 19:18
  
  20
  
  Hi ric, it is in your stylesheet, of course. In this example they are all inside one page but your website probably has its own stylesheet.css!
  
  []‘s
  
  0
Steve

Wednesday, October 12th, 2011 19:07

15

How do you target the “Name” and “Username” or the “Avitar” in the .twtr-hd class? I am trying to change the font properties. Thanks!

0
- Steve-O
  
  Thursday, October 13th, 2011 19:03
  
  16
  
  I figured it out. You must target more specifically the .twtr-hd class with it’s parent ex; “parent .twtr-hd h4″. You must also include the “!important” to the end of the styles you are applying to override the hierarchy. You can select either the h3 (name) or h4 (username) respectively. I would like to know how to change the color though, as adding the “color:#******” doesn’t effect anything. I’ve tried targeting the “a” tag as well with no joy. Any help is appreciated.
  
  0
  - Rodolfo Alvarez
    
    Monday, October 17th, 2011 06:12
    
    18
    
    Hey Steve
    
    I`ve change the color directly in script inside the HTML…
    
    theme: {
    shell: {
    background: ‘transparent’, //this is important
    color: ‘#fff’ //HERE´S WHERE YOU CAN CHANGE THE COLOR
    }
    
    It works for me, I hope it helps.
    
    0
- Rochester Oliveira
  
  Friday, October 14th, 2011 04:20
  
  17
  
  Hey Steve!
  
  Sorry for delay, haven’t seen your coments before.
  
  So, it’s better target via widget ID, so you’ll overwrite anything. If it’s still doesn’t working try to add !important everywhere :D
  
  0
Steve-O

Wednesday, October 12th, 2011 18:34

14

Great guide! How do you target the name and the username within the .twtr-hd class? Trying to change font and font-size. You also mentioned you could change the avatar size as well. How?

0
henry

Saturday, October 1st, 2011 10:38

12

how to edit the the footer of the widget to put a follow button
i supose the code is .twtr-ft { display: true; } what is this part where is in html?

0
- Rochester Oliveira
  
  Monday, October 3rd, 2011 05:27
  
  13
  
  Hi henry,
  It’s way easier to just hide the default footer ( as we’ve done with .twtr-ft { display: none; } ) and then just put your own HTML above it.
  
  []‘s
  
  0
steve

Monday, July 18th, 2011 20:46

8

how can i customize the h3 and h4 tags used in the widget? I don’t want it to follow the rest of my sites styles for h3/h4. I tried .twtr-hd h3 but that doesn’t seem to do the trick. hm…..

0
- Rochester Oliveira
  
  Tuesday, July 19th, 2011 05:34
  
  9
  
  Hey steve, how are you?
  
  Probably you’ll need to use the id of the widget, as “twtr-widget-1″ if it is your first widget on page, 2 if second and so on.
  
  This is because you have some embed styles.. You could also use !important rule to overwrite previously declared rules.
  
  []‘s
  
  0
  - steve
    
    Tuesday, July 19th, 2011 15:42
    
    10
    
    I am well thanks. I wound up just setting twtr-hd’s display to none, similar to what was done for the footer. Worked better for me because I didn’t really need either.
    
    Do you know if the twitter search widget only displays tweets that are only a certain amount of days old? Seems like anything older than 3 days it will not post? I thought maybe changing “live” to false would change that, but I guess not.
    
    Thanks anyway, this tutorial was a huge help!
    
    0
    - Rochester Oliveira
      
      Tuesday, July 26th, 2011 05:52
      
      11
      
      Hey steve, yes I’ve seen this limit too. Just that queries with higher amount of results we have a better number of days I think..
      
      []‘s
      
      0
Rochester Oliveira

Sunday, June 26th, 2011 16:25

7

Hi dfunno,

Thank you, we have much more posts like this to go ;)

[]‘s

0
Dave

Friday, June 24th, 2011 22:53

5

Nice. Question though – is there an option for tweets to start at the bottom of the widget, then scroll up, blog-style, so that newest tweet is always on top, pushed up from below by older content?

In other words, is there a features variable that enables you to reverse the tweets direction?

Or can this be done magically with css?

Thanks!

0
- Rochester Oliveira
  
  Sunday, June 26th, 2011 16:24
  
  6
  
  Hey dave, actualy this is the way it works, the newest tweets on top!
  
  And if you want it updated from time to time just activate the “live” function (just like our search widget).
  
  Thank you!
  []‘s
  
  0
Nanang Gunawan

Friday, June 24th, 2011 02:18

3

its good Oliveira…

thanks for your post..

0
- Rochester Oliveira
  
  Friday, June 24th, 2011 18:04
  
  4
  
  Hey Nanang,
  
  You are welcome! :D
  
  []‘s
  
  0
Minimal

Wednesday, June 22nd, 2011 18:35

1

Very useful for me. Thanks for your tips, R. Oliveira.

0
- Rochester Oliveira
  
  Thursday, June 23rd, 2011 04:38
  
  2
  
  Hey Minimal, I really hope it helps you guys :D
  
  []‘s
  
  0

Comments are closed.

Our result

The widget customization

Searches and advanced querys

Are you hungry yet?

TwitStamp

TwitterFans

Twitter feed for WordPress

Join over 55,891 Subscribers Today! FREE UPDATES!

Minimal

henry

Steve

Rodolfo Alvarez

Steve-O

steve

steve

Nanang Gunawan

Dave

Anthony

Ben

Ben Haines

Paul

jamie

ric

Malin

Ben Clarke

jamie

Paul

Ben Haines

Anthony

Ben

Ben Clarke

Malin

ric

Steve

Rodolfo Alvarez

Steve-O

henry

steve

steve

Dave

Nanang Gunawan

Minimal

Join over 55,891 Subscribers Today.

New? Start here:

Pages

Quick Links

1st WebDesign Ebooks

Web Designers Ultimate 3 Book Bundle

Responsive Web Site Design, Get Your Site Ready For Every Device And Browser

Learn HTML5 Website Basic Features And Elements In 1 Day

Latest Web Design Trends, The Road To Good Website Design

Do You Know How To Freelance And Get More Clients?