How to edit the twitter widget


Posted on by Ryan Curtis

Editors Note: If you're struggling to understand my scottish accent, heres a written tutorial to help :)

In this tutorial we're going to talk about how you can edit the twitter widget with just a few lines of CSS. There is a few php scripts out their to embed the twitter feed but this tutorial focuses on using twitters standard widget.

Firstly let's go get the widget

Make your way over to http://www.twitter.com/about/resources/widgets and then click on 'my website' and then 'profile widget'. Customise your widget as close as your website colours are and once you've done that add the code to your website. Easy. So what if we don't want our avatar to appear, our user name and the twitter logo? Having a website is all about customisation so lets get to work and make this twitter widget look more like it belongs on your website.

So what do we have to do now?

Right, open up your css and all you have to do is add this css below:

.twitter-feed h3{display: none;}
.twitter-feed h4 a{display:none !important;}
img.twtr-profile-img {display:none !important;}
.twitter-feed span{display:none !important;}
.twitter-feed .twtr-ft img{display:none !important;}

Okay so we're not really suppose to use !important but in this case it is important. We're using this command to over-ride the twitter rules so that we can have a better looking menu more custom to our own website. The code is pretty self explanatory so i don't think i should go into much more detail but all we're doing is using "display:none" to make the headers and images not appear. Easy stuff! The reason i thought this may be a good article is because we are using it on Zulo and we were googling it ourselves but found no articles. If you goto Our Team page you'll see it in full working action.

Thanks for reading…

and i hope that this has helped some people

Share
Like what you've read? Share it!
  • Print
  • Facebook
  • Twitter
  • Google Bookmarks
  • Add to favorites
  • email
  • Google Buzz
  • LinkedIn
  • MySpace
  • PDF
  • Tumblr

