Categories
Applications CSS Tutorials

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:

	
  • @webb_art DropBox works well for me and is platform independent: http://www.getdropbox.com/ about 15 hours ago
  • 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 */
    }
    
    Categories
    Expression Web Tutorials

    How Expression Web 2 Creates CSS

    Anna Ullrich just published an excellent article called Who’s Editing Your CSS? explaining how Expression Web 2 handles CSS and why you can trust the program to spit out proper non-bloated code.

    If you’ve watched my webcast or read any of my articles you should have an idea of this but Anna’s article is far more thorough than anything else I’ve read.

    Oh, by the way Anna: Who is editing your CSS? Your page is broken in Opera ;o)

    Categories
    Expression Web News Tutorials

    Expression Web 2 Webcast June 5th – What do you want to know?

    Building Compelling Websites on the Microsoft Platform

    I’m doing an Innovation Briefing Webcast about Expression Web 2 for Microsoft this coming Thursday at 11am Pacific Time. Hit the link below to sign up to join in. I don’t know if there’s still more spots for registration but if not, the entire one hour session will be recorded and published in wmv format for download and streaming.

    I’m meeting with the Expression Web dev team on the Tuesday before and I haven’t really nailed down what to present at the webcast so if you have any questions or want to see a demo of a specific function or anything like that, please drop me a line and I’ll work it in.

    Before you ask: No, I don’t work for Microsoft.

    WEBCAST DATE
    Thursday June 5, 2008
    2:00 PM – 3:00 PM ET
    Event ID: 1032350422
    Register Now