In my previous post I've outlined the inner HTML structure created by the Profile widget of Twitter. In this post I'm going to show you how to take advantage of this structure to stylize a Twitter widget with CSS. First, we need an HTML wrapper that will contain our widget. It is as follows:
<body>
<div id="tweets">
<!-- JavaScript here -->
</div>
</body>
The default appearance of such widget is shown below.
Now it's time to apply styles. Remember that we're dealing with JavaScript styles, so we need to override them:
#tweets {
width: 300px;
margin: 0 auto;
}
#tweets .twtr-widget,
#tweets .twtr-doc {
width: 100%;
height: auto;
}
#tweets .twtr-hd {
background: #d40;
color: #fff;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
font-family: Georgia, serif;
}
#tweets .twtr-hd *,
#tweets .twtr-hd h4 a {
background: #d40 !important;
}
#tweets .twtr-hd h3,
#tweets .twtr-hd h4 {
font-weight: normal;
text-align: center;
}
#tweets .twtr-hd h3 {
background: #fff !important;
color: #333 !important;
font-size: 1.5em !important;
padding: 0.2em !important;
-moz-border-radius: 3px;
border-radius: 3px;
}
#tweets .twtr-tweet {
background: #fff;
}
#tweets .twtr-tweet a:link,
#tweets .twtr-tweet a:visited,
#tweets .twtr-tweet a:hover {
color: #c40 !important;
}
#tweets .twtr-tweet .twtr-tweet-text {
border-bottom: 2px dashed #666 !important;
padding-bottom: 4px !important;
}
#tweets .twtr-tweet .twtr-tweet-text p {
color: #333 !important;
}
And this is the result:
As you can see, we made an abundant use of the !important statement to make sure that our styles will override the default ones.
This is awesome, I have been looking for a way to customize the look and feel of the Twitter widget. This have saved my day! Thank you.
Thanks. :-)
Thanks so much for this, it's been a big help.
Is is possible to modify the "Join the conversation" text?
Yes. See this post to get the HTML structure to work with. Remember to use the !important statement.
Great twitter widget CSS styling. Works great in Firefox and Chrome. But in IE, the background becomes black, any solution please? Thank you.
Try to add the !important declaration. :-)
Is it also possible to remove the bottom dark twitter footer with the "join the conversation" text and logo?
Yes. Use 'display: none' on this element.
Hi, where should I add the !important declaration? Can't get it to work.
Also, how can I change the border color of the widget?
Thank you.
tweets .twtr-tweet {
background: #fff !important;
border-left-color: color !important;
border-right-color: !important;
}
if this doesn't work, apply border styles on the next child element of .twtr-tweet.
I added the code to #tweets .twtr-tweet, but it doesn't work.
Tried adding to #tweets .twtr-tweet .twtr-tweet-text, the border color doesn't change, but the background of the text does change! However, only part of the back of the text change only, not the whole background, there are still black paddings next to the text blocks. This happens only in IE.
Any help would be much appreciated. Thank you so much.
Which versions of IE are you testing on?
I am using IE8.
Ok, so try the following:
1. augment specificity using descendant selectors, for example:
element1 element2 element3 {property: value !important;}
Example:
#tweets .twtr-tweet . .twtr-tweet-text {
property: value !important;
}
2. use element names, for example div.twtr-tweet to increase specificity. let me know.
ps. I think that it should be useful if you put up a demo test online. let's continue this debugging via email. :-)
Can we remove the dotted line after each tweet??
#tweets .twtr-tweet .twtr-tweet-text {border-bottom: none !important;}
how to change the sizeof the twitter gravatar icon?
you have to select the image with the img selector and then use the CSS width and height to it.
How about to remove that icon?
img { display: none;}
Thanks for your quick reply. :)
Hi.
Thanks, this is very useful! Is it possible to get rounded corners for the whole widget in internet explorer (version 8)? I've tried referencing 'behavior: url(pie.htc);' but I can't seem to get it to work.
Thanks, David.
You can use background images to create rounded corners in IE. :-)
Do I just place the CSS in my main CSS file, or is there another way to make the Twitter widget call the modified CSS?
You should insert the code in the main CSS file.
Thanks for the tips, I have used them to hide the silly header and footer of the widget. I have been trying to give the footer elements a different color, but it does not work.
"3 days ago · reply · retweet · favorite" No matter what color I use it gets overridden to the default link color. Any tips?
MY question about the footer in Twitter Widget has resolved.
Twitter uses the !important tag, so it would override mine. But by wrapping the widget into 2 divs I could be more precise and hence won the highest count.
#tweet-wrap #myr-tweet a.twtr-timestamp,#tweet-wrap #myr-tweet a.twtr-reply, #tweet-wrap #myr-tweet a.twtr-rt, #tweet-wrap #myr-tweet a.twtr-fav {color: #545454 !important;}
That worked, hope it helps someone looking for the same.
@Myrddin, how did you override the HTML? I want the links in the main text to be a different color than the links in the footer of the tweet (3 days ago · reply · retweet · favorite)
Thanks for the info on customizing the Twitter Widget with CSS. I figured out how to reduce the text size but must have searched 15 sites trying to figure out how to reduce the link size and your site is the only one that worked. Multiples of people have this same problem.
how to delete h3 element
thanx a lot,, solved it coz of u..gr8 job man..
Anyone have any idea how to get rid of the rounded corners?
Hi Gabriele: Where do you place the override css? I have it in my style sheet for the page, but the twitter widget (//platform.twitter.com/widgets.js) defines styles within itself. Short of keeping a local copy of widgets.js and changing the source, how do I do this? Thanks, K.