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

  • Question
  • Updated 6 years ago
Archived

This conversation was archived and is no longer visible to community members.

Photo of

  • 1 Post
  • 0 Reply Likes
  • frustrated and clueless

Posted 8 years ago

  • 6
Photo of operaflute

operaflute

  • 2 Posts
  • 0 Reply Likes
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...
Photo of

  • 8 Posts
  • 0 Reply Likes
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
Photo of sixthbane

sixthbane

  • 3 Posts
  • 0 Reply Likes
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/blogge...]
[script type="text/javascript" src="http://twitter.com/statuses/user_time... 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
Photo of

  • 1 Post
  • 0 Reply Likes
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?
Photo of John Harmon

John Harmon

  • 1 Post
  • 0 Reply Likes
I was wondering the same thing, and I was wracking my brain trying to find the answer. And now I did.

If you add this code into the css for your twitter badge:


}
#twitter_div ul li span {

visibility: visible;
display:block;
}

#twitter_div ul li span a {
visibility: visible;

}

#twitter_div ul li a {
visibility: visible;

}


It blocks only the timestamp link and NOT any other links in the tweet.
Photo of kirsief

kirsief

  • 4 Posts
  • 2 Reply Likes
Not working for me .. : (
Photo of kirsief

kirsief

  • 4 Posts
  • 2 Reply Likes
Does anyone know how tot put some space between the tweets? My code is now something like this:

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;}




    Photo of Blair Wightman

    Blair Wightman

    • 0 Posts
    • 0 Reply Likes
    on your ul#twitter_update_list a:link add display:block; margin-bottom: (x)px;

    display:block - puts your link/time stamp on its own line below the post and the margin-bottom puts a margin below the link and pushes down the post below it. Just use whatever amount you want e.g. 10px
    Photo of Marjorie Castro

    Marjorie Castro

    • 0 Posts
    • 0 Reply Likes
    Kirsief: Yyou can target the li

    #twitter_update_list li{
    margin-bottom:5px;
    }

    ul#twitter_update_list a:link{
    display:block;

    }