Link to home
Start Free TrialLog in
Avatar of axessJosh
axessJosh

asked on

custom twitter feed, css for each feed item

I have found some code that generates a custom Twitter feed and it works great.  Only problem is that I cannot figure out how to create a custom background for each "tweet".

It currently applies my backgrounds to the entire listing, i've tried several options but can't figure it out.

My <div> code:
<div id="twitter_t"></div>
				<div id="twitter_m">
  				 <div id="twitter_container">
       					<ul id="twitter_update_list"></ul>
   				</div></div>
				<div id="twitter_b"></div>

Open in new window


My CSS:
#twitter_t {
   width: 300px;
   height: 25px;
   background:url(images/twitter_top.png) no-repeat top;
}

#twitter_m {
   width: 300px;
   padding: 0 15px;
   background:url(images/twitter_mid.png) repeat-y;
   
}

   #twitter_container {
       min-height:45px;
       height:auto !important;
       
       padding-bottom:10px;
	  
   }

       #twitter_update_list {
           width: 250px;
           padding: 0 0 10px 0;
           overflow: hidden;
           font-family: Georgia;
           font-size: 14px;
           font-style: italic;
           color: #31353d;
           line-height: 16px;
           font-weight:bold;
		   
		   
       }

       #twitter_update_list li {
           width: 250px;
           list-style: none;
		   margin-bottom: 15px;
		    
		   
       }

       #twitter_update_list li a {
           color: #5f6d76;
           border-bottom: dotted 1px;
           text-decoration: none;
		  
       }

       #twitter_update_list li a:hover {
           color: #31353d;
           background: #d3f1f9;
       }

		#twitter_b {
  		  width: 300px;
          height: 100px;
   		  background:url(images/twitter_bot.png) no-repeat bottom;
}

Open in new window


and the JS:

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/REPLACE.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

Open in new window


I understand how it is working but cannot figure out how to separate things out to where my 3 background images will be the top, middle and bottom for each individual tweet.  The source is showing that it outputs a <ul> and <li> tags for each tweet.

suggestions?
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of axessJosh
axessJosh

ASKER

That works for the <li>,

but the way it is setup in the <div> structure to have a top element, that has a 25px high rounded top, a middle area that is repeatable with the sides to match the top, and a bottom that looks like a quote sign.  I'd like it to wrap each tweet in that format so that the height is expandable based on the amount of text.