by Peter Moss
1. March 2010 09:55
Twitter was nice enough to provide us with a Javascript JSON widget to retrieve one's public timeline.
Twitter widget constructor has a bunch of parameters that you can change to customize the look and feel of your widget.
However one critical, in my opinion, element was left out and remains hardcoded. Font definition should have been exposed in the widget construction, or at least the CSS classes should have been properly documented.
Here is how the twitter widget can be invoked:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 4000,
width: 'auto',
height: 150,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#0707eb'
}
},
features: {
scrollbar: false,
loop: true,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('2PeterMoss').start();
</script>
I have looked at their cryptic code in widget.js and pulled out the CSS class that needs to be changed.
To change the font of your tweets you have to change the following CSS class:
.twtr-tweet-text {
font size: 105%;
font-family: Georgia, Serif;
}
There are other CSS classes that can be modified:
.twtr-hyperlink
.twtr-atreply
.twtr-hashtag
.twtr-tweet-wrap
.twtr-avatar
.twtr-img
The above twitter widget works but there is a cleaner solution on code.google.com site.
At least this one provides you with a nice css and Javascript code that is easier on your eyes :-)
Subscribe