What is CSS and how can I edit it to customize my badge?

how can i remove the dingbat (dots) that automatically appear in front of each twitter update?

thank you. that got rid of the dots - my next question is now that they are gone, how do i left justify the type...in dreamweaver, twitter code puts a box in the area where updates will display when online, but for some reason it spaces everything away to the right - still all left justified, but not all the way left within the text area...make sense?
cheers,

I'd like to know how to get my text to flush left, too!

Thank you so much, Thor!

Hello,

I am trying to customize my badge and I would like the "x days ago" to appear on a separate line (under) than the news itself.
Is this possible ?
Thanks for your help :]

How do i customize the link color and style? What is the css for that?

This is all great. Thanks guys. One last thing I'm trying to do - remove the space (return) under/betwen the "name is" and the update.

Right now mine looks like this:

eran is:

going camping 20 days ago
going to vegas 20 days ago
disappointed 27 days ago

I want it to look like this:

eran is:
going camping 20 days ago
going to vegas 20 days ago
disappointed 27 days ago

To Jboogie : you have to add this kind of code
ul#twitter_update_list a:link {
text-decoration:none;
color:#000000;
}

This would make your link appear without the underlining and in black color.
You can also style ul#twitter_update_list a:hover to customize the style of the link when people put their mouse over it and ul#twitter_update_list a:visited to customize the style of the link when people have already visited it.

To Eran Thomson : Which Twitter badge are you using ? mine doesn't show this "xxx is:" line before the update list. Could you paste the code of the badge here ?

Hi Flaoua

I'm not using a standard badge - here's my CSS code:

<style type="text/css">

a:link {
color: #00FF00;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #99FF33;
}
a:hover {
text-decoration: none;
color: #FF9900;
}
a:active {
text-decoration: none;
}
.style1 {color: #00FF00}
.style2 {color: #666666}

ul#twitter_update_list
{list-style-type:none}

ul#twitter_update_list
{list-style-type:none; padding-left:0px;margin-left:0px}

AND...my twitter code:

<span class="style1">eranthomson

<span class="boldbodytext">eran is:</span>
<span class="style1"><div>

</div>


</td>
</tr>

You can see how it works here: www.eranthomson.com

Cheers,</style>

hmm - my code is not displaying properly here - maybe have a look at the source on my index page www.eranthomson.com
thank you

Argh my code is not showing good either.
I'll send it to you by email (using the email address on your website)

Thanks Fleur, tried it and played around with other options - no luck, still getting that space. Driving me crazy.

I'm trying to get my twitter to have a little divider bar in between the updates and the links, like so: http://www.vulomedia.com/images/9702e... - and I'd also like to adjust the fonts like in the example so that the links look different.

What would I need to do?

for a divider line between links you can use this style:

a {border-bottom:1px solid black}

though you can change the color (where it says "black"). You can do other things to add spacing between the text and the divider line. Something like this:

a {border-bottom:1px solid black;padding-bottom:5px}

and you can increase the spacing by increasing the number next to "px".

As for adjusting the font style, you'll have to be more specific if you want code advice. I hope this helps!

Everything works the way I need it to, thanks!

I can't figure out how to put spacing in between each Twitter update. How do I do it, what code do I need to add?

I am trying to figure out if there is a way to set the width of my tweets to a specific, static, width? I have them in a table that in some browsers likes to stretch, which ruins my design (see: www.jen-and-steve.com. Display's correctly in Safari, baaad in IE, and so-so in Firefox)

Is there something I can do to restrict the width of my twitters to a certain width?

I can't get this to work:

li#twitter_update_list {list-style-type:square; padding-left:0px;margin-left:15px}

I put it in my <style>, but nothing happens..</style>

Hanna, it seems to me that you can style the ul tag, but not the li tag. You could use: ul#twitter_update_list.

I customized my badge with a background image. See alexome.com. You can add the background-image property directly to the twitter_div selector, or to another div inside twitter_div.

I can't seem to get my '1 day ago' portion to start on the left, it says in the centre. The actual update is lined out on the left...

Is there a way to change the text that says "What I'm doing" (or whatever it is) in the "just me" badge? I don't know ANYTHING about any sort of code, so I'll need super specific instructions...

I'm still looking for a way to remove the return between the "XXX is" and the actual twitter list.

Right now mine looks like this:

eran is:

going camping 20 days ago
going to vegas 20 days ago
disappointed 27 days ago

I want it to look like this:

eran is:
going camping 20 days ago
going to vegas 20 days ago
disappointed 27 days ago

Thanks to all the help here! :D I managed to customize my own twitter badge and im so glad! The mini flash badges don't show up on my mozilla firefox anymore and takes so long to load in my internet explorer. (yes, i use both to double check if its viewing correctly. :))

To see how it looks like, view it here, in my sidebar: http://sixthbane.blogspot.com

Here's the code I modified:
(change all the [ ] to < > if not the code will NEVER work.
If I didn't do that way, the code won't show up here.)

[center]
[style]
ul#twitter_update_list a {display:block;padding-bottom:6px;}
ul#twitter_update_list {list-style-type:none; padding-left: 40px; margin-left:-40px;color:pink;text-align:center; }
[/style]
[div style="background: #990000; padding:5px; text-align:center; margin-left:33px;margin-right:33px;"][font color="#cccccc"]YOUR TEXT HERE[/font][/div]
[div style="border: 1px solid #990000; border-top:1px; padding:10px; margin-left:33px;margin-right:33px; "]
[ul id="twitter_update_list"][/ul]
[script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"][/script]
[script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOUR URL HERE.json?callback=twitterCallback2&count=5"]
[/script][/div]
[/center]

Just change the YOUR TEXT HERE to whatever you wanna say
eg. Thinking bad thoughts / I am... / Im Up To No Good etc.

or

If you want to add an image, then simply replace the [font color="#cccccc"]YOUR TEXT HERE[/font]

with

[img src="http://YOUR IMAGE URL.jpg"]

*remember to change the [ ] to < >

Lastly, Change the YOUR URL HERE to your Twitter Username.

If the positioning of text is off-center, you can increase or decrease the number. eg. 20px

I want to remove the time stamp (x mins ago) but keep any links in the tweets. If I change the CSS to the following as suggested above then the time stamp goes but all tweek links also dont show.

ul#twitter_update_list a {display:block;padding-bottom:6px;}

How can I be selective with blocking only the time stamp?

Does anyone know how tot put some space between the tweets? My code is now something like this:

<style>
ul#twitter_update_list {font-size:11px; font-family:arial; color:#333333; list-style-type:none; padding-left:5px; margin-left:5px; padding-right:5px; margin-right:5px; padding-top:3px; margin-top:3px; padding-bottom:3px; margin-bottom:3px;}
ul#twitter_update_list a:link {text-decoration:none; color:#7175a6;}
</style>