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:
My CSS:
and the JS:
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?
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>
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;
}
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>
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.