I'm adding a Twitter feed to a website I'm working on, something I've never done before and am therefore inexperienced.

 

I decide to try a design of my own by creating a concept in Photoshop (attached [draft2.png), I then followed an online tutorial to create an existing design that I could customise.

 

I edited the CSS and added my own divs, but was limited to how much I could change to my liking (attached [incorrect.png]:

 

.twitterfeed {
width: 240px;
float: left;
background-color: #D4D4D4;
border: thin solid #8c8c8c;
margin: 10px;
font-size: 11px;
font-weight: 600;
}
.twittertop {
}
.avatar {
width: 69px;
height: 65px;
float: left;
margin-top: 10px;
margin-left: 15px;
margin-right: 10px;
background-image: url(../Images/Misc/Twitter/avatar.png);
}
.follow {
padding-top: 7px;
}
#twitter_div {
border: 1px solid #D4D4D4;
}
#twitter_update_list { margin: 0; overflow: hidden; }
#twitter_update_list li { padding: 5px 5px 5px 5px; border-bottom: solid 1px #680441; list-style: none; }
#twitter_update_list li a {
color: #090;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #936;
border-bottom: solid 1px;
}

 

I can't figure out how to incorporate my own idea for dividers between each tweet to replace the lines, how to align about xx hours ago and reply and how to change the colour of individual links instead of one overall colour and remove/add links.

 

Hope I've covered it all!

Have you got a live version I can take a look at?

Have you got a live version I can take a look at?

 

I don't, but if needed I can upload it somewhere temporarily after I finish work.

Here's the site.

The simplest way to add your dividers is probably to save your nice fading border as an image, and then set this image as the background on each list item:

 

#twitter_update_list li { 
 padding: 5px 5px 5px 5px; 
 list-style: none; 
 background: url(/path/to/your/image.png) no-repeat bottom;
}

Edited March 30, 201115 yr by edster

The simplest way to add your dividers is probably to save your nice fading border as an image, and then set this image as the background on each list item:

 

#twitter_update_list li { 
 padding: 5px 5px 5px 5px; 
 list-style: none; 
 background: url(/path/to/your/image.png) no-repeat bottom;
}

 

That works, thanks edster! How do I remove the divider at the very bottom of the feed though?

 

Any takers on solving how to arrange the text in a field (as I mentioned at the beginning of the thread)?

You can do this:

 

#twitter_update_list li:last-child { 
background: none;
}

 

I personally like that last border. It gives it a nice shadow effect to that container box.