20 Responses to How to edit the twitter widget

  1. james says:

    great video thanks.

    but when i paste the css into my css. Only the logo dissapears. Everything else is still there. You wouldnt know the problem would you?

    Thanks

    • Ryan Curtis says:

      Hi James, I think Twitter has changed some of it’s class names. If you inspect the HTML you should be able to see which classes/ids they are now using. Then change them in the code mentioned above in the post.

      Let me know how you get on
      Cheers

  2. James says:

    Hey

    Thanks for that. Found what i needed. Although i cant seem to find how to get rid of the dotted lines between tweets. I know you use them on your widget, so i werent sure whether you would know?

    Thanks

    • Ryan Curtis says:

      Hey James, well the dotted lines between the tweets are most likely… border-bottom: dotted 1px #000; Taking a wild guess, you could try border-bottom: none !important; but you’ll have to find the right class/ID to put that on. Let me know how you get on?

      Cheers!

    • Ryan Curtis says:

      Found it James! – It should be:

      .twtr-widget .twtr-tweet {
      border-bottom: none !important;}

      This is what our class name on our twitter widget is, hopefully it’s the same for you.

  3. James says:

    Thats great. Thanks. Much appreciated.

  4. Karen says:

    Hi Ryan – I liked your video but I have the same question as James. Unlike him, I don’t see in the html what is preventing the items from being suppressed. It may be buried in the js file?

  5. Jonas says:

    Hi there! Nice video, do you also know how to edit the fontsize when using a searchfeed widget. The code doesn’t say anything about a size, it’s probably generated from a external server. Do you perhaps have a same (CSS) code to add, to change that size or maybe fonts as well, cause I see the exact same listfeed widgets with different fontsizes on various pages. Thanks, hope you can help me out here :D Jonas.

  6. Pawn says:

    Your team’s efforts and time have been greatly appreicated Zulo!

    Sidebar: I’ve sucessfully removed the header and footer information leaving only the tweets using this code as of May 2011.

    .twtr-hd h3{display: none;}
    .twtr-hd h4 a{display:none !important;}
    img.twtr-profile-img {display:none !important;}
    .twtr-ft span{display:none !important;}
    .twtr-ft img{display:none !important;}

  7. Raptor says:

    Nice work, just what I needed. Only if everytime I try to edit the widget this way, actually everything (not only the things that I wanted to disappear) disappears. Strange. I am really not into coding so I am kinda lost :(

  8. ben says:

    Im trying to get the date to show, instead of “x days ago”..

    Would you know how to access that class? is seems to be buried in the JS..hmm

  9. Alex says:

    Thanks for posting, super helpful. Is there a way to make some parts of it transparent ?

    I tried

    .twtr-timeline {

    background-image:none !important;
    background-color:#F00 !important;

    }

  10. Mr Hell says:

    Hi Everyone, Thanx for ur inputs.
    I was editing the same. here are what I used for my web..

    .twtr-user{display: none !important;}
    .twtr-ft{display: none !important;}
    .twitter-feed h4 a{display:none !important;}
    .twtr-join-conv {display:none !important;}
    .twtr-widget h3 {display:none !important;}
    .twtr-widget h4 {display:none !important;}
    .twitter-feed span{display:none !important;}
    .twitter-feed .twtr-ft img{display:none !important;}
    img.twtr-profile-img {display:none !important;}
    .twtr-widget .twtr-tweet {
    border-bottom: none !important;}

  11. Derek Hill says:

    I feel retarted asking this, but I’m not on a Mac. And know very little about CSS. I want this in my website

    new TWTR.Widget({
    version: 2,
    type: ‘profile’,
    rpp: 3,
    interval: 30000,
    width: 210,
    height: 125,
    theme: {
    shell: {
    background: ‘#ffffff’,
    color: ‘#82cacc’
    },
    tweets: {
    background: ‘#ffffff’,
    color: ‘#6595bf’,
    links: ‘#a9e057′
    }
    },
    features: {
    scrollbar: false,
    loop: false,
    live: true,
    behavior: ‘all’
    }
    }).render().setUser(‘Ambassadorhill’).start();
     

    But without the header and footer!!! I’m using Dreamweaver of course, can someone please help me!? You guys are the only ones with this tutorial on Youtube! I’d appreciate it so much, thanks!

    • vinnie says:

      derek hill: put this in your CSS file:

      .twtr-ft{display: none !important;}
      .twtr-hd{display: none !important;}

      it wil stop showing the header and footer.
      do you know how to add css styles??

  12. vinnie says:

    derek hill: put this in your CSS file:

    .twtr-ft{display: none !important;}
    .twtr-hd{display: none !important;}

    it wil stop showing the header and footer.
    do you know how to add css styles??

  13. vinnie says:

    if you would like a totally stripped version (without sidelines, header, footer, background etc.) then email me via www. mijncreaties. com / contact

  14. Spongebob says:

    Hello :) Is there any way I can change the font and font size of the twitter widget? Also the widget seems to be a bit low on my sidebar so is there anything I can do to make it higher?
    Sorry, I feel kinda stupid for asking you.

  15. Shugmeister says:

    Spongebob, I’ve changed the size and font on my twitter widget using the CSS code below. Obviously the font-family and font-size parts are the ones you’re interested in.

    Sorry it’s late. Hope this helps.

    #twtr-widget-1 .twtr-bd
    {
    color: #000000 !important;
    font-weight: 900;
    font-family: helvetica;
    font-size: 1.25em;
    padding-left: 0px;
    }

    #twtr-widget-1 .twtr-timeline i a
    {
    color: #000000 !important;
    font-family: helvetica;
    font-weight: 900;
    font-size: 1.25em;
    padding-left: 0px;
    }

    #twtr-widget-1 .twtr-bd p
    {
    color: #5e5e5e !important;
    font-family: helvetica;
    font-weight: 900;
    font-size: 1.25em;
    padding-left: 0px;
    }

  16. Stefanie says:

    I see a lot of interesting posts on your blog.
    You have to spend a lot of time writing, i know how to save you a lot of time, there is a tool that creates unique, SEO
    friendly posts in couple of minutes, just type
    in google – k2 unlimited content

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Thanks for signing up!