Create a Twitter Box in Your Sidebar - Part II

My Sidebar Twitter box tutorial seems to have struck a chord with WordPress users and it has generated some interesting questions. One of them, from TheNext2ShineBlog posed an interesting problem I decided to look into in more detail:

the only thing I would like to change is the time aspect (23 days ago // 4 hours ago). Is there a css code to hide that link without taking away the links from the original twitter message?

What TheN2S is refering to is the tail end of each Twitter message that reads either “less than a minute ago”, “a few minutes ago” etc up to “X days ago”.

Careful inspection of the JavaScript that generates the Tweets for the application (found here) shows that the time information is a core function of the Twitter system so it is coded into the main structure of the application itself. Therefore it is hard to siply remove it unless you want to create your own custom JS. But TheN2S is on the right track in asking if it can be removed by way of CSS.

Lifting a random tweet off my own site I found that the main body the JS spits out is contained within a span tag while the tail end with the time info is not:

<li>
   <span>@<a href="http://www.twitter.com/webb_art">webb_art</a> DropBox works well for me and is platform independent: <a href="http://www.getdropbox.com/">	http://www.getdropbox.com/</a></span>
   <a href="http://twitter.com/mor10/statuses/1003495851" style="font-size: 85%;"> about 15 hours ago</a>
</li>

That means we can use CSS to hide the content not in the while maintaining the visibility of the content that is. That requires some additions to the original CSS code:

#twitter_div ul li span {
	visibility: visible;
}
 
#twitter_div ul li span a {
	color: #D78E42;
	visibility: visible;
}
 
#twitter_div ul li a {
	visibility: hidden;
}

The first two single out the regular and link contents within the span specifically and set their visibility to visible. This is done because the last style sets the visibility of all anchors within list items under the twitter_div ID to hidden. So we are really working backwards - first hiding everything and then unhiding it in particular cases.

By adding these three style elements the time information will be hidden by the CSS while everything else shows up normally.

Please share this post if you found it useful:

Full-time and freelance job opportunities available at Authentic Jobs:

Post a job and reach web professionals everywhere.

7 Responses to “Create a Twitter Box in Your Sidebar - Part II”

TheN2S Says:
November 13th, 2008 at 7:29 pm

thank you very much! works perfectly. (=

Morten Rand-Hendriksen Says:
November 13th, 2008 at 8:33 pm

Great! Glad I could be of help. Now I’m going to hack the JS to see if I can make mine work better.

InverseFlux Says:
November 20th, 2008 at 11:55 am

I am curious, recently changed the theme on my site and made a few attempts at changing the color of text coming in from the twitter feed. I apparently have missed it, did you by chance know?

Morten Rand-Hendriksen Says:
November 20th, 2008 at 12:06 pm

Let’s see. The non-link text is controlled by the following style:

#twitter_div ul li

The links are controlled by the following styles:

#twitter_div ul li a, #twitter_div ul li a:hover

To change the text colour for both simply change the color attribute. If that doesn’t work you have a problem with conflicting styles (which can be fixed). But try it first and see what happens.

InverseFlux Says:
November 20th, 2008 at 4:56 pm

Looks like there is a severe case of swords crossing with the CSSs. Need me to paste anything specific here for help? Appreciate your guidance man.

Morten Rand-Hendriksen Says:
November 20th, 2008 at 7:01 pm

@InverseFlux: The problem you are having is that there is a style called #sidebars ul ul li that overrules the #twitter_div styles. This is because it is more specific in the cascade. An easy way of solving the problem is to make your Twitter-specific even more micromanaged than the offending style. This can be done by prefixing your Twitter-specific styles with “#sidebars” like this:

#sidebars #twitter_div ul li {

Another solution would be to remove the #sidebars ul ul li style but I’m guessing it’s there for a reason. I tested the above styling on your site an it works fine.

InverseFlux Says:
November 20th, 2008 at 7:58 pm

Dude. You are the intarweb ninja I required for this. I’d buy you a cheeseburger, but I think you are far away from Arizona. Haha, thanks man!