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:
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.
Move the time and date stamp to its own line
A couple of people have been asking how to separate out the date and time stamp and place it on its own line. The answer is to target the same span above and set its display property to block. That way it will be separated out. I never got around to answering it but reader thnhzng posted a nice piece of CSS in the comments that I thought would be worth pasting in here:
#twitter_div ul li span {
visibility: visible;
}
#twitter_div ul li span a {
color: #D78E42;
visibility: visible;
display: inherit;
}
#twitter_div ul li a {
display: block; /* creates line-break b/f & after */
text-align: right; /*aligns time-stamp to the right */
font-family: 'Trebuchet MS'; /* change t-s font */
color: #445566; /* change color of time-stamp */
}
30 replies on “Create a Twitter Box in Your Sidebar – Part II”
thank you very much! works perfectly. (=
Great! Glad I could be of help. Now I’m going to hack the JS to see if I can make mine work better.
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?
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.
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.
@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.
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!
Thanks! Exactly the solution I was looking for!
Hi! I’m changing the layout of my website and adding a Twitter box and you tutorial help me doing that. But I don’t want to hide the time stamp from the tweets, I just want to let the time with a different color than the twitter names (@example). There is a way of doing this? Could you help me please? Thank you” 🙂
That’s what this article is about. Just follow the tutorial and your timestamps will disappear.
Thanks, this works like a gem on my wordpress site, I’m going to try it next when I make my own myspace layout.
Yay that works great! Thanks!
Nice tutorial. Would you know if there is a way to make the links within the twitter feed nofollow?
Thank you so much!!! I was looking for a way to hide the time stamp ^.^
How do you get rid of the little list bullet and make the text align to the left instead of the right?
Thanks
I find that it preferable to use display: none and display: inline than visibility since display completely removes the timestamp from the page, whereas visibility hides it but it still occupies the space.
If you have several tweets in a list, and say a tweet takes up one row, with the timestamp falling on the second row, using visibility will show that second row as extra whitespace between that tweet and the one below, which doesn’t look good. Display: none removes it completely, no risk of unwanted whitespace.
Hast du noch mehr zu dem Thema geschrieben? Gleich mal das blog durchsuchen.. 😉
Ok, very in depth tutorial with a second part also. May be this will also be helpful to people who complete this tutorial?
After you create your twitter box, may be you can spice it up a bit like this 🙂 http://www.code-pal.com/spice-up-your-twitter-feed-box-using-css/
I like your website – great work!
Thanks – this is helping me so much right now! I’m wondering – is there any way to get the time stamp to occur on a *new line*, instead of hiding it?
I’m with Kathryn…Is there a way to shove the time-stamp down onto its own line?
My guess is that this is part of Twitter’s JS and therefore is much harder to modify. I’d like to know if it’s possible, regardless.
I figured it out on my own, incredibly. Since we know the time-stamp is outside the element, we can use the same process used to hide the time-stamp to move it around:
#twitter_div ul li span {
visibility: visible;
}
#twitter_div ul li span a {
color: #D78E42;
visibility: visible;
display: inherit;
}
#twitter_div ul li a {
display: block; <-creates line-break b/f & after
text-align: right; <-aligns time-stamp to the right
font-family: 'Trebuchet MS'; <-change t-s font
color: #445566; <-change color of time-stamp
}
Hope this helps!
@Kathryn and @thnhzng: That was the solution I was thinking of proposing though I never got around to it. I will include it in the article with attribution. Thanks!
Thanks for sharing this info, I do not know about anybody else, but I can totally make use of it.
Thank you for something simple, that is easy to implement – and looks great!! I was going to design my own background, but yours was so nice I just kept it (hope you don’t mind). Great work!
For some reason, I somehow got bullet points at the start of my posts on my website. I cant seem to remove them, any ideas?
Hi,
I also get bullits at the start of the tweets.
How come your example image does not have them, and how do I get rid of them?
Hey VormgeverNodig.nl:
Use the following CSS.
#twitter_div ul {list-style-type:none;}
–
Vaibhav Bhat
Just wondering- wouldn’t it be much easier to hide the timestamp bi using the following CSS?
#twitter_div ul li a:last-child {visibility:hidden;}
That is faster and works because the timestamp is essentially the last hyperlink in the li. Cheers!
—
Vaibhav
thank you for this tutorial, it is exactly what i search for.